**** Create Responsive Table Using HTML and CSS ****
---- HTML USE ----
<!DOCTYPE html>
<head>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width-device-width,initial-scal=1.0">
</head>
<title>Responsive CSS</title>
<link rel="stylesheet" href="mystyle.css"></link>
<body>
<h2>Responsive table</h2>
<div class="col">
<ul class="price-box">
<li class="header">Simple</li>
<li class="emph"><strong>$6.50</strong>/Month</li>
<li><strong>20Gb</strong> Disk space</li>
<li><strong>10Gb</strong> Data Transfer</li>
<li><strong>2</strong> Domains </li>
<li><strong>50</strong> Email Accounts</li>
<li><strong>2</strong> FTP</li>
<li class="emph"><a href="#" class="button">Sign Up</a></li>
</ul>
</div>
<div class="col">
<ul class="price-box">
<li class="header header-green">Standard</li>
<li class="emph"><strong>$16.50</strong>/Month</li>
<li><strong>10Gb</strong> Disk space</li>
<li><strong>15Gb</strong> Data Transfer</li>
<li><strong>10</strong> Domains </li>
<li><strong>100</strong> Email Accounts</li>
<li><strong>2</strong> FTP</li>
<li class="emph"><a href="#" class="button">Sign Up</a></li>
</ul>
</div>
<div class="col">
<ul class="price-box">
<li class="header">Simple</li>
<li class="emph"><strong>$26.50</strong>/Month</li>
<li><strong>120Gb</strong> Disk space</li>
<li><strong>90Gb</strong> Data Transfer</li>
<li><strong>unlimited</strong> Domains </li>
<li><strong>unlimited</strong> Email Accounts</li>
<li><strong>unlimited</strong> FTP</li>
<li class="emph"><a href="#" class="button">Sign Up</a></li>
</ul>
</div>
</body>
</html>
----- CSS USE ----
body
{
font-family:"Tahoma",sans-serif;
background:#333;
color:#fff;
}
h2{
text-align:center;
}
.col
{
float:left;
width:33.3%;
padding:8px;
box-sizing:border-box;
}
.price-box
{
background:#fff;
color:#555;
list-style-type:none;
border:1px solid #555;
margin:0;
padding:0;
}
.price-box:hover,.price-box.best
{
box-shadow:0 10px 15px 0 #000;
}
.header
{
background-color:#111;
color:#fff;
font-size:25px;
}
.price-box li
{
padding:20px;
border-bottom:1px solid #eee;
text-align:center;
}
.price-box .emph
{
background-color:#f4f4f4;
font-size:20px;
}
.price-box .header.header-green
{
background-color:#4caf50;
}
.button
{
background-color:#4caf50;
border:none;
color:#fff;
padding:10px 15px;
text-align:center;
text-decoration:none;
font-size:18px;
}
@media(max-width:700px)
{
.col{
width:100%;
}
}
No comments:
Post a Comment