Skip to content
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

header product #3

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

header product #3

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
325 changes: 325 additions & 0 deletions header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,325 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>header</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style type="text/css">
#navbar{
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px;
position: fixed;
top: 0;
height: 70px;
width: 100%;
}
.sticky{
background-color: white;
color: blue;
padding: 20px;
position: fixed;
top: 0;
width: 100%;
}
#header{
height: 400px;
width: 100%;
border: 1px solid;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDAidIlNO8DxZtI24RbiPEVTjwI1x4UL7WO-PD4B7LHjq5JWQZAekh3pFZ0tBK5QstQdU&usqp=CAU);
background-repeat: no-repeat;
background-size: cover;
}
#search_div{
border: 1px solid red;
align-items: center;
margin-top: 300px;
margin-left:80px ;
}
</style>
</head>
<body>
<div id="navbar">
<h3>WHY ONN?</h3>
<h3>FLEET AND PRICING</h3>
<h3>SAFETY</h3>
<img src="https://www.onnbikes.com/img/ONN-logo-unit-without-shadow.png" style="width:70px;">
<h3 id="navhead">FAQ</h3>
<h3>LOGIN/SIGNUP</h3>
<h3>+918378007800</h3>
</div>

<div id="header">
<div id="search_div"><select><option>sbcjhb</option></select><select><option>djkvhnjk</option></select><input type="datetime-local" placeholder="dateandtime"><!-- <input type="time" placeholder="time" min="9:00" max="22:00" step="2"> --></div>
</div>

<div>
<div></div><div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
MUMBAI - CORPORATE HQ
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><b>Motocruizer Technologies (I) Pvt. Ltd.</b><br>
Office No. 8, Floor-3, Plot-422, Nav Bhavna, Swatantrya Veer Savarkar Road, Prabhadevi Mumbai Mumbai City MH 400025 IN</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
BENGALURU
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul>
<li>KORAMANGALA
<br>
No 150/1 and 2, Hosur Main Road, Opposite Big Bazaar, Next to Raja Honda, Koramangala, Bengaluru - 560095</li>
<br>
<li>ELECTRONIC CITY
<br>
#634/472, Doddathogur, Velankani Gate, Electronic City Phase 1, Electronics City Phase,Bengaluru 560100</li>
<br>
<li>MS RAMAIAH COLLEGE
<br>
Ground Floor, Sree Premprasad Complex, Opposite Ramaiah Hospital, New BEL Road, M S Ramaiah College, Bengaluru - 560054</li>
<br>
<li>KUNDALAHALLI
<br>
Munni Reddy Complex, Varthur Main Road, Opposite Nadhini Wines, Silver Springs Layout, Kundalahalli, Bengaluru - 560066</li>
<br>
<li>YELAHANKA
<br>
200/1, KV SR Layout, Kattigenahalli, Bagalur Main Road, Next to Reliance Fresh, Bengaluru - 560063</li>
<br>
<li>HSR 7TH SECTOR
<br>
NO 179 , 9th Main, 7th Sector, Hsr Layout, Bangalore 560102, Karnataka, India</li>
<br>
<li>SILK BOARD SRCM
<br>
28, Hosur Road, Madiwala, Balaji Nagar, BTM Layout 1, Central Silk Board Colony, Stage 2, BTM Layout, Bengaluru, Karnataka 560068</li>
<br>
<li>ELECTRONIC CITY HUB
<br>
#634/472, Doddathogur, Velankani Gate, Electronic City Phase 1, Electronics City Phase,Bengaluru 560100</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
HYDERABAD
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><ul><li>MADHAPUR
<br><br>
Plot no 539,under apna bazar super market,100ft road,ayyapa society,chanda naik nagar,Madhapur,500081
</li>
<br>
<li>
GACHIBOWLI
<br><br>
Plot 60, Flat 101, Vision Ultima building, Jayabehri enclave, opp dog park, Gachibowli 500032</li>
<br>
<li>
AMEERPET
<br><br>
Swathi anukar basement, Beside Aditya trade Center,Ameerpet 500018</li>
<br>
<li>
SECUNDERABAD
<br><br>
GHMC parking, Opp Yashoda Hospital,CMR shopping mall Lane, Secunderabad</li>
<br>
<li>
CHANDA NAGAR
<br><br>
Akshita Spaces, Second Floor, Plot # 194p, Rajendar Reddy Nagar Colony, Ameenpur Road, Chanda Nagar, Hyd -500050.</li>
<br>
<li>
DIAMOND HILL SHAIKPET
<br><br>
Mini Gulshan colony, Opposite lead grammer school, Shaikpet, Golconda, Hyderabad 500008</li>
<br>
<li>
MADHAPUR HUB
<br><br>
Apna bazar apartment, 100 Fleet road</li></ul></div>
</div>
</div>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
JAIPUR
</button>
</h2>
<div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><ul><li>GT - GAURAV TOWER
<br><br>
Malviya Nagar Road, D-Block, Malviya Nagar, D-Block, Crystal Court, Malviya Nagar, Jaipur, Rajasthan 302017
</li><br><li>
GOLD SOUK GRAND MALL -JAWAHAR CIRCLE
<br><br>
Gold Souk Grand Mall (Near Hotel Lalit, Basement 2 Parking), Jaipur, Rajasthan 302001
</li><br><li>
C SCHEME
<br><br>
Man Upasana C-44 Sardar Patel Marg Panch Batti, C Scheme, Ashok Nagar Jaipur, Rajasthan 302001
</li><br><li>
NEW AATISH MARKET- METRO STATION
<br><br>
New Aatish Market Metro station, Gurjar ki Thadi Underpass, Sultan Nagar, Shanthi Nagar,Near Metro Station, Mansarovar, Jaipur, Rajasthan 302020
</li><br><li>
JAGATPURA ROAD
<br><br>
Jagatpura Rd, Beside Credr Showroom, Shyam Vihar Colony, Malviya Nagar, Jaipur, Rajasthan 302017
</li><br><li>
RAJA PARK
<br><br>
Das and Yadav Complex, Panchwati Circle, Raja Park, Jaipur, Rajasthan 302004
</li><br><li>
MANSAROVAR- SHIPRA PATH
<br><br>
34/17, Shipra path,Opposite Reil house, Mansarovar, Jaipur-302020
</li><br><li>
VIVACITY MALL, JAGATPURA
<br><br>
C-3, Vivacity Mall ,near Akshay Patra, Mahal Yojana, Jagatpura, Jaipur, Rajasthan 302033
</li><br><li>
VAISHALI NAGAR
<br><br>
Block A, Vaishali Nagar, Near Vaishali Hospital, Jaipur, Rajasthan 302021
</li><br><li>
MI ROAD, SILVER SQUARE MALL
<br><br>
18-33 Bhagwan Das Rd, C-Scheme, Near Rajmandir Cinema, Jaipur, Rajasthan 302001</li></ul></div>
</div>
</div>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
GURUGRAM
</button>
</h2>
<div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><ul><li>BIKE SURGEON
<br><br>
51/19, Bhim nagar, New Railway Rd, Gurugram, HR-122001</li></div>
</div>
</div>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingSix">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">
MYSURU
</button>
</h2>
<div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><ul><li>INFOSYS
<br><br>
Shobhja Gate, Hebbal Industrial Area, Meenakunte, Hebbal Industrial Estate, Mysuru, Karnataka 570016
</li><br><li>
JAGANMOHAN PALACE
<br><br>
425 - 426, Deshika Road, Opp. Jaganmohan Palace, Subbarayanakere, Chamrajpura, Mysuru, Karnataka 570024
</li><br><li>
GOKULAM
<br><br>
350, 5th Main Rd, Gokulam 2nd Stage, Gokulam, Mysuru, Karnataka 570002</li></ul></div>
</div>
</div>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingSeven">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
PUNE
</button>
</h2>
<div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"></div>
</div>
</div>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingEight">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
UDAIPUR
</button>
</h2>
<div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><ul><li>UDAIPOLE
<br><br>
Shop NO-6, Arihant Plaza ,Opposite ICICI Bank Udaipole ,Udaipur-313001</li></ul></div>
</div>
</div>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingNine">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine">
AHMEDABAD
</button>
</h2>
<div id="flush-collapseNine" class="accordion-collapse collapse" aria-labelledby="flush-headingNine" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><ul><li>VIJAY CROSS ROAD
<br><br>
The Link, Nr. Vijay Cross Road, Navrangpura, Ahmedabad 380009</li></ul></div>
</div>
</div>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTen">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTen" aria-expanded="false" aria-controls="flush-collapseTen">
GURGAON
</button>
</h2>
<div id="flush-collapseTen" class="accordion-collapse collapse" aria-labelledby="flush-headingTen" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><ul><li><b>Omaxe celebration mall</b><br><br>
2nd floor, office, near Subash chowk, gurgaon 122001</li></ul></div>
</div>
</div>
</div>



</div>
</body>
</html>
<script type="text/javascript">
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
// console.log(window.pageYOffset,sticky)
if (window.pageYOffset > sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
var images=["https://c.ndtvimg.com/2022-02/ig3tj5h4_2022-yezdi-adventure-review_625x300_10_February_22.jpg","https://c.ndtvimg.com/2022-02/v12hnejg_2022-yezdi-roadster-review_625x300_10_February_22.jpg","https://c.ndtvimg.com/2022-02/ebdie0mc_2022-yezdi-adventure-review_625x300_11_February_22.jpg","https://c.ndtvimg.com/2022-02/v0hn73co_2022-yezdi-adventure-review_625x300_10_February_22.jpg","https://c.ndtvimg.com/2022-02/4a4hj2qc_2022-yezdi-adventure-review_625x300_10_February_22.jpg","https://www.onnbikes.com/img/R2o-desktopbanner.jpg","https://www.onnbikes.com/img/[email protected]"]
function setimageheader(){
let headimg=document.getElementById("header");
let i=0;
setInterval(function(){
if(i==images.length){i=0}
let img=images[i];
headimg.style=`background-image: url("${img}")`;
// console.log("Neeraj")
i++;
},3000)
}
setimageheader()
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Loading