<div class="conatiner">
<div class="wrap">
<div class="box one">
<div class="date">
<h4>6/29/18</h4>
</div>
<h1>CREATIVITY</h1>
<div class="poster p1">
<h4>Z</h4>
</div>
</div>
<div class="box two">
<div class="date">
<h4>6/29/18</h4>
</div>
<H1>DISCOVER</H1>
<div class="poster p2">
<h4>B</h4>
</div>
</div>
<div class="box three">
<div class="date">
<h4>6/29/18</h4>
</div>
<h1>IMAGINE</h1>
<div class="poster p3">
<h4>G</h4>
</div>
</div>
<div class="box five">
<div class="date">
<h4>6/29/18</h4>
</div>
<h1>SPIRIT</h1>
<div class="poster p4">
<h4>M</h4>
</div>
</div>
<div class="box six">
<div class="date">
<h4>6/29/18</h4>
</div>
<h1>DESIGN</h1>
<div class="poster p5">
<h4>N</h4>
</div>
</div>
<div class="box seven">
<div class="date">
<h4>6/29/18</h4>
</div>
<h1>CONQUER</h1>
<div class="poster p6">
<h4>K</h4>
</div>
</div>
<div class="box eight">
<div class="date">
<h4>6/29/18</h4>
</div>
<h1>SUCCESS</h1>
<div class="poster p7">
<h4>Q</h4>
</div>
</div>
<div class="box nine">
<div class="date">
<h4>6/29/18</h4>
</div>
<h1>UNFORGETTABLE</h1>
<div class="poster p8">
<h4>L</h4>
</div>
</div>
<div class="box ten">
<div class="date">
<h4>6/29/18</h4>
</div>
<h1>AMAZING</h1>
<div class="poster p9">
<h4>J</h4>
</div>
</div>
<div class="box eleven">
<div class="date">
<h4>6/29/18</h4>
</div>
<h1>LOVE</h1>
<div class="poster p10">
<h4>H</h4>
</div>
</div>
<div class="box tlv">
<div class="date">
<h4>6/29/18</h4>
</div>
<h1>LEARN</h1>
<div class="poster p11">
<h4>W</h4>
</div>
</div>
<div class="box thirteen">
<div class="date">
<h4>6/29/18</h4>
</div>
<h1>YEP</h1>
<div class="poster p12">
<h4>S</h4>
</div>
</div>
<div class="box ftn">
<div class="date">
<h4>6/29/18</h4>
</div>
<h1>SMILE</h1>
<div class="poster p13">
<h4>E</h4>
</div>
</div>
<div class="box fith">
<div class="date">
<h4>6/29/18</h4>
</div>
<h1>CODE</h1>
<div class="poster p14">
<h4>R</h4>
</div>
</div>
<div class="box sith">
<div class="date">
<h4>6/29/18</h4>
</div>
<h1>CARDS</h1>
<div class="poster p15">
<h4>U</h4>
</div>
</div>
<div class="box sevth">
<div class="date">
<h4>6/29/18</h4>
</div>
<h1>FLEXBOX</h1>
<div class="poster p16">
<h4>A</h4>
</div>
</div>
</div>
</div>
<!-- FOLLOW -->
<a class="Follow" href="https://codepen.io/ZaynAlaoudi/" target="blank_"></a>
body {
font-family: 'Roboto', sans-serif;
background: #fff;
}
.conatiner {
width: 100%;
height: 500px;
}
.wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.box {
margin: 10px;
width: 300px;
height: 490px;
text-align: center;
border-radius: 3px;
-webkit-transition: 200ms ease-in-out;
-o-transition: 200ms ease-in-out;
transition: 200ms ease-in-out;
-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.3);
box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.box:hover {
margin-bottom: -10px;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.7);
box-shadow: 0 0 5px rgba(0,0,0,0.7);
}
.box h1 {
color: #fff;
padding: 30px;
margin-top: 100px;
text-align: center;
font-weight: 100;
font-size: 25px;
background: rgba(0,0,0,0.8);
-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.7);
box-shadow: 0 0 30px rgba(0,0,0,0.8);
}
.date h4 {
color: #fff;
font-weight: 300;
text-align: center;
letter-spacing: 3px;
text-shadow: 0 0 3px rgba(0,0,0,0.9);
}
.poster {
width: 130px;
height:130px;
margin: 120px auto;
position: relative;
border-radius: 100px;
}
.poster h4 {
top: 16px;
color: #fff;
position: relative;
font-size: 80px;
text-align: center;
font-weight: 100;
}
.one {
background: url('https://source.unsplash.com/900x920');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.two {
background: url('https://source.unsplash.com/820x900');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.three {
background: url('https://source.unsplash.com/500x500');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.five {
background: url('https://source.unsplash.com/550x520');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.six {
background: url('https://source.unsplash.com/660x630');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.seven {
background: url('https://source.unsplash.com/700x770');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.eight {
background: url('https://source.unsplash.com/880x820');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.nine {
background: url('https://source.unsplash.com/898x820');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.ten {
background: url('https://source.unsplash.com/8998x920');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.eleven {
background: url('https://source.unsplash.com/898x960');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.tlv {
background: url('https://source.unsplash.com/999x888');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.thirteen {
background: url('https://source.unsplash.com/1000x777');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.ftn {
background: url('https://source.unsplash.com/2000x777');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.fith {
background: url('https://source.unsplash.com/2000x1000');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.sith {
background: url('https://source.unsplash.com/3000x1000');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.sevth {
background: url('https://source.unsplash.com/9000x9000');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* POSTER*/
.p1 {
background: #2b5876; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #4e4376, #2b5876); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#4e4376), to(#2b5876));
background: -webkit-linear-gradient(left, #4e4376, #2b5876);
background: -o-linear-gradient(left, #4e4376, #2b5876);
background: linear-gradient(to right, #4e4376, #2b5876); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px darkblue;
box-shadow: 0 0 20px darkblue;
}
.p2 {
background: #f857a6; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ff5858, #f857a6); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#ff5858), to(#f857a6));
background: -webkit-linear-gradient(left, #ff5858, #f857a6);
background: -o-linear-gradient(left, #ff5858, #f857a6);
background: linear-gradient(to right, #ff5858, #f857a6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px #fa3380;
box-shadow: 0 0 20px #fa3380;
}
.p3 {
background: #4776E6; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #8E54E9, #4776E6); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#8E54E9), to(#4776E6));
background: -webkit-linear-gradient(left, #8E54E9, #4776E6);
background: -o-linear-gradient(left, #8E54E9, #4776E6);
background: linear-gradient(to right, #8E54E9, #4776E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px lightblue;
box-shadow: 0 0 20px lightblue;
}
.p4 {
background: #1FA2FF; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #A6FFCB, #12D8FA, #1FA2FF); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#A6FFCB), color-stop(#12D8FA), to(#1FA2FF));
background: -webkit-linear-gradient(left, #A6FFCB, #12D8FA, #1FA2FF);
background: -o-linear-gradient(left, #A6FFCB, #12D8FA, #1FA2FF);
background: linear-gradient(to right, #A6FFCB, #12D8FA, #1FA2FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px skyblue;
box-shadow: 0 0 20px skyblue;
}
.p5 {
background: #AA076B; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #61045F, #AA076B); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#61045F), to(#AA076B));
background: -webkit-linear-gradient(left, #61045F, #AA076B);
background: -o-linear-gradient(left, #61045F, #AA076B);
background: linear-gradient(to right, #61045F, #AA076B); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px purple;
box-shadow: 0 0 20px purple;
}
.p6 {
background: #DA22FF; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #9733EE, #DA22FF); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#9733EE), to(#DA22FF));
background: -webkit-linear-gradient(left, #9733EE, #DA22FF);
background: -o-linear-gradient(left, #9733EE, #DA22FF);
background: linear-gradient(to right, #9733EE, #DA22FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px violet;
box-shadow: 0 0 20px violet;
}
.p7 {
background: #02AAB0; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #00CDAC, #02AAB0); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#00CDAC), to(#02AAB0));
background: -webkit-linear-gradient(left, #00CDAC, #02AAB0);
background: -o-linear-gradient(left, #00CDAC, #02AAB0);
background: linear-gradient(to right, #00CDAC, #02AAB0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px lightgreen;
box-shadow: 0 0 20px lightgreen;
}
.p8 {
background: #5433FF; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #A5FECB, #20BDFF, #5433FF); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#A5FECB), color-stop(#20BDFF), to(#5433FF));
background: -webkit-linear-gradient(left, #A5FECB, #20BDFF, #5433FF);
background: -o-linear-gradient(left, #A5FECB, #20BDFF, #5433FF);
background: linear-gradient(to right, #A5FECB, #20BDFF, #5433FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px lightblue;
box-shadow: 0 0 20px lightblue;
}
.p9 {
background: #2b5876; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #fa3, #fa3380); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#fa3), to(#fa3380));
background: -webkit-linear-gradient(left, #fa3, #fa3380);
background: -o-linear-gradient(left, #fa3, #fa3380);
background: linear-gradient(to right, #fa3, #fa3380); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px #fa3380;
box-shadow: 0 0 20px #fa3380;
}
.p10 {
background: #2b5876; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, deepskyblue, lightblue); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(deepskyblue), to(lightblue));
background: -webkit-linear-gradient(left, deepskyblue, lightblue);
background: -o-linear-gradient(left, deepskyblue, lightblue);
background: linear-gradient(to right, deepskyblue, lightblue); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px darkblue;
box-shadow: 0 0 20px darkblue;
}
.p11 {
background: #F2994A; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #F2C94C, #F2994A); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#F2C94C), to(#F2994A));
background: -webkit-linear-gradient(left, #F2C94C, #F2994A);
background: -o-linear-gradient(left, #F2C94C, #F2994A);
background: linear-gradient(to right, #F2C94C, #F2994A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px lightyellow;
box-shadow: 0 0 20px lightyellow;
}
.p12 {
background: #A770EF; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FDB99B, #CF8BF3, #A770EF); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#FDB99B), color-stop(#CF8BF3), to(#A770EF));
background: -webkit-linear-gradient(left, #FDB99B, #CF8BF3, #A770EF);
background: -o-linear-gradient(left, #FDB99B, #CF8BF3, #A770EF);
background: linear-gradient(to right, #FDB99B, #CF8BF3, #A770EF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px purple;
box-shadow: 0 0 20px purple;
}
.p13 {
background: #f4c4f3; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #fc67fa, #f4c4f3); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#fc67fa), to(#f4c4f3));
background: -webkit-linear-gradient(left, #fc67fa, #f4c4f3);
background: -o-linear-gradient(left, #fc67fa, #f4c4f3);
background: linear-gradient(to right, #fc67fa, #f4c4f3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px pink;
box-shadow: 0 0 20px pink;
}
.p14 {
background: #00c3ff; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffff1c, #00c3ff); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#ffff1c), to(#00c3ff));
background: -webkit-linear-gradient(left, #ffff1c, #00c3ff);
background: -o-linear-gradient(left, #ffff1c, #00c3ff);
background: linear-gradient(to right, #ffff1c, #00c3ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px olive;
box-shadow: 0 0 20px olive;
}
.p15 {
background: #5614B0; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #DBD65C, #5614B0); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#DBD65C), to(#5614B0));
background: -webkit-linear-gradient(left, #DBD65C, #5614B0);
background: -o-linear-gradient(left, #DBD65C, #5614B0);
background: linear-gradient(to right, #DBD65C, #5614B0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px olive;
box-shadow: 0 0 20px olive;
}
.p16 {
background: #fc00ff; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #00dbde, #fc00ff); /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#00dbde), to(#fc00ff));
background: -webkit-linear-gradient(left, #00dbde, #fc00ff);
background: -o-linear-gradient(left, #00dbde, #fc00ff);
background: linear-gradient(to right, #00dbde, #fc00ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0 0 20px olive;
box-shadow: 0 0 20px olive;
}
/* FOLLOW*/
.Follow { background:url("https://pbs.twimg.com/profile_images/959092900708544512/v4Db9QRv_bigger.jpg")no-repeat center / contain;
width: 50px;
height: 50px;
bottom: 9px;
right: 20px;
display:block;
position:fixed;
border-radius:50%;
z-index:999;
animation: rotation 10s infinite linear;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.