├── images ├── bg-2.jpg ├── Andaman.jpg ├── Greece.jpg ├── Paris.jpg ├── Sydney.jpg ├── grid-1.jpg ├── grid-2.jpg ├── grid-3.jpg ├── Thailand.jpg ├── Switzerland.jpg └── Desktop-Travel-Images.jpg ├── README.md ├── style.css └── index.html /images/bg-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Travel/HEAD/images/bg-2.jpg -------------------------------------------------------------------------------- /images/Andaman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Travel/HEAD/images/Andaman.jpg -------------------------------------------------------------------------------- /images/Greece.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Travel/HEAD/images/Greece.jpg -------------------------------------------------------------------------------- /images/Paris.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Travel/HEAD/images/Paris.jpg -------------------------------------------------------------------------------- /images/Sydney.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Travel/HEAD/images/Sydney.jpg -------------------------------------------------------------------------------- /images/grid-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Travel/HEAD/images/grid-1.jpg -------------------------------------------------------------------------------- /images/grid-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Travel/HEAD/images/grid-2.jpg -------------------------------------------------------------------------------- /images/grid-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Travel/HEAD/images/grid-3.jpg -------------------------------------------------------------------------------- /images/Thailand.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Travel/HEAD/images/Thailand.jpg -------------------------------------------------------------------------------- /images/Switzerland.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Travel/HEAD/images/Switzerland.jpg -------------------------------------------------------------------------------- /images/Desktop-Travel-Images.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Uvajanani/Travel/HEAD/images/Desktop-Travel-Images.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🏝️ Travel Website Landing Page 2 | 3 | A visually appealing **static travel landing page** built with HTML and CSS, designed to attract users with smooth transitions, animations, and a clean user interface. 4 | 5 | --- 6 | 7 | 8 | ## ✨ Features 9 | 10 | - Elegant and modern landing page design 11 | - Smooth CSS transitions and animations 12 | - Fully responsive layout (desktop and mobile) 13 | - Interactive navigation bar and call-to-action buttons 14 | - Visually appealing section transitions 15 | 16 | --- 17 | 18 | ## 🛠️ Built With 19 | 20 | - ✅ HTML5 – Semantic structure 21 | - ✅ CSS3 – Custom animations, transitions, flexbox & media queries 22 | 23 | --- 24 | 25 | ## 📁 Folder Structure 26 | travel-website/ 27 | ├── index.html 28 | ├── style.css 29 | └── assets/ 30 | └── images/ 31 | 32 | 33 | 34 | --- 35 | 36 | ## 🚀 Getting Started 37 | 38 | ### 1. Clone the repository 39 | 40 | 41 | git clone https://github.com/Uvajanani/Travel.git 42 | cd Travel 43 | ### 2. Run Locally 44 | Simply open the index.html file in your browser: 45 | 46 | open index.html 47 | 48 | --- 49 | 50 | ## ⭐ Show Your Support 51 | If you like this project, give it a ⭐ and share it with your friends! 52 | 53 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | font-family: Verdana, Geneva, Tahoma, sans-serif; 5 | } 6 | 7 | .container{ 8 | width: 100%; 9 | height: 100vh; 10 | } 11 | 12 | #home{ 13 | background-image: linear-gradient(rgba(196, 203, 234, 0.7),rgba(176, 189, 239, 0.7)),url(images/Desktop-Travel-Images.jpg); 14 | background-size: cover; 15 | background-position: center; 16 | position: relative; 17 | width: 100%; 18 | height: 100vh; 19 | } 20 | 21 | nav{ 22 | display: flex; 23 | justify-content: space-between; 24 | align-items: center; 25 | padding: 50px 80px; 26 | } 27 | 28 | nav h1{ 29 | font-weight: 500; 30 | cursor: pointer; 31 | } 32 | 33 | nav ul li{ 34 | display: inline-block; 35 | 36 | } 37 | 38 | nav ul li a{ 39 | text-decoration: none; 40 | color: #000; 41 | padding: 20px; 42 | } 43 | 44 | nav ul li a:hover{ 45 | color: rgb(65, 155, 185); 46 | } 47 | 48 | #description{ 49 | padding: 30px 80px; 50 | } 51 | 52 | #description h1{ 53 | font-weight: 500; 54 | font-size: 70px; 55 | padding-top: 70px; 56 | } 57 | 58 | #description p{ 59 | font-size: 18px; 60 | padding-top: 25px; 61 | text-align: justify; 62 | } 63 | 64 | #description button{ 65 | background-color: rgb(65, 155, 185); 66 | color: white; 67 | width: 130px; 68 | height: 50px; 69 | margin-top: 30px; 70 | cursor: pointer; 71 | font-size: 16px; 72 | border: 2px solid rgb(65, 155, 185); 73 | border-radius: 5px; 74 | } 75 | 76 | #description button:hover{ 77 | background-color: aliceblue; 78 | color: #000; 79 | } 80 | 81 | 82 | .row img{ 83 | width: 100%; 84 | transition: background 0.5s,transform 0.5s; 85 | } 86 | 87 | .places{ 88 | display: grid; 89 | grid-template-columns: repeat(auto-fit,minmax(330px,1fr)); 90 | grid-gap: 30px; 91 | } 92 | 93 | #tourist{ 94 | padding: 80px; 95 | } 96 | 97 | .heading{ 98 | text-align: center; 99 | padding-top: 50px; 100 | } 101 | 102 | .heading h1{ 103 | color: rgb(40, 148, 224); 104 | } 105 | 106 | .heading p{ 107 | padding: 10px 0 25px 0; 108 | font-style: italic; 109 | } 110 | 111 | .layer{ 112 | display: flex; 113 | align-items: center; 114 | padding: 15px 0 0 150px; 115 | } 116 | 117 | .layer h4{ 118 | color: rgb(111, 186, 219); 119 | font-weight: 500; 120 | font-style: italic; 121 | margin-left: 10px; 122 | } 123 | 124 | .row img:hover{ 125 | translate: 0 0 20px 0; 126 | box-shadow: 0 0 50px 0px rgba(0, 179, 255, 0.895); 127 | transform: translateY(-20px); 128 | } 129 | 130 | 131 | 132 | /* --------------------offers------------------- */ 133 | 134 | #offers{ 135 | background-image: linear-gradient(rgba(35, 71, 103, 0.5),rgba(35, 71, 103, 0.5)),url(images/bg-2.jpg); 136 | background-size: cover; 137 | background-position: center; 138 | width: 100%; 139 | height: 70vh; 140 | margin-top: 80px; 141 | color: rgb(228, 232, 235); 142 | text-align: end; 143 | } 144 | 145 | .See{ 146 | width: 130px; 147 | height: 40px; 148 | background: none; 149 | color: aliceblue; 150 | border: 2px solid aliceblue; 151 | margin: 30px 50px 0 0; 152 | font-size: 16px; 153 | } 154 | 155 | .See:hover{ 156 | background: rgb(65, 155, 185); 157 | cursor: pointer; 158 | } 159 | 160 | .discounts h1{ 161 | padding: 120px 50px 30px 0; 162 | font-weight: 500; 163 | } 164 | 165 | .discounts p{ 166 | padding-left:30%; 167 | padding-right: 50px; 168 | } 169 | 170 | /* ----------------------about places------------------ */ 171 | 172 | #title{ 173 | margin: 230px 10px 15px 80px; 174 | } 175 | 176 | #title h1{ 177 | text-align: center; 178 | font-weight: 550; 179 | margin-bottom: 20px; 180 | color: rgb(105, 195, 225); 181 | } 182 | 183 | #title h4{ 184 | text-align: center; 185 | font-style: italic; 186 | margin-bottom: 90px; 187 | font-weight: 500; 188 | } 189 | 190 | .grid{ 191 | display: grid; 192 | grid-template-columns: repeat(auto-fit,minmax(330px,1fr)); 193 | grid-area: 1fr 1fr 1fr; 194 | } 195 | 196 | .grid img{ 197 | width: 100%; 198 | transition: background 0.5s,transform 0.5s; 199 | } 200 | 201 | .grid1 img{ 202 | height: 80vh; 203 | } 204 | 205 | .grid2 img{ 206 | width: 100%; 207 | height: 60%; 208 | padding-left: 10px; 209 | padding-top: 80px; 210 | } 211 | 212 | .grid3 img{ 213 | width: 100%; 214 | height: 58%; 215 | padding-left: 30px; 216 | } 217 | 218 | 219 | 220 | .grid h2{ 221 | text-align: center; 222 | padding-bottom: 15px; 223 | padding-top: 30px; 224 | color: rgb(105, 195, 225); 225 | } 226 | 227 | .grid p{ 228 | text-align: center; 229 | } 230 | 231 | .grid img:hover{ 232 | transform: translateY(-20px); 233 | } 234 | 235 | .footer h3{ 236 | text-align: center; 237 | font-weight: 500; 238 | font-style: italic; 239 | background-color: rgb(181, 228, 244); 240 | font-size: 15px; 241 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Travel 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 24 |
25 |

Travel

26 |

Embark on a journey of a lifetime and explore the
world's most breathtaking destinations with our expert
travel advice. From exotic beaches to cultural wonders,
we've got you covered with our comprehensive travel
guides and insider tips

27 | 28 |
29 |
30 | 31 | 32 | 33 | 34 |
35 |
36 |

Start Your Journey

37 |

The Most Searched Countries in the World

38 |
39 |
40 |
41 | 42 |
43 | 44 |

Sydney

45 |
46 |
47 |
48 | 49 |
50 | 51 |

Paris

52 |
53 |
54 |
55 | 56 |
57 | 58 |

Andaman Islands

59 |
60 |
61 |
62 | 63 |
64 | 65 |

Thailand

66 |
67 |
68 |
69 | 70 |
71 | 72 |

Greece

73 |
74 |
75 |
76 | 77 |
78 | 79 |

Switzerland

80 |
81 |
82 |
83 |
84 | 85 | 86 | 87 | 88 |
89 |
90 |

Discount 10-30% Off

91 |

Travel the world on a budget with our unbeatable discounted travel deals. Whether you're looking for a last-minute escape or planning ahead, we've got have covered with incredible discounts on flights, hotels, and packages. Dont't wait, book now and experience the adventure of a lifetime without breaking the bank.

92 | 93 |
94 |
95 | 96 | 97 | 98 | 99 |
100 |

Why Choose Us

101 |

The gladdest moment in human life, me thinks, is a departure into unknown lands

102 |
103 |
104 | 105 |
106 |
107 |

Passionate Travel

108 |

Fuel your passion for adventure and
discover new horizons

109 | 110 |
111 |
112 | 113 |

Beautiful Places

114 |

Uncover the world's most breathtaking
Beautiful places

115 |
116 | 117 |
118 |
119 | 120 |
121 |

Made By Uvajanani R P

122 |
123 |
124 | 125 | --------------------------------------------------------------------------------