add creative agency website

Author: solygambas

79-creative agency website/index.html

@@ -334,7 +334,6 @@ <h1>Some of our finest work</h1>
       </div>
     </section>
     <!-- contact -->
-    <!--
     <section id="contact">
       <div class="title">
         <h2>Contact us</h2>
@@ -396,7 +395,6 @@ <h4>Address</h4>
             <div class="details">
               <h4>Email</h4>
               <a href="mailto:anyone@example.com">anyone@example.com</a>
-              <a href="mailto:anyone@example.com">anyone@example.com</a>
             </div>
           </div>
           <div class="info-box">
@@ -408,12 +406,11 @@ <h4>Email</h4>
             <div class="details">
               <h4>Call</h4>
               <a href="tel:+19785555555">+1 978 555 5555</a>
-              <a href="tel:+19784444444">+1 978 555 4444</a>
             </div>
           </div>
         </div>
       </div>
-    </section> -->
+    </section>
     <script src="script.js"></script>
   </body>
 </html>

79-creative agency website/style.css

@@ -2,9 +2,9 @@
 
 :root {
   --main-color: #f60f20;
+  --secondary-color: #1b206e;
   --highlight-color: #c4a2fc;
   --text-color: #111;
-  --alternate-text-color: #1b206e;
 }
 
 * {
@@ -201,7 +201,7 @@ section.home {
   font-size: 1.6rem;
   font-weight: 500;
   margin-top: 20px;
-  color: var(--alternate-text-color);
+  color: var(--secondary-color);
 }
 
 .services .service p {
@@ -256,6 +256,98 @@ section.home {
   opacity: 1;
 }
 
+/* CONTACT */
+.contact {
+  position: relative;
+  width: 100%;
+  margin-top: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.contact-form {
+  position: relative;
+  background-color: #f9f9f9;
+  width: 100%;
+  padding: 30px 30px 20px;
+}
+
+.contact-form form {
+  width: 100%;
+}
+
+.contact-form .row {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.contact-form .input50,
+.contact-form .input100 {
+  width: 100%;
+  margin: 0;
+}
+
+.contact-form .row input,
+.contact-form .row textarea {
+  position: relative;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  color: #111;
+  background: transparent;
+  width: 100%;
+  padding: 10px;
+  outline: none;
+  font-size: 1rem;
+  font-family: inherit;
+  font-weight: 300;
+  margin: 10px 0;
+  resize: none;
+}
+
+.contact-form .row textarea {
+  height: 150px;
+}
+
+.contact-form .row input[type="submit"] {
+  background-color: var(--secondary-color);
+  color: #fff;
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  font-weight: 300;
+  border: 0;
+  cursor: pointer;
+}
+
+.contact-info {
+  width: 100%;
+  margin-top: 20px;
+  background: #f9f9f9;
+  padding: 30px 30px 20px;
+}
+
+.contact-info .info-box {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 40px;
+}
+
+.contact-info .info-box .contact-icon {
+  width: 20px;
+  margin-right: 40px;
+}
+
+.contact-info .info-box .details h4 {
+  color: var(--secondary-color);
+}
+
+.contact-info .info-box .details p,
+.contact-info .info-box .details a {
+  color: var(--text-color);
+}
+
 /* MEDIA QUERIES */
 @media (min-width: 768px) {
   .services {
@@ -300,4 +392,32 @@ section.home {
   .services {
     grid-template-columns: repeat(3, 1fr);
   }
+
+  .contact {
+    flex-direction: row;
+  }
+
+  .contact-form {
+    width: calc(100% - 400px);
+    padding: 60px 40px 20px;
+  }
+
+  .contact-form .row {
+    flex-direction: row;
+  }
+
+  .contact-form .input50 {
+    width: 50%;
+    margin: 0 10px;
+  }
+
+  .contact-form .input100 {
+    margin: 0 10px;
+  }
+
+  .contact-info {
+    width: 350px;
+    margin-top: 0;
+    padding: 60px 40px 20px;
+  }
 }

README.md

@@ -84,7 +84,7 @@
 | 76  | [New Year Countdown](https://github.com/solygambas/html-css-fifty-projects/tree/master/76-new%20year%20countdown)                     | [Live Demo](https://codepen.io/solygambas/full/rNWEaBb)  |
 | 77  | [Sortable List](https://github.com/solygambas/html-css-fifty-projects/tree/master/77-sortable%20list)                                 | [Live Demo](https://codepen.io/solygambas/full/qBqzEdO)  |
 | 78  | [Speak Number Guessing Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/78-speak%20number%20guessing%20game)   | [Live Demo](https://codepen.io/solygambas/full/jOVjEre)  |
-| 79  | [Creative Agency Website](https://github.com/solygambas/html-css-fifty-projects/tree/master/79-creative%20agency%20website)           | [Live Demo](#)                                           |
+| 79  | [Creative Agency Website](https://github.com/solygambas/html-css-fifty-projects/tree/master/79-creative%20agency%20website)           | [Live Demo](https://codepen.io/solygambas/full/LYbKoRj)  |
 
 This repository is mostly based on 2 courses by Brad Traversy (2020):