diff --git a/index.html b/index.html index f330bb0..4bfa58f 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,80 @@ + + + + + CabRental + + + + + + +
+ + +
+ + +
+
+


Want to Share or Rent
a cab.

+

Wherever you're going, there's a carpool that will
+ get you there for less.

+
+ +
+
+
+
+
+ From MUJ Hostel To + +
+
+ Travelling Date + +
+
+ Depart. Time + +
+ +
+======= + @@ -45,6 +119,7 @@


Want to Share or Rent
a cab.

get you there for less.

+
+ + + + + + + + +
+ + + +
+
+ +
+ @@ -280,6 +372,7 @@

Rider Details!

You agree to our Terms and Policy. +
diff --git a/style.css b/style.css index 25338e1..360b2d2 100644 --- a/style.css +++ b/style.css @@ -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 */ @@ -120,6 +254,7 @@ header { background: rgb(211, 10, 10); } + .home { width: 100%; min-height: 100vh;