Skip to content

Add files via upload #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tanishqv181 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add files via upload #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
211 changes: 211 additions & 0 deletions main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
@import url("https://fonts.googleapis.com/css?family=Rowdies:400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Caveat Brush:400,500,600,700&display=swap");
*{
margin: 0;
padding: 0;
}

body{
background-color: #b1acaf;
font-family: "Rowdies",'sans-serif';
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background: rgb(194, 187, 187);
font-family: "Caveat Brush", sans-serif;
}
.logo {
color: black;
text-transform: uppercase;

font-size: 3em;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
margin-left: 5em;
}
.nav-links li {
list-style: none;
}

.nav-links li:hover {
background-color: white;
border-radius: 0.7em;
}

.nav-links a {
color: black;
text-decoration: none;
letter-spacing: 2px;
padding: 1rem;
display: block;
font-family: "Caveat Brush";
font-size: 1.5em;
font-weight: 550;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 5px;
background-color: rgb(226, 226, 226);
margin: 3px;
cursor: pointer;
transition: all 0.4s ease;
}

@media screen and (max-width: 1024px) {
.nav-links {
width: 50%;
}
}

@media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}

.logo {
font-size: 1.7em;
padding: 0.5em 1em;
font-weight: 600;
}

.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(-100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}

.nav-links li a {
color: white;
font-size: 1.2em;
}

.nav-links li:hover {
background-color: #757575;
padding-left: 20px;
padding-right: 20px;
}
.burger {
display: block;
}
}

.nav-active {
transform: translateX(0%);
z-index: 1;
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}

.container{
width: 900px;
margin: 70px auto;
}

.Book , .check{
width: 50%;
background-color: #fff;
height: 60px;
float: left;
font-size: large;
line-height: 60px;
text-transform: uppercase;
text-align: center;
}

.book-form , .check-form{
background-color: #fff;
box-sizing: border-box;
padding: 40px;
clear: both;
width: 100%;
}

.textarea{
width: 100%;
box-sizing: border-box;
padding: 20px;
margin-bottom: 10px;
border: 2px solid #e9eaea;
color: #3e3e40;
font-size: 14px;
outline: none;
transition: all 0.5s ease;
}

.input{
width: 100%;
box-sizing: border-box;
padding: 10px;
margin-bottom: 10px;
border: 2px solid #e9eaea;
color: #3e3e40;
font-size: 14px;
outline: none;
transition: all 0.5s ease;
}

.input:focus{
border: 2px solid #34b3a0;
}

input, label{
display: block;
}

.btn{
width: 100%;
background-color: #34b3a0;
height: 60px;
text-align: center;
line-height: 60px;
text-transform: uppercase;
color: #fff;
font-weight: bold;
letter-spacing: 1px;
margin-bottom: 20px;
border-radius: 10px;
margin-top: 20px;
}

@media (max-width: 700px){
.container{
width: 370px;
}
}
103 changes: 103 additions & 0 deletions main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Booking</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<link rel="stylesheet" href="main.css">
<script>
$(document).ready(function(){
$(".check-form").hide();
$(".check").css("background","none");

$(".check").click(function(){
$(".book-form").hide();
$(".check-form").show();
$(".Book").css("background","none");
$(".check").css("background","#fff");
});

$(".Book").click(function(){
$(".book-form").show();
$(".check-form").hide();
$(".Book").css("background","#fff");
$(".check").css("background","none");
});
});
</script>
</head>
<body>
<nav>

<div class="logo">
<h3>Packers And Movers</h3>
</div>


<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Booking</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
</ul>

<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>

<div class="container">
<div class="Book">
Book
</div>
<div class="check">
Check Status
</div>
<div class="book-form">

<label for="">Name:</label>
<input type="text" class="input"><br>


<label for="">Email:</label>
<input type="text" class="input"><br>

<label for="">Mobile No.</label>
<input type="tel" class="input"><br>

<label for="">Where do you want the Packers and Movers service?</label>
<input type="text" class="input"><br>


<label for="">Where are you shifting?</label>
<input type="text" class="input"><br>


<label>Date</label>
<input type="date" class="input"><br>


<label>What do you want to shift?</label>
<input type="text" class="input"><br>


<label>Please mention all the items</label>
<textarea class="textarea" name="" id="" cols="30" rows="5" placeholder="message..."></textarea><br>

<input type="submit" value="Submit" class="btn">
</div>

<div class="check-form">
<label for="check">Enter your token number</label>
<input type="text" class="input"><br>
<input type="submit" value="Check" class="btn">
</div>
</div>
<script src="main.js"></script>
</body>
</html>
24 changes: 24 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");

burger.addEventListener("click", () => {
// Toggle nav
nav.classList.toggle("nav-active");
// Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${
index / 7 + 0.5
}s`;
}
});

// Burger Animation
burger.classList.toggle("toggle");
});
};
navSlide();