-
Notifications
You must be signed in to change notification settings - Fork 2
/
1_recreate_exercise.html
97 lines (87 loc) · 2.96 KB
/
1_recreate_exercise.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
<!DOCTYPE html>
<html>
<head>
<!-- This is an example of a comment. Comments are not shown to the user, but can be used to make notes or explain our code to other developers. In this exercise, READ ALL THE COMMENTS for instructions on completing the exercise. All the text needed for the page is here. Your job is to add the html markup. Your to-dos will be marked as 'Task #' -->
<meta name="author" content="Dana Frayne">
<meta name="keywords" content="HTML,CSS,programming,JavaScript">
<!-- TASK: Make sure 'ADA Lovelace Camp' appears in the browser toolbar -->
Summer Camp
<!-- The section below includes the CSS styles for your page. DO NOT EDIT this section. Skip to the <body> section -->
<!-- TASK: change color of background and font color to be ADA compliant using website http://colorsafe.co/ -->
<style type="text/css">
body{
font-family: Verdana, Geneva, sans-serif;
}
#logo img{
width: 700px;
height: 300px;
margin-left: 300px;
}
nav ul{
padding: 15px;
margin: 0px auto 0px auto;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
text-transform: uppercase;
}
nav ul li{
display: inline;
margin: 0px 3px;
}
h1{
font-size: 24px;
color: #D8188D;
}
h2{
font-size: 18px;
}
form {
width: 400px;
/* To see the outline of the form */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
form div + div {
margin-top: 1em;
}
footer{
margin-top: 10px;
font-size: smaller;
}
</style>
</head>
<body>
<header>
<div id="logo">
<!-- TASK: add the correct markup to display the image. The image you want is located at this URL: "http://www7.pcmag.com/media/images/442851-inside-the-mind-of-ada-lovelace.jpg?thumb=y&width=740&height=426" -->
</div>
<nav>
<!-- TASK: create an unordered list for the navigation links, e.g., 'About ALC', 'Why ALC', etc. Make sure the user can click each nav link to jump to that section of the page. This is called an anchor link within a page -->
About ALC
Why ALC?
Upcoming Camps
Sign up!
</nav>
</header>
<section id="about">
<!-- TASK: add heading styles for the main headings and sub headings -->
About ALC
What is ALC?
<p>ALC is an education program for anyone who wants to learn to write great code. ALC teaches full-stack web development, and students will learn HTML/CSS, Javascript, Python and more. They'll also learn to use developer tools like text editors, command line, and git for version control! </p>
</section>
<section id="why">
Why ALC?
Thinking about joining us?
<p>
Thinking aout attending an ALC camp? We asked former students and below were their top reasons they're happy to have come to ALC:
<ol>
<li>Learn to code</li>
<li>Increase job opportunities</li>
<li>Made new friends</li>
<li>Start a web-based company</li>
</ol>
</p>
</section>
</body>
</html>