contato e footer

gabjoao · Oct 3, 2023 · f3a12a3 · f3a12a3
1 parent 12dd68c
commit f3a12a3
Show file tree

Hide file tree

Showing 2 changed files with 192 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -231,12 +231,48 @@ <h3>Cliente com pele madura</h3>
                     <img src="./media/estrela.png" alt="">
                 </div>
             </div>
+        </div>
+    </section>
+
+    <section id="pg4">
+        <h1>Siga @sereneskin</h1>
+        <div class="iconsContainer">
+            <img src="./media/instagram.png" alt="" id="instagram">
+            <img src="./media/github.png" alt="" id="github"> 
+            <img src="./media/linkedin.png" alt="" id="linkedin">
+            <img src="./media/gmail.png" alt="" id="gmail">
+        </div>
+        <div class="linha">
+            <svg xmlns="http://www.w3.org/2000/svg" width="1112" height="12" viewBox="0 0 1112 12" fill="none">
+                <path d="M0.223262 5.8916L5.99677 11.6651L11.7703 5.8916L5.99677 0.118099L0.223262 5.8916ZM1111.77 5.8916L1106 0.118099L1100.22 5.8916L1106 11.6651L1111.77 5.8916ZM5.99677 6.8916H1106V4.8916H5.99677V6.8916Z" fill="#25213F"/>
+              </svg>
+        </div>
+    </section>
 
+    <footer>
+        <h3>Problemas?
+            Entre em contato com a central de ajuda!
+           centraldeajuda@serene
+           (42) 555-2302</h3>
+
+           <div class="content1">
+            <div class="logo">
+                <h4>SERENE</h4>
+                <img src="./media/sol.png" alt="">
             </div>
 
-        </div>
+            <p>é uma marca fictícia. Todos os direitos reservados &copy; João Gabriel 2023.
+                Qualquer semelhança com uma marca ou produto real é pura coincidência.</p>
 
+           </div>
+
+           <p>Crédito às imagens: https://pixabay.com/pt/ <br>
+            Crédito aos ícones: https://icons8.com.br/icons
+            <br>
+            Todos os direitos reservados.</p>
+
+
+    </footer>
 
-    </section>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -738,4 +738,158 @@ header .menuIcon:hover, .icones img:hover{
 
 .card:hover{
     transform: scale(110%);
+}
+
+#pg4{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#pg4 h1{
+    width: 590px;
+    height: 62px;
+    color: #25213F;
+    text-align: center;
+    font-family: Jost;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 100%; /* 32px */
+    letter-spacing: 2.72px;
+    margin-bottom: 25px;
+}
+
+.iconsContainer{
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 750px;
+    height: 80px;
+    border-radius: 30px;
+    border: 3px solid #F2F4FF;
+    background: #25213F;
+    box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+#instagram{
+    width: 52px;
+    height: 52px;
+}
+
+#github{
+    width: 80px;
+    height: 80px;
+}
+
+#linkedin{
+    width: 59px;
+    height: 59px;
+
+}
+
+#gmail{
+    width: 64px;
+    height: 64px;
+
+}
+
+.linha{
+    margin-top: 100px;
+    width: 1100px;
+    height: 0px;
+    flex-shrink: 0;
+    stroke-width: 1px;
+    stroke: #25213F;
+    margin-bottom: 45px;
+
+}
+
+footer{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;  
+    width: 100%;
+    height: 616px;
+    background: linear-gradient(180deg, #363157 0%, #171529 100%);
+}
+
+footer h3{
+    display: flex;
+    width: 449px;
+    height: 140px;
+    flex-direction: column;
+    justify-content: center;
+    flex-shrink: 0;
+    color: #F2F4FF;
+    text-align: center;
+    font-family: Jost;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: 2.2px;
+}
+
+footer .logo{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+footer .logo h4{
+    width: 193px;
+    height: 37px;
+    flex-shrink: 0;
+    color: #9A8A37;
+    font-family: Jost;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 100%; /* 32px */
+    letter-spacing: 13.28px;
+}
+
+footer .logo img{
+    width: 32px;
+    height: 32px;
+}
+
+footer .content1{
+    display: flex;
+    flex-direction: column;
+}
+
+footer .content1 p{
+    display: flex;
+    width: 687px;
+    height: 166px;
+    flex-direction: column;
+    justify-content: center;
+    color: #F2F4FF;
+    text-align: center;
+    font-family: Jost;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: 1px;
+}
+
+footer p{
+    display: flex;
+    width: 380px;
+    height: 92px;
+    flex-direction: column;
+    justify-content: center;
+    color: #F2F4FF;
+    text-align: center;
+    font-family: Jost;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: 0.8px;
 }