Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
55 views

Best Computer Project HTML Css

best computer project html css

Uploaded by

gogeso9588
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
55 views

Best Computer Project HTML Css

best computer project html css

Uploaded by

gogeso9588
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 36

Project 1

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Glassmorphism Login Form </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<form action="">
<h2>Login</h2>
<div class="input-field">
<input type="email" required>
<label for="">Enter Your Email</label>
</div>
<div class="input-field">
<input type="password" required>
<label for="">Enter Password</label>
</div>
<div class="forget">
<label for="remember">
<input type="checkbox" id="remember">
<p>remember me</p>
</label>
<a href="">Forget Password?</a>
</div>
<button type="submit">Login</button>
<div class="register">
<p>Don't Have an acoount? <a href="">register</a></p>
</div>
</form>
</div>
</body>
</html>

Style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
padding: 0 10px;
color: white;
}
body::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url("background.jpg");
background-position: center;
background-size: cover;
background-color: rgba(0, 20, 60, 0.7);
background-blend-mode: multiply;
}

.wrapper{
z-index: 20;
width: 400px;
padding: 30px;
text-align: center;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
border-radius: 8px;
}
form{
display: flex;
flex-direction: column;
}
form h2{
font-size: 2rem;
margin-bottom: 20px;
}
.input-field{
position: relative;
border-bottom: 2px solid #ccc;
margin: 15px 0;
}
.input-field label{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: 0.5s ease-in-out;
}
.input-field input{
width: 100%;
height: 40px;
background: transparent;
outline: none;
border: none;
font-size: 16px;
color: #fff;
}
.input-field input:focus~label,
.input-field input:valid~label{
font-size: 0.8rem;
top: 10px;
transform: translateY(-120%);
}
.forget{
display: flex;
align-items: center;
justify-content: space-between;
margin: 25px 0 35px 0;
}
#remember{
accent-color: #000;
}
.forget label{
display: flex;
align-items: center;
}
.forget label p{
margin-left: 8px;
}
a{
color: #efefef;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
button{
background: #fff;
color: #000;
border: none;
font-weight: 600;
font-size: 16px;
padding: 12px 20px;
border-radius: 3px;
border: 2px solid transparent;
cursor: pointer;
}
button:hover{
color: #fff;
border-color: #fff;
background: rgba(0, 0, 0, 0.2);
}
.register{
text-align: center;
margin-top: 30px; }
Project 2

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Webpage Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="main">
<div class="navbar">
<div class="icon">
<h2 class="logo">DC</h2>
</div>

<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">DESIGN</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

<div class="search">
<input class="srch" type="search" name="" placeholder="Type To
text">
<a href="#"> <button class="btn">Search</button></a>
</div>

</div>
<div class="content">
<h1>Web Design & <br><span>Development</span> <br>Course</h1>
<p class="par">Lorem ipsum dolor sit amet consectetur adipisicing
elit. Sunt neque
expedita atque eveniet <br> quis nesciunt. Quos nulla vero
consequuntur, fugit nemo ad delectus
<br> a quae totam ipsa illum minus laudantium?</p>

<button class="cn"><a href="#">JOIN US</a></button>

<div class="form">
<h2>Login Here</h2>
<input type="email" name="email" placeholder="Enter Email
Here">
<input type="password" name="" placeholder="Enter Password
Here">
<button class="btnn"><a href="#">Login</a></button>

<p class="link">Don't have an account<br>


<a href="#">Sign up </a> here</a></p>
<p class="liw">Log in with</p>
<div class="icons">
<a href="#"><ion-icon name="logo-facebook"></ion-
icon></a>
<a href="#"><ion-icon name="logo-instagram"></ion-
icon></a>
<a href="#"><ion-icon name="logo-twitter"></ion-
icon></a>
<a href="#"><ion-icon name="logo-google"></ion-
icon></a>
<a href="#"><ion-icon name="logo-
skype"></ion-icon></a>
</div>

</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
</body>
</html>
Style.css
*{
margin: 0;
padding: 0;
}

.main{
width: 100%;
background: linear-gradient(to top,
rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(1.jpg);
background-position: center;
background-size: cover;
height: 100vh;
}

.navbar{
width: 1200px;
height: 75px;
margin: auto;
}

.icon{
width: 200px;
float: left;
height: 70px;
}
.logo{
color: #ff7200;
font-size: 35px;
font-family: Arial;
padding-left: 20px;
float: left;
padding-top: 10px;
margin-top: 5px
}

.menu{
width: 400px;
float: left;
height: 70px;
}

ul{
float: left;
display: flex;
justify-content: center;
align-items: center;
}

ul li{
list-style: none;
margin-left: 62px;
margin-top: 27px;
font-size: 14px;
}

ul li a{
text-decoration: none;
color: #fff;
font-family: Arial;
font-weight: bold;
transition: 0.4s ease-in-out;
}

ul li a:hover{
color: #ff7200;
}

.search{
width: 330px;
float: left;
margin-left: 270px;
}
.srch{
font-family: 'Times New Roman';
width: 200px;
height: 40px;
background: transparent;
border: 1px solid #ff7200;
margin-top: 13px;
color: #fff;
border-right: none;
font-size: 16px;
float: left;
padding: 10px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}

.btn{
width: 100px;
height: 40px;
background: #ff7200;
border: 2px solid #ff7200;
margin-top: 13px;
color: #fff;
font-size: 15px;
border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
transition: 0.2s ease;
cursor: pointer;
}
.btn:hover{
color: #000;
}

.btn:focus{
outline: none;
}

.srch:focus{
outline: none;
}

.content{
width: 1200px;
height: auto;
margin: auto;
color: #fff;
position: relative;
}

.content .par{
padding-left: 20px;
padding-bottom: 25px;
font-family: Arial;
letter-spacing: 1.2px;
line-height: 30px;
}

.content h1{
font-family: 'Times New Roman';
font-size: 50px;
padding-left: 20px;
margin-top: 9%;
letter-spacing: 2px;
}

.content .cn{
width: 160px;
height: 40px;
background: #ff7200;
border: none;
margin-bottom: 10px;
margin-left: 20px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
transition: .4s ease;

.content .cn a{
text-decoration: none;
color: #000;
transition: .3s ease;
}

.cn:hover{
background-color: #fff;
}

.content span{
color: #ff7200;
font-size: 65px
}

.form{
width: 250px;
height: 380px;
background: linear-gradient(to top,
rgba(0,0,0,0.8)50%,rgba(0,0,0,0.8)50%);
position: absolute;
top: -20px;
left: 870px;
transform: translate(0%,-5%);
border-radius: 10px;
padding: 25px;
}

.form h2{
width: 220px;
font-family: sans-serif;
text-align: center;
color: #ff7200;
font-size: 22px;
background-color: #fff;
border-radius: 10px;
margin: 2px;
padding: 8px;
}

.form input{
width: 240px;
height: 35px;
background: transparent;
border-bottom: 1px solid #ff7200;
border-top: none;
border-right: none;
border-left: none;
color: #fff;
font-size: 15px;
letter-spacing: 1px;
margin-top: 30px;
font-family: sans-serif;
}

.form input:focus{
outline: none;
}

::placeholder{
color: #fff;
font-family: Arial;
}
.btnn{
width: 240px;
height: 40px;
background: #ff7200;
border: none;
margin-top: 30px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
color: #fff;
transition: 0.4s ease;
}
.btnn:hover{
background: #fff;
color: #ff7200;
}
.btnn a{
text-decoration: none;
color: #000;
font-weight: bold;
}
.form .link{
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
padding-top: 20px;
text-align: center;
}
.form .link a{
text-decoration: none;
color: #ff7200;
}
.liw{
padding-top: 15px;
padding-bottom: 10px;
text-align: center;
}
.icons a{
text-decoration: none;
color: #fff;
}
.icons ion-icon{
color: #fff;
font-size: 30px;
padding-left: 14px;
padding-top: 5px;
transition: 0.3s ease;
}
.icons ion-icon:hover{
color: #ff7200;
}

Project 3

Index.html
<HTML>

<BODY bgcolor="lightgreen" > <center><TABLE BORDER = "1"


width="500px" height="200px"
>

<TR> <TH COLSPAN="3"> Annual Sports Day


- Sequence of Events </TH></TR>

<TR ALIGN="CENTER"> <TD> 8:00 AM-9:00 AM

</TD>

<TD> 9:00 AM - 1:00 PM</TD>

<TD> 1:00 PM - 2:00 PM</TD></TR>

<TR ALIGN="CENTER"><TD> Cultural Events</TD>

<TD> Track Events</TD>

<TD>Prize distribution</TD></TR>

</TABLE>
</center>
<br>
<center>

<img src="/Project 2/national-sports-day-illustration-with-sportsperson-from-


different-sport-in-flat-cartoon-hand-drawn-landing-page-background-templates-
vector.jpg" alt="Error 404" width="900
px" height="500px">

</center>
</BODY>

</HTML>

Project 4
Index.html
<HTML>
<BODY bgcolor="beige" > <BASEFONT FACE="cambria">
<center>
<img src="/project 3/100th-day-of-school-cartoon-colored-clipart-free-
vector.jpg" alt="Error"
height="250px"
></center>
<center><TABLE BORDER="1" BORDERCOLOR="red"
CELL 1SPACING="0" WIDTH="320">
<CAPTION> Activities </CAPTION>
<TR>
<TD ROWSPAN="3"> Sr. School </TD>
<TD> Maths Club </TD>
</TR>
<TR>
<TD> Robotics Club </TD>
</TR>
<TR>
<TD> Photography </TD>
</TR>
<TR>
<TD ROWSPAN="3"> Middle School </TD>
<TD> Gymnastic </TD>
</TR>
<TR>
<TD> Yoga </TD>
</TR>
<TR>
<TD> Computer Club </TD>
</TR>
<TR>
<TD ROWSPAN="3"> Primary School </TD> <TD>
Dance </TD>
</TR>
<TR>
<TD> Vocal Music </TD>
</TR>
<TR>
<TD> Swimming </TD> </TR>
</TABLE> </center>
</BODY>
</HTML>

Project 5

Index.html
<!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>The Tribute Website | Bhagat_Singh</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="content">
<section class="top_section">
<div class="image_container">
<img src="/7/download.jpg" alt="tribute" />
</div>
<div>
<h1>Bhagat Singh</h1>
<h4>1907 - 1931</h4>
</div>
</section>
<section class="about_section">
<h2>Indian revolutionary</h2>
<p>
<b>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Aspernatur rem ipsum repellendus cupiditate ratione sequi commodi aperiam, ab
cumque nostrum quod minima illo doloribus delectus quaerat consequatur quia
cum alias iusto perferendis, possimus, sint dignissimos! Dignissimos
doloremque, provident ipsam iusto cupiditate eius incidunt ab necessitatibus
iure animi maiores quasi, modi deleniti fugiat molestiae molestias nobis ut
quia eaque voluptatem sapiente delectus velit magni eveniet. Aut id,
perferendis tempore facere eveniet culpa illo excepturi veniam, sit magnam
expedita assumenda exercitationem ad laudantium nisi deserunt repellendus,
rerum consequuntur natus doloribus? Voluptate iste nostrum commodi pariatur
deserunt voluptatum? Enim sapiente obcaecati accusantium tenetur.
</p>
</section>

<footer>
<p>
Read more about Bhagat Singh on
<a href="https://en.wikipedia.org/wiki/Bhagat_Singh"
>Wikipedia.</a
>
</p>
</footer>
</div>
</div>
</body>
</html>
Style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.container {
background-color: #e5e5fd;
min-height: 100vh;
border: 10px solid #1d1e4c;
}

.content {
max-width: 900px;
margin: 0 auto;
}
.top_section {
margin-top: 100px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.top_section h1 {
font-size: 50px;
font-weight: bold;
color: #1d1e4c;
text-transform: uppercase;
}
.top_section h4 {
font-size: 30px;
text-align: end;
}

.image_container {
border-radius: 50%;
overflow: hidden;
}

.image_container,
img {
width: 300px;
height: 320px;
}
.about_section {
margin-top: 50px;
}
.about_section h2 {
font-size: 70px;
font-weight: 400;
margin-bottom: 20px;
}
.about_section p {
font-size: 20px;
line-height: 30px;
letter-spacing: 1.2px;
text-align: justify;
}
.biography_section {
margin: 50px 0;
}
.biography_section h3 {
margin-bottom: 20px;
}
.biography_section ul {
margin-left: 50px;
}
.biography_section li {
margin-bottom: 15px;
}

footer {
margin: 50px 0;
}
footer p {
text-align: end;
}
Project 6
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form </title>
<link rel="stylesheet" href="styles.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'
rel='stylesheet'>
</head>
<body>
<div class="wrapper">
<form action="">
<h1>Login</h1>
<div class="input-box">
<input type="text" placeholder="Username" required>
<i class='bx bxs-user'></i>
</div>
<div class="input-box">
<input type="password" placeholder="Password" required>
<i class='bx bxs-lock-alt' ></i>
</div>
<div class="remember-forgot">
<label><input type="checkbox">Remember Me</label>
<a href="#">Forgot Password</a>
</div>
<button type="submit" class="btn">Login</button>
<div class="register-link">
<p>Dont have an account? <a href="#">Register</a></p>
</div>
</form>
</div>
</body>
</html>
Style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: url(bg.jpg) no-repeat;
background-size: cover;
background-position: center;
}
.wrapper{
width: 420px;
background: transparent;
border: 2px solid rgba(255, 255, 255, .2);
backdrop-filter: blur(9px);
color: #fff;
border-radius: 12px;
padding: 30px 40px;
}
.wrapper h1{
font-size: 36px;
text-align: center;
}
.wrapper .input-box{
position: relative;
width: 100%;
height: 50px;

margin: 30px 0;
}
.input-box input{
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
border: 2px solid rgba(255, 255, 255, .2);
border-radius: 40px;
font-size: 16px;
color: #fff;
padding: 20px 45px 20px 20px;
}
.input-box input::placeholder{
color: #fff;
}
.input-box i{
position: absolute;
right: 20px;
top: 30%;
transform: translate(-50%);
font-size: 20px;

}
.wrapper .remember-forgot{
display: flex;
justify-content: space-between;
font-size: 14.5px;
margin: -15px 0 15px;
}
.remember-forgot label input{
accent-color: #fff;
margin-right: 3px;

}
.remember-forgot a{
color: #fff;
text-decoration: none;

}
.remember-forgot a:hover{
text-decoration: underline;
}
.wrapper .btn{
width: 100%;
height: 45px;
background: #fff;
border: none;
outline: none;
border-radius: 40px;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
cursor: pointer;
font-size: 16px;
color: #333;
font-weight: 600;
}
.wrapper .register-link{
font-size: 14.5px;
text-align: center;
margin: 20px 0 15px;

}
.register-link p a{
color: #fff;
text-decoration: none;
font-weight: 600;
}
.register-link p a:hover{
text-decoration: underline;
}
Project 7

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intermediate Website</title>

</head>
<body>
<center>
<header>
<h1> Website</h1>
</header>

<div class="container">
<section>
<h2>Welcome to our website!</h2>

</section>
<img src="/Project 1/fresh.png" alt="Error 404">
<section>
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Content Writing</li>
</ul>
</section>

<section>
<h2>Contact Us</h2>
<p>Feel free to reach out to us for any inquiries or collaborations.</p>
</section>
</div>

<footer>
&copy; 2023 Intermediate Website. All rights reserved.
</footer>
</center>
</body>
</html>

Style.css
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: white;
padding: 1em 0;
text-align: center;
}
nav {
background-color: #555;
color: white;
padding: 1em;
text-align: center;
}

nav a {
color: white;
text-decoration: none;
margin: 0 15px;
}

.container {
max-width: 800px;
margin: 20px auto;
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

section {
margin: 20px 0;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em 0;
}
Project 8
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Website </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner">
<div class="navbar">
<div class="logo">DC</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Bedroom</a></li>
<li><a href="#">Dining</a></li>
<li><a href="#">Kitchen</a></li>
<li><a href="#">Backyard</a></li>
</ul>
</div>

<div class="content">
<h1>Design Your House</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Aliquid, atque. <br>Lorem ipsum dolor sit amet.</p>
<div>
<button type="button"><span></span> More Design</button>
<button type="button"><span></span>Contact Us !!</button>
</div>
</div>
</div>

</body>
</html>
Style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
color: #fff;
}

.banner{
width: 100%;
height: 100vh;
background: linear-
gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url("bg.jpg");
background-size: cover;
background-position: center;
}

.navbar{
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}

a{
text-decoration: none;
}

li{
list-style-type: none;
}

.logo{
font-size: 32px;
font-weight: 700;
}

.navbar ul li{
display: inline-block;
margin: 0 20px;
position: relative;
}

.navbar ul li a{
text-transform: uppercase;
}

.navbar ul li::after{
content: '';
height: 3px;
width: 0;
position: absolute;
background: #009688;
left: 0;
bottom:-10px;
transition: 0.5s;
}
.navbar ul li:hover::after{
width: 100%;
}

.content{
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
}

.content h1{
font-size: 70px;
margin-top: 80px;
}
.content p{
font-weight: 100;
line-height: 25px;
margin: 20px auto;
}

button{
width: 200px;
padding: 15px 0;
text-align: center;
margin: 20px 10px;
border-radius: 25px;
font-weight: bold;
border: 2px solid #009688;
background: transparent;
cursor: pointer;
position: relative;
overflow: hidden;
text-transform: uppercase;
}
span{
background: #009688;
height: 100%;
width: 0;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
transition: 0.5s;
}

button:hover span{
width: 100%;
}

button:hover{
border: none;
}

Project 9

Index.html
<!DOCTYPE html>
<html>
<head>
<title> Landing page design using html and css in hindi</title>
<style type="text/css">
*{padding: 0; margin:0; box-sizing: border-box; font-family: sans-
serif;
}
header{
width: 100%;
height: 100vh;
background: url(images/pizza2.png);
background-size: 50% 90%;
background-repeat: no-repeat;
background-position: bottom right;
position: relative;
}
nav{
width: 100%;
height: 70px;
padding: 0px 70px;
background: white;
color: black;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 2px 0px 5px grey;
}
.logo{
font-weight: bold;
font-size: 2em;
letter-spacing: 2px;
}
.logo span{
color: brown;
}
.menu a{
text-decoration: none;
color: black;
padding: 10px 20px;
}
.menu a:last-child{
background: brown;
color: white;
border-radius: 8px;
}

.h-text{
position: absolute;
top:30%;
left: 5%;
padding: 15px;

}
.h-text p{
color: #262626;
letter-spacing: 3px;
font-weight: bold;
}
.h-text h1{
font-size: 4em;
line-height: 1.5em;
}
.h-text h1 span{
color: brown;
}
.h-text h2{
font-size: 4em;
margin-bottom: 0.5em;
}
#order{
text-decoration: none;
color: white;
background: brown;
border-radius: 8px;
padding: 10px 20px;
}
#dis{
text-decoration: none;
color: white;
background: #262626;
padding: 10px 20px;
border-radius: 8px;
}
#pizza{
position: absolute;
bottom: 15%;
left: 5%;
}
#pizza img{
transition: 0.4s ease;
}
#pizza img:hover{
transform: translateY(-20px);
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo"><span>Pi</span>zzahat</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">Foods</a>
<a href="#">Offer's</a>
<a href="#">Your Order</a>
<a href="#">Delivery</a>
<a href="#">Cart</a>
</div>
</nav>
<div class="h-text">
<p>Free Home Delivery</p>
<h1>Quality F<span>oo</span>ds </h1>
<h2>Pizza of the Week</h2>
<a href="#" id="order">Order now!!</a>
<a href="#" id="dis">25% Off Hurry!!</a>
</div>
<div id="pizza">
<img src="images/pizza3.png" width="100">
<img src="images/pizza3.png" width="100">
<img src="images/pizza3.png" width="100">
</div>
</header>
</body>
</html>
Project 10
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Travel Website</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="navbar">
<div class="logo">
<h1>Travel</h1>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Places</a></li>
<li><a href="#">Discounts</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Booking</a></li>
</ul>
</div>
<div class="signup">
<a href="#">Sign Up</a>
</div>
</div>
<div class="body">
<div class="heading">
<h1>Travel With Us</h1>
<br>
<p>ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
<br>
<br>
<a href="#">Learn More</a>
</div>
<div class="tours">
<div class="places">
<h2>Australia</h2>
<img src="img1.jpg" style="width: 300px; height: 250px;
border-radius: 12px;">
<br>
<br>
<a href="#">Book Now 15% OFF</a>
</div>
<div class="places">
<h2>New York</h2>
<img src="img2.jpg" style="width: 300px; height: 250px;
border-radius: 12px;">
<br>
<br>
<a href="#">Book Now 20% OFF</a>
</div>
<div class="places">
<h2>Thailand</h2>
<img src="img3.jpg" style="width: 300px; height: 250px;
border-radius: 12px;">
<br>
<br>
<a href="#">Book Now 25% OFF</a>
</div>
</div>
</div>
<div class="footer">
<a href="#">Copyright</a>
<a href="#">Terms and Conditions</a>
<a href="#">Privacy Policy</a>
<a href="#">Cookies</a>
<a href="#">Complaints</a>
</div>
</body>
</html>
Style.css
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
list-style: none;
font-family: 'Poppins', sans-serif;

}
.navbar{
width: 100%;
height: 80px;
background-color: #fee;
display: flex;
justify-content: space-around;
align-items: center;
color: #000;
}
.menu ul{
display: flex;
align-items: center;
}
.menu ul li a{
text-decoration: none;
color: #000;
padding: 5px 12px;
letter-spacing: 2px;
font-size: 18px;
}
.menu ul li a:hover{
border-bottom: 4px solid #000;
transition: 0.4s;
}
.signup a{
text-decoration: none;
color: #000;
font-size: 18px;
font-weight: bold;
border-radius: 12px;
padding: 12px 30px;
border: 2px solid #ff0000;
}
.signup a:hover{
background-color: red;
transition: 0.6s;
}
.body{
width: 100%;
height: 90vh;
display: flex;
justify-content: space-around;
align-items: center;
background-image: linear-
gradient(rgba(0,0,0,0.50),rgba(0,0,0,0.50)),url(img1.jpg);
background-position: center;
background-size: cover;
}
.heading{
width: 30%;
text-align: center;
color: #fff;
}
.heading h1{
font-size: 40px;
}
.heading a{
text-decoration: none;
color: #000;
font-size: 25px;
font-weight: bold;
border-radius: 45px;
padding: 14px 50px;
background-color: #fff;
}
.heading a:hover{
letter-spacing: 3px;
transition: 0.6s;
}
.tours{
width: 70%;
display: flex;
justify-content: space-around;
}
.places{
display: inline;
text-align: center;
border-radius: 12px;
}
.places h2{
color: red;
font-size: 35px;
letter-spacing: 3px;
border-radius: 1px;
padding: 30px 30px;
background-color: #000;
}
.places a{
text-decoration: none;
color: red;
font-weight: bold;
font-size: 18px;
border-radius: 12px;
padding: 12px 30px;
background-color: #fff;
}
.places a:hover{
background-color: #000;
letter-spacing: 3px;
transition: 0.6s;
}
.footer{
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.footer a{
text-decoration: none;
color: green;
font-size: 18px;
font-weight: bold;
}
.footer a:hover{
text-decoration: underline;
transition: 0.4s;
}

You might also like