-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (102 loc) · 5.14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlogDeCafé</title>
<meta name="description" content="Science blog website">
<link rel="preload" href="css/normalize.css" as="style">
<link rel="stylesheet" href="css/normalize.css">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Open+Sans&family=PT+Sans:wght@400;700&display=swap" crossorigin="crossorigin" as="font">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=PT+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="preload" href="css/style.css" as="style">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="barra">
<a class="logo" href="index.html">
<h1 class="logo__nombre without-margin txt-center"><span class="logo__bold">The Science</span>Blog</h1>
</a>
<nav class="navigation">
<a href="aboutus.html" class="navigation_link">About</a>
<a href="contact.html" class="navigation_link">Contact</a>
</nav>
</div>
</div>
<div class="txt_header">
<h2 class="without-margin">Everything you need to know about science</h2>
<p class="without-margin">Stay on top of all the science news</p>
</div>
</header>
<div class="container main-content">
<main>
<h3>Blog posts</h3>
<article class="entry">
<div class="entry_img">
<img src="images/brain1.jpg" alt="Blog image, brain">
</div>
<div class="entry__contenido">
<h4 class="without-margin">Ten myths about the brain</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat pretium turpis et luctus.
Maecenas ac tincidunt purus, ac cursus elit. Praesent efficitur faucibus erat nec porta. Nam scelerisque
velit ex, vitae efficitur leo ullamcorper quis. </p>
<a href="entry1.html" class="button button--primary">Read More</a>
</div>
</article>
<article class="entry">
<div class="entry_img">
<img src="images/space2.jpg" alt="Blog image, black hole">
</div>
<div class="entry__contenido">
<h4 class="without-margin">Is it possible to extract energy from black holes?</h4>
<p>Ut eu blandit massa. Morbi in bibendum sapien, a sodales ex. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Quisque urna elit, aliquet nec auctor at, hendrerit sit amet est. </p>
<a href="entry2.html" class="button button--primary">Read More</a>
</div>
</article>
<article class="entry">
<div class="entry_img">
<img src="images/turtle3.jpg" alt="Blog image, turtle">
</div>
<div class="entry__contenido">
<h4 class="without-margin">They discover a Galapagos tortoise believed to be extinct 112 years ago</h4>
<p>Nunc porta elit id condimentum bibendum. Nunc at leo vestibulum quam tincidunt scelerisque luctus nec turpis.
Etiam nulla lacus, sollicitudin vel quam vel, consectetur congue mi. Etiam ullamcorper imperdiet mauris, vitae
tincidunt justo pulvinar sit amet.</p>
<a href="entry3.html" class="button button--primary">Read More</a>
</div>
</article>
</main>
<aside class="sidebar">
<h3>Comments</h3>
<div id="disqus_thread"></div>
<script>
(function () { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://mipaginaparaholberton.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by
Disqus.</a>
</noscript>
</aside>
</div>
<footer class="footer">
<div class="container">
<div class="barra">
<a class="logo" href="index.html">
<h1 class="logo__nombre without-margin txt-center"><span class="logo__bold">The Science</span>Blog</h1>
</a>
<nav class="navigation">
<a href="aboutus.html" class="navigation_link">About</a>
<a href="contact.html" class="navigation_link">Contact</a>
</nav>
</div>
</div>
</footer>
</body>
</html>