1-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; 
} 
 
.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 */ 
 
.container { 
  max-block-size: 1920px; 
  max-inline-size: 100%; 
  text-align: center; 
} 
.tasks_container { 
  margin: 30px auto; 
} 
.title { 
  font-family: var(--font-family-bold); 
  font-size: var(--font-size-medium); 
  margin: 60px auto; 
  margin-block-end: 40px; 
} 
 
.container-p { 
  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; 
} 
 
@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; 
  } 
} 
 
/* 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; 
  } 
} 
 
/* 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; 
  } 
}