3-styles.css

/* SUMMARY 
 1. GLOBAL 
 2. LAYOUT 
 3. SECTION 
 4. CARD 
 */ 
 /*** 1. GLOBAL ***/ 
  
 /* Reset / Normalize 
   ============================= */ 
  
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} 
  
  
 /* Variables 
   ============================= */ 
   :root { 
     --font-family-base: 'Source-sans-Pro-Regular'; 
     --font-family-title: 'Source-sans-Pro-Semibold'; 
     --font-family-bold: 'Source-sans-Pro-Bold'; 
  
     --font-size-x-small: 1rem; 
     --font-size-small: 1.2rem; 
     --font-size-medium: 1.6rem; 
     --font-size-large: 1.8rem; 
     --font-size-x-large: 2.3rem; 
     --font-size-xx-large: 3.2rem; 
     --font-weight-thin: 100; 
     --font-weight-regular: 300; 
     --font-weight-bold: 600; 
  
     --white: white; 
     --primary: #FF6565; 
     --image-gradiant: radial-gradient(99% 99% at 50% 0%, rgba(41, 48, 61, 0.0001) 0%, #07162900 70%); 
     --linear-gradient: linear-gradient(rgba(0, 0, 0, .1), rgba(7, 22, 41, 0.211) 0%, #07162900 30%); 
 }  
  
   @font-face { 
     font-family: Source-sans-Pro-Bold; 
     src: url("./fonts/SourceSansPro-Bold.otf"); 
     font-weight: var(--font-weight-bold); 
   } 
   @font-face { 
     font-family: Source-sans-Pro-Regular; 
     src: url("./fonts/SourceSansPro-Regular.otf"); 
     font-weight: var(--font-weight-regular); 
   } 
   @font-face { 
     font-family: Source-sans-Pro-Semibold; 
     src: url("./fonts/SourceSansPro-Semibold.otf"); 
     font-weight: var(--font-weight-bold); 
   } 
  
 @font-face { 
   font-family: "holberton_school-icon"; 
   src: url("fonts/holberton_school-icon.eot?sq4eq4"); 
   src: url("fonts/holberton_school-icon.eot?sq4eq4#iefix") format("embedded-opentype"),  
        url("fonts/holberton_school-icon.ttf?sq4eq4") format("truetype"), 
        url("fonts/holberton_school-icon.woff?sq4eq4") format("woff"), 
        url("fonts/holberton_school-icon.svg?sq4eq4#holberton_school-icon") format("svg"); 
   font-weight: normal; 
   font-style: normal; 
   font-display: block;; 
 } 
  
 [class^="holberton_school-icon-"], 
 [class*=" holberton_school-icon-"] { 
         font-family: 'holberton_school-icon' !important; 
         font-style: normal; 
         font-weight: normal; 
         font-variant: normal; 
         text-transform: none; 
         line-height: 1; 
         -webkit-font-smoothing: antialiased; 
 } 
  
 .holberton_school-icon-ic_hearing:before { 
         content: "\e909"; 
 } 
  
 .holberton_school-icon-ic_music:before { 
         content: "\e90d"; 
 } 
  
 .holberton_school-icon-ic_sound:before { 
         content: "\e90e"; 
 } 
  
 .holberton_school-icon-ic_video:before { 
         content: "\e910"; 
 } 
 .holberton_school-icon-ic_twitter:before { 
         content: "\e90f"; 
 } 
 .holberton_school-icon-ic_facebook:before { 
         content: "\e908"; 
 } 
 .holberton_school-icon-ic_instagram:before { 
         content: "\e90a"; 
 } 
  
 .icon { 
   color: var(--primary); 
   font-size: 6rem; 
 } 
  
 *, *:after, *:before { 
   box-sizing: border-box; 
   margin: 0; 
   padding: 0; 
 } 
 html { 
   scroll-behavior: smooth; 
 } 
  
 body { 
   width: 100%; 
   height: 100%; 
 } 
  
 /* WRAPPER */ 
  
 .wrapper { 
   max-inline-size: 1000px; 
   inline-size: 400px; 
   margin: 0 auto; 
 } 
  
 /* NAVBAR */ 
  
 .header { 
   min-block-size: 100px; 
   margin-block-end: 225px; 
 } 
 .logo { 
   width: 160px; 
   height: auto; 
 } 
 .nav-list { 
   display: none; 
   list-style: none; 
  
 } 
 .nav-item { 
   letter-spacing: 0; 
   min-height: 15px; 
   min-width: 80px; 
   margin: 0 5px; 
   inline-size: 75px; 
   margin:25px auto; 
 } 
 .nav-item a { 
   color: var(--white); 
   text-decoration: none; 
   text-transform:lowercase; 
   font-family: var(--font-family-base); 
 } 
 .nav-item a:hover { 
   color: var(--primary); 
   transition: ease-out 0.2s; 
 } 
 .header_container { 
   padding-top: 30px; 
 } 
 .header_container:first-child { 
   text-align-last: start; 
 } 
 .nav-icon { 
   margin-top: 5px; 
   margin-left: 10px; 
   inline-size: 95px; 
   display: inline-block; 
   vertical-align: top; 
   text-align: start; 
 } 
 .bar-icon { 
   inline-size: 13px; 
   position: relative; 
 } 
 .header_container input { 
   visibility: hidden; 
   position: absolute; 
 } 
 .header_container input:checked + .nav-icon .bar-icon { 
   background-color: unset; 
 } 
 .header_container input:checked ~ .nav-list { 
   display: block; 
 } 
 .bar-icon::after { 
   inline-size: 18px; 
   inset-block-start: 4px; 
 } 
 .bar-icon::before { 
   inline-size: 20px; 
   inset-block-end: 4px; 
 } 
 /* Screen will display "X" when navbar is clicked */ 
  
 .header_container input:checked + .nav-icon .bar-icon::after { 
   transform: rotate(-45deg); 
   inset-block-start: 0; 
   inline-size: 20px; 
 } 
 .header_container input:checked + .nav-icon .bar-icon::before { 
   transform: rotate(45deg); 
   inset-block-end: 0; 
 } 
 /* Animation/positions for icon */ 
  
 .bar-icon, .bar-icon::after, .bar-icon::before { 
   block-size: 2px; 
   display: inline-block; 
   border-radius: 1px; 
   background-color: var(--white); 
 } 
 .bar-icon::after, .bar-icon::before { 
   inset-inline-start: 0; 
   content: ""; 
   position: absolute; 
   transform: rotate(0); 
   transition: ease-out 0.3s; 
 } 
  
 .hero { 
  background-image: var(--image-gradiant), url("./images/headphones_hero_1.jpg"); 
  background-size: 1920px 1080px; 
  background-repeat: no-repeat; 
  background-position: -575px -100px; 
  max-block-size: 920px; 
  min-block-size: 840px; 
  margin: auto; 
  padding-bottom: 20px; 
  color: var(--white); 
  text-align: center; 
} 
.hero-1 { 
  font-family: var(--font-family-title); 
  font-size: var(--font-size-x-large); 
  padding-top: 81px;
} 
.hero-2 { 
  font-family: var(--font-family-base); 
  font-size: var(--font-size-small); 
  font-weight: var(--font-weight-regular); 
  margin: 20px auto; 
} 
.hero-3 { 
  margin-block-start: 65px; 
  font-family: var(--font-family-base); 
  font-size: var(--font-size-x-small); 
  font-weight: var(--font-weight-thin); 
  line-height: 30px; 
} 
 
 /* BUTTON */ 
  
 .btn { 
  border: 1px #FF6565 solid; 
  border-radius: 25px; 
  font-family: var(--font-family-base); 
  letter-spacing: .5px; 
  color: var(--white); 
  block-size: 40px; 
  inline-size: 160px; 
  text-transform: uppercase; 
  font-size: 12px;
} 
  
 .btn-color { 
   background-color: var(--primary); 
 } 
 .btn-shadow { 
   box-shadow: 3px 15px 30px rgba(0, 0, 0, 0.74); 
 } 
  
 /* WHAT WE DO */ 
  
 .tasks { 
   max-block-size: 1920px; 
   max-inline-size: 100%; 
   text-align: center; 
 } 
 .tasks_container { 
   margin: 30px auto; 
 } 
 .tasks-title { 
   font-family: var(--font-family-bold); 
   font-size: var(--font-size-medium); 
   margin: 60px auto; 
   margin-block-end: 40px; 
 } 
  
 .tasks-detail { 
   max-inline-size: 575px; 
   margin: auto; 
   line-height: 25px; 
   font-family: var(--font-family-base); 
 } 
 .tasks-column { 
   margin-block-end: 100px; 
   margin-top: 30px; 
   margin-inline: auto; 
   max-inline-size: 200px; 
 } 
 .column-title { 
   margin: 5px auto; 
   font-family: var(--font-family-title); 
 } 
 .column-detail { 
   font-family: var(--font-family-base); 
   font-weight: var(--font-weight-thin); 
   line-height: 25px; 
   max-inline-size: 200px; 
 } 
  
 /* OUR RESULTS */ 
  
 .results { 
   background-image: var(--image-gradiant), url("./images/headphones_hero_2.jpg"); 
   background-repeat: no-repeat; 
   background-size: cover; 
   background-position: 50%; 
   text-align: center; 
   color: var(--white); 
   padding-top: 60px; 
   padding-bottom: 60px; 
  
 } 
 .results-title { 
   font-family: var(--font-family-title); 
   font-size: var(--font-size-large); 
   margin-block-end: 50px; 
 } 
 .results-detail { 
   max-inline-size: 575px; 
   margin: 20px auto; 
   line-height: 25px; 
   font-family: var(--font-family-base); 
 } 
 .result-column { 
   block-size: 220px; 
   inline-size: 220px; 
   margin-block-start: auto; 
   margin: auto; 
 } 
 .column-pentagone { 
   margin: auto; 
   padding: auto; 
   width: 200px; 
   height: 200px; 
 } 
 .result-column .column-pentagone { 
   background-image: url(./images/pentagone.png); 
   background-repeat: no-repeat; 
   background-size: 95%; 
   background-position: 50%; 
   padding-block-start: 60px; 
 } 
  
 .column-pentagone span { 
   font-family: var(--font-family-bold); 
   font-size: var(--font-size-xx-large); 
   padding-top: 250px; 
   width: 150px; 
   height: 150px; 
   margin: auto; 
   font-family: var(--font-family-bold); 
 } 
  
 .column-pentagone p { 
   font-family: var(--font-family-base); 
   margin: 10px auto; 
 } 
  
 /* CONTACT US */ 
  
 .wrapper-contact { 
   margin: 40px auto; 
 } 
 .contact { 
   block-size: 335px; 
   inline-size: 375px; 
   margin: auto; 
 } 
 .contact-title { 
   font-family: var(--font-family-bold); 
   margin: 20px auto; 
   color: #071629; 
 } 
  
 .contact-form { 
   text-align: center; 
   block-size: 335px; 
   inline-size: 375px; 
   margin: auto; 
 } 
 .contact-label { 
   position: relative; 
 } 
 .contact-label { 
   display: block; 
   font-family: var(--font-family-base); 
   text-align: start; 
 } 
 .contact-label input { 
   display: block; 
   border: none; 
   inline-size: 100%; 
   color:#071629; 
   border-bottom: 1.4px solid rgba(128, 128, 128, 0.274); 
   height: 40px; 
   margin: 20px 0; 
 }  
  
 /* Media Queries for Responsive designs =========================*/ 
 /* MOBILE */ 
  
 @media screen and (max-width: 480px){ 
   .wrapper { 
     inline-size: 400px; 
   } 
   .hero { 
     background-repeat: no-repeat; 
     background-position: -600px -40px; 
   } 
   .hero-1 { 
     inline-size: 375px; 
     font-size: var(--font-size-medium); 
     margin: 5px auto; 
   } 
   .hero-2 { 
     inline-size: 400px; 
     font-size: var(--font-size-x-small); 
     margin: 10px auto; 
   } 
   .btn { 
     margin: 20px auto; 
   } 
   .hero-3 { 
     inline-size: 340px; 
     margin: 20px auto; 
     text-align: justify; 
   } 
   .tasks { 
     text-align: center; 
     margin: 20px auto; 
   } 
   .tasks-column { 
     margin: 40px auto; 
   } 
   .column-detail { 
     font-family: var(--font-family-base); 
     inline-size: 340px; 
     margin-inline: auto; 
   } 
   .tasks-detail { 
     inline-size: 340px; 
   } 
   .results { 
     background-color: unset; 
     background-size: cover; 
     padding: auto; 
     margin: 5px auto; 
   } 
   .results-detail { 
     font-family: var(--font-family-base); 
     inline-size: 340px; 
     margin: 20px auto; 
   } 
   .contact { 
     block-size: 360px; 
     margin: auto; 
   } 
   .contact-form { 
     margin: auto; 
   } 
 } 
  
 /* TABLET */ 
  
 @media screen and (min-width: 768px) { 
   .wrapper { 
     inline-size: 600px; 
   } 
   .header_container { 
     display: flex; 
     align-items: center; 
     justify-content: space-between; 
     padding-block-start: 20px; 
   } 
   .nav-list { 
     display: inline-flex; 
     justify-content: space-between; 
     inline-size: 275px; 
   } 
   .logo { 
     flex-basis: 80%; 
     } 
   .nav-icon { 
     display: none; 
   } 
   .hero { 
     background-repeat: no-repeat; 
     background-position: center 0; 
   } 
   .hero-1 { 
     margin: auto; 
   } 
   .hero-2 { 
     margin: 10px auto; 
     inline-size: 600px; 
   } 
   .btn { 
     margin: 30px auto; 
   } 
   .hero-3 { 
     inline-size: 600px; 
     margin: 10px auto; 
   } 
   .tasks_container { 
     display: grid; 
     column-gap: 30px; 
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
   } 
   .column-detail { 
     font-family: var(--font-family-base); 
     line-height: 20px; 
   } 
   .results_container { 
     display: grid; 
     column-gap: 30px; 
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
   } 
 } 
  
 /* DESKTOP */ 
  
 @media screen and (min-width: 1024px) { 
   .wrapper { 
     inline-size: 1000px; 
   } 
   .hero { 
     background-repeat: no-repeat; 
     background-position: center 0; 
     background-size: cover; 
     inline-size: 100%; 
   } 
   .hero-1 { 
     margin: auto; 
   } 
   .hero-2 { 
     margin: 10px auto; 
     inline-size: 600px; 
   } 
   .btn { 
     margin: 30px auto; 
   } 
   .hero-3 { 
   inline-size: 800px; 
   margin: 30px auto; 
   } 
 } 
  
 /* PENTAGON ANIMATION */ 
  
 span:hover { 
   opacity: 0.9; 
   transition: ease-out 0.6s; 
 } 
  
 .column-pentagone:hover { 
   transition: transform 250ms; 
   transform: translateY(-10px); 
 }