Skip to content

Instantly share code, notes, and snippets.

@itselfcg

itselfcg/flawless-box.markdown

Created February 23, 2021 02:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save itselfcg/4813d735b1678848f9c9f7403c067459 to your computer and use it in GitHub Desktop.
Save itselfcg/4813d735b1678848f9c9f7403c067459 to your computer and use it in GitHub Desktop.
Download ZIP
Flawless Box
Raw
index.html
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&family=Vidaloka?family=Barlow:wght@300&display=swap" rel="stylesheet">
<header id="header">
<nav id="nav-bar" class="navbar fixed-top navbar-expand-sm navbar-light bg-light">
<img id="header-img" src="https://www.dropbox.com/s/b5j0i6ismk1t3fb/logo.png?raw=1" alt="logo">
<div id="intro">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link nav-label" href="#new">NEW</a>
</li>
<li class="nav-item">
<a class="nav-link nav-label" href="#best">BEST</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#brand">COMING SOON</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://codepen.io/itselfcg/full/KKzKzQm" target="_blank">WIKI</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<a onclick="backToTop()" id="top-btn">
<img src="https://img.icons8.com/android/24/000000/double-up.png"/></a>
<section id="home" >
<div id="headerBannerCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://www.dropbox.com/s/d6cx2jpe26n6enk/monthbrand.png?raw=1" alt="Month's brand banner">
</div>
<div class="carousel-item ">
<img class="d-block w-100" src="https://www.dropbox.com/s/ea5w0e0d88n6ffj/summercollection.png?raw=1" alt="Summer collection banner">
</div>
</div>
<a class="carousel-control-prev" href="#headerBannerCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#headerBannerCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<div class="container">
<section id="intro" class="center">
<div class="sub m-padding ">
<h2>START TO LOVE YOUR SKIN </h2>
<h3>love yourself, take care of your skin. </h3>
</div>
</section>
<section id="new" class="center">
<div class="container m-padding">
<h2>NEW</h2>
<!--ROW 1 BEGIN-->
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="https://www.dropbox.com/s/8aabh0tt2cl7t6p/1.jpg?raw=1" alt="Lights" style="width:100%">
<div class="caption">
<div class="row">
<div class="col-md-10">
FOCUSPOT™ BLEMISH MICRO TIP™ PATCH WITH VITAMIN B3
</div>
<div class="col-md-2">
<b> $22</b>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="https://www.dropbox.com/s/37zan7k2h7ztquh/7.jpg?raw=1" alt="Nature" style="width:100%">
<div class="caption">
<div class="row">
<div class="col-md-10">
CICAPAIR™ TIGER GRASS COLOR CORRECTING TREATMENT SPF30
</div>
<div class="col-md-2">
<b> $12</b>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="https://www.dropbox.com/s/6v5n404kk7gzj85/8.jpg?raw=1" alt="Fjords" style="width:100%">
<div class="caption">
<div class="row">
<div class="col-md-10">
SENSITIVE SKIN SAVER SET - CICAPAIR™
</div>
<div class="col-md-2">
<b> $8</b>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="https://www.dropbox.com/s/56jsm4f6ri343br/2.jpg?raw=1" alt="Fjords" style="width:100%">
<div class="caption">
<div class="row">
<div class="col-md-10">
TEATREEMENT™ MISSION CLEAR! KIT
</div>
<div class="col-md-2">
<b> $17</b>
</div>
</div>
</div>
</div>
</div>
</div>
<!--ROW 1 BEGIN-->
</div>
</section>
<section id="best" class="center">
<div class=" m-padding">
<h2>BEST</h2>
<div class="container">
<div id="bestProductsCarousel" class="carousel carousel-multi-item" data-ride="carousel">
<div class="carousel-inner" role="listbox" style="overflow: visible;">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-md-3" >
<div class="thumbnail">
<img src="https://www.dropbox.com/s/crhsxo7o3rqnpmz/3.jpg?raw=1" alt="Lights" style="width:100%">
<div class="caption">
<div class="row">
<div class="col-md-10">
SHAKE & SHOT™ RUBBER SOOTHING MASK
</div>
<div class="col-md-2">
<b> $10</b>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="https://www.dropbox.com/s/7l42cbe0f2y07sg/9.jpg?raw=1" alt="Nature" style="width:100%">
<div class="caption">
<div class="row">
<div class="col-md-10">
<br> ETUDE HOUSE My Beauty Tool Jellyfish Silicon Brush
</div>
<div class="col-md-2">
<b> $8</b>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="https://www.dropbox.com/s/u0fbxg46m3lvrsi/10.jpg?raw=1" alt="Fjords" style="width:100%">
<div class="caption">
<div class="row">
<div class="col-md-10">
<br>
HADALABO GOKUJUN Hyaluronic Lotion 170ml
</div>
<div class="col-md-2">
<b> $12</b>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="https://www.dropbox.com/s/2tzwnbz4fanf6ir/4.jpg?raw=1" alt="Fjords" style="width:100%">
<div class="caption">
<div class="row">
<div class="col-md-10">
GOOD BYE RED RITUALS KIT
</div>
<div class="col-md-2">
<b> $10</b>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/.First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-3" >
<div class="thumbnail">
<img src="https://www.dropbox.com/s/f6vzsmvhpufu24q/11.jpg?raw=1" alt="Lights" style="width:100%">
<div class="caption">
<div class="row">
<div class="col-md-10">
NATURE REPUBLIC Aloe Vera 92% Soothing Gel 300ml
</div>
<div class="col-md-2">
<b> $6</b>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="https://www.dropbox.com/s/spbuu51i133s0la/6.jpg?raw=1" alt="Nature" style="width:100%">
<div class="caption">
<div class="row">
<div class="col-md-10">
BB DIS-A-PORE BROAD SPECTRUM SPF 50+
</div>
<div class="col-md-2">
<b> $20</b>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="https://www.dropbox.com/s/y1alccyn8t47diq/5.jpg?raw=1" alt="Fjords" style="width:100%">
<div class="caption">
<div class="row">
<div class="col-md-10">
CRYO RUBBER™ WITH SOOTHING ALLANTOIN
</div>
<div class="col-md-2">
<b> $10</b>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="https://www.dropbox.com/s/uotwy8tg00c1ns5/12.jpg?raw=1" alt="Fjords" style="width:100%">
<div class="caption">
<div class="row">
<div class="col-md-10">
MISSHA Line Friends Edition Perfect Cover BB Cream 50ml SPF42 PA+++
</div>
<div class="col-md-2">
<b> $12</b>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/.Second slide-->
</div>
<!--/.Slides-->
<a class="carousel-control-prev" href="#bestProductsCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#bestProductsCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</section>
<section id="brand" class="center">
<div class="sub m-padding ">
<h2>NEXT MONTH BRAND</h2>
<img class="img-banner" id="nm-brand" src="https://www.dropbox.com/s/qdsazwsubcus6og/pixilogo.png?raw=1" alt="Newxt month brand" />
<div class="sm-padding ">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/ciDEVZjaVoM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</section>
</div>
</main>
<footer class="page-footer font-small blue">
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-4">
<img id="logo-footer" src="https://www.dropbox.com/s/b5j0i6ismk1t3fb/logo.png?raw=1"/>
<br><br>
<div class="row">
<div class="col-md-6">
<h5 class="text-uppercase">Resources</h5>
<ul class="list-unstyled">
<li>
<a href="#!">About us</a>
</li>
<li>
<a href="#!">FAQ</a>
</li>
<li>
<a href="#!">Copyright</a>
</li>
</ul>
</div>
<div class="col-md-6">
<h5 class="text-uppercase">Connect</h5>
<ul class="list-unstyled">
<li>
<a href="#!"><i class="fa fa-codepen" aria-hidden="true"></i>Code pen</a>
</li>
<li>
<a href="#!"><i class="fa fa-twitter" aria-hidden="true"></i>Twitter</a>
</li>
<li>
<a href="#!"><i class="fa fa-instagram" aria-hidden="true"></i>Instagram</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class=" center">
<div class=" bottom">
<img src="https://img.icons8.com/color/48/000000/mastercard.png"/>
<img src="https://img.icons8.com/color/48/000000/visa.png"/>
<img src="https://img.icons8.com/color/48/000000/amex.png"/>
<img src="https://img.icons8.com/color/48/000000/paypal.png"/>
</div>
</div>
</div>
<div class="col-md-4">
<section id="signup" class="float-right">
<div class="coupon-container">
<h4>EXTRA 10% OFF CODE</h4>
<h6>Sign up for deals, freebies and news about our latest goodies.</h6>
<br>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<div class="email-container">
<div class="input-group mb-2">
<input class="form-control" name="email" id="email" type="email" placeholder="Enter email" required>
<div class="input-group-append">
<input id="submit" type="submit" class="btn input-group-text" value="SIGN UP"/>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://codepen.io/itselfcg">Itzel Contreras</a>
</div>
</footer>
Raw
script.babel
topButton = document.getElementById("top-btn");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
topButton.style.display = "block";
} else {
topButton.style.display = "none";
}
}
function backToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
Raw
scripts
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
Raw
style.css
@import "https://fonts.googleapis.com/css?family=Lato:400,700";
body{
padding-top: 50px;
}
.coupon-container{
width:90%;
background:white;
padding:30px;
border-color:#cae7b9;
border-style: solid;
border-radius: 25px;
border-width: thin;
}
.center{
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
justify-content: center;
align-items: center;
}
#submit{
background-color:#eb9486;
color:white;
}
.img-banner{
width:100%;
}
.sm-padding{
padding:25px;
}
.m-padding{
padding-top: 100px;
}
.l-padding{
padding:100px;
}
.sub{
text-align:center;
}
.caption{
font-size:12px;
}
#nm-brand{
height:150px;
width:auto;
}
footer{
background-color:#1dd3bd;
padding-top:35px;
font-family: 'Barlow', sans-serif;
letter-spacing: 3px;
font-size:13px;
}
footer a{
color:#393e46;
}
footer a:hover{
color:#758184;
text-decoration:none;
}
.hide{
display: none;
}
h2{
font-size:40px;
font-family: 'Raleway', sans-serif;
letter-spacing: 3px;
}
h3{
padding:-10px!important;
font-size:25px;
font-family: 'Vidaloka', serif;
letter-spacing: 3px;
}
h6{
font-size:15px;
font-family: 'Raleway', sans-serif;
letter-spacing: 0px;
}
@media only screen and (max-width: 1000px) {
h2{
font-size:30px;
}
h3{
font-size:15px;
}
#header-img{
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
}
@media only screen and (max-width: 770px) {
h2{
font-size:20px;
}
h3{
font-size:10px;
}
}
#header-img{
padding-left:30px;
width:300px;
height:auto;
}
#logo-footer{
width:100%;
height:auto;
}
.bottom {
position:absolute;
bottom:0;
}
nav img{
padding-right:20px;
}
.nav-link{
font-size:18px;
}
.nav-label{
font-size:20px;
font-weight:bold;
}
nav a:hover{
text-decoration:underline!important;
}
.nav ul {
display: inline-block;
vertical-align: middle;
}
#bestProductsCarousel .carousel-control-next-icon:after
{
content: '>';
font-size: 20px;
color: black;
}
#bestProductsCarousel .carousel-control-prev-icon:after {
content: '<';
font-size: 20px;
color: black;
}
#bestProductsCarousel .carousel-control-prev-icon:hover{
color: black!important;
}
#bestProductsCarousel .carousel-control-prev-icon,#bestProductsCarousel
.carousel-control-next-icon {
height: 35px;
width: 35px;
outline: black;
background-size: 50%, 50%;
border-radius: 50%;
border: 1px solid black;
background-image: none;
}
#bestProductsCarousel .carousel-control-prev {
margin-left: -10%;
}
#bestProductsCarousel .carousel-control-next {
margin-right: -10%;
}
#top-btn {
display: none;
position: fixed;
right:1%;
top:95%;
z-index: 99;
cursor: pointer;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment