-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patharticle.html
162 lines (134 loc) · 9.96 KB
/
article.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>News Article</title>
<meta name="News Article" content="Here you will find all the nice information about the stuff you want to read">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body id="body_article">
<div class="body_wrapper">
<header class="header_top">
<img class="img_left" src="css/img/logo-newspaper-cf.png" alt="Sorry, but your browser doesn't support that pic">
<a href="https://www.codefactory.wien" title="codefactory.wien">
<img class="img_right" id="hide_header_pic" src="css/img/banner-1.png" alt="Sorry, but your browser doesn't support that pic">
</a>
</header>
<nav class="nav_top">
<ul>
<li><a href="index.html" title="Back to where you started">Home</a></li>
<li><a href="#" title="Tech News, just for you">Tech</a></li>
<li><a href="culture.html" title="You like culture, click me">Culture</a></li>
<li><a href="video.html" title="Youtube substitute">Video</a></li>
</ul>
</nav>
<main class="article_main">
<div class="bordered_bar" id="NASA">
NASA is trying to squash conspiracy theories about the space station leak!<!--This is a placeholder for a grey bar-->
</div>
<div class="float_container">
<div class="floated">
<img src="css/img/nasa.png" alt="Sorry, but your browser doesn't support that pic">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nisl fermentum, lobortis erat vitae, pellentesque mauris. Suspendisse luctus lacus aliquam sollicitudin pellentesque. Morbi porttitor a tellus eget tincidunt. Proin vel velit vel mi hendrerit hendrerit. Etiam condimentum, ipsum sit amet aliquet interdum, felis dolor maximus metus, ac aliquam neque tortor vitae ipsum. In lobortis tellus nec augue dapibus porta. Nam condimentum ipsum erat, hendrerit interdum mauris pellentesque vel.</p>
</div>
<div class="bordered_bar" id="EU">
EU approves controversial Copyright Directive, including internet 'link tax'<!--This is a placeholder for a grey bar-->
</div>
<div class="float_container">
<div class="floated">
<img src="css/img/eu.png" alt="Sorry, but your browser doesn't support that pic">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nisl fermentum, lobortis erat vitae, pellentesque mauris. Suspendisse luctus lacus aliquam sollicitudin pellentesque. Morbi porttitor a tellus eget tincidunt. Proin vel velit vel mi hendrerit hendrerit. Etiam condimentum, ipsum sit amet aliquet interdum, felis dolor maximus metus, ac aliquam neque tortor vitae ipsum. In lobortis tellus nec augue dapibus porta. Nam condimentum ipsum erat, hendrerit interdum mauris pellentesque vel.</p>
</div>
<div class="bordered_bar" id="JEFF">
Jeff Bezos is going to create schools where "the child is the customer"<!--This is a placeholder for a grey bar-->
</div>
<div class="float_container">
<div class="floated">
<img src="css/img/jeff.png" alt="Sorry, but your browser doesn't support that pic">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nisl fermentum, lobortis erat vitae, pellentesque mauris. Suspendisse luctus lacus aliquam sollicitudin pellentesque. Morbi porttitor a tellus eget tincidunt. Proin vel velit vel mi hendrerit hendrerit. Etiam condimentum, ipsum sit amet aliquet interdum, felis dolor maximus metus, ac aliquam neque tortor vitae ipsum. In lobortis tellus nec augue dapibus porta. Nam condimentum ipsum erat, hendrerit interdum mauris pellentesque vel.</p>
</div>
<div class="bordered_bar" id="POLAR">
Polar's new fitness watch will measure the wattage of your exercise<!--This is a placeholder for a grey bar-->
</div>
<div class="float_container">
<div class="floated">
<img src="css/img/polar.png" alt="Sorry, but your browser doesn't support that pic">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nisl fermentum, lobortis erat vitae, pellentesque mauris. Suspendisse luctus lacus aliquam sollicitudin pellentesque. Morbi porttitor a tellus eget tincidunt. Proin vel velit vel mi hendrerit hendrerit. Etiam condimentum, ipsum sit amet aliquet interdum, felis dolor maximus metus, ac aliquam neque tortor vitae ipsum. In lobortis tellus nec augue dapibus porta. Nam condimentum ipsum erat, hendrerit interdum mauris pellentesque vel.</p>
</div>
<div class="bordered_bar" id="MUSK">
Elon Musk smokes Marijuana live on web show<!--This is a placeholder for a grey bar-->
</div>
<div class="float_container">
<div class="floated">
<img src="css/img/musk.jpg" alt="Sorry, but your browser doesn't support that pic">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nisl fermentum, lobortis erat vitae, pellentesque mauris. Suspendisse luctus lacus aliquam sollicitudin pellentesque. Morbi porttitor a tellus eget tincidunt. Proin vel velit vel mi hendrerit hendrerit. Etiam condimentum, ipsum sit amet aliquet interdum, felis dolor maximus metus, ac aliquam neque tortor vitae ipsum. In lobortis tellus nec augue dapibus porta. Nam condimentum ipsum erat, hendrerit interdum mauris pellentesque vel.</p>
</div>
<div class="bordered_bar" id="SNOWDEN">
Edward Snowden surveillance powers ruled unlawful<!--This is a placeholder for a grey bar-->
</div>
<div class="float_container">
<div class="floated">
<img src="css/img/snowden.jpg" alt="Sorry, but your browser doesn't support that pic">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nisl fermentum, lobortis erat vitae, pellentesque mauris. Suspendisse luctus lacus aliquam sollicitudin pellentesque. Morbi porttitor a tellus eget tincidunt. Proin vel velit vel mi hendrerit hendrerit. Etiam condimentum, ipsum sit amet aliquet interdum, felis dolor maximus metus, ac aliquam neque tortor vitae ipsum. In lobortis tellus nec augue dapibus porta. Nam condimentum ipsum erat, hendrerit interdum mauris pellentesque vel.</p>
</div>
<div class="bordered_bar" id="IPHONE">
How to preorder the iPhoneXS, XS Max and XR<!--This is a placeholder for a grey bar-->
</div>
<div class="float_container">
<div class="floated">
<img src="css/img/iphone.png" alt="Sorry, but your browser doesn't support that pic">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nisl fermentum, lobortis erat vitae, pellentesque mauris. Suspendisse luctus lacus aliquam sollicitudin pellentesque. Morbi porttitor a tellus eget tincidunt. Proin vel velit vel mi hendrerit hendrerit. Etiam condimentum, ipsum sit amet aliquet interdum, felis dolor maximus metus, ac aliquam neque tortor vitae ipsum. In lobortis tellus nec augue dapibus porta. Nam condimentum ipsum erat, hendrerit interdum mauris pellentesque vel.</p>
</div>
<div class="bordered_bar" id="SMART">
This smart power strip lets you individually control each outlet<!--This is a placeholder for a grey bar-->
</div>
<div class="float_container">
<div class="floated">
<img src="css/img/smart.png" alt="Sorry, but your browser doesn't support that pic">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nisl fermentum, lobortis erat vitae, pellentesque mauris. Suspendisse luctus lacus aliquam sollicitudin pellentesque. Morbi porttitor a tellus eget tincidunt. Proin vel velit vel mi hendrerit hendrerit. Etiam condimentum, ipsum sit amet aliquet interdum, felis dolor maximus metus, ac aliquam neque tortor vitae ipsum. In lobortis tellus nec augue dapibus porta. Nam condimentum ipsum erat, hendrerit interdum mauris pellentesque vel.</p>
</div>
<div class="bordered_bar" id="ONE">
OnePlus announces super cheap USB-C earbuds<!--This is a placeholder for a grey bar-->
</div>
<div class="float_container">
<div class="floated">
<img src="css/img/one.png" alt="Sorry, but your browser doesn't support that pic">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nisl fermentum, lobortis erat vitae, pellentesque mauris. Suspendisse luctus lacus aliquam sollicitudin pellentesque. Morbi porttitor a tellus eget tincidunt. Proin vel velit vel mi hendrerit hendrerit. Etiam condimentum, ipsum sit amet aliquet interdum, felis dolor maximus metus, ac aliquam neque tortor vitae ipsum. In lobortis tellus nec augue dapibus porta. Nam condimentum ipsum erat, hendrerit interdum mauris pellentesque vel.</p>
</div>
<div class="bordered_bar" id="PHONE">
Spotify raises limit for offline downloads to 10.000 songs per device<!--This is a placeholder for a grey bar-->
</div>
<div class="float_container">
<div class="floated">
<img src="css/img/phone.png" alt="Sorry, but your browser doesn't support that pic">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel nisl fermentum, lobortis erat vitae, pellentesque mauris. Suspendisse luctus lacus aliquam sollicitudin pellentesque. Morbi porttitor a tellus eget tincidunt. Proin vel velit vel mi hendrerit hendrerit. Etiam condimentum, ipsum sit amet aliquet interdum, felis dolor maximus metus, ac aliquam neque tortor vitae ipsum. In lobortis tellus nec augue dapibus porta. Nam condimentum ipsum erat, hendrerit interdum mauris pellentesque vel.</p>
</div>
</main>
<footer>
<nav class="nav_bottom">
<ul>
<li><a href="index.html" title="Back to where you started">Home</a></li>
<li><a href="#" title="Tech News, just for you">Tech</a></li>
<li><a href="culture.html" title="You like culture, click me">Culture</a></li>
<li><a href="video.html" title="Youtube substitute">Video</a></li>
</ul>
</nav>
<img class="img_footer" src="css/img/logo-newspaper-cf.png" alt="">
<h3>Marco Häfner - CodeFactory 2018</h3>
</footer>
</div>
<script type="text/javascript">
console.log("Hello from the console :)");
</script>
</body>
</html>