-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (140 loc) · 8.54 KB
/
index.html
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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Made in KC - Apparel</title>
</head>
<body>
<nav id="mainNavbar" class="navbar navbar-light navbar-expand-md py-0 pt-2 fixed-top">
<a href="#" class="navbar-brand"><img src="imgs/made_in_kc_logo.png" alt=""></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation links">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
<a href="" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="#merch" class="nav-link">MERCH</a>
</li>
<li class="nav-item">
<a href="#community" class="nav-link">COMMUNITY</a>
</li>
</ul>
</div>
</nav>
<section class="container-fluid px-0 mb-5">
<div class="row align-items-center">
<div class="col-lg-6">
<div id="headingGroup" class="text-black text-center d-none d-lg-block mt-5">
<h1 class="display-4">MADE <span>//</span> IN <span>//</span> KC</h2>
<h1 class="display-4">MADE <span>//</span> IN <span>//</span> KC</h2>
<h1 class="display-4">MADE <span>//</span> IN <span>//</span> KC</h2>
</div>
</div>
<div class="col-lg-6">
<img class="img-fluid" src="imgs/Sandlot-Goods-KC-Tote-Pennant_d45f0cdf-3bcd-4eac-9272-9d4e3003336e_1000x.jpeg" alt="">
</div>
</div>
</section>
<section class="container-fluid px-0">
<div id="about" class="row align-items-center content">
<div class="col-md-6 order-2 order-md-1 height">
<img class="img-fluid" src="imgs/Charlie-Hustle-KC-Heart-Tee-Gold-Red-Touchdown_1000x.jpeg" alt="">
</div>
<div class="col-md-6 text-center order-1 order-md-2">
<div class="row justify-content-center">
<div class="col-10 col-8-lg blurb mb-5 mb-md-0">
<h2 class="">ABOUT</h2>
<div class="my-4" style="color:#ea2c1c">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-bookmark-heart" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 4.41c1.387-1.425 4.854 1.07 0 4.277C3.146 5.48 6.613 2.986 8 4.412z"/>
<path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
</svg>
</div>
</svg>
<p class="lead">
Made in KC opened in May of 2015 to provide local Kansas City artists and makers a platform to reach customers in Overland Park. As many of the city's artists, designers, and makers are centralized around midtown and Kansas City's budding Crossroads district, Made in KC aimed to provide exposure and access to the greater metro area. The Overland Park store at Prairiefire became a quick success and led to a second location in the Village at Briarcliff in North KC in October 2015.
</p>
</div>
</div>
</div>
</div>
<div id="merch" class="row align-items-center content">
<div class="col-md-6 text-center">
<div class="row justify-content-center">
<div class="col-10 col-8-lg blurb mb-5 mb-md-0">
<h2>MERCH</h2>
<div class="my-4" style="color:rgb(6, 175, 0)">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-bag-check" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
<path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
</svg>
</div>
</svg>
<p class="lead">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo assumenda veritatis sapiente voluptates expedita illum debitis quia quidem? Adipisci explicabo officiis voluptates odit suscipit quod aspernatur dicta rem, beatae hic!
</p>
</div>
</div>
</div>
<div class="col-md-6">
<img class="img-fluid" src="imgs/MadeinKC_Youth_Sweatshirt_Burgundy_1000x.jpeg" alt="">
</div>
</div>
<div id="community" class="row align-items-center content">
<div class="col-md-6 order-2 order-md-1 height">
<img class="img-fluid" src="imgs/Made-Mobb-KC-Dad-Hat-Denim_1000x.jpeg" alt="">
</div>
<div class="col-md-6 text-center order-1 order-md-2">
<div class="row justify-content-center">
<div class="col-10 col-8-lg blurb mb-5 mb-md-0">
<h2 class="">COMMUNITY</h2>
<div class="my-4" style="color:black">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-people" viewBox="0 0 16 16">
<path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
</svg>
</div>
</svg>
<p class="lead">
Made in KC curates its product from hundreds of submissions and works to support brands through partnerships, relationships, and resources. The artists we work with make or design their products in the Kansas City metro area and may source some parts of their products outside Kansas City when a non-local option is not available or extremely cost prohibitive. We work actively to build our network of vendors and resources so that we can help brands grow their sales but also build a more sustainable business.
</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="row text-center">
<div class="col">
<p><mark>*website is for demo purposes only, and is not a licensed Made in KC property, nor representative or their brand. All imagery belongs to: <a href="https://madeinkc.co/">https://madeinkc.co/</a></mark></p>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(function () {
$(document).scroll(function() {
var $nav = $("#mainNavbar");
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
})
})
</script>
</body>
</html>