ooptimo · vssusin · Nov 14, 2024
diff --git a/css/main.css b/css/main.css
diff --git a/css/main.css.map b/css/main.css.map
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="ca">
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -12,8 +12,89 @@
 	<link rel="apple-touch-icon" href="icon.png">
 
 	<meta name="theme-color" content="#202F66">
+	<!-- Bootstrap CSS -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
 </head>
 <body>
-	<p>Job Application HTML Tests — ooptimo</p>
+<!-- Header -->
+<header class="header header-container container">
+	<div class="row">
+		<div class="col logo-container">
+			<div class="logo">ooptimo.</div>
+		</div>
+	</div>
+</header>
+
+<!-- Main Section -->
+<section class="container">
+	<div class="row">
+		<div class="col align-items-center"><div class="main-text-1">Creiem en una <span class="highlight">era digital</span>, on el consum tradicional i l’online es fusionen</div></div>
+	</div>
+	<div class="row">
+		<div class="col justify-content-center"><div class="main-text-2 mx-auto">Connectant les companyies amb els seus clients com mai abans ho havien fet.</div></div>
+	</div>
+	<div class="row">
+		<div class="col justify-content-center"><button class="cta-button">Contactar</button></div>
+	</div>
+	</div>
+</section>
+
+<div class="fixed-bottom m-0">
+
+	<!-- Footer -->
+	<section class="footer m-0">
+
+		<div class="row">
+			<div class="col">
+				<div class="footer-logo">ooptimo.</div>
+				<div class="footer-copy">© 2024 Ooptimo Consulting. Tots els drets reservats.</div>
+			</div>
+			<div class="col">
+				<div class="contact">
+					<h4>Contacte</h4>
+					<p>Carrer Sant Elies nº 29-35<br>08006 Barcelona<br>Espanya</p>
+				</div>
+			</div>
+
+			<div class="col footer-links">
+				<h4>Legal</h4>
+				<ul class="list-group">
+					<li><a href="#">Política de Privacitat</a></li>
+					<li><a href="#">Política de Cookies</a></li>
+					<li><a href="#">Avís Legal</a></li>
+				</ul>
+			</div>
+
+			<div class="col">
+				<div class="social-icons">
+					<h4>Segueix-nos</h4>
+					<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
+						<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"></path>
+					</svg></a>
+					<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
+						<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/>
+					</svg></a>
+					<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
+						<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/>
+					</svg></a>
+
+				</div>
+			</div>
+		</div>
+
+	</section>
+
+	<section class="container footer-bottom">
+
+		<div class="row">
+			<div class="col">
+				<div class="footer-logo">ooptimo.</div>
+			</div>
+		</div>
+
+	</section>
+</div>
+
 </body>
 </html>
diff --git a/src/scss/_footer.scss b/src/scss/_footer.scss
@@ -0,0 +1,53 @@
+/* Footer */
+.footer {
+  background-color: #ffffff;
+  padding: 2em 10em 2em 10em;
+  color: #202f66;
+  margin-top: 2em;
+  max-width: none;
+  font-size: 0.75em;
+}
+
+.footer-bottom {
+  color: #ffffff;
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.footer-logo {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.footer-links h4 {
+  margin-bottom: 10px;
+}
+
+.footer-links p,
+.footer-links ul {
+  font-size: 0.9rem;
+}
+
+.footer-links ul {
+  list-style: none;
+}
+
+.footer-links a {
+  color: $colorlight;
+  text-decoration: underline;
+}
+
+.footer-links a:hover {
+  text-decoration: underline;
+}
+
+.social-icons a {
+  color: $colorlight;
+  padding: 0.25em;
+}
+
+.footer-bottom {
+  text-align: center;
+  margin-top: 20px;
+  font-size: 0.8rem;
+}
diff --git a/src/scss/_header.scss b/src/scss/_header.scss
@@ -0,0 +1,32 @@
+/* Header */
+.header {
+  padding: 20px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.header-container {
+  display: flex;
+  justify-content: center; /* Centra horizontalment */
+  align-items: center;    /* Centra verticalment */
+  width: 100%;
+  height: 100px;
+}
+
+.logo {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #202f66;
+  margin-right: 15em;
+}
+
+.logo-container {
+  border-radius: 90px;
+  border: 1px solid transparent;
+
+  background-color: $colordark;
+  color: #202f66;
+  padding: 1em 20em 1em 1em;
+  margin: 1em 0;
+}
diff --git a/src/scss/_maintext.scss b/src/scss/_maintext.scss
@@ -0,0 +1,71 @@
+.highlight {
+  font-size: 3.5rem;
+  color: $colordark;
+  font-family: 'Arial', sans-serif;
+  font-weight: bold;
+}
+
+.cta-button {
+  display: block;
+  margin: auto;
+  margin-top: 1em;
+  background-color: $colordark;
+  color: $colorlight;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+.cta-button:hover {
+  background-color: #ffffff;
+  color: $colordark;
+}
+
+.main-text-1 {
+  /* Creiem en una era digital, on el consum tradicional i l’online es fusionen */
+
+  margin-top: 2em;
+
+  font-family: 'Georgia';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 50px;
+  line-height: 107%;
+  text-align: center;
+
+  /* Color 3 */
+  color: #FFFFFF;
+
+  /* Inside auto layout */
+  flex: none;
+  order: 0;
+  align-self: stretch;
+  flex-grow: 0;
+}
+
+.main-text-2 {
+
+  /* Connectant les companyies amb els seus clients com mai abans ho havien fet. */
+
+  margin-top: 1em;
+  max-width: 20em;
+
+  /* H2_Subtítol */
+  font-family: 'Arial';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 22px;
+  line-height: 29px;
+  text-align: center;
+
+  /* Color 3 */
+  color: #FFFFFF;
+
+  /* Inside auto layout */
+  flex: none;
+  order: 1;
+  flex-grow: 0;
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -0,0 +1,18 @@
+html {
+  height: 100%;
+}
+body {
+  font-family: 'Arial', sans-serif;
+  height: 100%;
+  margin: 0;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background: linear-gradient(#9CC4E4, #0A0E46);
+}
+
+$colordark: #66D9C2;
+$colorlight: #0A0E46;
+
+@import "header";
+@import "maintext";
+@import "footer";