Skip to content

Commit 626527b

Browse files
author
hamidah adesola
committed
add styling - add image files - renamed html files
1 parent 09b0e9d commit 626527b

File tree

6 files changed

+214
-33
lines changed

6 files changed

+214
-33
lines changed

‎assets/css/styles.css‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
header{
2+
overflow: auto;
3+
}
4+
body{
5+
font-family: cursive;
6+
background: #f8fdff;
7+
}
8+
#logo{
9+
width: 40px;
10+
float: left;
11+
}
12+
#co{
13+
float: right;
14+
}
15+
.main{
16+
clear: both;
17+
text-align: center;
18+
margin-top: 70px;
19+
}
20+
h3{
21+
font-size: 30px;
22+
}
23+
p{
24+
font-size: 20px;
25+
}
26+
button{
27+
background: #32ad75;
28+
width: 120px;
29+
height: 40px;
30+
color: #fff;
31+
}
32+
#paragraph{
33+
text-align: center;
34+
font-weight: bold;
35+
margin-top: 70px;
36+
}
37+
.container{
38+
margin: 0px auto;
39+
width: 100%;
40+
margin-top: 70px;
41+
overflow: hidden;
42+
43+
text-align: center;
44+
}
45+
46+
.center{
47+
width: 950px;
48+
margin: 10px auto;
49+
}
50+
51+
52+
#bg{
53+
width: 400px;
54+
height: 400px;
55+
}
56+
57+
.link a{
58+
color:#fff;
59+
font-weight: bolder;
60+
text-decoration: none;
61+
font-size: 1.2em;
62+
63+
}
64+
65+
.link{
66+
z-index: 9;
67+
display: block;
68+
position: relative;
69+
margin-top: 30px;
70+
}
71+
72+
.showcase{
73+
-webkit-box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.75);
74+
-moz-box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.75);
75+
box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.75);
76+
border-radius: 5px 5px 5px 5px;
77+
-moz-border-radius: 5px 5px 5px 5px;
78+
-webkit-border-radius: 5px 5px 5px 5px;
79+
border: 0px solid #000000;
80+
}
81+
82+
.showcase1{
83+
background: url("../images/student.jpg") no-repeat ;
84+
background-size: cover;
85+
padding: 15px;
86+
height: 200px;
87+
width: 250px;
88+
float: left;
89+
margin-left: 25px;
90+
}
91+
92+
.overlay {
93+
position: relative;
94+
95+
}
96+
97+
.overlay:before{
98+
position: absolute;
99+
content:" ";
100+
top:0;
101+
left:0;
102+
width:100%;
103+
height:100%;
104+
/*display: none;*/
105+
z-index:0;
106+
}
107+
108+
.blue:before {
109+
background-color: rgba(83,192,232,0.8);
110+
}
111+
112+
.green:before {
113+
background-color: rgba(124,201,164,0.8);
114+
}
115+
116+
.dark:before {
117+
background-color: rgba(46,93,111,0.8);
118+
}
119+
.showcase2{
120+
background: url("../images/student.jpg") no-repeat;
121+
background-size: cover;
122+
padding: 15px;
123+
height: 200px;
124+
width: 250px;
125+
float: left;
126+
margin-left: 25px;
127+
128+
}
129+
.showcase3{
130+
background: url("../images/student.jpg") no-repeat;
131+
background-size: cover;
132+
padding: 15px;
133+
height: 200px;
134+
width: 250px;
135+
float: left;
136+
margin-left: 25px;
137+
}

‎assets/images/logo.png‎

19.5 KB
Loading

‎assets/images/student.jpg‎

60.7 KB
Loading

‎how.html‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>coding 101</title>
5-
<link rel="stylesheet" type="text/css" href="styles.css">
4+
<title>coding101</title>
5+
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
66
</head>
77
<body>
8-
<header>
9-
<div class="clear">
10-
<img src="images/logo.png" id="logo">
11-
<p id="co">Coding101</p>
12-
</div>
13-
</header>
14-
15-
<div class="main">
16-
<h3>Coding101 aims to help people who are interested in coding get an head start.</h3>
17-
<p>We understand that coding can be a bit difficult at the beginning and we are here to help you get started.</p>
18-
<button>How?</button>
19-
20-
21-
</div>
22-
8+
<div>
9+
<header>
10+
<img src="assets/images/logo.png" id="logo">
11+
<p id="co">Coding101</p>
12+
</header>
13+
</div>
14+
<section class="main">
15+
<div>
16+
<h3>We've already done the hardwork on curating the best<br/> resources to help you.</h3>
17+
<p>All you have to do is try answer the next couple of<br/> questions as best as you can so we can figure out<br/> what you may like.</p>
18+
<p>We then use that to create a track that might be the<br/> most engaging way for you to get into tech.</p>
19+
<a href="question1.html"><button>Begin</button></a>
20+
</div>
21+
</section>
2322
</body>
2423
</html>

‎index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>coding 101</title>
5+
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
6+
</head>
7+
<body>
8+
<div>
9+
<header>
10+
<img src="assets/images/logo.png" id="logo">
11+
<p id="co">Coding101</p>
12+
</header>
13+
</div>
14+
15+
<div class="main">
16+
<h3>Coding101 aims to help people who are interested in<br> coding get an head start.</h3>
17+
<p>We understand that coding can be a bit difficult at<br> the beginning and we are here to help you get<br> started.</p>
18+
<a href="how.html"> <button> How?</button></a>
19+
</div>
20+
21+
</body>
22+
</html>

‎question1.html‎

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,49 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
45
<title>coding101</title>
5-
<header>
6-
<img src="images/logo.png">
7-
<p>Coding101</p>
8-
</header>
6+
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
97
</head>
108
<body>
11-
<section>
12-
<p>I am a</p>
13-
<div>
14-
<p>Secondary School Graduate</p>
15-
</div>
16-
<div>
17-
<p>Student/<br/>Graduate/<br/>Awaiting NYSC</p>
18-
</div>
19-
<div>
20-
<p>Employed/<br/>Corp Member/<br/>Unemployed</p>
21-
9+
<header>
10+
<img src="assets/images/logo.png" id="logo">
11+
<p id="co">Coding101</p>
12+
</header>
13+
14+
15+
16+
<section>
17+
<p id="paragraph">I am a...</p>
18+
<div class="container">
2219

23-
</div>
20+
<div class="center">
21+
22+
<div class="showcase1 showcase overlay blue">
23+
<span class="link" >
24+
<a href="#">
25+
Secondary School Graduate
26+
</a>
27+
</span>
28+
</div>
29+
30+
<div class="showcase2 showcase overlay green">
31+
<span class="link">
32+
<a href="#">
33+
Student/<br/>Graduate/<br/>Awaiting NYSC
34+
</a>
35+
</span>
36+
</div>
37+
<div class="showcase3 showcase overlay dark">
38+
<span class="link">
39+
<a href="#">
40+
Employed/<br/>Corp Member/<br/>Unemployed
41+
</a>
42+
</span>
43+
</div>
44+
</div>
45+
</div>
2446
</section>
47+
2548
</body>
2649
</html>

0 commit comments

Comments
 (0)