Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--  Google Font  -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Barlow&family=Catamaran:wght@600&family=Emblema+One&display=swap" rel="stylesheet">
<!--  Font Awesome  -->
  <script src="https://kit.fontawesome.com/a5cfcbf118.js" crossorigin="anonymous"></script>
    <title>Electric Select Home</title>
</head>
<body>
<!--Start Of Background Image -->
 <header class="background-img">
   
   <!--Start of Wrapper-->
  <div class="wrapper"> 
    
  <!-- Start Of Nav   -->
    <nav>
      <ul class="clearfix">
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>
  <!--End Of Nav  -->
    
  <!-- Start Of Header Title -->
    <div class="header-title">
        <h1>ELECTRIC <br> SELECT</h1>
        <h3>best home appliances</h3>
    </div>
  <!--  End Of Header Title --> 
    
  <!--   Start Of Burger Menu -->
    <div class="burger-menu">
      <i class="fas fa-bars"></i>
    </div>
  <!--  End Of Burger Menu -->
    
  </div>  
  <!-- End Of Wrapper --> 
   
   <!-- Start Of Social Icons Bar -->
    <div class="social-icons">
      <ul>
        <li><i class="fab fa-instagram"></i></li>
        <li><i class="fab fa-facebook-f"></i></li>
        <li><i class="fab fa-snapchat-ghost"></i></li>
        <li><i class="fab fa-twitter"></i></li>
      </ul>
   </div> 
  <!--  End Of Social Icons Bar --> 
   
   </header> 
  <!-- End Of Background Img -->
  
  <main>
    
    <!--Start Of Appliances Image Section -->
    <section class="appliances-section">
      <h2> NEWS APPLIANCES</h2>
      <ul class="appliances-image clearfix wrapper">
        <li><img src="https://psd.hackeryou.com/assignment1-assets/electric-select/gallery-photo-1.jpg" alt="An image of a microwave"></li>
        <li><img src="http://psd.hackeryou.com/assignment1-assets/electric-select/gallery-photo-2.jpg" alt="An image of a Juicer"></li>
        <li><img src="http://psd.hackeryou.com/assignment1-assets/electric-select/gallery-photo-3.jpg" alt="An image of a Toast"></li>
      </ul>
   </section>  
<!--     End Of Appliances Image Section -->
   
 <!-- Start Of Coffee Section -->
   <section class="appliances-coffee ">
     <div class="wrapper clearfix">
      <div class="coffee-img">
        <img src="http://psd.hackeryou.com/assignment1-assets/electric-select/square-photo.jpg" alt="An image of a Coffee Pot"></div>
      <div class="coffee-section">
        <h2>BEST APPLIANCES FOR COFFEE</h2>
        <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quasi voluptas esse, voluptate libero veritatis aut temporibus porro rerum sed illum minima iusto quibusdam! Minima, molestiae esse impedit consectetur dicta, tenetur, ad odit repellendus quis culpa debitis veniam voluptatum distinctio?</P>
        <button>READ MORE</button>   
      </div>
     </div>
    </section>
<!-- End Of Coffee Section -->
    
<!-- Start Of Smoothies Section -->
   <section class="smoothies">
     <article class="clearfix">
       <div class="smoothies-img-1">
        <img src="http://psd.hackeryou.com/assignment1-assets/electric-select/right-photo.jpg" alt="An image of a blender and a glass of smoothie">
       </div>
        <div class="smoothies-content-1">
          <h2>Smoothies Anyone?</h2>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum eligendi nam excepturi dolorem deleniti ducimus quo dolore, mollitia               delectus labore magnam debitis odit quibusdam omnis!</p>
          <button>Read More</button>
        </div>
       
     </article>
     <article class="clearfix">
       <div class="smoothies-img-2">
          <img src="http://psd.hackeryou.com/assignment1-assets/electric-select/left-photo.jpg" alt="An image of a modern kitchen">
       </div>
       <div class="smoothies-content-2">
         <h2>New Home New Applinaces</h2>
         <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum eligendi nam excepturi dolorem deleniti ducimus quo dolore, mollitia                    delectus labore magnam debitis odit quibusdam omnis!</p>
          <button>Read More</button>
       </div>
      
     </article>
   </section> 
<!--End Of Smoothies Section -->
   
<!-- Start Of Information Icons Section -->
   <section class="information-icons-background-color">
     <div class="wrapper clearfix">
       <div class="information-icons">
         <i class="fas fa-car"></i>
         <h4>SHOP</h4>
       </div>
       <div class="information-icons">
         <i class="fas fa-briefcase"></i>
         <h4>JOBS</h4>
       </div>
       <div class="information-icons">
         <i class="fas fa-calendar-check"></i>
         <h4>EVENTS</h4>
       <div>
      </div>
   </section>
  <main>  
<!-- End Of Information Section -->
    
<!--Start Of Footer Section -->  
  <footer>
    <section class="wrapper clearfix">
    <div class="footer information-1">
      <h5>STAY UPDATED</h4>
      <p> Subscribe to our newsletter to stay updated</p>
      <form>
         <input type="text"/>
         <button type="submit" class="input-button">Subscribe</button>
      </form>
    </div>
   <div class="footer information-2 ">
     <h5>CONTACT</h5>
     <p>info@email.com 123-456-7890</p>
     <p>123 someroad, Toronto, ON</p>
     <p>A5A 5A5</p>
    </div>
    <div class="footer information-3">
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
    </section>
    <!--     Juno Print -->
    <p class="juno-print"><a href="https://junocollege.com/">
      Created at Juno College</>
  </footer>
<!--     End Of Footer Section -->

<!--Start Of Copy Right Section     -->
    <section class="copyright">
      <p>Copyright <span>	&#169;</span> 2021 Hacker You</p>
    </section>
<!--   End Of Copy Right Section -->
</body>
</html>
              
            
!

CSS

              
                /* Colors Collection */
/* Marine: #042259; */
/* Darker Grey:#1F2022; */
/* Pale rose: #F5C8CF; */
/* Pale Grey: #F0F5FF; */
/* Light Pink:#FCDDE2; */
/* Water Blue: #1D81CC; */

/* Setup Snippets */
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-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{display:inline-block;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-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: ''; clear: both; height: 0; }

html { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

*, *:before, *:after {box-sizing: inherit}

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden;}

html {
   /* 1rem = 10px */
  font-size: 62.5%;
}

/* Google font And General Styling */
body {
  font-family:'Barlow', 'Catamaran','Emblema One',sans-serif;
  font-size:2rem;
  line-height:2.9rem;
  letter-spacing:0.2rem;
}

/* Stripping Styling */
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
  margin:0;
  padding:0;
}

ul {
  list-style:none;
}

a {
  text-decoration:none;
}

img {
  max-width: 100%;
  height: auto;
  display:block;
}

h1 {
  font-family: 'Emblema One', cursive;
  font-size:10.45rem;
  color: #1D81CC; 
  line-height:8.7rem;
}

h2 {
  font-family: 'Emblema One', cursive;
  font-size:4.2rem;
  color: #1D81CC; 
  text-align:left;
  line-height:1;
  padding-bottom:1rem;
}

h3 {
  font-family: 'Barlow', sans-serif;
  font-size:3.7rem;
  line-height:3.8rem;
  letter-spacing:0.3rem;  
  color:#042259;
  margin-top:0.75rem;
}

h4 {
  font-family: 'Emblema One', cursive;
  font-size:3.1rem;
  text-align:center;
  color:#1D81CC;
  margin-top:1rem;
}

h5 {
  font-family: 'Emblema One', cursive;
  font-size:2.5rem;
  color:#1D81CC;
}

nav ul li a {
  color:#042259;
  font-family: 'Catamaran', sans-serif;
  font-size:1.8rem;
  line-height:2.9rem;
  text-align:right;
}

button {
  font-family: 'Emblema One', cursive;
  font-size:2rem;
  text-align:center;
  line-height:2.9rem;
  color:#042259;
  background:#F5C8CF;
  padding:1rem 1.5rem;
  border:none;
  margin-top:1.2rem;
}

article {
  background:#F0F5FF;
}

/* Wrapper Styling*/
.wrapper {
  max-width:1280px;
  width:90%;
  margin:0 auto;
}

/*Headers Background Image Styling */
.background-img { background:url('http://psd.hackeryou.com/assignment1-assets/electric-select/header-alt.png');
  height:100vh;
  background-size:cover;
  background-position:center center;
  width:100%;
}

/* Nav Styling */
nav {
  width:100%;
  height:6rem;
  line-height:6rem;
}

nav ul {
  float: right;
}

nav li {
  display:inline-block;
  padding:0 1rem;
}

.header-title {
  padding-top:15rem;
}

/* Headers Social Icons Styling */
.social-icons {
  position:absolute;
  top:15%;
  right:2%;
  color:#1D81CC;
  line-height:1.8;
}

.burger-menu {
  position: absolute;
  top: 2.5rem;
  right: 2.5rem;
  font-size: 3rem;
  visibility: hidden;
  color:#042259;
}

/* Appliances Of Image Section Styling */
.appliances-section,
.appliances-coffee {
  background:#FCDDE2;
  padding:8rem 0;
  clear:both;
}

.appliances-section h2 {
  padding-bottom:5rem;
  text-align:center;
}

.appliances-image li {
  float:left;
  width:calc((100% / 3) - 2.4rem);
  margin: 2.4rem;
}

.appliances-image li:nth-child(1n){
  margin-left:0;
}

/*Coffee Section Styling*/
.appliances-coffee {
  clear:both;
}

.coffee-img {
  max-width:30%;
  width:100%;
  float:left;
}

.coffee-section {
  width:calc(70% - 4rem);
  margin-left:4rem;
  float:right;
}

.coffee-section button {
  background:#042259;
  color:#FFF;
  border:none;
}

/* //Smoothies Section Styling*/
.smoothies {
  clear:both;
}

.smoothies-content-1,
.smoothies-content-2 {
  width: calc(50% - 4rem);
  margin: 1rem;
  padding: 7rem 2rem;
  text-align:left;
}

/*Start Of Smoothies Section Content-1 */
.smoothies-content-1 {
  float: left;
}

.smoothies-img-1 {
  float: right;
  width: 50%;
}
/*End Of Smoothies Section Content-1*/

/* Start Of Smoothies Section Content-2  */
.smoothies-content-2 {
  float: right;
}

.smoothies-img-2 {
  float: left;
  width: 50%;
}
/* End Of Smoothies Section Content-2  */

/* Information Icons Styling */
.information-icons-background-color {
  clear:both;
  background:#FCDDE2;
  padding:8rem;
  margin-top:-0.75rem;
}

.information-icons {
  float:left;
  width:33%;
  text-align:center; 
  font-size:6rem;
  color:#042259;
}

/* FOOTER STYLING */

footer {
  background:#F0F5FF;
  padding:10rem 0;
  clear:both;
  position:relative;
}

.footer {
  float:left;
}

.information-1 {
  width:calc(50% - 1rem);
  margin-right:1rem;
}

.information-2 {
  width:calc(35% - 1rem);
  margin: 0 .50rem;
}

.information-3 {
  width:calc(15% - 2rem);
  margin-left: 2rem;
}

.information-3 a {
  font-family: 'Emblema One', cursive;
  font-size:2rem;
  color:#1D81CC;
}

form {
  position: relative;
}

input {
  max-width:90%;
  width: 100%;
  height:5rem;
  line-height:5rem;
  padding-right: 4rem;
  border:3px solid #FCDDE2;
}

.input-button {
  width: auto;
  position: absolute;
  top:-20%;
  right: 10%;
  height:4.8rem;
/*   border:none; */
  line-height:2.4rem;
  padding:1rem;
}

.copyright {
  text-align:center;
  background:#042259;
  color:white;
  padding:1rem;
}

.juno-print a {
 text-shadow:2px 2px 10px #F5C8CF;
 color:#1D81CC;
  position:absolute;
  bottom:0;
  left:0;
}

.juno-print a:hover {
  color:#042259;
}

@media (max-width: 1050px) {
  h1 {
    font-size: 9rem;
  }  
}

@media (max-width: 950px) {
  body {
    font-size: 1.8rem;
    line-height: 2.6rem;
  }
  
  h1 {
    font-size: 8rem;
  }

  h2 {
    font-size: 3.5rem;
  }

  h3 {
    font-size: 2.6rem;
  }

  h4 {
    font-size: 2.5rem;
  }

  h5 {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .burger-menu {
    visibility: visible;
  }

  .social-icons {
    display: none;
  }

  nav {
    display: none;
  }

  h1 {
    font-size: 7rem;
    line-height:6.7rem;
  }

  h3 {
    font-size: 2.5rem;
    line-height:2.9rem;
  }

  h4 {
    font-size: 2.4rem;
  }

  h5 {
    font-size: 1.9rem;
  }
  
  .appliances-section,
  .appliances-coffee {
  padding:4rem 0;
  }
  
  .appliances-image li {
    width: calc(50% - 2rem);
    margin: 0 1rem;
  }
  
  .appliances-image li:last-child {
    display: none;
  }
  
  .coffee-section,
  .coffee-img,
  .smoothies-content-1,
  .smoothies-content-2,
  .smoothies-img-1,
  .smoothies-img-2 {
    float: none;
    width: 100%;
    margin: 0;
    padding: 4rem;
  }
  
  .coffee-img {
    max-width: 100%;
  }
  
  
  
  .information-icons  {
    float:none;
    width:100%;
  }
  
  .information-1 {
    max-width:80%;
    width:100%;
    float:none;
  }
  
   .information-2 {
    width:60%;
    margin: 2rem;
  }
  
  .information-3 {
    width:20%;
    margin:2rem;
  }
  
  .input-button { 
  top:-20%;
  }
}

@media (max-width: 550px ) {
    body { 
      font-size:1.5rem;
      line-height:2.5rem;
      letter-spacing:0.1rem;
    }
  
    h1 {
       font-size: 6rem;
       line-height:5rem;
    }
    
    h2 {
      font-size:2.5rem;
      text-align:center;
    } 
  
    h3 {
      font-size: 1.9rem;
      line-height:1.9rem;
    }
  
    h5 {
      margin-bottom:1rem;
    }

    button {
      text-align:center;
    }

    .information-icons-background-color {
      padding: 2rem;
    }
 
  .information-1 {
    max-width:100%;
    width:100%;
  }
  
  .information-2 {
    width:60%;
    margin: 2rem 2rem 0 0;
  }
  
  .information-3 {
    width:10%;
    margin:2rem 0 ; 
  }
 
  form {
    text-align:center;
    margin-top:1rem;
  }
  
.input-button {
  position: static;
  margin: 1rem 0;
  }
  
 .information-1 h5,
 .information-1 p {
   text-align:center;
  } 
}

@media(max-width:375px){
  h1 {
    font-size:5rem;
    line-height:5rem;
  }
  
  h3 {
    font-size:1.6rem;
  } 
}




              
            
!

JS

              
                
              
            
!
999px

Console