-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcase.html
153 lines (117 loc) · 5.85 KB
/
case.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
<!DOCTYPE html>
<html>
<head>
<title> Y UD? </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon_yud/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon_yud/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon_yud/favicon-16x16.png">
<link rel="manifest" href="images/favicon_yud/site.webmanifest">
<link rel="mask-icon" href="images/favicon_yud/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- favicons -->
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<!-- NAVIGATION SECTION -->
<body style="margin:0; padding:0">
<nav class="navbar navbar-expand-md main">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<i class="fas fa-bars black"> </i>
</button>
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img class="logo" src="https://i.gyazo.com/a10cf3f5b9a6f2717840947a0e34e739.png">
</a>
<!-- Links -->
<div class="collapse navbar-collapse" id="navbarCollapse" style="font-size: large">
<div class="navbar-nav ml-auto">
<a href="https://sidiknatasha.github.io/yuniversaldesign/#About" class="nav-item nav-link black items main">About</a>
<a href="case.html" class="nav-item nav-link black active items main">Case Studies</a>
<a href="guide.html" class="nav-item nav-link black items main">Guide</a>
<a href="#" class="nav-item nav-link black items main">Resources</a>
<a href="https://sidiknatasha.github.io/yuniversaldesign/#Contact" class="nav-item nav-link black items main">Contact</a>
</div>
</div>
</nav>
<!-- CASE SECTION -->
<div class="container parta">
<div class="row">
<section class="col-md-4"> </section>
<section class="col-md-4 catchline3" style="width: 100%">
<h1 class="animate__animated animate__zoomIn bolder orange"> case studies </h1>
</section>
<section class="col-md-4"> </section>
</div>
</div>
<!-- CASE 1 SECTION -->
<div class="container parta">
<div class="row">
<div class="col-md-12">
<div class="card card-1">
<h3 class="bold2">business</h3>
<p class="regular medium">Universal Design "is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design."</p>
</div>
</div>
</div>
</div>
<div class="container parta">
<div class="row">
<div class="col-md-12">
<div class="card card-2">
<h3 class="bold2">technology</h3>
<p class="regular medium">This concept is a design-thinking process that can be applied across a wide range of fields, varying from tech products, architectural landscapes, to everyday appliances.</p>
</div>
</div>
</div>
</div>
<div class="container parta">
<div class="row">
<div class="col-md-12">
<div class="card card-3">
<h3 class="bold2">education</h3>
<p class="regular medium">Universal Design is made with equal accessibility in mind, for differently-abled and neurodiverse groups of people specifically, but the improvements always end up being for <span style="font-style: italic;"> everyone. </span> </p>
</div>
</div>
</div>
</div>
<div class="container parta">
<div class="row">
<div class="col-md-12">
<div class="card card-4">
<h3 class="bold2">architecture</h3>
<p class="regular medium">When a product or an environment is built to be accessible for people with disabilities, it often ends up being beneficial for others. Hence the name "Universal Design." Case studies <a href=case.html> here. </a> </p>
</div>
</div>
</div>
</div>
<div class="container parta">
<div class="row">
<div class="col-md-12">
<div class="card card-5">
<h3 class="bold2">how?</h3>
<p class="regular medium">Depending on where Universal Design is applied to, there are vastly different things to consider. But as a starting point, there are generally <a href=guide.html> 7 principles of Universal Design </a> to abide to.</p>
</div>
</div>
</div>
</div>
<div class="container parta">
<div class="row">
<div class="col-md-12">
<div class="card card-6">
<h3 class="bold2">when?</h3>
<p class="regular medium">Start implementing Universal Design now by first re-framing how you think. For the specifics, feel free to refer to our case study and guide page for more information.</p>
</div>
</div>
</div>
</div>
</html>