Website Template in HTML and CSS
In this article, I am going to tell you how you can create a very beautiful Website in HTML and CSS with simple steps. you just need to write a simple code of text to create this HTML website. we will use in this code HTML and simple internal CSS.
first of all, you have to create a folder, where you want to create a save you file of code and then drag it or open it on your text editor, after that you have to save this file by giving any name with the extension name HTML.
Pet Website is the best-looking animals and pets website template where it can be used for the pet store center’s website through that you can reach many clients and have massive sales on your pets.
Get this website template for your pet store or pets care center website and build your base for the business to reach more. This Website template provides you a beautiful grids arrangement that makes the template look premium.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Template in HTML and CSS</title>
</head>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
.container-fluid
{
width: 100%;
height: 100vh;
background-image: url(main-bg.webp);
background-repeat: no-repeat;
background-size: cover;
}
.header
{
width: 1200px;
height: 70px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo
{
font-size: 40px;
font-family: monospace;
}
.header nav ul
{
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.header nav ul li
{
margin-right: 40px;
cursor: pointer;
font-weight: bold;
font-size: 15px;
font-family: arial;
transition: 0.5s;
}
.header nav ul li:hover
{
color: #9e3ffd;
}
.btn
{
width: 150px;
height: 45px;
font-weight: bold;
font-size: 15px;
font-family: arial;
border: none;
background: #9e3ffd;
color: #fff;
border-radius: 30px;
cursor: pointer;
transition: 0.5s;
}
.btn:hover
{
background: #222;
}
.container
{
width: 1200px;
margin: auto;
}
.container h1
{
font-family: arial;
font-size: 80px;
padding-top: 100px;
margin-top: 20px;
}
.container p
{
font-family: arial;
font-size: 20px;
padding-top: 20px;
}
.container .btn
{
margin-top: 20px;
width: 200px;
height: 50px;
font-size: 17px;
background: #9e3ffd;
}
.container .btn:hover
{
background: #222;
}
</style>
<body>
<div class="container-fluid">
<div class="header">
<h2 class="logo">Creative.</h2>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Blog</li>
<li>Privacy</li>
</ul>
</nav>
<button class="btn">Contact me</button>
</div>
<div class="container">
<h1>The Power<br> of Good Advice</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt<br> ut labore et dolore magna aliqua.</p>
<button class="btn">Know more...</button>
</div>
</div>
</body>
</html>
Here we completed our tutorial.
If you face any problem
please feel free to contact us.
Thanks for reading our post.
