Welcome to our blog, where we dive into the process of creating a visually appealing login page design using a combination of HTML, CSS, and the user-friendly Canva design tool.
.png)
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
body {
background-image: url('newone.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 10px;
}
#navBar {
display: flex;
flex-direction: row;
margin: 30px;
}
.home {
margin: 10px;
padding: 15px;
width: 90px;
padding-left: 60px;
background-color: rgb(184, 242, 242);
border-radius: 23px;
cursor: pointer;
font-family: monospace;
font-size: 15px;
font-weight: bold;
}
.home:hover {
background-color: aqua;
}
.about {
margin: 10px;
padding: 15px;
width: 90px;
padding-left: 60px;
background-color: rgb(184, 242, 242);
border-radius: 23px;
cursor: pointer;
font-family: monospace;
font-size: 15px;
font-weight: bold;
}
.about:hover {
background-color: aqua;
color: black;
}
.contact {
margin: 10px;
width: 90px;
padding: 15px;
padding-left: 50px;
background-color: rgb(184, 242, 242);
border-radius: 23px;
cursor: pointer;
font-family: monospace;
font-size: 15px;
font-weight: bold;
}
.contact:hover {
background-color: aqua;
color: black;
}
.login {
margin: 10px;
width: 90px;
padding: 15px;
padding-left: 60px;
background-color: rgb(184, 242, 242);
border-radius: 23px;
cursor: pointer;
font-family: monospace;
font-size: 15px;
font-weight: bold;
}
.login:hover {
background-color: aqua;
color: black;
}
.content {
width: 500px;
margin: 20px;
margin-top: 150px;
margin-left: 40px;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.learning {
margin: 10px;
width: 90px;
padding: 15px;
padding-left: 30px;
margin-left: 150px;
margin-top: 20px;
background-color: aqua;
border-radius: 23px;
cursor: pointer;
font-family: monospace;
font-size: 15px;
font-weight: bold;
}
.learning:hover {
background-color: rgb(184, 242, 242);
color: black;
}
.endButton {
margin: 10px;
margin-top: 20px;
}
h1 {
color: black;
}
p {
color: rgb(8, 122, 122);
font-size: 18px;
}
</style>
</head>
<body>
<div id="navBar">
<div class="home">HOME</div>
<div class="about">ABOUT</div>
<div class="contact">CONTACT</div>
<div class="login">LOGIN</div>
</div>
<div class="content">
<h1>
Congratulations on creating your website!
</h1>
<p>We are thrilled to have you here and are committed to providing you with the best experience possible.</p>
</div>
<div class="endButton">
<div class="learning">Learn More</div>
</div>
</body>
</html>
No comments:
Post a Comment