Skip to content

Commit

Permalink
Merge pull request #52 from JSuhas123/master
Browse files Browse the repository at this point in the history 
modified navbar
  • Loading branch information
@07sumit1002
07sumit1002 authored Jul 6, 2024
2 parents cba2226 + 2114632 commit 1bfac10
Show file tree
Hide file tree
Showing 3 changed files with 303 additions and 0 deletions.
75 changes: 75 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,80 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewprot" content="width=device-width, initial-scale=1.0">
<title>CabRental</title>
<!-- Link to CSS -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
</head>
<body>
<!-- Header -->
<header>
<a href="#" class="logo"><img src="img/logo.png" alt=""></a>
<nav>
<div class="nav-right">
<div class="nav-links">
<a href="index.html"class="active">Home</a>
<a href="ride.html">Ride</a>
<a href="serv.html">Services</a>
<a href="about.html">About</a>
<a href="review.html">Reviews</a>
<a href="contact.html">Contact</a>
</div>
<div class="header-btn">
<div>
<a href="#" class="sign-up">Login</a>
</div>
</div>
</div>
</nav>
</header>
<!-- <header>
<a href="#" class="logo"><img src="img/logo.png" alt=""></a>
<div class="bx bx-menu" id="menu-icon"></div>
<ul class="navbar">
<li><a href="index.html"class="active">Home</a></li>
<li><a href="ride.html">Ride</a></li>
<li><a href="serv.html">Services</a></li>
<li><a href="about.html">About</a></li>
<li><a href="review.html">Reviews</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="header-btn">
<a href="#" class="sign-up">Login</a>
</div>
</header>-->
<!-- Home -->
<section class="home" id="home">
<div class="text">
<h1><br>Want to <span>Share</span> or <span>Rent</span> <br>a cab.</h1>
<p>Wherever you're going, there's a carpool that will<br>
get you there for less.</p>
<div class="carweb">
<img src="img/Car Website – 1@2x.png" alt="">
</div>
</div>
<div class="form-container">
<form action="anonimous.php" method="post">
<div class="input-box">
<span>From <span> MUJ Hostel</span> To</span>
<input type="search" name="search" id="search" placeholder="Search Places">
</div>
<div class="input-box">
<span>Travelling Date</span>
<input type="date" name="dat" id="dat">
</div>
<div class="input-box">
<span>Depart. Time</span>
<input type="time" name="tim" id="tim">
</div>
<input type="submit" name="submit" id="submit" class="btn">
</form>
=======

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
Expand Down Expand Up @@ -45,6 +119,7 @@ <h1><br>Want to <span>Share</span> or <span>Rent</span> <br>a cab.</h1>
get you there for less.</p>
<div class="carweb">
<img src="img/Car Website – 1@2x.png" alt="">

</div>
</div>
<!-- <div class="form-container">
Expand Down
93 changes: 93 additions & 0 deletions ride.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,97 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewprot" content="width=device-width, initial-scale=1.0">
<title>Cabshare</title>
<!-- Link to CSS -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<style>
/* For screens smaller than 576px (extra small devices) */
@media (max-width: 575.98px) {
.form {
width: 90%;
margin: 0 auto;
}
h1 {
font-size: 1.5rem;
margin-left: 30%;
}
}

/* For screens between 576px and 767.98px (small devices) */
@media (min-width: 576px) and (max-width: 767.98px) {
.form {
width: 70%;
margin: 0 auto;
}
h1 {
font-size: 1.8rem;
margin-left: 25%;
}
}

/* For screens between 768px and 991.98px (medium devices) */
@media (min-width: 768px) and (max-width: 991.98px) {
.form {
width: 60%;
margin: 0 auto;
}
h1 {
font-size: 2rem;
margin-left: 20%;
}
}

/* For screens between 992px and 1199.98px (large devices) */
@media (min-width: 992px) and (max-width: 1199.98px) {
.form {
width: 50%;
margin: 0 auto;
}
h1 {
font-size: 2.2rem;
margin-left: 15%;
}
}

/* For screens 1200px and larger (extra large devices) */
@media (min-width: 1200px) {
.form {
width: 40%;
margin: 0 auto;
}
h1 {
font-size: 2.5rem;
margin-left: 10%;
}
}

</style>
</head>
<body class="col-md-12">
<script src="main.js"></script>
<!-- Header -->
<header style="display: flex !important;">
<a href="#" class="logo"><img src="img/logo.png" alt=""></a>
<div class="bx bx-menu" id="menu-icon"></div>
<ul class="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="ride.html">Ride</a></li>
<li><a href="serv.html">Services</a></li>
<li><a href="about.html">About</a></li>
<li><a href="review.html">Reviews</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="header-btn">
<div>
<a href="#" class="sign-up">Login</a>
</div>

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
Expand Down Expand Up @@ -280,6 +372,7 @@ <h1>Rider Details!<span></span></h1>
<span class="privacy-policy">
<input type="checkbox" name="field7">You agree to our Terms and Policy.
</span>

</div>
</form>
</div>
Expand Down
135 changes: 135 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,140 @@ header {
}

.logo img {
width: 60px;
border-radius: 10px; /* This creates 10px rounded corners */
}
------------------------------------------

header nav {
padding: 20px 40px 20px 100px;
display: grid;
grid-template-columns: 1fr 2fr;
align-items: center;
border-bottom: 1px solid #1e1e1e;
}

header nav .nav-right {
display: flex;
align-items: center;
justify-content: space-between;
}

header nav .nav-right a {
text-decoration: none;
color: #1e1e1e;
margin-right: 40px;
position: relative;
}

header nav .nav-right a:after {
content: '';
position: absolute;
left: 0;
bottom: -30px;
width: 0;
height: 2px;
background: #1e1e1e;
transition: width .3s ease-in-out;
}

header nav .nav-right a:hover:after {
width: 70%;
}

header nav .nav-right a.active:after {
width: 70%;
}

header nav .nav-right .header-btn > div {
background: #eeeff1;
display: flex;
align-items: center;
padding: 10px 15px;
border-radius: 50px;
}

header nav .nav-right .header-btn > div input {
background: transparent;
border: none;
outline:none;
font-size: 16px;
color: #fff;
}
.sign-up {
padding: 8px 30px;
border: 1px solid transparent;
border-radius: 50px;
outline: none;
cursor: pointer;
font-size: 16px;
transition: all .5s ease-in-out;
}

.sign-up {
background: transparent;
color: #eeeff1;
border-color: #ff0001;
}

.sign-up:hover {
/* background: #ffffff;*/
background: #ff0001;
color: #121212;
}
/*.navbar{
display: flex;
}
.navbar li{
position: relative;
}
.navbar a{
font-size: 1rem;
padding: 10px 20px;
color: #444;
font-weight: 500;
}
.navbar a ::after{
content: '';
width: 0;
height: 3px;
background: red;
position: absolute;
bottom: -4px;
left: 0;
transition: 0.5s;
}
.navbar a:hover{
background: rgb(231, 223, 223);
}
#menu-icon{
font-size: 24px;
cursor: pointer;
z-index: 10001;
display: none;
}
.header-btn a{
padding: 10px 20px;
color: #444;
font-weight: 500;
}
.header-btn .sign-in{
background: #475fa0;
color: #fff;
border-radius: 0.5rem;
}
.header-btn .sign-in:hover{
background: red;
}
.header-btn .sign-up{
background: #474fa1;
color: #fff;
border-radius: 0.5rem;
}
.header-btn .sign-up:hover{
background: rgb(211, 10, 10);
}*/
=======
width: 60px;
border-radius: 10px;
/* This creates 10px rounded corners */
Expand Down Expand Up @@ -120,6 +254,7 @@ header {
background: rgb(211, 10, 10);
}


.home {
width: 100%;
min-height: 100vh;
Expand Down

0 comments on commit 1bfac10

Please sign in to comment.