forked from kovacbot/2.2_student_exercises
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcode-solo.html
119 lines (92 loc) · 3.25 KB
/
code-solo.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
<!DOCTYPE html>
<html>
<head>
<title>Code Solo</title>
</head>
<body>
<div class="navbar">
<a href="index.html">Do Now</a>
<a href="code-along.html">Code Along</a>
<a href="code-solo.html">Code Solo</a>
</div>
<h1>My Dream Travel Destinations</h1>
<section>
<!-- NOTE: There is an example below that you can reference if you get stuck. -->
<!-- HINT: Remember to use the tag name + Tab shortcut. Ex. - if you want a paragraph, you type in "p" (without quotes) and hit Tab on the keyboard. -->
<!-- 1. Create an unordered list (<ul>) to list your dream travel destinations. Type "ul" and hit "Tab". Press "enter" to put the open and closing tags on seperate lines of code. -->
<!-- 2. Add 3 list items (<li>) BETWEEN your open ul and close ul tags, one for each dream travel destination. Between the open and close li tags add in the name of the place you want to visit. Make sure each li tag is on its own line. -->
<!-- 3. Add an anchor tag (<a>) BETWEEN the open and close li tags but AFTER the name of the place you want to visit. Find a link to the wikipedia page of the destination and add the link inside the "href" attribute. -->
<!-- 4. Add an image (<img>) for each destination BETWEEN your open and close anchor tags. -->
<!-- 5. Repeat steps 3 and 4 for your other 2 (<li>) tags if you haven't already. -->
<!-- 6. When you are finished, take a screenshot of your code and website and add it to the "2.2 Code Solo Screenshot" assignment on Google classroom. -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>Mr. Kovac's Example</p>
<p>This example has only one destination listed but you should have 3.</p>
<ul>
<li>
Bosnia
<a href="https://en.wikipedia.org/wiki/Bosnia_and_Herzegovina">
<img src="https://a.cdn-hotels.com/gdcs/production134/d1395/012f8bf8-1e3f-4bca-8939-d3c1ba6477e6.jpg">
</a>
</li>
</ul>
</section>
</body>
</html>
<!-- The code below styles the page. DO NOT EDIT. -->
<style>
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
margin: 20px 0;
display: flex;
justify-content: space-around;
}
li {
text-align: center;
width: 200px;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
transition: transform 0.3s ease-in-out;
}
li:hover {
transform: scale(1.05);
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 10px auto;
border-radius: 5px;
}
a {
color: #0066cc;
text-decoration: none;
font-weight: bold;
}
</style>