<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<body>
<div id="container">
<div id="pricecontainer">
<p id="txt1">Choose Your Plan</p>
<div id="part1" class="parts">
<p class="title">STARTER</p>
<hr class="hrline">
<p class="storage">10GB Storage</p>
<p class="user">5 User</p>
<p class="site">1 Website</p>
<p class="price">$ 9.9/Month</p> <button class="buy">Continue <i class="fas fa-arrow-circle-right fa-xs"></i></button>
</div>
<div id="part2" class="parts">
<p class="title">BASIC</p>
<hr class="hrline">
<p class="storage">100GB Storage</p>
<p class="user">25 User</p>
<p class="site">5 Website</p>
<p class="price">$ 99.9/Month</p> <button class="buy">Continue <i class="fas fa-arrow-circle-right fa-xs"></i></button>
</div>
<div id="part3" class="parts">
<p class="title">PREMIUM</p>
<hr class="hrline">
<p class="storage">500GB Storage</p>
<p class="user">100 User</p>
<p class="site">25 Website</p>
<p class="price">$ 399.9/Month</p> <button class="buy">Continue <i class="fas fa-arrow-circle-right fa-xs"></i></button>
</div>
</div>
</div>
</body>
body {
margin: 0;
padding: 0;
height: 650px;
font-family: 'Roboto', sans-serif
}
#container {
background-image: linear-gradient(to top right, #353749 0%, #F7A0D9 100%);
width: 100%;
height: 650px;
position: relative;
top: -30px
}
#pricecontainer {
width: 70%;
height: 500px;
background: linear-gradient(to bottom left, #33ccff 0%, #009933 100%);
position: relative;
top: 75px;
left: 15%;
border-radius: 10px;
box-shadow: 0 0 35px brown
}
#txt1 {
text-align: center;
font-size: 30px;
position: relative;
top: 20px
}
.parts {
width: 25%;
height: 340px;
background-color: white;
display: inline-block;
position: relative;
left: 12.5%;
top: 30px;
border-radius: 8px;
margin-bottom: 20px
}
.parts:hover {
transform: scale(1.2, 1.2);
transition: 1s;
box-shadow: 0 0 35px black;
z-index: 99
}
#part1 {
background: linear-gradient(to bottom right, darkblue 0%, #ff33cc 100%)
}
#part2 {
background: linear-gradient(to bottom right, gray 0%, #663300 100%)
}
#part3 {
background: linear-gradient(to bottom right, crimson 0%, #660066 100%)
}
.title {
text-align: center;
font-size: 25px;
color: white;
position: relative;
top: 20px
}
.hrline {
width: 20px;
color: white;
border: 3px solid white;
border-radius: 4px;
position: relative;
top: 15px
}
.storage,
.user,
.site {
font-size: 20px;
text-align: center;
color: white;
position: relative;
top: 20px
}
.user {
color: darkgray
}
.price {
font-size: 25px;
text-align: center;
position: relative;
top: 20px
}
.buy {
width: 70%;
font-size: 20px;
height: 50px;
position: relative;
left: 15%;
top: 45px;
border-radius: 28px;
border: none;
background-color: white;
cursor: pointer
}
.buy:hover {
background-color: cadetblue;
color: white;
transition: 1s;
box-shadow: 0 0 15px black
}
.fa-arrow-circle-right {
margin-left: 5px
}
@media only screen and (max-width:980px) {
.price {
font-size: 20px
}
.buy {
font-size: 15px;
position: relative;
top: 15px
}
.parts {
height: 300px
}
}
@media only screen and (max-width:790px) {
.parts {
display: inherit;
width: 75%;
height: 350px
}
.title {
position: relative;
top: 10px
}
#container {
height: 1380px
}
#pricecontainer {
height: 1250px
}
}