<style type="text/css">
p{
font-family: 'verdana';
font-size: 25px;
}
.wrap {
float: left;
width: 100%;
}
.single_wrap {
float: left;
width: 50%;
padding: 15px 0;
}
.single_div {
float: left;
width: 100%;
}
.single_wrap:nth-child(odd) .single_div {
border-left: 3px solid red;
background: #33b5e5;
}
.single_wrap:nth-child(1) .single_div, .single_wrap:nth-child(2) .single_div {
border-bottom: 5px solid #005555;
}
</style>
<div class="wrap">
<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>
<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>
<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>
<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>
</div>
Output :)
p{
font-family: 'verdana';
font-size: 25px;
}
.wrap {
float: left;
width: 100%;
}
.single_wrap {
float: left;
width: 50%;
padding: 15px 0;
}
.single_div {
float: left;
width: 100%;
}
.single_wrap:nth-child(odd) .single_div {
border-left: 3px solid red;
background: #33b5e5;
}
.single_wrap:nth-child(1) .single_div, .single_wrap:nth-child(2) .single_div {
border-bottom: 5px solid #005555;
}
</style>
<div class="wrap">
<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>
<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>
<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>
<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>
</div>
Output :)
No comments:
Post a Comment