-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathchallenge.html
More file actions
137 lines (113 loc) · 5.85 KB
/
Copy pathchallenge.html
File metadata and controls
137 lines (113 loc) · 5.85 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mass-Spring-Damper System</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Free HTML Templates" name="keywords">
<meta content="Free HTML Templates" name="description">
<!-- Favicon -->
<link rel="shortcut icon" type="image/jpg" href="img/favicon.jpg?">
<!-- Google Web Fonts -->
<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=Nunito:wght@400;600;700;800&family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Icon Font Stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Spinner Start -->
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
<div class="spinner"></div>
</div>
<!-- Spinner End -->
<!-- Navbar Start -->
<div class="container-fluid position-relative p-0">
<nav class="navbar navbar-expand-lg navbar-dark px-5 py-3 py-lg-0">
<a href="index.html" class="navbar-brand p-0">
<img class="logo" src="img/logo2.png" alt="Image">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="fa fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto py-0">
<a href="index.html" class="nav-item nav-link">Home</a>
<a href="tutorial.html" class="nav-item nav-link">Tutorial</a>
<a href="program.html" class="nav-item nav-link">Program</a>
<a href="challenge.html" class="nav-item nav-link active">Challenge</a>
</div>
</div>
</nav>
<div class="container-fluid bg-primary py-5 bg-header" style="margin-bottom: 90px;">
<div class="row py-5">
<div class="col-12 pt-lg-5 mt-lg-5 text-center">
<h1 class="display-4 text-white animated zoomIn">Challenge</h1>
<h5 class="text-white">2-DOF Mass-Spring-Damper System</h5>
</div>
</div>
</div>
</div>
<!-- Navbar End -->
<!-- LEGO's Steps Start -->
<div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
<div class="container py-5">
<div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 700px;">
<h5 class="fw-bold yellow_text text-uppercase">Challenge</h5>
<h1 class="mb-0 grey_text">2-DOF Mass-Spring-Damper System</h1>
</div>
<h5 class="fw-bold yellow_text text-uppercase">Challenge 1: Build a 2-DOF Mass-Spring-Damper System</h5><hr/>
<div class="row g-5">
<h5 class="fw-bold grey_text">
Modify the 1-DOF system and build a 2-DOF Mass-Spring-Damper System. <br/>
</h5>
<div class="col-lg-7 col-md-6">
<img class="steps" src="img/2dof.png" alt="">
</div>
</div>
<br/><br/><br/>
<h5 class="fw-bold yellow_text text-uppercase">Challenge 2: Adjust the k</h5><hr/>
<div class="row g-5">
<h5 class="fw-bold grey_text">
Add something to the system to change the k value.
</h5>
<div class="col-lg-7 col-md-6">
<img class="steps" src="img/2dof_k.png" alt="">
</div>
</div>
<br/><br/><br/>
<h5 class="fw-bold yellow_text text-uppercase">Challenge 3: Adjust the damping effect</h5><hr/>
<div class="row g-5">
<h5 class="fw-bold grey_text">
Create a damper with the remaining LEGOs to increase the damping effect of the above 2-DOF system you have built.
</h5>
<div class="col-lg-7 col-md-6">
<img class="steps" src="img/2dof_msd.png" alt="">
</div>
</div>
<br/>
</div>
</div>
<!-- LEGO's Steps End -->
<!-- Back to Top -->
<a href="#" class="btn btn-lg yellow_bg text-white btn-lg-square rounded back-to-top"><i class="bi bi-arrow-up"></i></a>
<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</body>
</html>