Notebook Pro
Notebook Pro :- The above Image is Completely made by using Pure Css. the Pure Css is not a Rocket Science. It is as simple that like eating a Ice-cream. For more Detail go ---> Home
don't Worry it is Fully Responsive With the help full of few line of code so why waasting time Let's start...!!!!
<div class="box">
<div class="notebook">
<div class="lin-1"></div>
<div class="lin-2"></div>
<div class="lin-3"></div>
<div class="lin-4"></div>
<div class="lin-5"></div>
<div class="flag-bar"></div>
<div class="flag">
<div class="flag-triangle"></div>
</div>
<div class="pencil-tip"></div>
</div>
<div class="mountain-1">
<div class="inner-mountain-top-1"></div>
</div>
<div class="mountain-2">
<div class="inner-mountain-top-2"></div>
</div>
<div class="pencil">
<div class="pencil-ring">
</div>
</div>
.box{
position: relative;
margin: auto;
display:block;
margin-top:50px;
width: 600px;
height:460px;
background:#41dbbf;
border-radius:0.4%; }
Note:- please keep in mind all the inner-classes/ Sub-classes of </div class="box"> contains the Propery position:absolute;
.notebook{
height:80%;
width:45%;
top:10%;
left:27.5%;
background: white; }
.lin-1{
height:1.4%;
width: 70%;
left: 13%;
top: 13%;
border-radius:2px;
background:#a2a89b; }
Similarly you can do for Classes lin-2 , lin3, lin-4, lin-5 by Increasing top property or as per your requirment.
.mountain-1{
height: 10%;
width: 9%;
bottom:14%;
left:42%;
background: #2db79e;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.inner-mountain-top-1{
height: 35%;
width: 100%;
background: #5fdec7;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.mountain-2{
position: absolute;
height: 13%;
width: 10%;
bottom:14%;
right:43%;
background: #2db79e;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.inner-mountain-top-2{
height: 40%;
width: 100%;
background: #60ead1;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.flag {
height:9%;
width: 19%;
background:RED;
bottom: 26%;
left:53.8%; }
.flag-triangle{
height:100%;
width:100%;
left:38%;
background: white;
transform: rotate(-90deg);
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.flag-bar{
height:6%;
width: 1%;
background: black;
bottom:21%;
left:54%; }
.pencil{
width: 3.5%;
height:60%;
background: #2e675d;
transform: rotate(30deg);
right: 25%;
top: 20%; }
.pencil-ring{
width: 100%;
height: 5%;
background: whte;
}
.pencil-tip{
height:10%;
width: 9%;
background: #FAD35C;
right: 23%;
bottom: 8.5%;
transform: rotate(-150deg);
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
/* for the Responsive screen Size */
@media screen and (max-width:599px){
.box{
width:426px;
height:330px; }
}
@media screen and (max-width:425px){ .box{
margin-top: 13%;
width:250px;
height:200px }
.pencil-tip{ right:23.5%; }
}
the above Complete code is written and tested the Chrome Browser So there may be very less or 2% chances is will not run in mozilla or other browser. it Support all mobile browsers
all © rights reserved :2018