CSS Test

In this example below you will see how to do a CSS Test with some HTML / CSS and Javascript

Test

Thumbnail
This awesome code was written by D33, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright D33 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Test</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Breaking Bad</title>
    <link rel="stylesheet" href="bbvr.css">
</head>
<body>
    <div class="cactus">
        <div class="sun"></div>        
        <div class="circles" >
            <div class="cac1"></div>
            <div class="circ"></div>
            <div class="circ1"></div>
            <div class="circ2"></div> 
            <div class="circ3"></div>
            <div class="circ4"></div>
            <div class="circ5"></div>
            <div class="circ6"></div>
            <div class="circ7"></div>
            <div class="circ8"></div>
            <div class="circ9"></div>
            <div class="ground"></div>
            <div class="ground1"></div>
            <div class="ground2"></div>
        </div>        
    </div>
</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/D33/css-test-HptnL */
body{
    background-color:#FFEC9C;
}

.cactus{
}

.sun {
    width:100px;
    height:100px;
    background-color:#FFFC7F;
    float:left;
    position:absolute;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;

}

.circles{
    padding-top:25%;
    padding-left:50%
}

.cac1{
    width:50px;
    height:200px;
    margin-left:-25px;
    float:left;
    position:absolute;
    z-index:200;
    background-color:#028912;
}

.circ{
    width:50px;
    height:50px;
    margin-top:-26px;
    margin-left:-25px;
    background-color:#028912;
    float:left;
    position:absolute;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

.circ1{
    margin-left:50px;
    margin-top:60px;
    width:25px;
    height:25px;
    background-color:#028912;
    float:left;
    position:absolute;
    z-index:10;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

.circ2{
    width:100px;
    height:100px;
    margin-top:20px;
    margin-left:-25px;
    background-color:#028912;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

.circ4{
    width:100px;
    height:60px;
    margin-top:-78px;
    background-color:#FFEC9C;
}

.circ3{
    width:40px;
    height:40px;
    margin-top:-70px;
    margin-left:10px;
    background-color:#FFEC9C;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

.circ5{
   width:100px;
    height:100px;
    margin-top:-100px;
    margin-left:-75px;
    background-color:#028912;
    z-index:7;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}
.circ6{
    width:40px;
    height:40px;
    margin-top:-70px;
    margin-left:-50px;
    background-color:#FFEC9C;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}
.circ7{
    width:100px;
    height:60px;
    margin-left:-100px;
    margin-top:-80px;
    background-color:#FFEC9C;

}

.circ8{
    margin-left:-75px;
    margin-top:-15px;
    width:25px;
    height:25px;
    background-color:#028912;
    float:left;
    position:absolute;
    z-index:10;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}
.circ9{
    margin-left:-25px;
    margin-top:180px;
    width:50px;
    height:5px;
    background-color:#028912;
    float:left;
    position:absolute;
    z-index:10;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

.shadow{
    width:200px;
    height:50px;
    margin-top:175px;
    margin-left:-85px;
    background-color:#000;
    opacity:0.3;
    position:absolute;
    transform:rotate(20deg);
    -webkit-transform:rotate(20deg);
    -moz-transform:rotate(20deg);
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

.ground{
    width:300px;
    height:80px;
    margin-top:175px;
    margin-left:-140px;
    background-color:#F0BA6A;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}
.ground1{
    width:300px;
    height:50px;
    margin-top:-80px;
    margin-left:-70px;
    background-color:#F0BA6A;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}
.ground2{
    width:300px;
    height:50px;
    margin-top:-20px;
    margin-left:-190px;
    background-color:#F0BA6A;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

Comments