Scribd
Upload
11 views5 pages

Print 3

The document is an HTML webpage featuring a header with a background image and a navigation menu. It showcases three pricing plans: Basic, Standard, and Premium, each with specific features and prices. The layout includes styled boxes for each plan, with hover effects and a logo displayed at the top.

Uploaded by

tripathitrisha1001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views5 pages

Print 3

The document is an HTML webpage featuring a header with a background image and a navigation menu. It showcases three pricing plans: Basic, Standard, and Premium, each with specific features and prices. The layout includes styled boxes for each plan, with hover effects and a logo displayed at the top.

Uploaded by

tripathitrisha1001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
header{
background-image:linear-
gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(hello.webp);
height:1300px;
width: 200%;
background-position:center;
background-size:cover;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #00bbff;
}
::-webkit-scrollbar-thumb {
background-color: #00bbff;
border-radius: 20px;
}
::-webkit-scrollbar-thumb {
background-color: #00bbff;
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
ul{
float: right;
list-style-type:none;
margin-top:22px;
}

ul li{
display:inline-block;
margin:0px 1px;
font-size:22px;
font-weight:300;
}

ul li a{
text-decoration:none;
color:rgba(255, 255, 255, 0.966);
padding:20px 30px;
}
ul li::after{
content:'';
width:0%;
height:3px;
background:#ffffff;
display:block;
margin:auto;
transition:0.7s;
/* animation: expan 5s infinite; */
}
ul li:hover::after{
width: 100%;
}
.logo{
width: 250px;
height: 100px;
padding-top: 2px;
padding-left: 5px;
}
/* Real CSS begins */
*{
padding: 0;
margin: 0;
font-family: sans-serif;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
body{
background: #ffffff;
min-width: 100vh;
display: flex;
align-items: center;
}

.container{
width: 100%;
height: auto;
background: transparent;
/* adding flex */
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 70px;
}
.box{
width: 25%;
height: 700px;
background: rgba(15, 0, 0, 0.699);
margin: 20px;
box-sizing: border-box;
border-radius: 10px;
text-align:inherit;
transition: 1s ;
}
.box h3{
font-size: 35px;
color: white;
margin-left: 105px;
margin-top: 10px;
}
.spa{
width: 150px;
height: 150px;
border: 2px solid ;
margin: 8% auto 0 auto;
border-radius: 50%;
border-color: rgb(255, 0, 0);
}
.spa p{
color: white;
margin-top: 50px;
font-size: 40px;
margin-left: 40px;
}
.list{
text-align: center;
margin-top: 10%;
}
.list h4{
font-size: 15px;
font-weight: normal;
text-align: center;
color: #ffffff;
line-height: 2;
margin-top: 20px;
}
.list h5{
font-size: 15px;
font-weight: normal;
text-align: center;
color: #ffffff;
line-height: 2;
margin-top: 20px;
}
.list h3{
font-size: 15px;
font-weight: normal;
text-align: center;
color: #ffffff;
line-height: 2;
margin-top: 20px;
margin-left: 15px;
}

.box:hover{
background: #da4357;
color: #ffff;
box-shadow: 0 0 15px rgba(0,0,0,1);
transform: scale(1.1);
z-index: 1;
border-radius: 25px;
}
.box:hover .spa{
border-color: #ffff;
}
.container a{
text-decoration: none;
background:transparent;
border:1px solid #da4357;
color: white;
padding: 10px 60px;
display: inline-block;
margin: 30% 20%;
text-transform: uppercase;
font-weight: bold;
}
.box:hover a{
border-color: #ffffff;
}

</style>
</head>
<body>
<header>
<div class="main">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="logo"><img src="logo500x500.png" height="100px"
width="250px"></div>
<div class="container">
<div class="box">
<h3>𝙱𝙰𝚂𝙸𝙲</h3>
<div class="spa"><p><b>$15</b></p></div>
<div class="list">
<h4><b>1 Website</b></h4>
<h4><b>10GB Disk Space</b></h4>
<h4><b>Free Email Address</b></h4>
<h4><b>Basic WEb Builder</b></h4>
<h4><b>NO SSL Certificate</b></h4>
<h4><b>Unlimited Support</b></h4>
</div>
<a href="#">SELECT</a>
</div>
<div class="box">
<h3 style="margin-left: 75px;">𝚂𝚃𝙰𝙽𝙳𝙰𝚁𝙳</h3>
<div class="spa"><p><b>$75</b></p></div>
<div class="list">
<h5><b>10 Website</b></h5>
<h5><b>50GB Disk Space</b></h5>
<h5><b>Free Email Address</b></h5>
<h5><b>Advanced Web Builder</b></h5>
<h5><b>Free SSL Certificate</b></h5>
<h5><b>Unlimited Support</b></h5>
</div>
<a href="#">SELECT</a>
</div>
<div class="box">
<h3 style="margin-left: 88px ;">𝙿𝚁𝙴𝙼𝙸𝚄𝙼</h3>
<div class="spa"><p><b>$95</b></p></div>
<div class="list">
<h3><b>100 Website</b></h3>
<h3><b>100GB Disk Space</b></h3>
<h3><b>Free Email Address</b></h3>
<h3><b>Advanced Web Builder</b></h3>
<h3><b>Free SSL Certificate</b></h3>
<h3><b>Unlimited Support</b></h3>
</div>
<a href="#" style="margin-left:80px;">SELECT</a>
</div>
</div>
</header>
</body>
</html>

You might also like