css-float/index.html at master · TopeAanu/css-float · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Welcome To My Website">
  <meta name="keyword" content="a simple hotel website">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" media="screen and (max-width: 760px)" href="css/mobile.css">
  <title>Hotel Website</title>
</head>
<body>
  <header>
    <nav id="navbar">
      <div class="container">
        <h1 class="logo"><a href="index.html">TOPE</a> </h1>
        <ul>
          <li><a class="current" href="index.html">Home</a></li>
          <li class="about"><a href="about.html">About</a></li>
          <li class="contact"> <a href="contact.html">Contact</a></li>
        </ul>
      </div>
    </nav>

    <div id="showcase">
      <div class="container">
        <div class="showcase-content">
          <h1><span class="text-primary">Enjoy</span> Your Stay</h1>
          <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum excepturi architecto iusto nesciunt accusantium veritatis!</p>
          <a class="btn" href="about.html">About Our Website</a>
        </div>
      </div>
    </div>
  </header>

  <section id="home-info" class="bg-dark">
    <div class="info-img"></div>
    <div class="content-info">
      <h2> <span class="text-primary">The History</span> Of Our Hotel</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita nesciunt saepe voluptatem. Autem inventore dolor quas culpa voluptate non repellendus sint totam alias, id iure magnam aliquam tempora ab veniam? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem, similique inventore! Voluptas debitis aspernatur unde consequatur rem!</p>
      <a href="about.html" class="btn btn-light">Read More</a>
    </div>
  </section>

  <section id="features">
    <div class="box bg-primary">
      <i class="fas fa-hotel fa-3x"></i>
      <h3>Learn Music</h3>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, veniam!</p>
    </div>
    <div class="box bg-light">
      <i class="fas fa-utensils fa-3x"></i>
      <h3>Learn Programming</h3>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde, laboriosam.</p>
    </div>
    <div class="box bg-primary">
      <i class="fas fa-dumbbell fa-3x"></i>
      <h3>Free Food</h3>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde, laboriosam.</p>
    </div>
  </section>

  <div class="clr"></div>

  <footer id="main-footer">
    <p>Hotel BT &copy; 2019, All RIghts Reserved</p>
  </footer>
</body>
</html>