HTML Responsive flex template, create plan chooser using HTML and CSS
Build full responsive html plan chooser using html flex property
Source code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="table.css">
</head>
<body>
<h1 class="mainheading">
CHOOSE PLAN
</h1>
<div class="flex">
<div class="basic">
<h2>
BASIC
</h2>
<span class="blackheading">
<sup class="greendollar">
$
</sup>
30
</span>
<br>
<section>
<p>
<strong>5</strong> E-mail accounts
</p>
<p>
<strong>1</strong> Template style
</p>
<p>
<strong>25</strong> Products loaded
</p>
<p>
<strong>1</strong> Image per product
</p>
<p>
<strong>Unlimited</strong> Bandwidth
</p>
<p>
<strong>24/7</strong> support
</p>
</section>
<br>
<button class="whitebgbutton" type="menu">
SIGN UP
</button>
</div>
<div class="exclusive">
<h2 class="ex">
EXCLUSIVE
</h2>
<span class="greenheading">
<sup class="blackdollar">
$
</sup>
60
</span>
<br>
<section>
<p>
<strong>15</strong> E-mail accounts
</p>
<p>
<strong>3</strong> Template style
</p>
<p>
<strong>40</strong> Products loaded
</p>
<p>
<strong>7</strong> Image per product
</p>
<p>
<strong>Unlimited</strong> Bandwidth
</p>
<p>
<strong>24/7</strong> support
</p>
</section>
<br>
<button type="menu" class="greenbgbutton">
SIGN UP
</button>
</div>
<div class="pro">
<h2>
PRO
</h2>
<span class="blackheading">
<sup class="greendollar">
$
</sup>
90
</span>
<br>
<section>
<p>
<strong>20</strong> E-mail accounts
</p>
<p>
<strong>5</strong> Template style
</p>
<p>
<strong>50</strong> Products loaded
</p>
<p>
<strong>10</strong> Image per product
</p>
<p>
<strong>Unlimited</strong> Bandwidth
</p>
<p>
<strong>24/7</strong> support
</p>
</section>
<br>
<button type="menu" class="whitebgbutton">
SIGN UP
</button>
</div>
</div>
</body>
</html>
Source code CSS
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: rgb(3, 201, 158);
}
.mainheading {
text-align: center;
font-family: 'Courier';
color: whitesmoke;
}
h2 {
font-weight: 500;
}
.flex {
display: flex;
text-align: center;
}
.basic, .exclusive, .pro {
width: 33%;
background-color: whitesmoke;
padding-bottom: 45px;
}
.exclusive {
border-left: 10px solid rgb(3, 201, 158);
border-right: 10px solid rgb(3, 201, 158);
}
.ex {
color: rgb(3, 201, 158);
}
span {
font-size: 60px;
}
.greendollar {
color: rgb(3, 201, 158);
}
.whitebgbutton {
background-color: whitesmoke;
width: 70%;
height: 10%;
color: rgb(3, 201, 158);
font-weight: bold;
font-size: 16px;
border: 2px solid rgb(3, 201, 158);
border-radius: 7px;
}
.greenbgbutton {
background-color: rgb(3, 201, 158);
color: whitesmoke;
width: 70%;
height: 10%;
border-radius: 7px;
border-color: transparent;
font-weight: bold;
}
button:hover {
cursor: pointer;
border-color: crimson;
}
@media screen and (max-width: 600px) {
.flex {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 25px;
}
.basic, .exclusive, .pro {
width: 100%;
border: 1px solid crimson;
}
button {
width: 50%;
height: 20%;
}
}
Comments
Post a Comment