Sprint-Challenge--User-Interface/index.html at master · drkfogle/Sprint-Challenge--User-Interface · 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
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Great Idea - Responsive I</title>

  <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
  <link rel="stylesheet" href="css/index.css">

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>
  <meta name ="viewpoint" content="width=device-width, initial-scale=1">

<body>
    <div class="container">

        <section class="top-content">
            <header>
                <img class="lambda-logo" src="img/lambda-black.png">
                <nav>
                        <a href="/Users/kevin/Documents/Lambda School/Sprint-Challenge--User-Interface/index.html">Home</a>
                        <a href="/Users/kevin/Documents/Lambda School/Sprint-Challenge--User-Interface/about.html">About</a>
                        <a href="#">Products</a>
                        <a href="#">Blog</a>
                        <a href="#">Contact</a>
                </nav>
            </header>
                <img class="Header-picture" src="img/jumbo.jpg">

            <div class="text-container text-container2">
                <h2>The Future</h2>
                <p>Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.</p>
            </div>
            <div class="text-container text-container2">
                <h2>The Past</h2>
                <p>Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.</p>
            </div>
        </section>

        <section class="middle-content">

            <h2>Why Did It Have To Be Boxes...</h2>

            <div class="boxes">
                <div class="box" id="teal">Box 1</div>
                <div class="box" id="gold">Box 2</div>
                <div class="box" id="cadetblue">Box 3</div>
                <div class="box" id="coral">Box 4</div>
                <div class="box" id="crimson">Box 5</div>
                <div class="box" id="forestgreen">Box 6</div>
                <div class="box" id="darkorchid">Box 7</div>
                <div class="box" id="hotpink">Box 8</div>
                <div class="box" id="indigo">Box 9</div>
                <div class="box" id="dodgerblue">Box 10</div>
            </div>

        </section>

        <section class="bottom-content">

            <div class="text-container">
                <h2>That's</h2>
                <p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
            </div>
            <div class="text-container">
                <h2>No</h2>
                <p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
            </div>
            <div class="text-container">
                <h2>Moon</h2>
                <p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
            </div>

        </section>

        <footer>
            <nav>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Products</a>
                <a href="#">Blog</a>
                <a href="#">Contact</a>
            </nav>
        </footer>
    </div><!-- container -->
</body>
</html>