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
|
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Oswald:wght@700&display=swap"
rel="stylesheet"
/>
<link href="styles/shared.css" rel="stylesheet" />
<link href="styles/daily-challenge.css" rel="stylesheet" />
<title>My Daily Challenge</title>
</head>
<body>
<main>
<img src="images/dalrae.jpg" alt="A cat">
<h1>Max' Challenge for <span>Wednesday, August 4th</span></h1>
<p id="todays-challenge">
Learn about the basics of web development - specifically dive into HTML &
CSS.
</p>
</main>
<footer>
<p>
Explore the <a href="full-week.html">full week</a>
</p>
</footer>
</body>
</html>
|
cs |
daily-challenge.css
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
|
main {
width: 800px;
margin: 200px auto 72px auto;
background-color: rgb(219,108,94);
padding: 24px;
border: 5px solid rgb(44, 44, 44);
border-radius: 8px;
box-shadow: 1px 2px 8px rgba(0,0,0,0.3);
}
img {
width: 200px;
height: 200px;
border-radius: 100px;
border: 5px solid rgb(44, 44, 44);
margin-top: -134px;
}
h1 {
font-size: 30px;
font-family: 'Oswald', sans-serif;
color: rgb(31, 25, 25);
}
span {
color: rgb(66, 2, 2);
}
p {
font-family: 'Fira Sans', sans-serif;
color: gray;
}
a {
color : rgb(167, 1, 78);
text-decoration : none;
}
a:hover {
text-decoration: underline;
}
#todays-challenge {
color: rgb(75, 59, 59);
font-weight: bold;
font-size: 52px;
}
|
cs |
shared.css
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
|
body {
text-align: center;
background-color: rgb(233, 215, 207);
margin: 50px;
margin: 50px;
}
a {
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
color: rgb(167, 1, 78);
}
h1 {
font-family: 'Oswald' , sans-seif;
color:rgb(130, 123, 123);
}
p {
font-family: 'Fira Sans', sans-serif;
font-size: 24px;
}
a:hover {
text-decoration: underline;
}
|
cs |
'Frontend > HTML, CSS' 카테고리의 다른 글
Wep developer 부트캠프 (2022-05-14) (0) | 2022.05.14 |
---|---|
Web Developer 부트캠프 (05/02) (0) | 2022.05.02 |
Web Developer 부트캠프 (04/30) (0) | 2022.04.30 |
Web Developer 부트캠프 (04/28) (0) | 2022.04.28 |
Web Developer 부트캠프 (04/26) (0) | 2022.04.26 |