-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
141 lines (118 loc) · 8.28 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECE5 Team 4 SKETCHBOOK</title>
<meta name="description" content="sketchbook">
<meta name="author" content="sketchbook">
<link rel="stylesheet" href="sketchbook.css"> <!-- this imports the CSS file. do not remove -->
</head>
<body>
<div class="heading">
<h3 class='name'>Tahseen Hussain <br> David Ca </br> Rafaella Gomes <br> MingWei Yeoh </br> </h3>
<h3 class=pId>PID: A16992294<br>PID: A16844106 <br>PID: A16752204 <br> PID: A16788375 </br> </h3>
<h1>ECE 5 Team 4 Sketchbook</h1> <!-- h1 is heading 1 -->
</div>
<section class="main">
<div class='center'>
<button type='button' onclick="toggleText1()" class="btn">MingWei Yeoh</button>
</div>
<div class="interactive" id='interactive1' style='display: none'>
<div class='box1'>
<br>
<p class='box2'> Thought process on CAD creation </p> <!-- p is paragraph -->
<a href="https://lh3.googleusercontent.com/Yk9A6QDDX5PUSv7vj1AwjPq8ymLM5N5ZGxthx_-5nhKcNhSSj72jeEGH0TJ2pllrYzFVK6X2now__bPagy3k4DIRnnqjl4UwE_Rj8I1rxo9BjldRMpaqBSqsHC8tGTQ0ynk3fYOZVHs=w2400?source=screenshot.guru"> <img src="https://lh3.googleusercontent.com/Yk9A6QDDX5PUSv7vj1AwjPq8ymLM5N5ZGxthx_-5nhKcNhSSj72jeEGH0TJ2pllrYzFVK6X2now__bPagy3k4DIRnnqjl4UwE_Rj8I1rxo9BjldRMpaqBSqsHC8tGTQ0ynk3fYOZVHs" style="padding: 100px;"> </a>
<a href="https://lh3.googleusercontent.com/KsLQMucxZI0FkGHhkC7jnvk7bMtYoUWVdjfmFjRs4ppTX3UqGp8OFI4ignHs8R7JxlFPfwyjpAasu6oURjvZa4O2gteZWYCjbAx4GjsJ1V95saeVzT3LZR4zBmqMx9445R64CX_3hX8=w2400?source=screenshot.guru" style="padding: 100px;"> <img src="https://lh3.googleusercontent.com/KsLQMucxZI0FkGHhkC7jnvk7bMtYoUWVdjfmFjRs4ppTX3UqGp8OFI4ignHs8R7JxlFPfwyjpAasu6oURjvZa4O2gteZWYCjbAx4GjsJ1V95saeVzT3LZR4zBmqMx9445R64CX_3hX8=w600-h315-p-k" style="padding: 100px;" /> </a>
<a href="https://lh3.googleusercontent.com/rreOcX5HffIuUIAdd6OV0fUviomSZQmimtI21FowaxA3WXFeQtUBYd6bg7N9XzHDh3zIxdN2K3n3ij1UPNJIr5wcqpSm_qmT_G7ZQSfqgv-U-oih-0hUkZPdNM6qYoxSWZiClkVhIM0=w2400?source=screenshot.guru"> <img src="https://lh3.googleusercontent.com/rreOcX5HffIuUIAdd6OV0fUviomSZQmimtI21FowaxA3WXFeQtUBYd6bg7N9XzHDh3zIxdN2K3n3ij1UPNJIr5wcqpSm_qmT_G7ZQSfqgv-U-oih-0hUkZPdNM6qYoxSWZiClkVhIM0" style="padding: 100px;"/> </a>
<!-- to insert image replace the link to the image of choice ** note: keep the quotations -->
</div> <!-- This is the end of div box1 -->
</div> <!-- This is the end of div interactive -->
<div class ='center'> <!-- we put hte buton in a container to center it -->
<button type='button' onclick="toggleText2()" class="btn">Tahseen Hussain</button>
</div>
<div class="interactive" id='interactive2' style='display: none'>
<div class='box1'>
<br>
<p class='box2'>Thought process on circutry</p> <!-- p is paragraph -->
<a href="https://lh3.googleusercontent.com/wSjbQf0XvndtNZn14tBEWSa21BOGP73ix1YaObMDNwgtgLfIJSs8r7bcA0GuCMGUcZfhF9PIJaB61hh-49zgbwPuBI4Ei4Z53WfrzeKxfk5E7G3lKSpBNwanqqUI9aL--1TMJKtcB6Q=w2400?source=screenshot.guru"> <img src="https://lh3.googleusercontent.com/wSjbQf0XvndtNZn14tBEWSa21BOGP73ix1YaObMDNwgtgLfIJSs8r7bcA0GuCMGUcZfhF9PIJaB61hh-49zgbwPuBI4Ei4Z53WfrzeKxfk5E7G3lKSpBNwanqqUI9aL--1TMJKtcB6Q" height = "400" style="padding: 100px;" /> </a>
<a href="https://lh3.googleusercontent.com/daOo89hBHGz5RE8xSHqw6757FQIVr7j-JeeFbFdYgqJoxNtcrH3_Virw9FPPCuF2g2VYK97V_3fIMyw8G_HuiO9Y6cetHbKlRS6Sfj5Tnh5zssjkQ2AxXnMprHG78LrTzUXTzsZnsLA=w2400?source=screenshot.guru"> <img src="https://lh3.googleusercontent.com/daOo89hBHGz5RE8xSHqw6757FQIVr7j-JeeFbFdYgqJoxNtcrH3_Virw9FPPCuF2g2VYK97V_3fIMyw8G_HuiO9Y6cetHbKlRS6Sfj5Tnh5zssjkQ2AxXnMprHG78LrTzUXTzsZnsLA" width = "900" height = "400" style="padding: 100px;"/> </a>
<a href="https://lh3.googleusercontent.com/ZZ-5Ljs2uORXXuSBXmGWwwkQ1n8hIK6kCh8D8GbCY-WegiH0KC6r0BSlOf1bo8I9aiL7vh9jODuzXailtfc3AadkJSCgZ2PeKAgajDQVYQI9leif3wzaEfYp8XvYTil1aFXQ2M3vB2U=w2400?source=screenshot.guru"> <img src="https://lh3.googleusercontent.com/ZZ-5Ljs2uORXXuSBXmGWwwkQ1n8hIK6kCh8D8GbCY-WegiH0KC6r0BSlOf1bo8I9aiL7vh9jODuzXailtfc3AadkJSCgZ2PeKAgajDQVYQI9leif3wzaEfYp8XvYTil1aFXQ2M3vB2U" style="padding: 100px;" /> </a>
<!-- to insert image replace the link to the image of choice ** note: keep the quotations -->
</div> <!-- This is the end of div interactive -->
</div> <!-- This is the end of div box1 -->
<div class ='center'>
<button type='button' onclick="toggleText3()" class="btn">Title</button>
</div>
<div class="interactive" id='interactive3' style='display: none'>
<div class='box1'>
<br>
<p class='box2'>Enter one line description here...</p> <!-- p is paragraph -->
<img src = 'https://www.pm10inc.com/wp-content/themes/micron/images/placeholders/ninzio_slider_placeholder.png'>
<!-- to insert image replace the link to the image of choice ** note: keep the quotations -->
</div> <!-- This is the end of div interactive -->
</div> <!-- This is the end of div box1 -->
<div class ='center'>
<button type='button' onclick="toggleText4()" class="btn">Title</button>
</div>
<div class="interactive" id='interactive4' style='display: none'>
<div class='box1'>
<br>
<p class='box2'>Enter one line description here...</p> <!-- p is paragraph -->
<img src = 'https://www.pm10inc.com/wp-content/themes/micron/images/placeholders/ninzio_slider_placeholder.png'>
<!-- to insert image replace the link to the image of choice ** note: keep the quotations -->
</div> <!-- This is the end of div interactive -->
</div> <!-- This is the end of div box1 -->
<div class ='center'> <!-- Start of Box 5 group project-->
<button type='button' onclick="toggleText5()" class="btn">Project Workflow</button>
</div>
<div class="interactive" id='interactive5' style='display: none'>
<div class='box1'>
<br>
<p class='box2'>How the entire project flowed together </p> <!-- p is paragraph -->
<a href="https://lh3.googleusercontent.com/3uayJWecQPjL0U4N63F_1fyZmkUxLt143W_nfbdTvQ4m0EjNiiUkO8Ium5iq9KYPD7MZ0Wrcjetrsvf2D3SnpefweETGUrAg24jiPjxx7jUTz4J01J2ph-IzNP9xgR7xJy7jHHLHvt4=w2400?source=screenshot.guru"> <img src="https://lh3.googleusercontent.com/3uayJWecQPjL0U4N63F_1fyZmkUxLt143W_nfbdTvQ4m0EjNiiUkO8Ium5iq9KYPD7MZ0Wrcjetrsvf2D3SnpefweETGUrAg24jiPjxx7jUTz4J01J2ph-IzNP9xgR7xJy7jHHLHvt4=w600-h315-p-k"style="padding: 100px;" /> </a> <a href="https://lh3.googleusercontent.com/c3FOkxDXsZo21PHyMF42Fmzi3_jvNpQaS_JpBVZ1NR5XXjS18BWpXhK_t2yxIFKqMRtrsQhK375fpHRwvm8hn_lKMupP3SPfPv8bcwCglNlJRDvToujeaCp9nBjjD-pYfZovYrjPep8=w2400?source=screenshot.guru"> <img src="https://lh3.googleusercontent.com/c3FOkxDXsZo21PHyMF42Fmzi3_jvNpQaS_JpBVZ1NR5XXjS18BWpXhK_t2yxIFKqMRtrsQhK375fpHRwvm8hn_lKMupP3SPfPv8bcwCglNlJRDvToujeaCp9nBjjD-pYfZovYrjPep8=w600-h315-p-k" style="padding: 100px;"/> </a>
</section>
<!-- This is the end of our section -->
</body>
<script>
function toggleText1(text) {
var text = document.getElementById("interactive1");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function toggleText2(text) {
var text = document.getElementById("interactive2");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function toggleText3(text) {
var text = document.getElementById("interactive3");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function toggleText4(text) {
var text = document.getElementById("interactive4");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function toggleText5(text) {
var text = document.getElementById("interactive5");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>
</html>