Website Template in HTML CSS
In this article, I am going to tell you how you can create a very beautiful Website Template in HTML and CSS with simple steps. you just need to write a simple code of text to create this HTML Website Template in HTML and CSS. 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 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.
after saved this file, you just write a simple structure of HTML and create content and follow the code which is given below.
Queries Solved:-
template,html template,download free website templates,html website,templates,html website templates,best website templates,html templates,template download,personal website templates,website design templates,portfolio website templates,wordpress website templates,responsive website templates,free download website templates,free website templates download,free responsive website templates,tohana,creativenetworks,best computer center in tohana,computer center in tohana, best institute in tohana,creative networks tohana,website designing,web design in tohana,creative,networks,o-level computer course,tohana best institute,creative networks computer center,computer center tohana,tohana,best computer center in tohana,best computer centre in tohana,tohana computer center,computer,computer center,learn computer in tohana,best computer institute in tohana,#computer,computer course kahan se kren,cn tohana,#computer tricks,#learn computer,auto cad in tohana,#computer short cut,photoshop in tohana,website designing in tohana,nielit tohana
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website Template in HTML and CSS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
.container-fluid
{
width: 100%;
height: 100vh;
background: url(bg.png);
background-position: right;
background-size: contain;
background-repeat: no-repeat;
}
nav
{
width: 1200px;
height: 80px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
nav h1
{
font-family: 'Cormorant SC', serif;
font-size: 30px;
}
nav button
{
width: 200px;
height: 45px;
background-color: #df5241;
border-radius: 4px;
border: 1px solid #ee3102;
color: #fff;
font-family: arial;
font-size: 17px;
cursor: pointer;
margin-top: 20px;
transition: 0.5s;
font-weight: bold;
letter-spacing: 1px;
}
nav button:hover
{
background-color: transparent;
color: #fff;
}
.container
{
width: 1200px;
height: 100vh;
margin: auto;
}
.container h1
{
font-size: 100px;
padding-top: 100px;
font-weight: 400;
}
.container p
{
font-family: roboto;
color: #777;
letter-spacing: 2px;
line-height: 30px;
}
.container button
{
width: 200px;
height: 45px;
background-color: transparent;
border-radius: 4px;
border: 1px solid #ee3102;
color: #df5241;
font-family: arial;
font-size: 17px;
cursor: pointer;
margin-top: 20px;
transition: 0.5s;
font-weight: bold;
letter-spacing: 1px;
}
.container button:hover
{
background-color: #ee3102;
color: #fff;
}
.one
{
position: absolute;
top: 200px;
left: 200px;
animation: mymove infinite;
animation-duration: 5s;
}
.two
{
position: absolute;
top: 250px;
left: 400px;
animation: mymove infinite;
animation-duration: 5s;
animation-delay: 2s;
}
.three
{
position: absolute;
top: 600px;
left: 300px;
animation: mymove infinite;
animation-duration: 3s;
}
@keyframes mymove
{
0%
{
transform: scale(0);
}
50%
{
transform: scale(1);
}
100%
{
transform: scale(0);
}
}
</style>
<body>
<div class="container-fluid">
<nav>
<h1>Creative</h1>
<button>Get Creative</button>
</nav>
<div class="container">
<h1>BOLD &<br>VIVID</h1>
<p>Creative comes with veerything your<br>creative agaency needs. Showcase your latest<br>projects in a truly captivating manner!</p>
<button>Get Creative</button>
<img class="one " src="one.png">
<img class="two " src="two.png">
<img class="three" src="one.png">
</div>
</div>
</body>
</html>
Here we completed our tutorial.
If you face any problem please feel free to contact us.
If you like our article please share it with your friends and relatives.
Thanks for reading our article.
Box Hover in HTML and CSS with Source code
Contact us Form in HTML CSS With Source Code || Creative Networks
Queries Solved:-
html and css website design tutorial,responsive website,html website design tutorial,how to make website,how to make a website using html css,website template,website templates,website,website templates free download,create a website,website design,template,html template,download free website templates,html website,templates,html website templates,best website templates,html templates,template download,personal website templates,website design templates,portfolio website templates,wordpress website templates,responsive website templates,free download website templates,free website templates download,free responsive website templates,tohana,creativenetworks,best computer center in tohana,computer center in tohana, best institute in tohana,creative networks tohana,website designing,web design in tohana,creative,networks,o-level computer course,tohana best institute,creative networks computer center,computer center tohana,tohana,best computer center in tohana,best computer centre in tohana,tohana computer center,computer,computer center,learn computer in tohana,best computer institute in tohana,#computer,computer course kahan se kren,cn tohana,#computer tricks,#learn computer,auto cad in tohana,#computer short cut,photoshop in tohana,website designing in tohana,nielit tohana
