diff --git a/travel_webpage/image/bgimg.jpg b/travel_webpage/image/bgimg.jpg new file mode 100644 index 0000000..06b7e93 Binary files /dev/null and b/travel_webpage/image/bgimg.jpg differ diff --git a/travel_webpage/image/fly4Trip-logos.jpeg b/travel_webpage/image/fly4Trip-logos.jpeg new file mode 100644 index 0000000..77f2bb7 Binary files /dev/null and b/travel_webpage/image/fly4Trip-logos.jpeg differ diff --git a/travel_webpage/image/fly4Trip-logos_black.png b/travel_webpage/image/fly4Trip-logos_black.png new file mode 100644 index 0000000..e6a65aa Binary files /dev/null and b/travel_webpage/image/fly4Trip-logos_black.png differ diff --git a/travel_webpage/image/fly4Trip-logos_transparent.png b/travel_webpage/image/fly4Trip-logos_transparent.png new file mode 100644 index 0000000..5260d10 Binary files /dev/null and b/travel_webpage/image/fly4Trip-logos_transparent.png differ diff --git a/travel_webpage/image/fly4Trip-logos_white.png b/travel_webpage/image/fly4Trip-logos_white.png new file mode 100644 index 0000000..cc941a3 Binary files /dev/null and b/travel_webpage/image/fly4Trip-logos_white.png differ diff --git a/travel_webpage/image/heitage.jpg b/travel_webpage/image/heitage.jpg new file mode 100644 index 0000000..f66c550 Binary files /dev/null and b/travel_webpage/image/heitage.jpg differ diff --git a/travel_webpage/image/pilgrimage.jpg b/travel_webpage/image/pilgrimage.jpg new file mode 100644 index 0000000..e44c146 Binary files /dev/null and b/travel_webpage/image/pilgrimage.jpg differ diff --git a/travel_webpage/image/tiger.jpg b/travel_webpage/image/tiger.jpg new file mode 100644 index 0000000..5fc7025 Binary files /dev/null and b/travel_webpage/image/tiger.jpg differ diff --git a/travel_webpage/image/trekking.jpg b/travel_webpage/image/trekking.jpg new file mode 100644 index 0000000..8aece05 Binary files /dev/null and b/travel_webpage/image/trekking.jpg differ diff --git a/travel_webpage/index.html b/travel_webpage/index.html new file mode 100644 index 0000000..5a8e801 --- /dev/null +++ b/travel_webpage/index.html @@ -0,0 +1,93 @@ + + + + + + fly4Trip + + + +
+
+ +
+ + +
+ +
+
+

Let us plan you a perfect Holiday!!

+

Boasting over two decades in the tourism and hospitality industry, fly4Trip has amassed invaluable experience that sets us apart. Embark on a virtual voyage with us and let the wanderlust begin!

+ +
+
+
+

Wildlife

+

Let the call of the wild guide your next travel escapade!

+
+
+

Heritage

+

Let each destination tell its tale & mark your journey.

+
+
+

Trekking

+

Strap on your boots and let the adventure awaits – embrace the trail!

+
+
+

Pilgrimage

+

Discover the spiritual essence of diverse destinations and join us!

+
+ + +
+
+
+ + + \ No newline at end of file diff --git a/travel_webpage/style.css b/travel_webpage/style.css new file mode 100644 index 0000000..650d946 --- /dev/null +++ b/travel_webpage/style.css @@ -0,0 +1,205 @@ +*{ + margin: 0; + padding: 0; + font-family: 'poppins', sans-serif; + box-sizing: border-box; +} + +.container{ + width: 100%; + height: 100vh; + background-image: linear-gradient(rgba(9,0,77,0.65), rgba(9,0,77,0.65)), url(image/bgimg.jpg); + background-size: cover; + background-position: center; + font-family: sans-serif; + padding: 30px; + padding-left: 8%; + padding-right: 8%; + box-sizing: border-box; + +} + +.navbar{ + width: 100%; + height: 12%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 0; +} + +.h:hover { + color: white; + font-weight: bolder; + text-decoration: underline; + } + +.logo{ + width: 170px; + cursor: pointer; +} + +.btn{ + padding: 3px 8px; + font-weight: 400; + color: white; + background-color: rgba(248, 243, 243, 0.021); + border-radius: 4px; + border: 1px solid ; + cursor: pointer; +} + +.overlay{ + width: 100%; + position: fixed; + top: 0%; + background: rgba(0, 0, 0, 0.5); + height: 100%; + z-index: -1; + opacity: 0; + transition: 1s; +} + +.showoverlay{ + opacity: 1; + z-index: 1; +} + +.loginform{ + width: 350px; + padding: 30px 20px; + background-color: white; + position: absolute; + left: 50%; + top: -50%; + z-index: 9; + transition: 2s; + transform: translate(-50%,-50%); + color: #000; + text-align: left; + box-shadow: 0px 0px 7px 2px #cccccc; +} + +.showloginform{ + top: 50%; +} + +.loginform input{ + width: 100%; + height: 35px; + margin-bottom: 15px; + +} + +.loginform button{ + background-color: black; + color: white; + padding: 10px 15px; +} + +.loginform span{ + position: absolute; + right: 0px; + top: 5px; + width: 20px; + height: 30px; + cursor: pointer; +} + +nav{ + flex: 1; + text-align: right; +} + +nav ul li{ + list-style: none; + display: inline-block; + margin-left: 60px; +} + +nav ul li a{ + text-decoration: none; + color: #fff; + font-size: 13px; +} + +.row{ + display: flex; + height: 88%; + align-items: center; + +} +.col{ + flex-basis: 50%; +} + +h1{ + color: #fff; + font-size: 39px; +} + +p{ + color: #fff; + font-size: 15px; + line-height: 15px; + padding-top: 3%; + font-family: Arial, Helvetica, sans-serif; +} + +button{ + width: 180px; + color: #000; + font-size: 12px; + padding: 12px 0; + background: #fff; + border: 0; + border-radius: 20px; + outline: none; + margin-top: 30px; + +} + +.card{ + color: #fff; + width: 200px; + height: 230px; + display: inline-block; + border-radius: 10px; + padding: 15px 25px; + box-sizing: border-box; + cursor: pointer; + margin: 10px 15px; + background-position: center; + background-size: cover; + transition-duration: 0.5s; + transition-timing-function: ease-in-out; +} + +.card1{ + background-image: url(image/tiger.jpg); +} + +.card2{ + background-image: url(image/heitage.jpg); +} + +.card3{ + background-image: url(image/trekking.jpg); +} + +.card4{ + background-image: url(image/pilgrimage.jpg); +} + +.card:hover{ + transform: translateY(-10px); +} + +h5{ + text-shadow: 0 0 5px #999; +} + +.card p{ + text-shadow: 0 0 5px #999; +} \ No newline at end of file