pizzawebsite/index.html at master · Godwinkay/pizzawebsite · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<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">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <title>Welcome to Pizzamania</title>
</head>
<body>

    <nav class="navbar navbar-default navbar-home">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">FAMOUS PIZZA</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->

            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Home</a></li>
              <li><a href="#">About Pizza</a></li>
              <li><a href="#">Pizza Types</a></li>

            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>


      <div class="container-fluid">
        <div class="row">
          <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="1"></li>
              <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner carousel-content" role="listbox">
              <div class="item active">
                <img src="images/gianluca-gerardi-L8FX3d-O53U-unsplash.jpg" alt="image of pizza">

              </div>
              <div class="item">
                <img src="images/ivan-torres-MQUqbmszGGM-unsplash.jpg" alt="image of pizza">

              </div>
              <div class="item">
                <img src="images/vitalii-chernopyskyi-Oxb84ENcFfU-unsplash.jpg" alt="image of pizza">

              </div>
              ...
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>


      <div class="container about">
        <div class="row">
          <h2 class="text-center">About Pizza</h2>
        </div>

        <div class="row">
          <div class="col-md-6 about-pic">
            <img src="images/saahil-khatkhate-kfDsMDyX1K0-unsplash.jpg" alt="about pizza image" class="img-responsive">
          </div>

          <div class="col-md-6">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, nam vero sunt molestias, praesentium cupiditate, expedita quis voluptatem necessitatibus harum inventore! Dicta quo, voluptates doloremque sequi perferendis vitae natus deserunt!</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, ab ipsa? Temporibus, quos iusto incidunt praesentium dolorem quod ratione porro saepe fugit esse ab, quae blanditiis, perspiciatis adipisci assumenda quibusdam!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta facilis architecto labore aspernatur repellat obcaecati, sint sed repellendus! Nihil quae quibusdam expedita quod vel a facilis vero rerum vitae porro.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta maiores placeat veritatis sequi, est harum qui beatae quisquam distinctio officia! Porro libero sed suscipit fugit ducimus nemo, quidem et quibusdam.</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque dignissimos architecto odio nisi, aperiam inventore nostrum rem unde quibusdam, pariatur beatae obcaecati sequi sint ipsum molestias, totam doloremque iusto? Aperiam.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque ipsa assumenda perspiciatis expedita, pariatur sunt minima excepturi tempora quaerat dolores mollitia nisi quidem facilis quam ipsum labore reprehenderit quia. Laborum!</p>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis perferendis ullam aliquid neque libero quidem suscipit officiis earum aliquam vitae accusantium, facere voluptate velit explicabo, possimus omnis quas! Id, velit?</p>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis perferendis ullam aliquid neque libero quidem suscipit officiis earum aliquam vitae accusantium, facere voluptate velit explicabo, possimus omnis quas! Id, velit?</p>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis perferendis ullam aliquid neque libero quidem suscipit officiis earum aliquam vitae accusantium, facere voluptate velit explicabo, possimus omnis quas! Id, velit?</p>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis perferendis ullam aliquid neque libero quidem suscipit officiis earum aliquam vitae accusantium, facere voluptate velit explicabo, possimus omnis quas! Id, velit?</p>
          </div>
        </div>
      </div>

      <div class="container types">
        <div class="row">
          <h2 class="text-center">Pizza Types</h2>
        </div>

        <div class="row">
          <div class="col-md-3">

                <div class="thumbnail">
                  <img src="images/sahal-hameed-Nq9KlQTTEbQ-unsplash.jpg" alt="vege">
                  <div class="caption">
                    <h3>Vegetable Pizza</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis harum mollitia temporibus consequuntur ducimus nobis porro! Nobis perferendis commodi, minus labore enim delectus quo tenetur repellendus autem earum deleniti ipsam.</p>
                  </div>
               </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail">
              <img src="images/the-nix-company-ljvm17bH-e0-unsplash.jpg" alt="pepperoni">
              <div class="caption">
                <h3>Pepperoni Pizza</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis harum mollitia temporibus consequuntur ducimus nobis porro! Nobis perferendis commodi, minus labore enim delectus quo tenetur repellendus autem earum deleniti ipsam.</p>
              </div>
           </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail">
              <img src="images/sama-hosseini-wMJ8yqiB_5o-unsplash.jpg" alt="beef">
              <div class="caption">
                <h3>Beef Pizza</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis harum mollitia temporibus consequuntur ducimus nobis porro! Nobis perferendis commodi, minus labore enim delectus quo tenetur repellendus autem earum deleniti ipsam.</p>
              </div>
           </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail">
              <img src="images/klara-kulikova-jvWZYnxBDlQ-unsplash.jpg" alt="tomato">
              <div class="caption">
                <h3>Tomato Pizza</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis harum mollitia temporibus consequuntur ducimus nobis porro! Nobis perferendis commodi, minus labore enim delectus quo tenetur repellendus autem earum deleniti ipsam.</p>
              </div>
           </div>
          </div>
        </div>
      </div>

    <div class="footer">
      <div class="container">
        <div class="row">
          <p class="text-center">
            &copy FamousPizza All Rights Reserved
          </p>
        </div>
      </div>
    </div>

    <script src="js/jquery-3.6.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>