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
86 lines (70 loc) · 4.38 KB
/
index.html
File metadata and controls
86 lines (70 loc) · 4.38 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
<!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>My Blog</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<body>
<div class="header-container">
<header id="header">
<div class="logo">
<img id="logo-img"
src="logo.png" alt="blog logo"/>
</div>
<h1> mum's blog </h1>
<nav id="nav-bar">
<ul>
<li> <a href="/">Recent posts</a></li>
<li> <a href="/">Babies</a></li>
<li> <a href="/">Toddlers</a></li>
<li> <a href="/">Travel</a></li>
</ul>
</nav>
</header>
</div>
<main>
<section class="article">
<h2>Recent posts</h2>
<div>
<article>
<h3> What do you do when your baby wakes up every hour</h3>
<img id="sleeping-baby"
src="https://www.childrens.com/wps/wcm/connect/childrenspublic/d5c62f95-b90c-40cf-8583-02f194b42818/shutterstock_397223029_800x480.jpg?MOD=AJPERES&CACHEID=ROOTWORKSPACE.Z18_MP541240M8QL00A94691A238J3-d5c62f95-b90c-40cf-8583-02f194b42818-nva8nic" alt="sleeping baby"/>
<p>Curabitur eget nisl massa. Nam varius, ipsum eu faucibus fermentum, nisl orci pharetra neque, vel tincidunt purus mi non lorem. Ut commodo nunc nec suscipit dictum. Fusce magna lectus, porta non quam pellentesque, faucibus pellentesque felis. Etiam sollicitudin porttitor massa sed accumsan. Praesent et ex pellentesque, dictum orci a, porttitor neque. Etiam mattis eget mauris ut semper. Cras eu est eleifend, imperdiet justo sit amet, aliquam massa. Sed ac est eu ex auctor rutrum. Quisque elementum et augue at imperdiet. Pellentesque aliquet vitae elit in lobortis. In hac habitasse platea dictumst. Pellentesque congue tincidunt nibh eget aliquet. </p>
<a href="https://www.happiestbaby.com/blogs/baby/baby-waking-night-hungry" target="_blank">Read more </a>
</article>
<article>
<h3>Play ideas to encourage toddler talking</h3>
<p>Cras nec hendrerit enim. Pellentesque maximus hendrerit ultricies. Sed ac dictum neque, ut placerat nulla. Duis dapibus nisi eget quam cursus, et ultrices eros aliquam. Nunc vitae felis in dolor lobortis congue posuere quis nisl. Aliquam nisi lacus, volutpat ut magna ut, faucibus aliquet ante. Cras egestas libero non dapibus lobortis. Suspendisse potenti. Suspendisse ultricies lacus mi, sit amet consectetur quam aliquet ac. Donec volutpat nisi ac orci hendrerit semper.</p>
<img id="toddler"
src="https://www.babycenter.com/ims/2015/04/86501122_wide.jpg.pagespeed.ce.jcUhKuwSwM.jpg" alt="toddler talk" />
<a href="https://raisingchildren.net.au/toddlers/play-learning/play-toddler-development/talking-play-toddlers" target="_blank">Read more </a>
</article>
<article>
<h3>You're vaccinated, but your kids aren't... </h3>
<p>Pellentesque nec nulla at lorem gravida convallis. Vestibulum nec ipsum arcu. Suspendisse a pulvinar sem. Suspendisse lobortis sit amet justo non viverra. Integer non sodales turpis. Integer sit amet dui id dui hendrerit pretium. Duis id ipsum nec felis convallis porta vel eu quam.</p>
<img id="vaccine"
src="https://khn.org/wp-content/uploads/sites/2/2020/12/GettyImages-1272627545.jpg" alt="kid's vaccination" />
<a href="https://www.healthline.com/health-news/im-vaccinated-my-kids-arent-whats-safe-for-us-to-do" target="_blank">Read more </a>
</article>
</div>
</section>
</main>
<footer>
<span> Aliquam erat volutpat. Aliquam mattis ipsum a nisl vestibulum, eu mollis purus accumsan. Suspendisse urna turpis, imperdiet quis leo eu, dictum faucibus felis. Curabitur quis vehicula erat. Suspendisse sollicitudin magna eget dui mattis, non volutpat mauris dapibus. </span>
</footer>
</body>
</html>