Create Travel Website HTML/CSS With Free Source Code By Indian Coding Wala

Omnath Dubey 5/14/2023 03:37:00 AM

HTML Source Code :-

<!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" />
<link rel="stylesheet" href="style.css" />
<title>Indian Coding Wala</title>
</head>
<body>
<nav>
<div class="nav__logo"><a href="#">Indian Coding Wala</a></div>
<ul class="nav__links">
<li class="link">Home</li>
<li class="link">Booking</li>
<li class="link">About Us</li>
<li class="link">Contact Us</li>
</ul>
<div class="search__box">
<input type="text" placeholder="Search" />
<i class="ri-search-line"></i>
</div>
</nav>

<div class="container">
<div class="container__left">
<div class="content">
<h1>Indian Coding Wala</h1>
<p>
Traveling can be a wonderful experience that allows you to explore new places, meet new people, and learn about different cultures. However, it can also be stressful at times, especially if you are traveling to an unfamiliar destination or if you encounter unexpected challenges along the way.
</p>
<div class="btns">
<button class="our__blogs">Blog</button>
<button class="our__blogs">About</button>
<button class="our__blogs">Booking</button>
</div>

</div>
</div>
<div class="container__right">
<form>
<h4>Where you want to go?</h4>
<div class="form__group">
<label for="destination">Destination</label>
<input
type="text"
name="destination"
id="destination"
placeholder="Enter destination"
/>
</div>
<div class="form__group">
<label for="date">Date</label>
<input type="text" name="date" id="date" placeholder="dd/mm/yyyy" />
</div>
<button type="submit">All Package</button>
</form>
</div>

</div>
</body>
</html>

CSS Source Code :-

:root {
--primary-color: #04c8ce;
--text-dark: #333333;
--text-light: #ffffff33;
--extra-light: #f3f4f6;

--max-width: 1300px;
}

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

a {
text-decoration: none;
}

input::placeholder {
color: var(--extra-light);
}

body {
font-family: "Open Sans", sans-serif;
min-height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
url("https://images.pexels.com/photos/4651134/pexels-photo-4651134.jpeg?auto=compress&cs=tinysrgb&w=600");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}

nav {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: var(--max-width);
padding: 2rem;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
}

.nav__logo a {
font-size: 1.5rem;
font-weight: 600;
color: var(--extra-light);
}

.nav__links {
list-style: none;
display: flex;
align-items: center;
gap: 3rem;
}

.nav__links .link {
font-size: 1.2rem;
font-weight: 500;
color: var(--extra-light);
cursor: pointer;
transition: 0.3s;
}

.nav__links .link:hover {
color: var(--primary-color);
}

.search__box {
padding: 0.5rem 0;
border-bottom: 2px solid var(--extra-light);
}

.search__box input {
color: var(--extra-light);
background-color: transparent;
outline: none;
border: none;
}

.search__box i {
color: var(--extra-light);
font-size: 1.2rem;
cursor: pointer;
}

.container {
display: flex;
min-height: 100vh;
max-width: var(--max-width);
margin: auto;
padding: 2rem;
padding-top: 100px;
position: relative;
}

.container__left,
.container__right {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-start;
}

.container__left .content {
max-width: 400px;
display: grid;
gap: 1rem;
}

.content h1 {
font-size: 4rem;
line-height: 4rem;
color: var(--extra-light);
font-weight: 700;
}

.content p {
color: var(--extra-light);
}

.btns {
display: flex;
gap: 1rem;
}

.btns button {
padding: 0.5rem 2rem;
color: var(--extra-light);
font-size: 1rem;
background-color: transparent;
outline: none;
border: 2px solid var(--extra-light);
border-radius: 2rem;
cursor: pointer;
transition: 0.3s;
}

button.read__more {
background-color: var(--extra-light);
color: var(--text-dark);
}

button.our__blogs:hover {
background-color: var(--text-light);
}

.chevrons {
display: flex;
gap: 1rem;
}

.chevrons span:hover {
background-color: var(--text-light);
}

.container__right {
justify-content: flex-end;
}

form {
width: 350px;
display: grid;
border-radius: 5px;
background-color: var(--text-light);
color: var(--extra-light);
}

form h4 {
font-size: 1.2rem;
font-weight: 600;
padding: 2rem;
}

.form__group {
display: grid;
padding: 0 2rem;
margin-bottom: 1rem;
}

.form__group input {
padding: 0.5rem;
font-size: 1rem;
color: var(--extra-light);
background-color: transparent;
outline: none;
border: none;
border-bottom: 2px solid var(--extra-light);
}

form button {
margin-top: 1rem;
padding: 1rem;
font-size: 1rem;
font-weight: 600;
outline: none;
border: none;
border-radius: 5px;
background-color: var(--primary-color);
color: var(--extra-light);
cursor: pointer;
}

.bottom__tracker {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 1rem;
}

.bottom__tracker span {
display: inline-block;
height: 4px;
width: 100px;
background-color: var(--text-light);
}

.bottom__tracker span:nth-child(2) {
background-color: var(--extra-light);
}

Create Travel Website

There are millions of websites created every day, also, there is much fake content spread on the internet. So, Our main goal is to provide you with 100% Original and Safe content that provides you a great and better experience on the world wide web. We mainly focus on our service so and improving it regularly to provide a better user experience to all users. Basically, we focus on the News niche so, our main priority is to search for new content and present it in front of you to learn something new.