footer done

Author: alirezatayebinejad

design 3/index.html

@@ -175,8 +175,23 @@ <h3>Ticket booking</h3>
           </div>
         </div>
       </section>
-
-
     </main>
+
+    <footer>
+      <!-- contact-->
+      <div class="footer-contact">
+        <h2>CONTACT</h2>
+        <form action="">
+          <input type="email" placeholder="your email" />
+          <input type="text" placeholder="subject" />
+          <textarea name="" id="" cols="30" rows="7" placeholder="your message"></textarea>
+          <input type="submit" value="submit" />
+        </form>
+      </div>
+      <!-- copyright -->
+      <div class="downfooter">
+        <p>copyright © for vibracode.com 2022</p>
+      </div>
+    </footer>
   </body>
 </html>

design 3/styles.css

@@ -135,7 +135,7 @@ button {
 
 /* services */
 
-section .services-header{
+section .services-header {
   text-align: center;
   height: 100px;
   line-height: 100px;
@@ -160,7 +160,7 @@ section .services-header{
   border-radius: 5px;
   box-shadow: 0px 0px 5px rgb(223, 223, 223);
 }
-.services div:hover{
+.services div:hover {
   box-shadow: 0px 0px 10px rgb(212, 212, 212);
   transition: 0.3s;
 }
@@ -186,28 +186,82 @@ section .services-header{
 
 /* projects */
 
-section .projects-text{
+section .projects-text {
   height: 100px;
   line-height: 200px;
   text-align: center;
 }
-section .projects{
+section .projects {
   display: flex;
   justify-content: center;
   align-items: center;
   height: calc(100vh - 100px);
   color: rgb(73, 73, 73);
 }
-section .projects div{
+section .projects div {
   width: 300px;
   height: 500px;
   text-align: center;
   margin-left: 50px;
   padding: 50px 0;
 }
-section .projects img{
+section .projects img {
   width: 200px;
   height: 200px;
   border-radius: 50%;
   margin-bottom: 20px;
 }
+
+/* footer */
+
+footer {
+  width: 100%;
+  background-color: rgb(241, 241, 241);
+}
+.footer-contact {
+  text-align: center;
+  width: 40%;
+  margin: auto;
+  padding: 20px 40px;
+  
+  margin-bottom: 0;
+}
+.footer-contact input {
+  display: block;
+  width: 100%;
+  margin: 10px;
+  padding: 5px;
+  border: 0;
+}
+.footer-contact input[type="submit"] {
+  background-color: white;
+  color: black;
+  padding: 10px;
+  display: inline-block;
+  width: 50%;
+  border: 2px solid rgb(189, 189, 189);
+}
+.footer-contact input[type="submit"]:hover {
+  background-color: #d11414;
+  color: white;
+  border: 2px solid #d11414;
+  cursor: pointer;
+  transition: 0.3s;
+}
+.footer-contact textarea {
+  display: block;
+  width: 100%;
+  border: 0;
+  margin: 10px;
+}
+
+footer .downfooter{
+  width: 100%;
+  background-color: #d11414;
+  height: 50px;
+}
+footer .downfooter p{
+  color: white;
+  line-height: 50px;
+  text-align: center;
+}