<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 </div>
<div >Skincare</div>
<div >Makeup</div>
<div >Body</div>
<div >Fragrance</div>
<div >Shop our sets</div>
<div >GlossiWear</div>
<div >Picks</div>
<div >Skincare</div>
</div>
</div>
<div class="container">
<div class="section">
<img src="https://fashionista.com/.image/t_share/MTY3OTU5ODMyMzU0MTA0NzA0/glossier-pro-tip-eyeliners.jpg" id="grid-pic">
</div>
<div class="section"><img src="https://cdn.cliqueinc.com/posts/278800/best-glossier-products-278800-1553609606733-promo.700x0c.jpg" id="grid-pic"></div>
<div class="section">
<div class="text-box">
<img src="https://cdn.theorg.com/d39add48-47fb-486c-b76d-4dc42599119d_medium.jpg" style="width:30%; display: block;">
<h style="margin-left:10%; font-size: 2em;">Here Here!</h>
<p style="margin-left:10%;">Our original gift set is back!</p>
<button class="shopnow-button">Shop Now</button>
</div>
</div>
</div>
<div class="wrapper">
<header>
<div class="wrapper-text-box">
<h style="font-size:1.3em;">Beauty inspired by real life</h>
<p>Glossier is a new approach to beauty. It’s about fun and freedom and being OK with yourself today. We make intuitive, uncomplicated products designed to live with you. </p>
</div>
</header>
</div>
<div class="row">
<div class="column">
<img onmouseover="this.src='https://static-assets.glossier.com/production/spree/images/attachments/000/003/353/portrait_normal/lashslick_wand_hand.jpg?1551585165=&w=600&q=80'" onmouseout="this.src='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/portrait_normal/LashSlick.jpg?1556563261" id="row-pic">
<p1>Lash Slick</p1>
<p>film from mascara</p>
</div>
<div class="column">
<img onmouseover="this.src='https://static-assets.glossier.com/production/spree/images/attachments/000/003/316/portrait_normal/boy_brow_blonde_closed_hand_hover.jpg?1551581300'" onmouseout="this.src='https://static-assets.glossier.com/production/spree/images/attachments/000/002/829/portrait_normal/BoyBrow_0_Default_01_ShopGrid.jpg?1549325864'"src="https://static-assets.glossier.com/production/spree/images/attachments/000/002/829/portrait_normal/BoyBrow_0_Default_01_ShopGrid.jpg?1549325864" id="row-pic">
<p1>Boy Brow</p1>
<p>grooming pormade</p>
</div>
<div class="column">
<img onmouseover="this.src='https://static-assets.glossier.com/production/spree/images/attachments/000/004/506/portrait_normal/protip-black.jpg?1571687537'" onmouseout="this.src='https://static-assets.glossier.com/production/spree/images/attachments/000/004/517/portrait_normal/1.jpg?1579022338'" src="https://static-assets.glossier.com/production/spree/images/attachments/000/004/517/portrait_normal/1.jpg?1579022338" id="row-pic">
<p1>Pro Tip</p1>
<p>brush point liquid eyeliner</p>
</div>
<div class="column">
<img onmouseover="this.src='https://static-assets.glossier.com/production/spree/images/attachments/000/003/883/portrait_normal/browflick_hover.jpg?1559149981=&w=600&q=80'" onmouseout="this.src='https://static-assets.glossier.com/production/spree/images/attachments/000/003/872/portrait_normal/01_Shopgrid_Brow_Flick.jpg?1565206094'"src="https://static-assets.glossier.com/production/spree/images/attachments/000/003/872/portrait_normal/01_Shopgrid_Brow_Flick.jpg?1565206094" id="row-pic">
<p1>Brow Flick</p1>
<p>microfine detailing pen</p>
</div>
<center><div class="wrapper">
<header style="margin: 0 auto;">
<div class="wrapper-text-box">
<h style="font-size:1.3em;padding-top:10%;">First skin</h>
<p>Our skincare essentials are designed to make you look and feel your glowy, dewy best before you even think about makeup.</p>
</div>
</header>
</div>
</center>
<div class="row">
<div class="column">
<img src="https://images-na.ssl-images-amazon.com/images/I/218YircFpgL.jpg" id="row-pic">
<p1>Solution</p1>
<p>exfoliating skin perfector</p>
</div>
<div class="column">
<img src="https://i.pinimg.com/originals/17/b3/bf/17b3bf200e95b5a13f3d1a6657762a79.png" id="row-pic">
<p1>Balm Dot Com Trio</p1>
<p>choose three balms</p>
</div>
<div class="column">
<img src="https://static-assets.glossier.com/production/spree/images/attachments/000/004/423/portrait_normal/futuredew-soloproduct_682_leftedge_copy.jpg?1569419908=&w=600&q=80" id="row-pic">
<p1>Futuredew</p1>
<p>oil serum hybrid</p>
</div>
<div class="column">
<img src="https://s1.r29static.com/bin/product/e28/x,85/2236888/image.webp" id="row-pic">
<p1>Milky Jelly Cleanser</p1>
<p>conditioning face wash</p>
</div>
<div class="column">
<img src="https://www.getthegloss.com/media/image/glossier-bubblewrap.jpg" id="row-pic">
<p1>Bubblewrap</p1>
<p>eye+lip plumping cream</p>
</div>
<div class="column">
<img src="https://static-assets.glossier.com/production/spree/images/attachments/000/003/377/portrait_normal/priming_moisturizer.jpg?1551586998" id="row-pic">
<p1>Priming Moisturizer</p1>
<p>buildable hydrating creme</p>
</div>
<div class="column">
<img src="https://images-na.ssl-images-amazon.com/images/I/41womR%2BecGL._SL1006_.jpg" id="row-pic">
<p1>Super Bounce</p1>
<p>acid face serum</p>
</div>
<div class="column">
<img src="https://images-na.ssl-images-amazon.com/images/I/31QePlAGRPL.jpg" id="row-pic">
<p1>Invisible Shield</p1>
<p>sunscreen spf 30</p>
</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;
}
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;
}
.option>div {
  max-width: 150px;
 height: inherit;
 min-width: 40px;
 margin: 1%;
 justify-content: center;
 padding: 10px;
 font-size: 0.8em;
 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%;
}
.container {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
}
.section {
 border: 1px solid;
}
@media (max-width: 768px) {
 .container {
 grid-template-columns: none;
}
 .text-box {
 padding-bottom: 10vh;
}
 #grid-pic {
 max-height: 580px;
}
}
#grid-pic {
 height: 90vh;
 width: 100%;
 transition: .3s ease;
}
.text-box { 
 height: auto;
 width: 90%;
 margin: 0 auto;
 padding-top: 15vh;
}
.shopnow-button {
 height: 70px;
 width: 270px;
 background-color: #121212;
 color: white;
 font-size: 1em;
 font-weight: bold; 
 border: none; 
border-radius: 5px;
 margin: 0 auto; 
 position: relative;
 display: block;
 transition: all .3s ease;
}
.shopnow-button:hover {
 background-color: rgba(0,0,0,0.7);
 cursor: pointer;
}
.wrapper {
 padding: 5px;
 max-width: 960px;
 width: 95%;
 margin: 20px auto;
}
header {
 padding: 0 15px;
}
.wrapper-text-box {
 width: 90%;
 margin: 10px;
 display: inline-block;
} 
.column {
 float: left;
 width: 20%;
 height: 460px; 
 margin: 33px;
 justify-content: center;
 text-align: center;
 text-align: left;
 font-size: 0.8em;
 background-color: #FAFAFA;
}

.row:after {
 content: "";
 clear: both;
 display: table;
}
@media screen and (max-width: 600px) {
 .column{
 width:45%;
 height: 330px;
 margin-bottom: 5px; 
 margin-left: 15px;
 margin-right: 0;
}
}
#row-pic {
 height: 80%;
 width: 100%;
}
/* this is a spinoff of the orginal website https://www.glossier.com/ */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.