Simple Website Design Using HTML and CSS
Learn How to make a website using HTML and CSS. latest website UI design with HTML and CSS. Web site Design Tutorial
Video Tutorial
For Download the Background image Click Here
How to use the code in stpe by step
- Open Your text Editor(like: VS code, SublimeText or Notepad++)
- Create a .html(like: index.html) file
- Copy the HTML code the code and past in the index.html file
- Then, Create a .css(like: style.css) file
- Copy the CSS code and past in style.css file
- Open the file in your browser
HTML CODE
HTML is a standard language for web page. With HTML you can create your own website. HTML is easy to learn - You will enjoy it
<!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>Campping Site Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="container">
<header>
<div class="nav">
<div class="logo">
<h6><b>Campp<span>ing</span></b></h6>
</div>
<div class="nav_menu">
<ul>
<li>Home</li>
<li>About</li>
<li class="active">Contact</li>
<li>Blog</li>
<li>Event</li>
</ul>
</div>
</div>
</header>
<div class="main_container">
<div class="heading">
<h2>Nature Calling</h2>
</div>
<div class="text_containt">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint maxime quisquam optio voluptatibus fuga eum tenetur fugit aliquid, blanditiis ratione quaerat! Quibusdam ullam provident adipisci dignissimos cupiditate nobis dolorum? Natus.</p>
</div>
<button class="btn">Join Us</button>
</div>
</div>
</section>
</body>
</html>
CSS CODE
The Full from of CSS is Cascading Style Sheets. It explains how to show HTML elemnts on display. For web designers, it is powerfull tool to adjust the design and control of the web pages t demonstrate how they should be viewed.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
width: 100%;
height: 100vh;
background: url(./bg2.jpg);
background-size: cover;
font-family: 'Poppins', sans-serif;
color: #fff;
}
.container{
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 500px;
background: transparent;
box-shadow: 4px 3px 8px 1px #fff;
-webkit-box-shadow: 4px 3px 8px 1px #000;
transform: translate(-50%, -50%);
padding-left: 30px;
}
.container header .nav{
display: flex;
justify-content: space-between;
}
.container header .nav .logo{
padding: 20px 0;
font-size: 30px;
}
.container header .nav .logo h6 span{
color: rgb(16, 107, 8);
}
.container header .nav .nav_menu{
margin-right: 20px;
}
.container header .nav .nav_menu ul li{
display: inline-block;
padding: 20px 30px;
justify-content: space-between;
cursor: pointer;
}
.container header .nav .nav_menu ul li:hover{
color: rgb(16, 107, 8);
}
.active{
color: rgb(16, 107, 8);
}
.container .main_container{
margin-top: 60px;
width: 50%;
}
.container .main_container .heading{
font-size: 35px;
text-transform: uppercase;
letter-spacing: 5px;
color: rgb(93, 238, 79);
}
.container .main_container .text_containt{
font-size: 12px;
padding: 15px 10px;
}
.container .main_container .btn{
padding: 12px 52px;
border-radius: 50px;
border: none;
outline-style: none;
margin: 20px;
font-size: 20px;
text-transform: capitalize;
background: rgb(16, 107, 8);
color: #fff;
cursor: pointer;
}
Posts
No comments: