View sourceode

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


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
  
  <link rel="stylesheet" href="burgerstyle.css">
  
  <title>BurgerBase</title>
</head>
<body>
  <div class="wrapper">
    <!-- nav -->
    <nav>
      <div class="logo">
        <span class="fas fa-hamburger"></span>
        <a href="#">BurgerBase</a>
      </div>
      <ul>
        <li><a href="#title">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
    <!-- header -->
    <header id="title">
      <div class="title-content">
        <h1>BURGERBASE</h1>
      </div>
      <div class="title-content">
        <a href="#about" class="button">Find out more</a>
      </div>
    </header>

    <!-- quote section -->
    <section class="quote">
      <p>"I still eat a burger at a counter with ketchup dripping down my face." - Scarlett Johansson</p>
    </section>

    <!-- main -->
    <main>
      <!-- about -->
      <article id="about">
        <h2>Our Story</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt corrupti quae molestias tempora, odio nam adipisci dolorum autem dolor ad quo voluptatibus laudantium qui veritatis ratione. Aliquam mollitia debitis veniam illum id temporibus voluptates nihil atque! Ipsa omnis autem pariatur incidunt provident nisi repellendus. Necessitatibus dolorum libero doloremque. Enim fugit dolor expedita qui hic excepturi maiores molestias illum eveniet, dolore mollitia totam perferendis dicta reprehenderit?</p>
      </article>
      <!-- images -->
      <section class="photos">
        <img src="img/img-2.jpg" alt="A burger">

        <img src="img/img-3.jpg" alt="A burger">

        <img src="img/img-4.jpg" alt="A burger">

        <img src="img/img-5.jpg" alt="A burger">
      </section>
    </main>

    <!-- quote section -->
    <section class="quote">
      <p>"I always say, Eat clean to stay fit, have a burger to stay sane." - Gigi Hadid</p>
    </section>

    <section id="contact">
      <h2>Contact Us</h2>

      <form>
        <label for="name">Name</label>
        <input id="name" type="text">

        <label for="email">Email</label>
        <input id="email" type="email">

        <label for="comments">Comments</label>
        <textarea id="comments"></textarea>
        <input class="button" type="submit" value="Submit">
      </form>
    </section>

    <!-- footer -->
    <footer id="footer">
      <p>BURGERBASE &copy; 2019</p>
    </footer>
  </div>

  <!-- scripts -->
  <script src="app.js"></script>
</body>
</html>

View sourcecode

`burgerbase.html`