A Pen by benjamincodes on CodePen.
Created
January 14, 2020 00:42
-
-
Save rightouscoder/31f932b8d1f955b6dade3944e08c1861 to your computer and use it in GitHub Desktop.
CVS Mobile Landing Screen Clone
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="splash"> | |
<img class="logo" src="https://i.ibb.co/G5jyXN9/logo.png" alt="" /> | |
</div> | |
<div class="content"> | |
<header class="app-header"> | |
<div class="container"> | |
<img class="logo" src="https://i.ibb.co/G5jyXN9/logo.png" alt="" /> | |
<input class="search" type="text" placeholder="Search..." /> | |
</div> | |
</header> | |
<div class="subheader"> | |
<div> | |
<p>Now delivering Rx + more</p> | |
<p>Find out now <i class="fa fa-chevron-right"></i></p> | |
</div> | |
<img src="https://i.ibb.co/PxGygfW/delivery.png" alt="" /> | |
</div> | |
<div class="grid container"> | |
<div class="item"> | |
<h4>Pharmacy</h4> | |
<p class="desc">2Rxs ready for refill</p> | |
<img src="https://i.ibb.co/BKgzCc5/medicine.png" alt="" /> | |
</div> | |
<div class="item"> | |
<h4>Deals & Rewards</h4> | |
<p class="desc">2 TraversyCare offers expiring</p> | |
<img src="https://i.ibb.co/XY6WTq6/medal.png" alt="" /> | |
</div> | |
<div class="item"> | |
<h4>SecondClinic</h4> | |
<p class="desc"></p> | |
<img src="https://i.ibb.co/F6YbmHw/nurse.png" alt="" /> | |
</div> | |
<div class="item"> | |
<h4>Shop</h4> | |
<p class="desc">Free shipping on orders $25+</p> | |
<img src="https://i.ibb.co/30kN9wL/shop.png" alt="" /> | |
</div> | |
<div class="item"> | |
<h4>Photo</h4> | |
<p class="desc"></p> | |
<img src="https://i.ibb.co/GszTNWF/photo.png" alt="" /> | |
</div> | |
<div class="item"> | |
<h4>Weekly Ad</h4> | |
<p class="desc">View your weekly ad</p> | |
<img src="https://i.ibb.co/nDryZ8R/newspaper.png" alt="" /> | |
</div> | |
</div> | |
</div> | |
<footer class="app-footer"> | |
<ul> | |
<li> | |
<i class="fa fa-heart"></i> | |
Home | |
</li> | |
<li> | |
<i class="fa fa-barcode"></i> | |
Show Card | |
</li> | |
<li> | |
<i class="fa fa-user"></i> | |
Account | |
</li> | |
<li> | |
<i class="fa fa-map-marker"></i> | |
Find Store | |
</li> | |
</ul> | |
</footer> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
setTimeout(() => { | |
document.getElementById('splash').classList.toggle('fade'); | |
}, 2000); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--primary-color: #cc0000; | |
--secondary-color: #7c0000; | |
} | |
html, | |
body { | |
/* https://css-tricks.com/couple-takes-sticky-footer/ */ | |
height: 100%; | |
} | |
* { | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
font-family: 'Roboto', sans-serif; | |
display: flex; | |
flex-direction: column; | |
} | |
/* For sticky footer - grow to fill the space */ | |
.content { | |
flex: 1 0 auto; | |
} | |
.container { | |
width: 90%; | |
margin: 0 auto; | |
overflow: none; | |
padding: 10px; | |
} | |
.app-header { | |
background: var(--primary-color); | |
box-shadow: 3px 3px 10px #888888; | |
} | |
.app-header .container { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
/* justify-content: space-between; */ | |
justify-content: center; | |
padding: 15px 10px; | |
} | |
.app-header .logo { | |
width: 170px; | |
margin-bottom: 1rem; | |
} | |
.app-header input[type='text'] { | |
padding: 7px; | |
border: #777; | |
width: 300px; | |
border-radius: 3px; | |
} | |
.subheader { | |
background: var(--secondary-color); | |
color: #fff; | |
box-shadow: 3px 3px 10px #888888; | |
font-size: 14px; | |
padding: 10px; | |
width: 90%; | |
margin: 0 auto 1rem; | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
} | |
.subheader p { | |
margin: 4px; | |
} | |
.subheader img { | |
width: 40px; | |
} | |
.grid { | |
display: grid; | |
grid-template-columns: repeat(2, 1fr); | |
grid-gap: 10px; | |
} | |
.grid .item { | |
display: flex; | |
flex-direction: column; | |
border: 1px #ccc solid; | |
padding: 10px; | |
box-shadow: 1px 1px 2px #ccc; | |
} | |
.grid .item h4 { | |
margin-bottom: 5px; | |
} | |
.grid .item p { | |
font-size: 14px; | |
color: var(--secondary-color); | |
font-weight: bold; | |
margin-bottom: 20px; | |
} | |
.grid .item img { | |
width: 30px; | |
text-align: right; | |
display: block; | |
align-self: flex-end; | |
} | |
.app-footer { | |
flex-shrink: 0; | |
background: #f4f4f4; | |
color: #444; | |
padding: 10px; | |
font-size: 14px; | |
margin-top: 10px; | |
} | |
.app-footer ul { | |
display: flex; | |
align-items: center; | |
justify-content: space-around; | |
} | |
.app-footer ul li { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
.app-footer ul li i { | |
font-size: 22px; | |
} | |
/* Splash */ | |
#splash { | |
position: absolute; | |
top: 0; | |
left: 0; | |
background: var(--primary-color); | |
height: 100vh; | |
width: 100%; | |
z-index: 2; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
opacity: 1; | |
transition: opacity 1s; | |
} | |
#splash img { | |
width: 300px; | |
} | |
#splash.fade { | |
opacity: 0; | |
} | |
/* Desktop */ | |
@media (min-width: 768px) { | |
.grid { | |
grid-template-columns: repeat(3, 1fr); | |
} | |
.grid .item img { | |
width: 60px; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> | |
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment