add creative agency service and work sections

solygambas · solygambas · commit be5abdbd2991 · 2021-03-19T15:25:57.000+01:00
diff --git a/79-creative agency website/index.html b/79-creative agency website/index.html
@@ -1,3 +1,6 @@
+<!-- Based on Creative Agency Website From Scratch by Brad Traversy (2021)
+see: https://www.youtube.com/watch?v=lvYnfMOUOJY -->
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -65,19 +68,19 @@
       />
       <div class="home-content">
         <h2>
-          We help to achieve <br />
-          your goals.
+          We help <span class="highlight">you</span> to achieve <br />
+          <span class="highlight">your goals</span>
         </h2>
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo itaque
           nam saepe vero voluptatem vel fuga a eaque earum alias ipsam
           aspernatur culpa maxime laboriosam, impedit quae officiis consectetur
         </p>
-        <a href="#contact" class="btn">Get Started</a>
+        <a href="#services" class="btn">Get Started</a>
       </div>
     </section>
     <!-- services -->
-    <!-- <section id="services">
+    <section id="services">
       <div class="title">
         <h2>Services that we can help you with</h2>
         <p>
@@ -98,8 +101,10 @@ <h2>Services that we can help you with</h2>
             />
           </div>
           <h3>Design</h3>
-          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum omnis
-          nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
+          <p>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
+            omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
+          </p>
         </div>
         <div class="service">
           <div class="icon">
@@ -109,8 +114,10 @@ <h3>Design</h3>
             />
           </div>
           <h3>Development</h3>
-          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum omnis
-          nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
+          <p>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
+            omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
+          </p>
         </div>
         <div class="service">
           <div class="icon">
@@ -120,8 +127,10 @@ <h3>Development</h3>
             />
           </div>
           <h3>SEO</h3>
-          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum omnis
-          nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
+          <p>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
+            omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
+          </p>
         </div>
         <div class="service">
           <div class="icon">
@@ -131,8 +140,10 @@ <h3>SEO</h3>
             />
           </div>
           <h3>Marketing</h3>
-          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum omnis
-          nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
+          <p>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
+            omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
+          </p>
         </div>
         <div class="service">
           <div class="icon">
@@ -142,8 +153,10 @@ <h3>Marketing</h3>
             />
           </div>
           <h3>App Development</h3>
-          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum omnis
-          nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
+          <p>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
+            omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
+          </p>
         </div>
         <div class="service">
           <div class="icon">
@@ -153,12 +166,14 @@ <h3>App Development</h3>
             />
           </div>
           <h3>Error Fixing</h3>
-          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum omnis
-          nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
+          <p>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
+            omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
+          </p>
         </div>
       </div>
     </section>
-   
+    <!-- work -->
     <section id="work">
       <div class="title">
         <h1>Some of our finest work</h1>
@@ -171,7 +186,6 @@ <h1>Some of our finest work</h1>
           exercitationem qui quidem nam.
         </p>
       </div>
-
       <div class="portfolio">
         <div class="item">
           <img
@@ -319,7 +333,8 @@ <h1>Some of our finest work</h1>
         </div>
       </div>
     </section>
-    
+    <!-- contact -->
+    <!--
     <section id="contact">
       <div class="title">
         <h2>Contact us</h2>
diff --git a/79-creative agency website/script.js b/79-creative agency website/script.js
@@ -5,3 +5,8 @@ toggleButton.addEventListener("click", () => {
   toggleButton.classList.toggle("active");
   navigation.classList.toggle("active");
 });
+
+navigation.addEventListener("click", () => {
+  toggleButton.classList.toggle("active");
+  navigation.classList.toggle("active");
+});
diff --git a/79-creative agency website/style.css b/79-creative agency website/style.css
@@ -1,8 +1,10 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;500;700&display=swap");
 
 :root {
   --main-color: #f60f20;
+  --highlight-color: #c4a2fc;
   --text-color: #111;
+  --alternate-text-color: #1b206e;
 }
 
 * {
@@ -13,7 +15,7 @@
 
 html,
 body {
-  font-family: "Poppins", sans-serif;
+  font-family: "Rubik", sans-serif;
   color: var(--text-color);
 }
 
@@ -22,6 +24,7 @@ body {
   display: inline-block;
   background-color: var(--main-color);
   color: #fff;
+  font-size: 1.1rem;
   text-decoration: none;
   padding: 10px 30px;
   margin: 20px 0;
@@ -40,7 +43,7 @@ body {
 }
 
 .logo h1 {
-  font-size: 1.5rem;
+  font-size: 1.6rem;
   font-weight: 700;
 }
 
@@ -93,10 +96,11 @@ body {
 .navigation ul li {
   position: relative;
   text-align: center;
+  padding-bottom: 5px;
 }
 
 .navigation ul li a {
-  font-size: 1.5rem;
+  font-size: 2rem;
   color: var(--text-color);
   text-decoration: none;
   font-weight: 300;
@@ -130,32 +134,143 @@ body {
 /* SECTIONS */
 section {
   display: flex;
-  height: 100vh;
+  flex-direction: column;
+  min-height: 100vh;
   align-items: center;
   padding: 100px 40px;
+  margin-top: 60px;
 }
 
 h2 {
-  font-size: 1.825rem;
+  font-size: 2rem;
   font-weight: 500;
 }
 
 p {
   margin: 20px 0 10px;
-  font-size: 1.1rem;
+  font-size: 1.2rem;
+  line-height: 1.5;
+  font-weight: 300;
+}
+
+/* HOME SECTION */
+section.home {
+  flex-direction: row;
+  margin-top: 0;
 }
 
-/* Home Section */
 .home-content {
   position: relative;
   z-index: 10;
   max-width: 600px;
 }
 
+/* Reference: https://stackoverflow.com/questions/43683187/how-can-i-create-custom-underline-or-highlight-for-text-in-html-or-css */
+.highlight {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0) 50%,
+    var(--highlight-color) 50%
+  );
+  padding: 0 0.25rem;
+}
+
 .home-img {
   display: none;
 }
 
+/* SERVICES */
+.services {
+  margin-top: 40px;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 40px;
+  text-align: center;
+}
+
+.services .service .icon .img {
+  max-width: 100px;
+}
+
+.services .service {
+  padding: 30px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.services .service h3 {
+  font-size: 1.6rem;
+  font-weight: 500;
+  margin-top: 20px;
+  color: var(--alternate-text-color);
+}
+
+.services .service p {
+  line-height: normal;
+  font-size: 1.1rem;
+  margin: 10px 0;
+}
+
+/* WORK */
+.portfolio {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 20px;
+}
+
+.portfolio .item {
+  position: relative;
+  width: 300px;
+  height: 300px;
+  margin: 5px;
+}
+
+.portfolio .item img {
+  width: 100%;
+  height: 100%;
+}
+
+.portfolio .item .action {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.portfolio .item .action a {
+  display: inline-block;
+  color: #fff;
+  text-decoration: none;
+  border: 1px solid #fff;
+  padding: 5px 15px;
+}
+
+.portfolio .item .action:hover {
+  opacity: 1;
+}
+
+/* MEDIA QUERIES */
+@media (min-width: 768px) {
+  .services {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .services .service {
+    box-shadow: none;
+  }
+
+  .services .service:hover {
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  }
+}
+
 @media (min-width: 1068px) {
   .home-img {
     display: block;
@@ -171,14 +286,18 @@ p {
   }
 
   .logo h1 {
-    font-size: 2rem;
+    font-size: 2.1rem;
   }
 
   .navigation ul li a {
-    font-size: 2.2rem;
+    font-size: 2.3rem;
   }
 
   section {
     padding: 100px;
   }
+
+  .services {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
