forked from CodeYourFuture/HTML-CSS-Coursework-Week1
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
179 lines (169 loc) · 6.56 KB
/
Copy pathindex.html
File metadata and controls
179 lines (169 loc) · 6.56 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Why I love JavaScript...</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<div class="header">
<h1>Why I love JavaScript...</h1>
<br />
<p>This article contains a few reasons why I like Javasript</p>
</div>
<h2>How I became interested in Coding</h2>
<article>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt,
explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione
voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum,
quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse,
quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo
voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio
dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti
atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati
cupiditate non provident, similique sunt in culpa, qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis
est eligendi optio, cumque nihil impedit, quo minus id, quod maxime
placeat, facere possimus, omnis voluptas assumenda est, omnis dolor
repellendus. Temporibus autem quibusdam et aut officiis debitis aut
rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et
molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente
delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut
perferendis doloribus asperiores repellat.»
</p>
</article>
<div class="row">
<div class="column">
<div class="card">
<h3>Essential Framworks</h3>
<p>React</p>
<p>Angular</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Inspiring developers</h3>
<p>Brandon Eich</p>
<p>Jordan Walke</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Use Cases</h3>
<p>Web Development</p>
<p>Game Development</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Companies that use JavaScript</h3>
<p>FaceBook</p>
<p>PayPal</p>
</div>
</div>
</div>
<br />
<hr />
<br />
<div class="container">
<article class="first-article">
<div class="row">
<div class="column-66">
<h2 class="xlarge-font">
<b>Making websites fun, flexible and interactive!</b>
</h2>
<h2 class="large-font" style="color: MediumSeaGreen">
<b>Why use it?</b>
</h2>
<article>
<p>
<span style="font-size: 36px"
>In the early days of web development</span
>
lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</article>
<button class="button">Download IDE from JetBrains!</button>
</div>
<div class="column-33">
<img
src="https://tse1.mm.bing.net/th?id=OIP.U16Sxl3a_xpV8R3xDGgMdQHaEK&pid=Api&rs=1&c=1&qlt=95&w=191&h=107"
width="335"
height="471"
/>
</div>
</div>
</article>
</div>
<article>
<div class="container" style="background-color: #f1f1f1">
<div class="row">
<div class="column-33">
<img
src="https://tse1.mm.bing.net/th?id=OIP.q6WjZsBp51C9cdRZBWMKSgHaHW&pid=Api&rs=1&c=1&qlt=95&w=106&h=105"
alt="App"
width="335"
height="471"
/>
</div>
<div class="column-66">
<h2 class="xlarge-font"><b>Clarity</b></<h2></h2>>
<h2 class="large-font" style="color: red"><b>Web uses...</b></h2>
<p>
<span style="font-size: 24px"
>How to create a reactive site is</span
>
, incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquipex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.
</p>
<button class="button" style="background-color: red">
Like This Article
</button>
</div>
</div>
</div>
</article>
<br />
<div class="container-fav">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
</div>
</body>
</html>