New Web design
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
<img class="logo" src="image.png">
<h2 id="logo">Coding Discussion</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<h1>Welcome to coding discussion </h1>
<button class="btn1">Learn More</button>
<button class="btn2">join us</button>
</header>
<div class="section">
<div class="container">
<h1 id="head">Contact Us</h1>
</div>
<div class="contact">
<label class="label1">Name</label>
<input class="name" type="text" placeholder="Sagnik sarkar"><br>
<br>
<label class="label2">Email</label>
<input class="email" type="email" placeholder="example@gmail.com"><br>
<br>
<label class="label3">Leave a message</label>
<input class="message" type="text" placeholder="Leave your comment">
</div>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
body{
font-family: 'Poppins', sans-serif;
}
header{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(download.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.logo{
height: 80px;
position: relative;
left: 70px;
top: 60px;
}
.logo:hover{
cursor: pointer;
}
#logo{
color: white;
font-weight: bold;
position: relative;
left: 25px;
top: 60px;
}
#logo:hover{
cursor: pointer;
}
nav{
/* background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)); */
background-color: #00000085;
height: 50px;
}
nav ul{
float: right;
margin-top: -110px;
}
nav ul li{
display: inline-block;
list-style: none;
}
nav ul li a{
color: white;
text-decoration: none;
padding: 20px;
margin-right: 30px;
text-transform: uppercase;
font-weight: bold;
transition: 0.6s ease;
}
nav ul li a:hover{
color: rgb(55, 0, 255);
}
h1{
color: white;
position: relative;
left: 400px;
top: 200px;
}
.btn1{
position: relative;
left: 500px;
top: 200px;
padding: 15px;
margin: 20px;
background-color: rgb(243, 6, 252);
border: 2px solid white;
border-radius: 8px;
color: white;
font-weight: bold;
text-transform: uppercase;
transition: 0.6s ease;
}
.btn1:hover{
background-color: white;
color: rgb(243, 6, 252) ;
cursor: pointer;
}
.btn2{
position: relative;
left: 550px;
top: 200px;
padding: 15px;
margin: 20px;
text-transform: uppercase;
background-color: white;
border: 2px solid black;
border-radius: 8px;
color: black;
font-weight: bold;
transition: 0.6s ease;
}
.btn2:hover{
color:rgb(243, 6, 252) ;
cursor: pointer;
}
.section{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(download.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.container{
background-color: #33ff0044;
position: relative;
line-height: 50px;
margin-top: 50px;
margin-right: 300px;
margin-left: 300px;
color: #ffffff;
padding: 10px 0px 10px 0px ;
text-align: center;
border-radius: 15px 15px 0px 0px;
}
#head{
position: relative;
left: -5px;
top: -5px;
text-align: center;
color: black;
}
#head:hover{
color: white;
cursor: pointer;
}
.contact{
background-color: #00000054;
position: relative;
line-height: 50px;
margin-bottom: 25px;
margin-right: 300px;
margin-left: 300px;
color: #ffffff;
padding: 10px 0px 10px 0px ;
text-align: center;
}
.label1{
color: white;
font-weight: bold;
position: relative;
left: -190px;
font-size: 25px;
text-transform: uppercase;
}
.label2{
color: white;
font-weight: bold;
position: relative;
left: -170px;
top: -50px;
font-size: 25px;
text-transform: uppercase;
}
.label3{
color: white;
font-weight: bold;
position: relative;
left: -60px;
top: -80px;
font-size: 25px;
text-transform: capitalize;
}
.name{
width: 200px;
line-height: 25px;
border-radius: 4px;
text-align: center;
border: 2px solid white;
font-weight: bold;
font-size: 15px;
color: black;
}
.email{
position: relative;
top: -50px;
left: 30px;
width: 250px;
line-height: 25px;
border-radius: 4px;
text-align: center;
border: 2px solid white;
font-weight: bold;
font-size: 15px;
color: black;
}
.message{
position: relative;
top: -80px;
left: 5px;
width: 350px;
line-height: 120px;
border-radius: 4px;
/* text-align: center; */
border: 2px solid white;
font-weight: bold;
font-size: 15px;
color: black;
}
0 Comments
If you have any question , then please ask me