feat: landing page concluida

fernandoleonid · Feb 27, 2024 · 0ceaddd · 0ceaddd
1 parent a810561
commit 0ceaddd
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 1 deletion.
diff --git a/07-ferrero-rocher/index.html b/07-ferrero-rocher/index.html
@@ -10,6 +10,20 @@
     <title>Ferrero Rocher</title>
 </head>
 <body>
-
+    <main>
+        <div class="container-left"></div>
+        <div class="container-center">
+            <div class="logo">
+                <img src="./img/logo.png" alt="logo ferrero rocher">
+            </div>
+            <div class="texto">
+                Ferrero Rocher oferece uma experiência de sabor incomparável de contraste de camadas: uma avelã inteira no meio, um delicioso recheio cremoso de avelã, um wafer crocante coberto com chocolate e pedacinhos de avelã.
+            </div>
+            <div class="action">
+                <a href="#">Saiba mais</a>
+            </div>
+        </div>
+        <div class="container-right">3</div>
+    </main>
 </body>
 </html>
diff --git a/07-ferrero-rocher/style.css b/07-ferrero-rocher/style.css
@@ -19,4 +19,72 @@ body  {
     background-position: center;
     background-size: 90%;
     background-color: var(--color-primary);
+}
+
+main{
+    height: 100%;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1.5fr 1fr;
+}
+
+.container-left{
+    background-image: url(./img/bombom.png);
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.container-center{
+    background-color: var(--color-secondary);
+    display: grid;
+    place-items: center;
+    font-family: var(--font-family);
+    padding-inline: 32px;
+}
+.texto{
+    font-size: 2rem;
+    text-align: center;
+    color: var(--color-text-primary);
+}
+
+.action a {
+    height: 72px;
+    width: 288px;
+    display: grid;
+    place-items: center;
+    background-color: var(--color-primary);
+    font-size: 2rem;
+    color: var(--color-text-secondary);
+    text-decoration: none;
+}
+
+.container-right{
+    background-image: url(./img/bombom-aberto.png);
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+
+@media (max-width: 768px)  {
+    main{
+        grid-template-columns: 1fr;
+    }
+    .container-left,
+    .container-right{
+        display: none;
+    }
+
+    .container-center{
+        background-image: url(./img/bombom.png);
+        background-repeat: no-repeat;
+        background-position: center;
+        background-blend-mode: soft-light;
+    }
+
+    .texto{
+        font-size: 1.5rem;
+    }
+    .action a {
+        width: 80vw;
+    }
 }