Hi dear welcome to Ascode Blog . In this post we are going to learn how to make a webhosting website design. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the file with your browser.
HTML
<!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">
<link rel="stylesheet" href="style.css">
<title>webhosting website design</title>
</head>
<body>
<div class="navbar">
<div class="logo">ASWebhosting</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#" class="btn">Sign Up</a></li>
</ul>
</nav>
</div>
<div class="header">
<div class="col-1">
<h2>Welcome To<br>AS Webhosting !!</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione optio sunt illum. Eum beatae voluptatibus soluta ipsum cum itaque aliquam repudiandae unde? At, dolor! Quas voluptatibus velit atque perferendis odit.</p>
<a href="#">Join Now</a>
</div>
<div class="col-2">
<img src="/header.png">
</div>
</div>
<div class="pricing">
<h2>Our Pricing Package</h2>
<p>Just select an package and order it your hosting will be ready</p>
<div class="pricing-card">
<div class="card">
<h2>Start</h2>
<div class="price">
<h2>$20/<span>Monthly</span></h2>
</div>
<div class="content">
<h3>30gb hosting</h3>
<h3>1 domain support</h3>
<h3>250gb ddos protection</h3>
<h3>dv ssl</h3>
<h3>100% uptime server</h3>
<h3>dadecated server</h3>
</div>
<a href="#">Order Now</a>
</div>
</div>
<div class="pricing-card">
<div class="card">
<h2>Premium</h2>
<div class="price">
<h2>$50/<span>Monthly</span></h2>
</div>
<div class="content">
<h3>50gb hosting</h3>
<h3>4 domain support</h3>
<h3>500gb ddos protection</h3>
<h3>comodo ssl</h3>
<h3>100% uptime server</h3>
<h3>dadecated server</h3>
</div>
<a href="#">Order Now</a>
</div>
</div>
<div class="pricing-card">
<div class="card">
<h2>Vip</h2>
<div class="price">
<h2>$100/<span>Monthly</span></h2>
</div>
<div class="content">
<h3>100gb hosting</h3>
<h3>unlimited domain support</h3>
<h3>700gb ddos protection</h3>
<h3>EV ssl</h3>
<h3>100% uptime server</h3>
<h3>dadecated server</h3>
</div>
<a href="#">Order Now</a>
</div>
</div>
</div>
<div class="fotter-text">
@Copyright - 2021 - alright recerver ASWebshosting.com
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
box-sizing: border-box;
}
body {
width: 100%;
background: #000;
}
.navbar {
padding: 20px 30px;
width: 100%;
background: #1f1f1f9c;
display: flex;
justify-content: space-between;
}
.navbar .logo {
margin: 0 8%;
font-size: 2rem;
color: #fff;
font-weight: 600;
transition: 0.2s;
}
.navbar .logo:hover {
letter-spacing: 0.5px;
color: blue;
}
.navbar nav {
margin: 0 8%;
}
.navbar nav ul {
display: flex;
}
.navbar nav ul li {
list-style: none;
}
.navbar nav ul li a {
text-decoration: none;
font-size: 1.2rem;
color: #fff;
font-weight: 600;
margin: 0 15px;
transition: 0.2s;
}
.navbar nav ul li a:hover {
letter-spacing: 0.5px;
color: blue;
}
.navbar nav ul li a.btn {
padding: 5px 8px;
transition: 0.2s;
border-radius: 5px;
color: #fff;
background: blue;
}
.navbar nav ul li a.btn:hover {
border: 2px solid blue;
background: transparent;
}
.header {
display: flex;
margin: 0 8%;
}
.header .col-1 {
margin: 20vh 20px;
float: right;
width: 650px;
text-align: justify;
}
.col-1 h2 {
font-size: 3rem;
color: #fff;
font-weight: 600;
letter-spacing: 0.5px;
}
.col-1 p {
font-size: 1.2rem;
color: #fff;
font-weight: 600;
opacity: 0.8;
margin: 20px 0;
}
.col-1 a{
font-size: 1.5rem;
color: #fff;
font-weight: 600;
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
background: blue;
text-decoration: none;
transition: 0.3s;
}
.col-1 a:hover {
background: transparent;
border: 2px solid blue;
}
.header .col-2 {
width: 900px;
margin: 20vh 20px;
float: right;
}
.col-2 img {
width: 100%;
}
.pricing {
margin: 100px 8%;
border-radius: 10px;
text-align: center;
}
.pricing h2 {
padding: 10px;
background: blue;
margin: 0 auto;
font-size: 2rem;
letter-spacing: 0.5px;
color: #fff;
font-weight: 600;
border-radius: 1px 1px 5px 5px;
width: fit-content;
}
.pricing p {
color: #fff;
font-size: 1rem;
font-weight: 600;
opacity: 0.8;
margin: 5px auto;
}
.pricing .pricing-card{
margin: 30px 15px;
box-shadow: 0 0 5px #ccc;
display: inline-block;
border-radius: 5px;
}
.pricing .pricing-card .card {
width: 300px;
text-align: center;
margin: 10px;
}
.card h2 {
font-size: 1.5rem;
background: blue;
padding: 10px;
color: #fff;
text-transform: uppercase;
width: fit-content;
border-radius: 1px 1px 5px 5px;
margin: -10px auto;
}
.card .price {
margin: 15px auto;
text-align: center;
}
.price h2 {
font-size: 2rem;
color: #fff;
font-weight: 600;
background: transparent;
}
.price h2 span {
font-size: 1rem;
color: blue;
font-weight: 600;
}
.card .content {
margin: 20px auto;
text-align: center;
}
.content h3 {
font-size: 1rem;
color: #fff;
font-weight: 600;
margin: 3px 0;
}
.card a {
display: inline-block;
margin: -10px auto;
padding: 10px;
color: #fff;
background: blue;
border-radius: 5px 5px 1px 1px;
text-decoration: none;
}
.fotter-text {
padding: 20px 30px;
text-align: center;
width: 100%;
color: #fff;
font-weight: 600;
font-size: 1rem;
bottom: 0;
background: blue;
}
0 Comments