Travel-Website/index.html at main · mobeen-asif/Travel-Website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Travel Sphere | Home</title>
    <link rel="stylesheet" href="./css/style.css" />
    <script src="https://kit.fontawesome.com/a3325119fb.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <header class="header">
      <nav class="navbar">
        <div class="container">
          <h1 class="logo lg-heading text-light">TS</h1>
          <ul class="nav-items">
            <li class="nav-item"><a href="./index.html">Home</a></li>
            <li class="nav-item"><a href="./about.html">About</a></li>
            <li class="nav-item"><a href="./contact.html">Contact</a></li>
          </ul>
        </div>
      </nav>
      <div class="header-content">
        <h1 class="lg-heading text-light main-heading">travel the world</h1>
        <p class="text-light">travel the world, experience the greatness, it's best gift given by nature</p>
        <a href="#explore-places" class="btn btn-primary text-red md-heading">explore places</a>
      </div>
    </header>
    <section class="showcase" id="explore-places">
      <div class="container">
        <div class="row row-1">
          <div class="img-box">
            <img src="./img/showcase-photo1.jpg" alt="">
          </div>
          <div class="text-box">
            <h2 class="lg-heading text-black">DEGANNY, UK</h2>
            <p class="text-gray">Discover the charming town of Deganny in the heart of the UK. Known for its historic architecture, scenic countryside, and friendly local culture, Deganny is the perfect destination for travelers seeking a peaceful getaway with authentic British experiences.</p>
            <a href="./about.html" class="btn btn-secondary">More</a>
          </div>
        </div>
        <div class="row row-2">
          <div class="img-box">
          <img src="./img/showcase-photo2.jpg" alt="">
          </div>
          <div class="text-box">
            <h2 class="lg-heading text-black">DESERT, EGYPT</h2>
            <p class="text-gray">Experience the vast and majestic deserts of Egypt, where golden sands stretch as far as the eye can see. From thrilling camel rides to breathtaking sunsets, the Egyptian desert offers a unique adventure full of history, culture, and unforgettable landscapes.</p>
            <a href="./about.html" class="btn btn-secondary">More</a>
          </div>
        </div>
      </div>
    </section>
    <section class="feature">
      <div class="container">
      <div class="box-wrapper">
        <div class="box box-1">
          <i class="fa-solid fa-route fa-2x text-red"></i>
          <h2 class="md-heading">Adventure</h2>
          <p>Discover thrilling adventures around the world, from rugged mountains to hidden trails. Experience excitement, challenge yourself, and create memories that will last a lifetime.</p></div>
        <div class="box box-2">
          <i class="fa-solid fa-strikethrough fa-2x"></i>
          <h2 class="md-heading">Less Price</h2>
          <p>Enjoy amazing travel experiences without breaking the bank. Discover affordable trips, budget-friendly stays, and great deals that make exploring the world easier and more enjoyable.</p></div>
        <div class="box box-3">
          <i class="fa-solid fa-user fa-2x text-red"></i>
          <h2 class="md-heading">Experience</h2>
          <p>Discover thrilling adventures around the world, from rugged mountains to hidden trails. Experience excitement, challenge yourself, and create memories that will last a lifetime.</p></div>
      </div>
      </div>
    </section>
    <footer class="footer">
      <div class="social-media-links">
        <i class="fab fa-facebook fa-4x"></i>
        <i class="fab fa-instagram fa-4x"></i>
        <i class="fab fa-twitter fa-4x"></i>
      </div>
      <p>Travel Sphere &copy; 2026, All Rights Reserved.</p>
    </footer>
  </body>
</html>