-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
96 lines (85 loc) · 3.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project Title</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css" />
<script type="module"
src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace-autoloader.js"></script>
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="./components/team-member/team-member.css">
<script type="module" src="./components/team-member/team-member.js"></script>
<link rel="stylesheet" href="./components/table-of-content/table-of-content.css">
</head>
<body>
<div class="content">
<h1>Project Title</h1>
<!-- This is the team member component use to display details about your team members -->
<div class="team-member-wrapper">
<team-member avatar="assets/blackranger.png" name="Black" department="Mechanical Engineering"
year="1993"></team-member>
<team-member avatar="assets/yellowranger.png" name="Yellow" department="Computer Engineering"
year="1993"></team-member>
<team-member avatar="assets/redranger.png" name="Red" department="Electrical Engineering"
year="1993"></team-member>
<team-member avatar="assets/pinkranger.png" name="Pink" department="Biomedical Engineering"
year="1993"></team-member>
<team-member avatar="assets/blueranger.png" name="Blue" department="Chemical Engineering"
year="1993"></team-member>
</div>
<!-- This is a divide from the shoelace library for aesthetic purpose -->
<sl-divider></sl-divider>
<div>
<h2>Abstraction</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna
aliqua. Tincidunt ornare massa eget egestas. At tellus at urna condimentum mattis pellentesque id nibh tortor.
Elementum sagittis vitae et leo duis ut diam. Morbi tristique senectus et netus et malesuada fames.
Suspendisse
ultrices gravida dictum fusce ut placerat orci. Risus nullam eget felis eget nunc lobortis mattis aliquam
faucibus
(Brody, 2007). Eget sit amet tellus cras adipiscing enim eu turpis egestas. Aliquet nibh praesent tristique
magna
sit amet purus. Adipiscing bibendum est ultricies integer quis auctor elit sed. Fermentum et sollicitudin ac
orci
phasellus egestas tellus rutrum. At in tellus integer feugiat scelerisque varius morbi enim nunc. Volutpat
blandit
aliquam etiam erat velit scelerisque in. Id diam maecenas ultricies mi eget mauris pharetra et. Nec dui nunc
mattis
enim ut tellus elementum sagittis vitae.
</p>
</div>
<sl-divider></sl-divider>
<!-- This is the table-of-content component use to define all of the link directly to each section -->
<div class="table-of-content">
<h2>Table of Contents</h2>
<sl-tree>
<sl-tree-item expanded>
<a href="./chart/">Chart</a>
<sl-tree-item>
<a href="./chart/#pie-doughnut">1. Pie and Doughnut Chart</a>
</sl-tree-item>
<sl-tree-item>
<a href="./chart/#bar">2. Bar Chart</a>
</sl-tree-item>
<sl-tree-item>
<a href="./chart/#line">3. Line Chart</a>
</sl-tree-item>
<sl-tree-item>
<a href="./chart/#scatter">4. Scatter Chart</a>
</sl-tree-item>
</sl-tree-item>
<sl-tree-item>
<a href="./diagram/">Interactive diagram</a>
</sl-tree-item>
<sl-tree-item>
<a href="./3d-render/">3D Render</a>
</sl-tree-item>
</sl-tree>
</div>
</body>
</html>