<div class="header">
<div display="none, block" width="100%" height="100%" class="top-alert">
<span size="2" display="inline-block" color="black" font-weight="medium" class="top-alert-text">
<span>Glossier.com is open and shipping!
<a href="https://www.glossier.com/help">Find out more about delivery.</a>
</span>
</span>
</div>
<div class="menu">
<div>
<img src="https://image.flaticon.com/icons/svg/1828/1828859.svg" id="icon">
</div>
<div>
<img src="https://image.flaticon.com/icons/svg/482/482631.svg" id="icon">
</div>
<div><img src="https://www.thegeniusworks.com/wp-content/uploads/2017/01/glossier-logo.-maniac-magazine.jpg" id="logo"></div>
<div>
<img src="https://image.flaticon.com/icons/svg/51/51256.svg" id="icon">
</div>
<div>
<img src="https://image.flaticon.com/icons/svg/1170/1170678.svg" id="icon">
</div>
</div>
<div class="option">
<div >Shop all</div>
<div >Skincare</div>
<div >Makeup</div>
<div >Body</div>
<div >Fragrance</div>
<div >Shop our sets</div>
<div >GlossiWear</div>
<div >Team picks</div>
<div >Skincare quiz</div>
</div>
</div>
<div class="main">
<div class="left-icon">
<div><img onclick="document.getElementById('img-holder').style.backgroundImage = 'url(https://static-assets.glossier.com/production/spree/images/attachments/000/003/755/portrait_normal/LashSlick.jpg?1556563261)'"src="https://static-assets.glossier.com/production/spree/images/attachments/000/003/755/square_tiny/LashSlick.jpg?1556563261" id="left-circle">
</div>
<div>
<img onclick="document.getElementById('img-holder').style.backgroundImage = 'url(https://static-assets.glossier.com/production/spree/images/attachments/000/002/019/portrait_normal/Carousel-6-lashslick.jpg?1559849241)'" src="https://static-assets.glossier.com/production/spree/images/attachments/000/002/019/square_tiny/Carousel-6-lashslick.jpg?1559849241" id="left-circle">
</div>
<div>
<img onclick="document.getElementById('img-holder').style.backgroundImage = 'url(https://static-assets.glossier.com/production/spree/images/attachments/000/002/010/portrait_normal/Carousel-6.jpg?1524866348)'" src="https://static-assets.glossier.com/production/spree/images/attachments/000/002/010/square_tiny/Carousel-6.jpg?1524866348" id="left-circle">
</div>
<div>
<img onclick="document.getElementById('img-holder').style.backgroundImage = 'url(https://static-assets.glossier.com/production/spree/images/attachments/000/002/009/portrait_normal/04_BeforeAfter_Diarrha.jpg?1571950361)'"src="https://static-assets.glossier.com/production/spree/images/attachments/000/002/009/square_tiny/04_BeforeAfter_Diarrha.jpg?1571950361" id="left-circle">
</div>
<div>
<img onclick="document.getElementById('img-holder').style.backgroundImage = 'url(https://static-assets.glossier.com/production/spree/images/attachments/000/004/516/portrait_normal/05_BeforeAfter_Natassia.jpg?1571950374)'"src="https://static-assets.glossier.com/production/spree/images/attachments/000/004/516/square_tiny/05_BeforeAfter_Natassia.jpg?1571950374" id="left-circle">
</div>
<div>
<img onclick="document.getElementById('img-holder').style.backgroundImage = 'url(https://static-assets.glossier.com/production/spree/images/attachments/000/002/018/portrait_normal/Carousel-5.jpg?1525832881)'"src="https://static-assets.glossier.com/production/spree/images/attachments/000/002/018/square_tiny/Carousel-5.jpg?1525832881" id="left-circle">
</div>
<div>
<img onclick="document.getElementById('img-holder').style.backgroundImage = 'url(https://static-assets.glossier.com/production/spree/images/attachments/000/002/017/portrait_normal/Carousel-4.jpg?1525832807)'"src="https://static-assets.glossier.com/production/spree/images/attachments/000/002/017/square_tiny/Carousel-4.jpg?1525832807" id="left-circle">
</div>
<div>
<img onclick="document.getElementById('img-holder').style.backgroundImage = 'url(https://static-assets.glossier.com/production/spree/images/attachments/000/002/016/portrait_normal/Carousel-2.jpg?1525832780)'"src="https://static-assets.glossier.com/production/spree/images/attachments/000/002/016/square_tiny/Carousel-2.jpg?1525832780" id="left-circle">
</div>
<div>
<img onclick="document.getElementById('img-holder').style.backgroundImage = 'url(https://static-assets.glossier.com/production/spree/images/attachments/000/002/012/portrait_normal/Carousel-8.jpg?1524866388)'"src="https://static-assets.glossier.com/production/spree/images/attachments/000/002/012/square_tiny/Carousel-8.jpg?1524866388" id="left-circle">
</div>
</div>
<div class="row">
<div class="column">
<div id="img-holder"></div>
</div>
<div class="column">
<h>Lash Slick</h>
<p>film from mascara 8.5g/0.29 oz</p>
<button class="top-rate-button">Top Rated</button><br>
<h style="font-size:0.8em; display:block;padding-top: 8px;">Extensions without extensions</h><br>
<p2 style="padding-bottom:50px;"><b>What it is</b>: The perfect everyday black mascara</p2><br><br>
<p2><b>Why it's special:</b></p2>
<ul>
<li>Curls and sculpts as it lengthens, creating a natural “baby extension” effect without clumping</li>
<li>Teeny-tiny fibers coat lashes from root to tip, while flexible film-forming polymers lift and lock each fiber into place</li>
<li>Water-resistant (not waterproof), so it washes off easily with warm water or Milky Oil at the end of your day</li>
</ul>
<p2 style="margin-left:10px;"><b>Good to know:</b> cruelty free, paraben free, fragrance free, hypoallergenic, allergy tested, dermatologist tested, ophthalmologist tested, suitable for sensitive eyes and contact lens wearers, non-irritating</p2>
<br><br><br>
<div class="icon-box">
<div>
<img src="https://www.svgrepo.com/show/27705/tree.svg" id="flex-icon">
</div>
<div>
<img src="https://www.svgrepo.com/show/113439/poinsettia.svg" id="flex-icon">
</div>
<div>
<img src="https://www.svgrepo.com/show/37019/umbrella.svg" id="flex-icon"></div>
</div>
<button class="price-button">Add to cart-$16</button>
</div>
</div>
</div>
* {
 box-sizing: border-box;
}
h {
 font-size: 1em;
 font-weight: bold;
}
p {
font-size: 0.8em;
 padding-left: 10px;
 padding-top:0;
}
p1 {
 font-size: 1em;
 font-weight: 600;
 padding-left: 10px;
 padding-top: 10px; 
padding-bottom: 0;
}
p2 {
 font-size: 0.8em;
 font-weight: 500;
}
body {
 padding: 0;
 margin: 0;
 font-family: 'Open Sans', sans-serif;
}
.header {
 position: sticky;
 position: -webkit-sticky;
  width: 100%;
 z-index: 800;
}
.top-alert {
 background-color: rgb(250,242,244);
 padding: 8px;
 text-align: center;
}
.top-alert-text {
 font-size: 0.6em;
 text-align: center;
 justify-content: center;
 font-weight: 550;
}
a {
 color: inherit;
}
a:hover { 
color: blue;
}
.menu {
 display: flex;
 position: relative; 
 -webkit-box-align: center;
 align-items: center;
 height: 48px;
 z-index: 800;
 background: rgb(255, 255, 255);
}
.menu>div {
 max-width: 1270px;
 height: inherit;
 min-width: 40px;
 margin: 1%;
 justify-content: center;
 padding: 0px 4px;
 font-size: 0.8em;
}
.menu>div:nth-child(3) {
 margin: 0 auto;
 max-width: 130px;
 min-width: 90px;
}
.option {
 display: flex;
 position: relative; 
 -webkit-box-align: center;
 align-items: center;
 justify-content: center;
 height: 39px;
 background-color: white;
 border-bottom: 1px solid grey;
}
.option>div {
  max-width: 150px;
 height: inherit;
 min-width: 40px;
 margin: 1%;
 justify-content: center;
 padding: 10px;
 font-size: 0.7em;
 border-radius: 3px;
 transition: all .3s ease;
}
.option>div:hover {
 background-color: #DDD; 
 cursor: pointer;
 border: 1px solid grey;
}
@media (max-width: 768px) {
 .option {
 overflow-x: visible;
 display: block;
 text-align: center;
 justify-contet: center;
 margin: 0 auto;
 height: auto;
}
.option>div {
 text-align: center;
 justify-contet: center;
 margin: 0 auto;
}
}
 
#icon {
 height: inherit;
 width: 20px;
 justify-content: center;
 text-align: center;
 margin-bottom: 2%;
}
#logo {
 width: 90%;
 height: 28px;
 margin-top: 7%;
}
.main {
 max-width: 75%;
 position: relative;
 display: block;
 margin: 0 auto;
 height: 100vh;
 padding: 10px;
}
.left-icon {
 display: inline-block; 
 float: left;
 height: auto;
 width: 7%;
 padding: 1em;
 margin-right: 10px;
}
.left-icon>div {
 margin-bottom: 15px; 
 border-radius: 50%;
} 
#left-circle {
 height: 40px;
 width: 40px;
 border-radius: 50%;
}
#left-circle:hover {
 border: 2px solid blue;
}
@media (max-width: 768px) {
 .main {
 max-width: 100%;
 margin:0;
}
 .left-icon { 
 display: flex;
 justify-content: flex-start;
 width: 100%;
 height: 15%;
 margin-bottom:0;
 overflow-x: scroll;
 overflow-y: hidden;
 -webkit-overflow-scrolling: touch;
}
.left-icon>div {
 margin-bottom:0;
}
#left-circle {
 height: 60px;
 width: 60px;
 justify-content: center;
 text-align: center;
 margin-right: 20px;
 bottom: 0;
}
}
.column {
 float: left;
 width: 43%;
 height: 90vh;
 justify-content: center;
 margin-right: 13px;
 margin-top:10px;
}
.row:after {
 content: "";
 clear:both;
 display: table;
}
@media screen and (max-width: 600px) {
 .column {
 width: 100%;
 height: 90vh;
 margin-bottom: 10px;
 right:0;
 left:0;
 top:0;
}
  p2 {
 font-size: 1em;
}
 p {
 font-size: 0.8em;
}
 li {
 font-size: 1em;
}
 .icon-box {
 margin-top: 100px;
 margin-bottom: 40px;
} 
.price-button {
 margin-top: 40px;
}
}
.row:after {
 content: "";
 display: table;
}
#img-holder {
 background-image: url('https://static-assets.glossier.com/production/spree/images/attachments/000/003/755/portrait_normal/LashSlick.jpg?1556563261');
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
 height: 90vh;
} 
.top-rate-button {
 margin-left: 10px;
 background-color:rgb(245,222,210);
 height: 60px;
 width: 100px;
 padding: 0.5em;
 border: none;
 border-radius: 10px; 
 font-weight: 600;
}
li {
 font-size: 0.7em;
 margin-bottom: 10px;
}
.icon-box {
 display: flex;
 flex-direction: row;
 height: 6vh;
 width: 100%; 
margin-top: 10px;
}
.icon-box>div {
 width: 33.33%;
 height: inherit;
}
#flex-icon {
 width: 100%;
 height:100%;
}
.price-button {
 background-color: #121212;
 height: 8vh;
 width: 90%;
 margin-left: 30px;
 margin-top: 15px; 
 padding: 0.5em;
 color: white;
 font-weight: bold;
 font-size: 1em;
 display: inline-block;
 text-align: center;
 border: none; 
 border-radius: 5px;
 transition: all .3s ease;
}
.price-button:hover {
 background-color: rgba(0,0,0,0.8);
 cursor: pointer;
}
/* Based on the original website https://www.glossier.com/products/lash-slick */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.