-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcodeup-design.html
More file actions
167 lines (136 loc) · 8 KB
/
codeup-design.html
File metadata and controls
167 lines (136 loc) · 8 KB
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
164
165
166
167
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abel&family=Anton&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/codeup-design.css">
<title>CODEUP Design</title>
</head>
<body>
<div class="container-fluid"> <!--main container start-->
<!-- NAVBAR START-->
<nav class="navbar navbar-expand-lg navbar-light ">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/logo.png" class="img-fluid logo-size" alt="...">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">codeup design</a>
<a class="nav-link" href="#">SERVICES</a>
<a class="nav-link" href="#">WORK</a>
<a class="nav-link" href="#">BLOG</a>
<a class="nav-link" href="#">CONTACT</a>
</div>
</div>
</div>
</nav> <!-- NAVBAR END-->
<!-- top row for headings and 4 icons -->
<div class="row mb-3">
<h1 class="col-12 font-anton text-center">VISUAL DESIGN & WEB DEVELOPMENT</h1>
<h4 class="col-12 font-anton text-center">FROM PARK CITY, UTAH</h4>
<div class="col-6 row d-flex justify-content-between mx-auto ">
<div class="col-6 col-md-3 "><button type="button" class="btn btn-primary btn-circle bg-red d-flex justify-content-center align-content-center align-items-center">DESIGN</button></div>
<div class="col-6 col-md-3 "><button type="button" class="btn btn-primary btn-circle bg-orange d-flex justify-content-center align-content-center align-items-center">DEVELOP</button></div>
<div class="col-6 col-md-3"><button type="button" class="btn btn-primary btn-circle bg-green d-flex justify-content-center align-content-center align-items-center">SUPPORT</button></div>
<div class="col-6 col-md-3"><button type="button" class="btn btn-primary btn-circle bg-blue d-flex justify-content-center align-content-center align-items-center">HOST</button></div>
</div>
</div> <!-- END top row for headings and 4 icons -->
<!--MIDDLE horizontal bar-->
<div class="d-none d-md-block col-md-12 py-3 mx-auto">
<p class="d-flex flex-fill my-3" style="height: 3px; background: gray;"> </p>
</div>
<!-- END middle horizontal bar-->
<!--start bottom row-->
<div class="row "><!-- start of bottom text-->
<div class="col-12 col-lg-8 mx-auto"><!--left column-->
<div class="row">
<h6 class="text-center font-abel mb-4">Selected work</h6>
<!--card 1--> <div class="col-12 col-md-6 d-flex justify-content-center mb-3">
<div class="card border-gray">
<img src="img/apple-ipad.jpg" class="card-img-top" alt="...">
<div class="d-flex justify-content-between p-2 ">
<div>Featured Project</div>
<div class="d-flex justify-content-between">
<span class="badge rounded-pill bg-red me-1 text-dark font-anton">D</span>
<span class="badge rounded-pill bg-orange me-1 text-dark font-anton">D</span>
<span class="badge rounded-pill bg-green me-1 text-dark font-anton">S</span>
<span class="badge rounded-pill bg-blue text-dark font-anton">H</span>
</div>
</div>
</div>
</div><!-- card 1end-->
<!--card 2--> <div class="col-12 col-md-6 d-flex justify-content-center mb-3">
<div class="card border-gray">
<img src="img/macbook.jpg" class="card-img-top" alt="...">
<div class="d-flex justify-content-between p-2 ">
<div>Featured Project</div>
<div class="d-flex justify-content-between">
<span class="badge rounded-pill bg-red me-1 text-dark font-anton">D</span>
<span class="badge rounded-pill bg-orange me-1 text-dark font-anton">D</span>
<span class="badge rounded-pill bg-green me-1 text-dark font-anton">S</span>
<span class="badge rounded-pill bg-blue text-dark font-anton">H</span>
</div>
</div>
</div>
</div><!--card 2 end-->
<!--card 3--> <div class="col-12 col-md-6 d-flex justify-content-center mb-3">
<div class="card border-gray">
<img src="img/man.jpg" class="card-img-top" alt="...">
<div class="d-flex justify-content-between p-2 ">
<div>Featured Project</div>
<div class="d-flex justify-content-between">
<span class="badge rounded-pill bg-red me-1 text-dark font-anton">D</span>
<span class="badge rounded-pill bg-orange me-1 text-dark font-anton">D</span>
<span class="badge rounded-pill bg-green me-1 text-dark font-anton">S</span>
<span class="badge rounded-pill bg-blue text-dark font-anton">H</span>
</div>
</div>
</div>
</div><!--card 3 end-->
<!--card 4--> <div class="col-12 col-md-6 d-flex justify-content-center mb-3">
<div class="card border-gray">
<img src="img/security.jpg" class="card-img-top flex-fill" alt="...">
<div class="d-flex justify-content-between bg-white p-2">
<div class="">Featured Project</div>
<div class="d-flex justify-content-between ">
<span class="badge rounded-pill bg-red me-1 text-dark font-anton">D</span>
<span class="badge rounded-pill bg-orange me-1 text-dark font-anton">D</span>
<span class="badge rounded-pill bg-green me-1 text-dark font-anton">S</span>
<span class="badge rounded-pill bg-blue text-dark font-anton">H</span>
</div>
</div>
</div>
</div><!--card 4 end-->
</div>
</div><!-- end of left column-->
<!--Start of right colomn-->
<div class="d-none d-lg-block col-lg-4">
<div class="row">
<h6 class="text-center font-abel mb-4">The Last</h6>
<div class="col-4 align-self-start mb-4"><img src="img/mobile-phone.jpg" class="img-fluid " alt="..."></div>
<div class="col-8"> <h4 class="fw-bolder">THE ADMIN BAR AND ABSOLUTE POSITIONING</h4></div>
<div class="col-4 mb-4"><img src="img/head.jpg" class="img-fluid " alt="..."></div>
<div class="col-8"> <h4 class="fw-bolder">NIBBLER AWESOME WEBSITE TESTING</h4></div>
<div class="col-4 mb-4"><img src="img/ipad.jpg" class="img-fluid " alt="..."></div>
<div class="col-8"> <h4 class="fw-bolder">HOW TO GET GOOGLE TO LIKE YOU</h4></div>
<div class="col-12">
<h6>Trick question... you DONT!!!</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, commodi consectetur cum eius, eligendi enim id itaque nemo nulla officiis quae qui, quis quisquam ratione reprehenderit rerum veniam!</p>
</div>
</div>
</div><!--end of right column-->
</div><!-- end of bottom row-->
</div><!-- main container end-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>