codeup-web-exercises/codeup-design.html at master · crystalthibodeau/codeup-web-exercises · 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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">
    <link rel="stylesheet" href="css/codeup-design-grid.css">
    <title>Codeup Design</title>
</head>
<body>
<div class="wrapper">
    <nav>
        <div class="nav-background"></div>
        <ul>
            <li class="logo-item">
                <a href="">
                    <img width="105" class="logo" src="img/logo-cropped.png" alt="">
                    <span class="logo-text">codeup design</span>
                </a>
            </li>
            <li>
                <a href="">Services</a>
            </li>
            <li>
                <a href="">Work</a>
            </li>
            <li>
                <a href="">Blog</a>
            </li>
            <li>
                <a href="">Contact</a>
            </li>
        </ul>
    </nav>
    <header>
        <h2>Visual Design & Web Development</h2>
        <h3>From Park City, Utah</h3>
        <div class="large-service-circles">
            <div class="red large-service-circle"><h5>Design</h5></div>
            <div class="yellow large-service-circle"><h5>Develop</h5></div>
            <div class="green large-service-circle"><h5>Support</h5></div>
            <div class="blue large-service-circle"><h5>Host</h5></div>
        </div>
        <hr>
    </header>
    <main>
        <section>
            <p class="small-title">Selected Work</p>
            <article class="design-card">
                <div class="card-image card-image-1"></div>
                <section>
                    <p class="small-title">Featured Project</p>
                    <div class="red small-service-circle"><span>D</span></div>
                    <div class="yellow small-service-circle"><span>D</span></div>
                    <div class="green small-service-circle"><span>S</span></div>
                    <div class="blue small-service-circle"><span>H</span></div>
                </section>
            </article>
            <article class="design-card">
                <div class="card-image card-image-2"></div>
                <section>
                    <p class="small-title">Featured Project</p>
                    <div class="red small-service-circle"><span>D</span></div>
                    <div class="yellow small-service-circle"><span>D</span></div>
                    <div class="green small-service-circle"><span>S</span></div>
                    <div class="blue small-service-circle"><span>H</span></div>
                </section>
            </article>
            <article class="design-card">
                <div class="card-image card-image-3"></div>
                <section>
                    <p class="small-title">Featured Project</p>
                    <div class="red small-service-circle"><span>D</span></div>
                    <div class="yellow small-service-circle"><span>D</span></div>
                    <div class="green small-service-circle"><span>S</span></div>
                    <div class="blue small-service-circle"><span>H</span></div>
                </section>
            </article>
            <article class="design-card">
                <div class="card-image card-image-4"></div>
                <section>
                    <p class="small-title">Featured Project</p>
                    <div class="red small-service-circle"><span>D</span></div>
                    <div class="yellow small-service-circle"><span>D</span></div>
                    <div class="green small-service-circle"><span>S</span></div>
                    <div class="blue small-service-circle"><span>H</span></div>
                </section>
            </article>
        </section>
    </main>
    <aside class="ads">
        <p class="small-title">The Last</p>
        <div>
            <article class="ad">
                <div class="ad-image ad-image-1"></div>
                <h4>The Admin Bar and Absolute Positioning</h4>
            </article>
            <article class="ad">
                <div class="ad-image ad-image-2"></div>
                <h4>Nibbler Awesome Website Testing</h4>
            </article>
            <article class="ad">
                <div class="ad-image ad-image-3"></div>
                <h4>How to Get Google to Like You</h4>
            </article>
        </div>
        <section>
            <p class="small-title"><span><i class="fab fa-twitter icon"></i></span> Last Tweet</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iusto libero modi odio quia. Distinctio eius fuga illo itaque natus, nobis quas repudiandae saepe sed voluptates. Expedita, fugiat fugit hic ipsam laborum nesciunt rem. Atque commodi cupiditate dolores dolorum ea eveniet incidunt labore magni, perspiciatis quas saepe sapiente soluta, unde?
            </p>
        </section>
    </aside>
</div>
</body>
</html>