-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (100 loc) · 5.39 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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodePen - Personal Home Page Template</title>
<link rel='stylesheet' href='https://unpkg.com/jest-lite@1.0.0-alpha.4/dist/prettify.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- =================
WRITE YOUR HTML HERE
You only need to write the HTML that goes inside the <body> tag. To add things to the <head>, click the ⚙️
===================
-->
<!--- All the tests are red! You have to make them green.
Q How do you make the tests pass?
A Meet the requirements!
Make the first test pass by adding a <header> </header>-->
<!DOCTYPE html>
<HTML LANG="EN">
<head>
<title>Elena's personal web page</title>
</head>
<body>
<header class="c-site-header">
<h1> Elena Barker</h1>
<nav class="navbar">
<a href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" class="nav-logo"> </a>
<ul class="nav-menu">
<li class="nav-item">
<a href="#aboutme" class="nav-link">About me</a>
</li>
<li class="nav-item">
<a href="#Placestovisit" class="nav-link">Places to visit</a>
</li>
<li class="nav-item">
<a href="#Contact" class="nav-link">Contact</a>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav> </header>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3GjzNmb6IThF3sg-BpqHEYYTyvP86IoXNkBBMbl8XUbh8zGRlI8aoR_7UCkjJJLNvcJE&usqp=CAU" alt="Just believe in your dreams" style="max-width:100%;height:auto;" />
<main>
<article>
<p id="aboutme">Hi, my name is Elena and I am a mum of 7 years old boy Alex and I would love to start my career in tech. I am very excited to get an opportunity to learn a new "global language", which will open a doors in a world of IT.
</p>
</article>
</main>
<iframe width="620" height="310" src="https://www.youtube.com/embed/2-VKC8g2u1Y"></iframe>
<hr>
<p>One of my favourite things to do is travel... So I am going to tell you a little bit about my top places to go 😊
</p>
<div class="container" id="Placestovisit">
<div class="d1">Ibiza
<br>
<p>Ibiza is one of the Balearic islands, an archipelago of Spain in the Mediterranean Sea. It's well known for the lively nightlife in Ibiza Town and Sant Antoni, where major European nightclubs have summer outposts. It’s also home to quiet villages, yoga retreats and beaches, from Platja d'en Bossa, lined with hotels, bars and shops, to quieter sandy coves backed by pine-clad hills found all around the coast.
</p>
</div>
<div class="d2">Mallorca
<br>
<p>Mallorca (Majorca) is one of Spain's Balearic Islands in the Mediterranean. It's known for beach resorts, sheltered coves, limestone mountains and Roman and Moorish remains. Capital Palma has nightlife, the Moorish Almudaina royal palace and 13th-century Santa María Cathedral. Stone-built villages include Pollença, with its art galleries and music festival, and hillside Fornalutx, surrounded by citrus plantations.
</p>
</div>
<div class="d3">Montenegro ⛵
<br>
<p>Montenegro is a Balkan country with rugged mountains, medieval villages and a narrow strip of beaches along its Adriatic coastline. The Bay of Kotor, resembling a fjord, is dotted with coastal churches and fortified towns such as Kotor and Herceg Novi. Durmitor National Park, home to bears and wolves, encompasses limestone peaks, glacial lakes and 1,300m-deep Tara River Canyon.
</p>
</div>
<div class="d4"> <img src="https://www.ibizaisland.info/ibiza-photos/ibiza-town--eivissa-ibiza-panorama-of-ibiza-old-city-eivissa-spain-balearic-islands-675-.jpg" alt="Ibiza Old town" style="max-width:100%;height:auto;" />
</div>
<div class="d5"> <img src="https://img.theculturetrip.com/x/wp-content/uploads/2019/04/mallorca.jpg" alt="Mallorca" style="max-width:100%;height:auto;" />
</div>
<div class="d6"> <img src="https://media.istockphoto.com/photos/historic-town-of-perast-at-bay-of-kotor-in-summer-montenegro-picture-id928387450?k=20&m=928387450&s=612x612&w=0&h=PhryDWhBrY8G-2Jxekfo-QQN4ziRWQIlIipYfH5Ihv4=" alt="Montenegro" style="max-width:100%;height:auto;" />
</div>
</div>
<p><button class="button" id="previous"> Previous </button>
<button class="button" id="next"> Next </button></p>
<h1 id="art"> <strong> The world of Art </strong> </h1>
<br>
<img id="pictures" style="max-width:100%;height:auto;">
<footer class="c-site-footer" id="Contact">
<p>© 2022 Elena Barker
<br>
<a href="elenabarker@gmail.com">Email me</a>
</p>
</footer>
</body>
<!-- Your test console.
Don't delete!-->
<aside id="tests" aria-label="Test Readout." aria-live="polite" style="overflow:auto">
</aside>
<!-- partial -->
<script src='https://unpkg.com/jest-lite@1.0.0-alpha.4/dist/core.js'></script>
<script src='https://unpkg.com/jest-lite@1.0.0-alpha.4/dist/prettify.js'></script><script src="./script.js"></script>
</body>
</html>