ТЗ - Создайте HTML-страницу и расположите на ней несколько карточек покупок. <body> <div class="cont"> <div class="pik"> <div class="zg"><h3>ENTERPRISE</h3> <hr class="red"></div> <div class="cen"><p>$69<br><span class="grey">per month</span></p></div> <div class="usl"><p>10GB disk space<br> 100GB monthly bandwidth<br> 20 email accounts<br> Unlimited subdomens<br></p> </div> <div class="bottom red"> <p>BUY</p> </div> </div> <div class="pik"> <div class='zg'> <h3>PROFESSIONAL</h3> <hr class="org"></div> <div class="cen"><p>$29<br><span class="grey">per month</span></p></div> <div class="usl"><p>5GB disk space<br> 60GB monthly bandwidth<br> 10 email accounts<br> Unlimited subdomens<br></p> </div> <div class="bottom org"> <p>BUY</p> </div> </div> <div class="pik"> <div class='zg'><h3>STANDARD</h3> <hr class="blue"></div> <div class="cen"><p>$19<br><span class="grey">per month</span></p></div> <div class="usl"><p>3GB disk space<br> 30GB monthly bandwidth<br> 5 email accounts<br> Unlimited
ТЗ - Создайте HTML-страницу и расположите на ней несколько карточек покупок.
HTML
<body>
<div class="cont">
<div class="pik">
<div class="zg"><h3>ENTERPRISE</h3>
<hr class="red"></div>
<div class="cen"><p>$69<br><span class="grey">per month</span></p></div>
<div class="usl"><p>10GB disk space<br>
100GB monthly bandwidth<br>
20 email accounts<br>
Unlimited subdomens<br></p>
</div>
<div class="bottom red">
<p>BUY</p>
</div>
</div>
<div class="pik">
<div class='zg'> <h3>PROFESSIONAL</h3>
<hr class="org"></div>
<div class="cen"><p>$29<br><span class="grey">per month</span></p></div>
<div class="usl"><p>5GB disk space<br>
60GB monthly bandwidth<br>
10 email accounts<br>
Unlimited subdomens<br></p>
</div>
<div class="bottom org">
<p>BUY</p>
</div>
</div>
<div class="pik">
<div class='zg'><h3>STANDARD</h3>
<hr class="blue"></div>
<div class="cen"><p>$19<br><span class="grey">per month</span></p></div>
<div class="usl"><p>3GB disk space<br>
30GB monthly bandwidth<br>
5 email accounts<br>
Unlimited subdomens<br></p>
</div>
<div class="bottom blue">
<p>BUY</p>
</div>
</div>
<div class="pik">
<div class='zg'><h3>BASIC</h3>
<hr class="green"></div>
<div class="cen"><p>$9<br><span class="grey">per month</span></p></div>
<div class="usl"><p>1GB disk space<br>
10GB monthly bandwidth<br>
2 email accounts<br>
Unlimited subdomens<br></p>
</div>
<div class="bottom green">
<p>BUY</p>
</div>
</div>
</div>
</body>
CSS
.cont{
text-align:center;
width:100%;
display: inline-block;
}
.pik{
border:2px solid #666;
border-radius: 25px;
float:left;
margin-left: 8%;
width: 15%;
box-shadow: 0px 0px 10px;
transition: transform 1s ease-in-out;
transform-origin: 0 0 0;
}
.zg{
font-family:Andale Mono, monospace;
}
.cen{
font-size:30px;
font-weight: 700;
}
.bottom{
width:40%;
margin:auto;
height:50px;
margin-bottom:5px;
border-radius:20px;
color:#fff
}
/* цвета*/
.red{border:1px solid #C71585;
background-color:#C71585;}
.org{border:1px solid #FF8C00;
background-color:#FF8C00;}
.blue{border:1px solid #4682B4;
background-color:#4682B4;}
.green{border:1px solid #228B22;
background-color:#228B22;}
.grey{color:#A9A9A9;
font-size:15px;
font-weight: 100;
}
.bottom:hover{
cursor:pointer;
opacity: .5;
}
.pik:hover{
cursor:pointer;
width: 15.25%;
margin-left: 7.75%;
height: 335px;
}
Итог
Ознакомиться с работай данного кода можно ТУТ.