-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsecond_generation.html
257 lines (242 loc) · 19.2 KB
/
second_generation.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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- "X-UA-Compatible" and "IE=edge" optimises webpage display if user has older version of Internet Explorer (Ref_0001, Ref0002) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Second Generation</title>
<link rel="stylesheet" href="assets/css/style.css">
<!-- Link for Google font Roboto: -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">
<!-- Link for Google font Open Sans: -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap" rel="stylesheet">
</head>
<body>
<header>
<!--Page header:-->
<!--Navigation links to pages on this site: -->
<div>
<nav>
<ul class="nav-menu">
<li class="bulletless"><a href="index.html" class="button" target="_self">Home</a></li>
<li class="bulletless"><a href="pre_and_first_generation.html" class="button" target="_self">Pre and First Generation</a></li>
<li class="bulletless"><a href="second_generation.html" class="button" target="_self">Second Generation</a></li>
<li class="bulletless"><a href="third_and_fourth_generation.html" class="button" target="_self">Third and Fourth Generation</a></li>
<li class="bulletless"><a href="user_survey_form.html" class="button" target="_self">User Survey Form</a></li>
</ul>
</nav>
</div>
<section id="section-three">
<h1 class="page_heading">The History of the Silicon Based Desktop Computer</h1>
</section>
</header>
<main>
<section id=section-four>
<div>
<!-- Reference Comment: center iframe https://stackoverflow.com/questions/8366957/how-to-center-an-iframe-horizontally#8366972 -->
<!-- Reference Comment: used answer by pedro https://stackoverflow.com/users/5564463/pedro -->
<p class="video-to-center">
<!-- Reference Comment: iframe element taken by selecting SHARE > embed > on https://www.youtube-nocookie.com/embed/Bfvyj88Hs_o?start=1 -->
<!-- Reference Comment: method of using iframe embedding taken from https://www.bitdegree.org/learn/how-to-embed-a-youtube-video -->
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Bfvyj88Hs_o?start=1" title="How a MOSFET Works" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</p>
</div>
</section>
<section id="section-five">
<!-- Credit Comment: Content from https://en.wikipedia.org/wiki/History_of_computing_hardware_(1960s%E2%80%93present)#Third_generation -->
<!-- This section has combined vertical timeline and 2 columns -->
<!-- Note inside vertical timeline is 2 columns reference -->
<!-- vertical timeline https://freefrontend.com/css-timelines/
https://codepen.io/mathiesjanssen/pen/ggeBKm-->
<div class="container">
<!-- Section Heading: "Second Generation" -->
<div class="header">
<h1>Second Generation</h1>
</div>
<!-- subheading: "Second Generation (1959-1965)" -->
<!-- From Section Heading-->
<div class="subheader">
<h2>Second Generation (1959-1965)</h2>
</div>
<!-- 2 columns https://www.w3schools.com/howto/howto_css_two_columns.asp -->
<!-- start row "Egyptian engineer Mohamed Atalla 1958 growing silicon oxide on clean silicon surface neutralization surface states, surface passivation" -->
<div class="row">
<!-- left column -->
<div class="column left"> <!-- new-->
<!-- column 1 of 2 here -->
<div class="item-for-left"><!-- works --><!-- .item-from-left added from right column -->
<div><!--add to match right col-->
<section>
<ul><!-- Add unordered list containing element -->
<li class="bulletless"><!-- Add list item and class column so that this goes on the left -->
<span class="bullet-to-text-spacing-left"><!-- for bullet point to text spacing control https://stackoverflow.com/questions/4373046/css-control-space-between-bullet-and-li-->
<h3><!-- add h3 per https://codepen.io/mathiesjanssen/pen/ggeBKm-->
MOSFET
</h3>
<!-- If needed put line break(s) here -->
<p>
The metal–oxide–semiconductor field-effect transistor (MOSFET) was then invented by Mohamed Atalla and Dawon Kahng in 1959. The MOSFET largely superseded both the bipolar transistor and the JFET, and had a profound effect on digital electronic development.
</p><!--Updated Comment: line breaks above replaced with comment indicating line break placeholder. Original comment: This line (was break break paragraph open and close) fixes bug whereby right column was line breaking instead of left. Bug was caused by line break coming further down further out from center of nested code block. If line break comes lower down, further out from center of nested code, (after next closing div tag or after next closing list item tag, it does not work as expected. -->
</span>
</li>
</ul><!-- Closing tag for ul containing left column of vertical timeline -->
</section>
</div><!--add to match right col closing tag-->
</div><!-- .item-for-left added from .item closing tag on right column -->
<!-- column 1 above closing -->
</div><!-- .column-left closing tag :Updated Comment Original Comment: new closing tag-->
<!-- right column -->
<div class="column right">
<!-- column 2 of 2 https://www.w3schools.com/howto/howto_css_two_columns.asp -->
<div class="item"><!-- works -->
<div><!-- keeps separate timepoints under each other -->
<section>
<ul><!-- Add unordered list containing element -->
<li>
<span class="bullet-to-text-spacing-right"><!-- for bullet point to text spacing control https://stackoverflow.com/questions/4373046/css-control-space-between-bullet-and-li-->
<h3>
1959
</h3>
<!-- If needed put line break(s) here -->
<p>
Mohamed Atalla and Dawon Kahng
</p>
</span>
</li><!-- Add class bulletless2 to remove bullet point -->
</ul><!-- Close unordered list containing element -->
</section>
</div>
</div>
<!-- end vertical timeline -->
</div>
<!-- close 2 columns: -->
<!-- row div closing tag: -->
</div>
<!-- -end- row "Egyptian engineer Mohamed Atalla 1958 growing silicon oxide on clean silicon surface neutralization surface states, surface passivation" -->
<!-- start row "MOSFETs proposed Dawon Kahng 1960 Dates conflict with above" -->
<div class="row">
<!-- left column -->
<div class="column left"> <!-- new-->
<!-- column 1 of 2 here -->
<div class="item-for-left"><!-- works --><!-- .item-from-left added from right column -->
<div><!--add to match right col-->
<section>
<ul><!-- Add unordered list containing element -->
<li class="bulletless"><!-- Add list item and class column so that this goes on the left -->
<span class="bullet-to-text-spacing-left"><!-- for bullet point to text spacing control https://stackoverflow.com/questions/4373046/css-control-space-between-bullet-and-li-->
<h3><!-- add h3 per https://codepen.io/mathiesjanssen/pen/ggeBKm-->
MOSFETs first proposed (Date confilct with above)
</h3>
<!-- If needed put line break(s) here -->
<p>
Metal oxide semiconductor field effect transistors. These were first proposed by Dawon Kahng in 1960
</p><!--Updated Comment: line breaks above replaced with comment indicating line break placeholder. Original comment: This line (was break break paragraph open and close) fixes bug whereby right column was line breaking instead of left. Bug was caused by line break coming further down further out from center of nested code block. If line break comes lower down, further out from center of nested code, (after next closing div tag or after next closing list item tag, it does not work as expected. -->
</span>
</li>
</ul><!-- Closing tag for ul containing left column of vertical timeline -->
</section>
</div><!--add to match right col closing tag-->
</div><!-- .item-for-left added from .item closing tag on right column -->
<!-- column 1 above closing -->
</div><!-- .column-left closing tag :Updated Comment Original Comment: new closing tag-->
<!-- right column -->
<div class="column right">
<!-- column 2 of 2 https://www.w3schools.com/howto/howto_css_two_columns.asp -->
<div class="item"><!-- works -->
<div><!-- keeps separate timepoints under each other -->
<section>
<ul><!-- Add unordered list containing element -->
<li>
<span class="bullet-to-text-spacing-right"><!-- for bullet point to text spacing control https://stackoverflow.com/questions/4373046/css-control-space-between-bullet-and-li-->
<h3>
1960
</h3>
<!-- If needed put line break(s) here -->
<p>
Dawon Kahng
</p>
</span>
</li><!-- Add class bulletless2 to remove bullet point -->
</ul><!-- Close unordered list containing element -->
</section>
</div>
</div>
<!-- end vertical timeline -->
</div>
<!-- close 2 columns: -->
<!-- row -->
</div>
<!-- -end- row "MOSFETs proposed Dawon Kahng 1960 Dates conflict with above" -->
<!-- start row "CMOS 1963" -->
<div class="row">
<!-- left column -->
<div class="column left"> <!-- new-->
<!-- column 1 of 2 here -->
<div class="item-for-left"><!-- works --><!-- .item-from-left added from right column -->
<div><!--add to match right col-->
<section>
<ul><!-- Add unordered list containing element -->
<li class="bulletless"><!-- Add list item and class column so that this goes on the left -->
<span class="bullet-to-text-spacing-left"><!-- for bullet point to text spacing control https://stackoverflow.com/questions/4373046/css-control-space-between-bullet-and-li-->
<h3><!-- add h3 per https://codepen.io/mathiesjanssen/pen/ggeBKm-->
CMOS for MOSFETs
</h3>
<!-- If needed put line break(s) here -->
<p>
CMOS (complementary MOS), a semiconductor device fabrication process for MOSFETs, was developed by Chih-Tang Sah and Frank Wanlass at Fairchild Semiconductor in 1963.
</p><!--Updated Comment: line breaks above replaced with comment indicating line break placeholder. Original comment: This line (was break break paragraph open and close) fixes bug whereby right column was line breaking instead of left. Bug was caused by line break coming further down further out from center of nested code block. If line break comes lower down, further out from center of nested code, (after next closing div tag or after next closing list item tag, it does not work as expected. -->
</span>
</li>
</ul><!-- Closing tag for ul containing left column of vertical timeline -->
</section>
</div><!--add to match right col closing tag-->
</div><!-- .item-for-left added from .item closing tag on right column -->
<!-- column 1 above closing -->
</div><!-- .column-left closing tag :Updated Comment Original Comment: new closing tag-->
<!-- right column -->
<div class="column right">
<!-- column 2 of 2 https://www.w3schools.com/howto/howto_css_two_columns.asp -->
<div class="item"><!-- works -->
<div><!-- keeps separate timepoints under each other -->
<section>
<ul><!-- Add unordered list containing element -->
<li>
<span class="bullet-to-text-spacing-right"><!-- for bullet point to text spacing control https://stackoverflow.com/questions/4373046/css-control-space-between-bullet-and-li-->
<h3>
1963
</h3>
<!-- If needed put line break(s) here -->
<p>
Chih-Tang Sah and Frank Wanlass at Fairchild Semiconductor
</p>
</span>
</li><!-- Add class bulletless2 to remove bullet point -->
</ul><!-- Close unordered list containing element -->
</section>
</div>
</div>
<!-- end vertical timeline -->
</div>
<!-- close 2 columns: -->
<!-- row -->
</div>
<!-- -end- row "CMOS 1963" -->
<!-- close CONTAINER: -->
</div>
<!-- end vertical timeline -->
<!-- section 5 closing tag: -->
</section>
</main>
<footer>
<a href="https://github.com/Coder731/Portfolio_Project_1" target="_blank">Click here for source code</a>
<br>
<a href="https://github.com/Coder731/Portfolio_Project_1/blob/main/README.md" target="_blank">Click here for README</a>
<br>
2021
</footer>
</body>
</html>