From a215808aa1f8db8ca7f4af592c46f3bd50289659 Mon Sep 17 00:00:00 2001 From: gafoor8374 <97434962+gafoor8374@users.noreply.github.com> Date: Sat, 26 Feb 2022 09:47:56 +0530 Subject: [PATCH] Add files via upload --- shaik/components/form.css | 220 +++++++++++++++++ shaik/components/from.js | 477 +++++++++++++++++++++++++++++++++++++ shaik/home.html | 489 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 1186 insertions(+) create mode 100644 shaik/components/form.css create mode 100644 shaik/components/from.js create mode 100644 shaik/home.html diff --git a/shaik/components/form.css b/shaik/components/form.css new file mode 100644 index 0000000..274459d --- /dev/null +++ b/shaik/components/form.css @@ -0,0 +1,220 @@ + #container-g { + width:80%; + height: fit-content; + margin:auto; + border:1px solid blue; + } + .first-div{ + margin-left:5px; + display: grid; + grid-template-columns: repeat(3,1fr); + justify-content: space-around; + /* border: 1px solid red; */ + } + + .google-div,.title,.iphone-div{ + text-align: center; + margin-top: 50px; + font-style:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + + /* border: 1px solid red; */ + } + img{ + margin-top:2px; + width:140px; + border-radius:5px; + } + #second-div{ + width:100%; + text-align: center; + margin-top: 50px; + /* margin-left:50px; */ + /* border: 1px solid red; */ + } + #img-content{ + display:grid; + grid-template-columns: repeat(4,1fr); + gap: 20px; + justify-content: space-between; + font-style:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + + + } + #img-content>div{ + width:100%; + height:auto; + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; + + } + #third-div{ + text-align: center; + margin-top:50px; + /* border: 1px solid red; */ + + + } +.img-div{ + display:grid; + grid-template-columns: repeat(5,1fr); + gap: 20px; +} +.img-div>.image{ + width:20%; + margin:5px; + height: fit-content; + +} + +#fourth-div{ + text-align: center; + /* margin-left:-750px; */ + margin-top:100px; + /* border: 1px solid red; */ + +} + +.boxes{ + display:grid; + grid-template-columns: repeat(2,50%); +} +.box1,.box2{ + margin: 5px; + box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; + /* text-align:left; */ +} +.anchor{ + text-decoration: none; + color:blue +} + + +#fourth-div>.bikes{ + text-align: center; + width:100%; + height:350px; +} + .bikes>h2{ + margin-left:5% ; + text-align:center; + /* width:20%; */ + height: fit-content; + font-style:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + + +} +.bikes>div>div{ + height:200px; + display:inline-block; + margin-left: 20px; + box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; +} +#form-city { + text-align: center; + display: grid; + width: 100%; + height: 450px; + position: relative; + grid-template-columns: repeat(2, 1fr); + gap:2%; +} +#title-bar { + text-align: center; +} +#submit-button{ + border:none; + width: 100%; + height:50px; + background-color: blue; + color:white; +} +form { + padding: 2px; +} +.form-name { + display: flex; + padding: 2px; +} +input { + width: 85%; + height: 20px; + border: none; + border-left: 1px solid black; +} +.first-name, +.last-name, +.email-icon, +.phone-icon, +.place { + width: 100%; + height: 30px; + border: 1px solid black; + margin: 2px; +} + +.message-icon { + border: 1px solid black; +} +#textarea { + border: none; + border-left: 1px solid black; +} +#select { + margin-left: -10%; + margin-top: 4px; +} + + +@media only screen and (max-width:768px) { + + .first-div{ + grid-template-columns: repeat(1,1fr); + } + #img-content{ + grid-template-columns: repeat(1,1fr); + } + #third-div{ + text-align: center; + } + .img-div{ + grid-template-columns: repeat(1,1fr); + margin-left:39%; + } + #title-bar{ + margin-top:50px; + } + #form-city{ + text-align: center; + width:100%; + border:1px solid black; + grid-template-columns: repeat(1,1fr) + } + #form-city>.form-box, #textarea{ + width:85%; + margin:auto; + } + + #fourth-div{ + width:80%; + margin:auto; + /* border: 1px solid red; */ + margin-top: 600px; + grid-template-columns: repeat(1,1fr) + } +/* .title4 { + margin-top: 100px; +} */ + + .boxes{ + grid-template-columns: repeat(1,1fr); + width:50%; + text-align: left; + margin-left:130px; + } + .bikes>div>div{ + display:flex; + flex-direction: column; + + } + +} + diff --git a/shaik/components/from.js b/shaik/components/from.js new file mode 100644 index 0000000..926c276 --- /dev/null +++ b/shaik/components/from.js @@ -0,0 +1,477 @@ +function home(){ + return `
+We simplified bike rentals, so you can focus on what's important to you.
++ Your safety is our priority. From sanitizing all bikes before every use, to extensive on-ground safety measures, your rides with ONN will always be safe and reliable. We also offer helmets on-demand. +
++ Enjoy the freedom of owning a two-wheeler without the hefty down-payments, EMIs and paperwork. Now choose from rent-to-own, monthly/quarterly bookings, and even daily plans. + +
++ With your trusty ONN app, you can choose any bike, make instant payments, get offers, and manage all aspect of your ONN experience right from the comfort and ease of your mobile app. +
++ Your local ONN Station is here to make ensure your two-wheeler experience is flawless. At your neighborhood station, you get to pick any bike, get maintenance, sanitized, and a lot more. +
+Our complete press coverage.
+Any Bike Renting Issue?Feel Free to Contact Us
+Renting a Bike should be Easy,Like our FAQs.
+You can pay online using debit/crdit or e-wallets.You can also pay at the hub station during your vehicle pick-up
+While booking your bike,you'll be given an option to select a pick-up location in your vicinity
+You need to show your original valid driving license ans submit any one original government verified ID proof
+Due to COVID-19 pandemic,we aviod providing helments to customers.We suggest customers to bring their own helments
+Honda Activa for rent
+Pulsar 150 for rent
+Royal Enfield 350 Classic for rent
+Avengers 220 Street for rent
+Bajaj CT 100 for rent
+Yamaha FZ for rent
+Honda Dio for rent
+Avengers 220 Cruise for rent
+Dominar 400 ABS for rent
+Pulsar NS 200 for rent
+