-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
127 lines (121 loc) · 10.4 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
<!--Document written in HTML-->
<!DOCTYPE html>
<html lang="en">
<!--head element sets language-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheet links: -->
<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">
<title>home | SiliconDesktopHistory</title>
</head>
<!-- Credit Comment -->
<!-- section-ids (section-one section-two section-three) taken from -->
<!-- https://codepen.io/nikkipantony/pen/vWgjBw -->
<!-- CodePen -->
<!-- CSS Multi-Grid One-Page Layout Experiment with CSS Grid, Flexbox and HTML5 Sections -->
<!-- Nikki Pantony -->
<body>
<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>
<section id="section-three">
<h1 class="page_heading">The History of the Silicon Based Desktop Computer</h1>
</section>
</div>
</header>
<main>
<section id="section-four">
<!-- Note: horizontal scroll slider consists of 2 divs with id "outer_wrapper" and "inner_wrapper" -->
<!-- Note: horizontal timeline is wrapped in horizontal scroll to give scrolling horizontal timeline -->
<h2 class="hozizontal-timeline-heading">Timeline of Four Generations of Development towards today's Desktop Computers</h2>
<!-- horizontal scroll start
Credit Comment Start
https://stackoverflow.com/questions/9925754/css-horizontal-scroll
by FrameWorker
https://stackoverflow.com/users/468722/frameworker -->
<div id="outer_wrapper">
<div id="inner_wrapper">
<!-- horizontal timeline
Credit Comment Start
Item 3 on https://csshint.com/horizontal-timeline-css/
https://codepen.io/kundankumarmourya/pen/oKBMLe
by Kundan Kumar Mourya
https://codepen.io/kundankumarmourya -->
<div class="time-line-box">
<div class="swiper-container text-center">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="timestamp"><span class="date">Before and 1925 to 1945</span></div>
<div class="status"><span>Prior to First Generation</span></div>
<div class="horizontal-timeline-image-container"><span><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/FET_cross_section.png/330px-FET_cross_section.png" alt="Cross-sectional view of a field-effect transistor (F.E.T.), showing source, gate and drain terminals"></span></div>
<div class="horizontal-timeline-image-description"><p class="index-timeline-picture-text">Cross-sectional view of a field-effect transistor (F.E.T.), showing source, gate and drain terminals</p></div>
</div>
<div class="swiper-slide">
<div class="timestamp"><span class="date">1946 to 1959</span></div>
<div class="status"><span>1st Generation</span></div>
<div class="horizontal-timeline-image-container"><span><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/BJT_NPN_symbol_%28case%29.svg/75px-BJT_NPN_symbol_%28case%29.svg.png" alt="BJT (Bipolar Juntion Transistor) NPN schematic symbol, where An NPN transistor comprises two semiconductor junctions that share a thin p-doped region"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/BJT_PNP_symbol_%28case%29.svg/75px-BJT_PNP_symbol_%28case%29.svg.png" alt="BJT (Bipolar Juntion Transistor) NPN schematic symbol, where a PNP transistor comprises two semiconductor junctions that share a thin n-doped region. N-type means doped with impurities that provide mobile electrons, while P-type means doped with impurities that provide holes that readily accept electrons."></span></div>
<div class="horizontal-timeline-image-description"><p class="index-timeline-picture-text">BJTs (Bipolar Juntion Transistors) NPN and PNP schematic symbols, where An NPN transistor comprises two semiconductor junctions that share a thin p-doped region, and a PNP transistor comprises two semiconductor junctions that share a thin n-doped region. N-type means doped with impurities that provide mobile electrons, while P-type means doped with impurities that provide holes that readily accept electrons.</p></div>
</div>
<div class="swiper-slide">
<div class="timestamp"><span class="date">1959 to 1965</span></div>
<div class="status"><span>2nd Generation</span></div>
<div class="horizontal-timeline-image-container"><span><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/MOSFET_Structure.png/220px-MOSFET_Structure.png" alt="MOSFET, showing gate (G), body (B), source (S) and drain (D) terminals. The gate is separated from the body by an insulating layer (pink)."></span></div>
<div class="horizontal-timeline-image-description"><p class="index-timeline-picture-text">MOSFET, showing gate (G), body (B), source (S) and drain (D) terminals. The gate is separated from the body by an insulating layer (pink).</p></div>
</div>
<div class="swiper-slide">
<div class="timestamp"><span class="date">1965 to 1971</span></div>
<div class="status"><span>3rd Generation</span></div>
<div class="horizontal-timeline-image-container"><span><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Microchips.jpg/220px-Microchips.jpg" alt="Integrated Circuits: Erasable programmable read-only memory (EPROM) integrated circuits in dual in-line packages. These packages have a transparent window that shows the die inside. The window is used to erase the memory by exposing the chip to ultraviolet light."></span></div>
<div class="horizontal-timeline-image-description"><p class="index-timeline-picture-text">Integrated Circuits: Erasable programmable read-only memory (EPROM) integrated circuits in dual in-line packages. These packages have a transparent window that shows the die inside. The window is used to erase the memory by exposing the chip to ultraviolet light.</p></div>
</div>
<div class="swiper-slide">
<div class="timestamp"><span class="date">1971 to 1980 and on to Present</span></div>
<div class="status"><span>4th Generation</span></div>
<div class="horizontal-timeline-image-container"><span><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/C4004_two_lines.jpg/200px-C4004_two_lines.jpg" alt="Intel 4004 Microprocessor in 1971 (year)"></span></div>
<div class="horizontal-timeline-image-description"><p class="index-timeline-picture-text">Intel 4004 Microprocessor in 1971 (year)</p></div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<!--Item 3 on https://csshint.com/horizontal-timeline-css/
https://codepen.io/kundankumarmourya/pen/oKBMLe
by Kundan Kumar Mourya
https://codepen.io/kundankumarmourya
Credit Comment End
horizontal timeline end -->
</div>
</div>
<!-- https://stackoverflow.com/questions/9925754/css-horizontal-scroll
by FrameWorker
https://stackoverflow.com/users/468722/frameworker
Credit Comment End
horizontal scroll end -->
</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>