forked from IvanARodriguez/StudentSite
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
206 lines (178 loc) · 10.6 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
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
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="banner.css">
<title>Student Github Practice</title>
</head>
<body>
<header>
<a href="" class="generation-Btn">
<img src="images/genlogo.png" class="gen-logo" alt="generation usa logo">
<span>Student Site</span>
</a>
</header>
<!-- The banner section starts here -->
<section class="banner-section" id="ivan-section">
<div class="container">
<!-- Ivan Banner start here ========================================================== -->
<div class="banner-ivan-box">
<div class="banner-content">
<div class="banner-title">
<h1>A .Net web developer</h1>
<img src="images/dotnetlang.png" class="dotneticon" alt="">
</div>
<h3>Many developer choose this path to build desktop and web apps</h3>
<ul>
<li>Build scalable user interface</li>
<li>Troubleshoot software prototypes</li>
<li>Provide technical support to users</li>
<li>Develop programs for .NET applications</li>
<li>Create procedures for running the applications</li>
</ul>
<div class="btn-box">
<button class="btn-left">
<a target="_blank" href="https://www.youtube.com/watch?v=4G_BzLxa9Nw&t=539s">
Free Course
</a>
</button>
<button class="btn-center">
<a target="_blank" href="https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-net-framework-programming/">
Lectures
</a>
</button>
<button class="btn-right">
<a target="_blank" href="https://dotnetfoundation.org/">
Community
</a>
</button>
</div>
</div>
<div class="banner-img"></div>
</div>
<!-- Ivan Banner ends here ========================================================== -->
</div>
</section>
<!-- The Banner sections end here -->
<div class="container">
<!-- this is Ivan's section -->
<div class="ivan-box">
<div class="img-box"></div>
<h1>My name is Ivan</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis voluptatibus deleniti error, obcaecati consectetur eius aliquid eaque eligendi numquam aut possimus, pariatur consequatur, voluptatem quod atque quam debitis nobis? Doloribus dolores atque quisquam expedita animi magnam, deserunt non voluptates recusandae ut iste nulla optio assumenda voluptatibus debitis sapiente, quia commodi!</p>
<button class="ivan-btn" id="ivan-id">
<a href="https://github.com/IvanARodriguez" target="_blank">Ivan GitHub</a>
</button>
</div>
<!-- this is a disaster section -->
<div class="steve-box">
<div class="img-box">
<a href="https://usa.generation.org/"><img src="images/disaster.jpg" alt="Train Wreck comming out of a building"></a>
</div>
<h1>Master of Disaster</h1>
<p>Hey everybody! My name is Steve, and as you can guess I am the Master of Disaster. I bring a whole lot of train wreck to web design, but I'm working on getting past that. One day I'll be able create beautiful websites like the one you're viewing. Take a look at the projects in my GitHub. And a big shout out to Ivan for putting this practice together!</p>
<button class="steve-btn">
<a href="https://github.com/bas644" target="_blank">A Disasterous GitHub</a>
</button>
<p>Ivan this was:</p>
<ul>
<li>Fun</li>
<li>Productive</li>
<li>Helpful</li>
</ul>
</div>
<!-- Madonna section starts -->
<div class="madona-box">
<div class="img-box"></div>
<h1>Madona Abbott</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et earum omnis quibusdam voluptatem ullam iusto dolorem sunt sint ducimus magnam.</p>
<button class="madona-btn">
<a href="https://github.com/MadonaAbbott" target="_blank">Madona GitHub</a>
</button>
<p>Ivan this was:</p>
<ol>
<li>helpful</li>
<li>insightful</li>
<li>exciting</li>
</ol>
</div>
<!--Madonna section ends -->
<!-- this is Tiffany's section -->
<div class="tiffany-box">
<div class="img-box"></div>
<h1>My name is Tiffany</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis voluptatibus deleniti error, obcaecati consectetur eius aliquid eaque eligendi numquam aut possimus, pariatur consequatur.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. At aspernatur maxime doloremque rerum unde! Placeat quisquam repudiandae ea quibusdam sint ipsa, nostrum unde doloribus esse enim eveniet, deserunt adipisci, laborum deleniti cupiditate temporibus quos velit quia reprehenderit iure? Doloribus non incidunt tempora fugiat corporis ab illum enim quos consectetur voluptatibus.</p>
<button class="tiffany-btn">
<a href=https://github.com/TiffanyClark> Tiffany GitHub</a>
</button>
</div>
<!-- This is Claudio's section -->
<div class="claudio-box">
<div class="img-box-c"></div>
<h1>My name is claudio</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus cumque ipsa esse maxime magnam sunt ex assumenda placeat nihil corrupti ut veritatis, nam dolorum nisi? Consectetur ipsa dolor quasi quod maxime ipsum ducimus eaque perferendis, error quis, aperiam, alias tenetur! Nostrum minima nobis sint quod assumenda nam aliquam, deleniti expedita dolorem at sunt earum ipsam mollitia labore veritatis perferendis.
</p>
<button class="claudio-btn">
<a href="https://github.com/ClaudioAsuncion" target="_blank">Claudio's GitHub</a>
</button>
</div>
<!-- Claudio section ends -->
<!-- this is angela's section -->
<div class="angela-box">
<div class="img-box"></div>
<h1>"Angela A. Farnell"</h1>
<p>Who am I? I am a 11 year teacher of Middle School Math, Science, Robotics and Pre-Engineering. I love to dance, design and build websites, and spend time with my family. I am married with 5 children and 5 grand-daugthers. My goal is to become a Junior Web Developer and learn the game of investing. In addition, I want to continue instilling 21-century skills into today's youth to make them become productive citizen.</p>
<button class="angela-btn">
<a href="https://github.com/afarnell">Angela GitHub</a>
</button>
</div>
<!-- Angela section ends -->
<!-- this is Emily's section -->
<div class="emily-box">
<div class="img-box"></div>
<h1>My name is Emily</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis voluptatibus deleniti error, obcaecati consectetur eius aliquid eaque eligendi numquam aut possimus, pariatur consequatur.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. At aspernatur maxime doloremque rerum unde! Placeat quisquam repudiandae ea quibusdam sint ipsa, nostrum unde doloribus esse enim eveniet, deserunt adipisci, laborum deleniti cupiditate temporibus quos velit quia reprehenderit iure? Doloribus non incidunt tempora fugiat corporis ab illum enim quos consectetur voluptatibus.</p>
<button class="emily-btn">
<a href=https://github.com/ehuang1412> Emily GitHub</a>
</button>
</div>
<!-- Emily's section ends -->
<!-- this is Jeremys section -->
<div class="jeremy-box">
<center>
<div class="img-box"></div>
<h1>JEREMY PENA</h1>
<p>WEB DEVELOPER</p>
<p>Cat ipsum dolor sit amet, hunt by meowing loudly at 5am next to human food dispenser nibble on grasses loves cheeseburgers but scratch the box.
Mewl for food at 4am flee in terror at cucumber discovered on floor but catching very fast laser pointer stare at ceiling find a way to fit in tiny box paw your face to wake you up in the
morning meow all night disturbing sleeping humans.</p>
<button class="jeremy-btn">
<a href="http://github.com/krillik" target="_blank">Check out my work</a>
</button>
</center>
</div>
<!-- Jeremys section ends -->
<!-- this is yetnayet section -->
<div class="yetnayet-box">
<div class="img-box"></div>
<h1>My name is yetnayet</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis voluptatibus deleniti error, obcaecati consectetur eius aliquid eaque eligendi numquam aut possimus, pariatur consequatur, voluptatem quod atque quam debitis nobis? Doloribus dolores atque quisquam expedita animi magnam, deserunt non voluptates recusandae ut iste nulla optio assumenda voluptatibus debitis sapiente, quia commodi!</p>
<button class="yetnayet-btn" id="yetnayet-id">
<a href="https://github.com/ytnayet" target="_blank">yetnayet GitHub</a>
</button>
</div>
</div>
<!-- This is a test to see if we can make 4 columns jump to 2 columns -->
<div class="img-container">
<div class="column" id="img1"></div>
<div class="column" id="img2"></div>
<div class="column" id="img3"></div>
<div class="column" id="img4"></div>
</div>
</body>
</html>