Update

footer.css

@@ -0,0 +1,125 @@
+
+:root {
+    --primary-color: rgb(119, 13, 30);
+    --light-color: #FFF;
+    --dark-color: #181920;
+    --text-color: #8B8E94;
+    --black: #000;
+    --secondary-bg: #E5EAFF;
+    --footer-bg: #1D1D1D;
+}
+
+/* Footer styles */
+footer {
+    background-color: #333;
+    color: var(--text-color);
+    padding: 5rem 2rem;
+    margin: 0;
+    padding: 0;
+
+    border: 0;
+
+    vertical-align: baseline;
+
+    list-style: none;
+    box-sizing: border-box;
+}
+
+/* Footer container styles */
+.footer-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+/* Mobile styles for footer container */
+@media only screen and (max-width: 768px) {
+    .footer-container {
+        max-width: 100%;
+        flex-direction: column;
+    }
+}
+
+/* Footer title styles */
+.footer-container .footer-title {
+    color: #FFF;
+    font-weight: bold;
+    margin-bottom: 1rem;
+}
+
+/* Footer description and links container styles */
+.footer-container .footer-desc-container,
+.footer-container .footer-links-container {
+    width: 50%;
+}
+
+/* Mobile styles for footer description and links container */
+@media only screen and (max-width: 768px) {
+
+    .footer-container .footer-desc-container,
+    .footer-container .footer-links-container {
+        width: 100%;
+        margin-bottom: 2rem;
+        text-align: center;
+    }
+}
+
+/* Footer description container styles */
+.footer-container .footer-desc-container p {
+    width: 80%;
+    line-height: 1.3;
+}
+
+/* Mobile styles for footer description container */
+@media only screen and (max-width: 768px) {
+    .footer-container .footer-desc-container p {
+        width: 100%;
+    }
+}
+
+/* Footer links container styles */
+.footer-container .footer-links-container ul {
+    padding: 0 1rem;
+}
+
+/* Mobile styles for footer links container */
+@media only screen and (max-width: 768px) {
+    .footer-container .footer-links-container ul {
+        margin-bottom: 2rem;
+    }
+}
+
+/* Footer list item styles */
+.footer-container .footer-links-container li {
+    margin-bottom: .5rem;
+}
+
+/* Footer link styles */
+.footer-container .footer-links-container a {
+    color: var(--text-color);
+    transition: .5s;
+}
+
+/* Hover effect styles for footer links */
+.footer-container .footer-links-container a:hover {
+    color: #FFF;
+}
+
+/* Footer copyright container styles */
+.footer-container .footer-copy-right-container {
+    width: 100%;
+    margin-top: 3rem;
+}
+
+/* Mobile styles for footer copyright container */
+@media only screen and (max-width: 768px) {
+    .footer-container .footer-copy-right-container {
+        text-align: center;
+    }
+}
+
+/* Paragraph styles for footer copyright container */
+.footer-container .footer-copy-right-container p {
+    margin-bottom: 1rem;
+}

index.html

@@ -18,6 +18,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit.min.js"></script>
   <!-- CSS do projeto -->
   <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="footer.css">
   <link rel="stylesheet" href="normalize.css">
 </head>
 
@@ -26,7 +27,7 @@
   <header id="main-banner">
     <div class="nav-container">
       <a href="" class="brand">
-        <object data="img/Logo.png" class="fa fa-bars"> </object>Penido Gothic Wedding
+        <object data="img/logo2.png" class="fa fa-bars"> </object>Penido Gothic Wedding
       </a>
       <nav>
         <ul class="nav-container-navbar">
@@ -62,7 +63,7 @@ <h1>As mais memoráveis Cerimônias de Casamento</h1>
       <h2>O que fazemos</h2>
       <div class="services-card-container">
         <div class="services-card">
-          <object data="/img/taca.png" width="200" height="100"> </object>
+          <object data="/img/saude (1).png"> </object>
           <h3>Celebração</h3>
           <p>Se vocês estão buscando uma celebração cheia de personalidade, com toques góticos que refletem sua paixão,
             a
@@ -72,45 +73,44 @@ <h3>Celebração</h3>
             acervo.</p>
         </div>
         <div class="services-card">
-          <object data="img/ambiente2.png" width="200" height="100"> </object>
+          <object data="img/livro-de-convidados.png" > </object>
           <h3>Ambientes</h3>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis harum tempore eaque aliquid.
             Asperiores
             quisquam voluptas praesentium doloribus expedita ea non sunt, distinctio possimus, consequuntur laudantium
             dicta officiis dignissimos odit.</p>
         </div>
         <div class="services-card">
-          <object data="img/casal.png" width="200" height="100"> </object>
+          <object data="img/casamento.png" > </object>
           <h3>Trajaes</h3>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis harum tempore eaque aliquid.
             Asperiores
             quisquam voluptas praesentium doloribus expedita ea non sunt, distinctio possimus, consequuntur laudantium
             dicta officiis dignissimos odit.</p>
         </div>
         <div class="services-card">
-          <object data="img/decoracao.png" width="200" height="100"> </object>
+          <object data="img/bolo-de-casamento.png" > </object>
           <h3>Decoração Temática</h3>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis harum tempore eaque aliquid.
             Asperiores
             quisquam voluptas praesentium doloribus expedita ea non sunt, distinctio possimus, consequuntur laudantium
             dicta officiis dignissimos odit.</p>
         </div>
         <div class="services-card">
-          <object data="img/fotografia.png" width="200" height="100"> </object>
+          <object data="img/casamento-video.png" > </object>
           <h3>Registro Fotográfico</h3>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis harum tempore eaque aliquid.
             Asperiores
             quisquam voluptas praesentium doloribus expedita ea non sunt, distinctio possimus, consequuntur laudantium
             dicta officiis dignissimos odit.</p>
         </div>
         <div class="services-card">
-          <object data="img/aliancasvg.png" width="200" height="100"> </object>
+          <object data="img/diamante.png"></object>
           <h3>Detalhes</h3>
           <p>Os convites de casamento
             Os convites são a carta de apresentação do seu casamento e antecipam o estilo do grande dia. Clássicos,
             originais, rústicos ou vintage. Te oferecemos desenhos, textos, frases e muitas ideias para que sejam tão
             especiais como o seu casamento.</p>
-          <p>Lembrancinhas de casamento</p>
         </div>
       </div>
 
@@ -119,8 +119,7 @@ <h3>Detalhes</h3>
 
       <div class="containerbolo">
         <h2 class="text-center">Confeitaria</h2>
-        <hr>
-        <div class="gallery">
+               <div class="gallery">
           <div class="view overlay hm-black-light gallery-item">
             <img src="img/bolo1.jpg" alt="Placeholder Image" class="img-fluid">
             <div class="mask flex-center">
@@ -250,7 +249,17 @@ <h2>Decoração</h2>
         </ul>
       </div>
 
-      <a href="trajes.html" target="_blank" class="btn btn-primary btn-rounded">Locação de Trajes</a>
+
+    <div id="decoracao" class="container">
+        <h2>Locação de Trajes</h2>
+              <a href="trajes.html" target="_blank" class="btn">Clique aqui</a>
+
+
+
+
+
+      </div>
+
       <!---decoração-->
 
       <h2>Locação de Ambientes</h2>
@@ -389,7 +398,7 @@ <h3 class="uk-card-title">Headline</h3>
             </li>
         </div>
 
-  </main>
+
 
   <!-- Slider Navigation -->
   <div>