guid-proj-adv-css-resp-design-day1/index.html at master · ndailey000/guid-proj-adv-css-resp-design-day1 · 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
<!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" />
    <title>RWD I</title>
    <link rel="stylesheet" href="index.css" />
  </head>

  <body>
    <div class="container home">
      <header>
        <h1>International Airport</h1>
        <nav>
          <a href="#" class="first-anchor" id="custom-link-style">Home</a>
          <a href="#">About</a>
          <a href="#">Flights</a>
          <a href="#">Contact</a>
        </nav>
      </header>
      <img
        src="https://tk-assets.lambdaschool.com/4651ccd7-e862-4a74-b8e8-14887425bd76_international-airplane.png"
        alt="Airplane taking off"
      />
      <div class="main-content">
        <section class="top-content">
          <h2>Fly With Us</h2>
          <p class="top-content-p">
            Lorem,
            <strong>ipsum dolor</strong>
            sit amet consectetur adipisicing elit. Maxime similique ad possimus
            non nesciunt, quaerat quidem dolores velit placeat iure commodi,
            tempora aliquam sequi tenetur et illo rem ea quae!
          </p>
          <p class="top-content-p">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id fugit
            at suscipit, magnam blanditiis qui eum magni unde, veritatis quas
            neque possimus tempora est mollitia ex. Voluptatibus quo inventore
            itaque.
          </p>
        </section>
        <section class="bottom-content">
          <h2>Plan Your Flight</h2>
          <p>
            Vel neque sequi facilis, saepe aliquid tenetur. Exercitationem dolor
            consequatur nisi alias officiis nulla vero! Eos tenetur quis facilis
            odit aspernatur blanditiis?
          </p>
          <p>
            Cusque, corporis quis! Nostrum earum aperiam aliquam consequuntur
            vel illo officiis necessitatibus ratione ullam, quas neque saepe
            soluta, architecto recusandae nobis. Atque.
          </p>
        </section>
      </div>
      <button class="book-flight-btn">Book A Flight</button>
      <button class="book-flight-btn-mobile">Plan Your Flight</button>
      <footer class="main-footer">
        <nav>
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Flights</a>
          <a href="#">Contact</a>
        </nav>
      </footer>
    </div>
  </body>
</html>

<!-- <div class="box">
Lorem ipsum dolor
</div> -->

<!--
<div class="parent-container">
  <div class="child-item child-1">Child 1</div>
  <div class="child-item child-2">Child 2</div>
  <div class="child-item child-3">Child 3</div>
  <div class="child-item child-4">Child 4</div>
</div> -->