123

Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<header id="header">
	<!-- It should be fixed -->
	<nav id="nav-bar">
      <!-- Company Logo -->
      <img src="https://1.bp.blogspot.com/-XopELwpLMDc/W27kpipW6PI/AAAAAAAABYM/5lD9ZrRE8zoCvoU6mYfDMx9esp7F2zukQCLcBGAs/s200/Logo-SH-noshadow.png" alt="" id="header-img">
			<!-- Internal Links -->
			<a href="#latest-videos" class="nav-link">Latest Videos</a>
			<a href="#shop-with-confidence" class="nav-link">Shop with Confidence</a>
			<a href="#new-products" class="nav-link">New Products</a>
    <a href="#featured-brands" class="nav-link">Featured Brands</a>
	</nav>
</header>

<main id="main">
 
 <div id="img1">

	 <form id="form" action="https://www.freecodecamp.com/email-submit" >
     
     <label for="email">
       SmartHouseFuture: Turn your odinary house into a smart house.
       </label><br> 
        <input type="email" id="email" name="email" placeholder="Enter your email..." required>
        <br>
        <input id="submit" type="submit" value="Get Started">

	</form>

</div>

<section id="featured-brands">
  <div class="brands-rows">
    <h2>Featured Brands</h2>
  		<div id="leviton"><img src="https://1.bp.blogspot.com/-Yaw6kRsnlUY/W27ydU42QPI/AAAAAAAABZc/SeT6IQsPx8Y_YyOzON60-1tzYZYPqRXzACPcBGAYYCw/s1600/vai-log-icn-featured-brands-box-leviton-188x105-1a-2018-5-16.png" alt="leviton"></div>
  		<div id="lutron"><img src="https://4.bp.blogspot.com/-8ewXNdyyp7Y/W27ydlsvcHI/AAAAAAAABZc/_x2iK_BKOb4tEB65B04QEegjWbfnkCDHACPcBGAYYCw/s1600/vai-log-icn-featured-brands-box-lutron-188x105-1a-2018-5-16.png" alt="lutron"></div>
  		<div id="arlo"><img src="https://1.bp.blogspot.com/-2nqd5lrNQg8/W27yccvb3HI/AAAAAAAABZg/KbgBTN-9pMA60AioPW90y50M1f82Lc3vgCPcBGAYYCw/s1600/vai-log-icn-featured-brands-box-arlo-188x105-1a-2018-5-16.png" alt="arlo"></div>
  		<div id="amazon"><img src="https://3.bp.blogspot.com/-8XkahVw-I8k/W27ycffo5lI/AAAAAAAABZU/EMJwxMnSttwL-jCraI27QkyQpvmmm3mxQCPcBGAYYCw/s1600/vai-log-icn-featured-brands-box-amazon-188x105-1b-2018-5-18.png" alt="amazon"></div>
  </div>
  <div class="brands-rows">
  		<div id="insteon"><img src="https://2.bp.blogspot.com/-8SW7Pwg94OE/W27ydXa4azI/AAAAAAAABZY/iUxLGRMCUSY-xduUPD1DnecsCRVq4-XsQCPcBGAYYCw/s1600/vai-log-icn-featured-brands-box-insteon-188x105-1a-2018-5-16.png" alt="insteon"></div>
  		<div id="google"><img src="https://2.bp.blogspot.com/-CbCs32bVCGI/W27ydP1xh0I/AAAAAAAABZY/9dbvxh0TJyADGTr5eUmLMwEAAK918jfZwCPcBGAYYCw/s1600/vai-log-icn-featured-brands-box-google-188x105-1a-2018-5-16.png" alt="google"></div>
  		<div id="ecobee"><img src="https://4.bp.blogspot.com/-n56Kqfp_DHE/W27yc_RMoAI/AAAAAAAABZY/ManxqSe3TmYTaYl9G3uXbVJPCubdoGBvgCPcBGAYYCw/s1600/vai-log-icn-featured-brands-box-ecobee-188x105-1a-2018-5-16.png" alt="ecobee"></div>
  		<div id="august"><img src="https://2.bp.blogspot.com/--SDoB77r6vY/W27ycTvz9DI/AAAAAAAABZo/KeaVpQ2EhxkNwDNNuOplfZViIlHdXxw0ACPcBGAYYCw/s1600/vai-log-icn-featured-brands-box-august-188x105-1a-2018-5-16.png" alt="august"></div>
  </div>
  <div class="brands-rows">
  		<div id="nest"><img src="https://2.bp.blogspot.com/-XKfCfftesgs/W27yeKF7fpI/AAAAAAAABZk/qpOqmGAs4DgQeT5bXdT5Mz93z6B99NaBQCPcBGAYYCw/s1600/vai-log-icn-featured-brands-box-nest-188x105-1a-2018-5-16.png" alt="nest"></div>
  		<div id="philips"><img src="https://3.bp.blogspot.com/-8Gy9zZnEKag/W27yegL7fjI/AAAAAAAABZg/MnIQS44crt08E1zFI3pBo7l5jp7Qt9G0wCPcBGAYYCw/s1600/vai-log-icn-featured-brands-box-philips-hue-188x105-1a-2018-5-16.png" alt="philips"></div>
  		<div id="ring"><img src="https://3.bp.blogspot.com/-lMSBGCIbiSM/W27yfHReVuI/AAAAAAAABZk/Q0RpZMLD7EkJKO4_-6PMD7Iqtl9txlP8QCPcBGAYYCw/s1600/vai-log-icn-featured-brands-box-ring-188x105-1a-2018-5-16.png" alt="ring"></div>
  		<div id="smartthings"><img src="https://4.bp.blogspot.com/-MVIWm-KO76Q/W27yfpUnxSI/AAAAAAAABZo/DnyxR0jjV9o21tAdfWPbzid1RmpWHyABQCPcBGAYYCw/s1600/vai-log-icn-featured-brands-box-smartthings-188x105-1c-2018-5-18.png" alt="smartthings"></div>
  </div>
 <div style="clear:left;"></div>
</section>

  <div id="img2">
  	<div><h3>Get all new products at a discounted Price!</h3></div>
  </div>

<section id="new-products">
  <div class="new-items">
    <h2>New Products</h2>
    <div id="amazon-echo"><img src="https://i.ebayimg.com/images/g/ac8AAOSwZFdaaHY9/s-l500.jpg" alt="Amazon Echo Dot"><p><strong>Amazon Echo Dot (2nd Generation)</strong></p>
    </div>
    <div id="philips-hue"><img src="https://i.ebayimg.com/images/g/VYIAAOSwBd1bS4Kz/s-l500.jpg" alt="Philips Hue"><p><strong>Philips Hue White and Color Ambiance</strong></p></div>
    <div id="google-assist"><img src="https://i.ebayimg.com/images/g/VhQAAOSwTM5Y2Sub/s-l500.jpg" alt="Google home smart assistant"><p><strong>Google Home Smart Assistant</strong></p></div>
    <div id="nest-cam"><img src="https://www.smarthome.com/media/catalog/product/cache/1/thumbnail/398x328/9df78eab33525d08d6e5fb8d27136e95/n/e/nest-family-10096.jpg" alt="Nest Cam Outdoor Security Camera"><p><strong>Nest Cam Outdoor Security Camera</strong></p></div>
  </div>
</section>

  <div id="img3">
  	<div><h3>Our Website is Highly Secure <br> And We Accept Different Payment Methods</h3></div>
 </div>

<section id="shop-with-confidence">
<div class="shopnow">
  <h2><strong>Shop with Confidence</strong></h2>
  <div id="moneyback"><img src="https://1.bp.blogspot.com/-F1bFv7ZxtVI/W28Tdqk--pI/AAAAAAAABZ8/47xNDyQZ4DIfNbMEr9vq5boKlwoY1WnSQCLcBGAs/s400/30-day-money-back-guarantee-icon.png" alt="30 day money back guarantee"><p><strong>30 Day Money-Back Guarantee</strong></p></div>
  <div id="freeshipping"><img src="https://3.bp.blogspot.com/-Akqlin14NFc/W28TfMKnHFI/AAAAAAAABaE/nOA2h3D5gNMP1csrYPPVZ5OO6ArBnRSDgCLcBGAs/s400/free-shipping.png" alt="Free Shipping on more than 1 order"><p><strong>Free Shipping on more than 1 order</strong></p></div>
  <div id="highquality"><img src="https://4.bp.blogspot.com/-xnD2dJy1gGg/W28TehesQsI/AAAAAAAABaA/llbQoxZd42Yvk86FKyoNHCEPLvio09oUwCLcBGAs/s1600/high-quality-guarantee.png" alt="High Quality Product Guarantee"><p><strong>High Quality Product Guarantee</strong></p></div>
</div>
  
</section>

<!-- Embedded product video -->
<section id="latest-videos">
 	<div class="videos">
 		<h2>Smart House Latest Videos</h2>
 		<div id="what-is-sh"><iframe id="video"  src="https://www.youtube.com/embed/wedwOQuMQbM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><p><strong>What is Smart Home?</strong></p></div>
 		<div id="top-sh"><iframe src="https://www.youtube.com/embed/hIEIGDsbKqY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><p><strong>Top 5 Smart House Technologies</strong></p></div>
 		<div id="build-sh"><iframe src="https://www.youtube.com/embed/W_zdT0hKMUc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><p><strong>Building Ultimate Smart House</strong></p></div>
 		<div id="sh-explained"><iframe src="https://www.youtube.com/embed/EzCVpaEb0kQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><p><strong>Your Smart House Explained</strong></p></div>
 	</div>
 </section>
 
</main>

<footer>Product Landing Page Template Made by <a href="https://www.clevious.com" target="_blank">Clevious</a></footer>
            
          
!
            
              /* 
1. At least 1 media Query
2. CSS flexbox at least once.
*/

body {
	margin: 0;
}

h2 {
	font: sans-serif;
	color: red;
	font-size: 30px;
}

h3 {
	font-size: 30px;
}

section {
	padding-bottom: 25px;
}

#main {
	height: auto;
	width: 100%;
	margin: auto;
}

#header {
	overflow: hidden;
	position: fixed;
	width: 100%;
	margin:0;
	background-color: rgba(255,255,255,255);
	z-index: 2;
}

#nav-bar {
	color: #36383f;
}

#nav-bar img {
	height: 60px;
	float:left;
	margin-left: 5%;
	padding: 10px 0 10px 0;
}

#nav-bar a {
	color: #36383f;
	text-decoration: none;
	float: right;
	margin-right: 6px;
	padding: 34px 18px 10px 0;
}

label[for='email'] {
	display: inline-block;
	padding: 15px;
	background-color: rgba(37, 37, 37, 0.29);
	color: #fff;
	font-size: 35px;
	width: 50% !important;
	z-index: 1;
	border-bottom-left-radius: 24px;
    border-top-right-radius: 24px;
    margin-bottom: 15px;
}

#email {
	border: none;
	height: 40px;
	width: 35%;
	padding-left: 15px;
	font-size: 15px;
	margin-bottom: 8px;
}

#submit {
	border:none;
	border-top: 2px solid #4a4a4a;
	background-color: #4a4a4a;
	color: #fff;
	height: 42px;
	padding-left: 15px;
	padding-right: 15px;
}

#submit:hover {
	border-top: 2px solid #696767;
	background-color: #696767;
}

@media only  screen and (max-width: 529) {
	#submit {
		width: 150px;
	}
}

#img1, #img2, #img3 {
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	height: 600px;

	color: #fff;

	/* Using CSS flexbox */
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

#img1 {
	background-image: url('https://2.bp.blogspot.com/-TqP_32v5vT0/W27HluV_AMI/AAAAAAAABWc/YEXmnqm8BTUn_-WF4P-kHITq08x1WccWACLcBGAs/s1024/architecture-1477041.jpg');
}

#img2 {
	background-image: url('https://2.bp.blogspot.com/-B8zQ_WOoqKw/W27IQ1-C_LI/AAAAAAAABWs/9h6cQqpxCb07HSnMFR85C-p4U2qh-B9RgCPcBGAYYCw/s1024/apartment-185779.jpg')
}

#img3 {
	background-image: url('https://2.bp.blogspot.com/-LljnwE7WT2Y/W27IYwLkkGI/AAAAAAAABWw/ud5I1j4nlaIt7rl56rmwTEaqVZFaThPbwCPcBGAYYCw/s1024/villa-1209148.jpg')
}

#img2 div, #img3 div {
	background-color: rgba(255, 255, 255, 0.48);
	color: #333;
    padding: 0 31px;
    border-radius: 25px;
}

.brands-rows, .new-items, .shopnow, .videos {
	text-align: center;
}

.brands-rows div, .new-items div, .shopnow div, .videos div {
	display: inline-block;
	background-color: #666b7a;
	margin-right: 10px;
	margin-bottom: 10px;
}

.new-items div img {
	display: inline-block;
	max-width: 150px;
}

.shopnow div img {
	height: 150px;
}

.new-items div, .shopnow div, .videos div {
	color: #000;
	background-color: #fff;
	border-bottom: 5px solid gray;
}

@media only screen and (max-width:  822px) {
	.brands-rows div {
		width: 40%;
	}
}

@media only screen and (max-width:  597px) {
	.brands-rows div {
		width: auto;
	}
}

/* Hover images */
#amazon-echo:hover {
	border-bottom: 5px solid red;
	opacity: 0.9;
}
#philips-hue:hover {
	border-bottom: 5px solid orange;
	opacity: 0.9;
}
#google-assist:hover {
	border-bottom: 5px solid blue;
	opacity: 0.9;
}
#nest-cam:hover {
	border-bottom: 5px solid green;
	opacity: 0.9;
}

/* Hover Guarantee Icons */
#moneyback:hover {
	border-bottom: 5px solid red;
}
#freeshipping:hover {
	border-bottom: 5px solid green;
}
#highquality:hover {
	border-bottom: 5px solid #fcc602;
}

/* Hover Videos */
#what-is-sh:hover {
	border-bottom: 5px solid orange;
}
#top-sh:hover {
	border-bottom: 5px solid blue;
}
#build-sh:hover {
	border-bottom: 5px solid red;
}
#sh-explained:hover {
	border-bottom: 5px solid #a900ff;
}

/* Hover colors */
#insteon:hover {
	background-color: #248ec2;
}
#amazon:hover {
	background-color: #f90;
}
#ring:hover {
	background-color: #1998d5;
}
#lutron:hover {
	background-color: #000000;
}
#google:hover {
	background-color: #ea4335;
}
#nest:hover {
	background-color: #6b7b84;
}
#philips:hover {
	background-color: #f7af1a;
}
#august:hover {
	background-color: #ff1a12;
}
#arlo:hover {
	background-color: #08a64e;
}
#smartthings:hover {
	background-color: #15bfff;
}
#leviton:hover {
	background-color: #013474;
}
#ecobee:hover {
	background-color: #5bbd76;
}

footer {
	background-color: #36383f;
	text-align: center;
	color: #fff;
	padding: 15px 0;
	font-size: 18px;
}

footer a {
	text-decoration: none;
	color: #fff;
}

@media only screen and (max-width: 687px) {
  header a {
    display:none;
  }
  label[for='email'] {
    font-size: 5vw;
  }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console