-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
83 lines (75 loc) · 3.83 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
<!DOCTYPE html>
<html>
<head>
<title>
Claire's UCLA Summer Discovery Experience
</title>
<link rel="stylesheet"
type="text/css"
href="./index.css">
<style>
/* internal styling with style tags. place this inside head. */
/* h1 {
color: red;
}
h2 {
background-color: palevioletred;
} */
</style>
<link href="https://fonts.googleapis.com/css?family=Mountains+of+Christmas|Roboto&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#about">About</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
<a href="#">Store</a>
</nav>
<header class="slide" style="background-color: red">
<h1>Claire's UCLA Summer Discovery Experience</h1>
</header>
<main>
<div id="about" class="slide">
<div id="my-profile-pic"> hello</div>
<div id="my-profile-details">
HERE ARE MY DETAILS
</div>
</div>
<div id="blog" class="slide">
<h1>My Blog</h1>
<div class="post-wrapper">
<h3>
Blog Post #1
<span class="date">July 10, 2019</span>
</h3>
<div class="post-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eleifend mi in nulla posuere sollicitudin. Euismod nisi porta lorem mollis aliquam ut porttitor leo. Dolor morbi non arcu risus quis varius. Senectus et netus et malesuada. Lorem ipsum dolor sit amet consectetur adipiscing. Vitae et leo duis ut diam quam nulla porttitor. Senectus et netus et malesuada fames ac turpis egestas sed.
</div>
</div>
<div class="post-wrapper">
<h3>
Blog Post #2
<span class="date">July 10, 2019</span>
</h3>
<div class="post-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eleifend mi in nulla posuere sollicitudin. Euismod nisi porta lorem mollis aliquam ut porttitor leo. Dolor morbi non arcu risus quis varius. Senectus et netus et malesuada. Lorem ipsum dolor sit amet consectetur adipiscing. Vitae et leo duis ut diam quam nulla porttitor. Senectus et netus et malesuada fames ac turpis egestas sed.
</div>
</div>
<div class="post-wrapper">
<h3>
Blog Post #1
<span class="date">July 10, 2019</span>
</h3>
<div class="post-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eleifend mi in nulla posuere sollicitudin. Euismod nisi porta lorem mollis aliquam ut porttitor leo. Dolor morbi non arcu risus quis varius. Senectus et netus et malesuada. Lorem ipsum dolor sit amet consectetur adipiscing. Vitae et leo duis ut diam quam nulla porttitor. Senectus et netus et malesuada fames ac turpis egestas sed.
</div>
</div>
</div>
<div id="contact" class="slide">This is the Contact Section</div>
</main>
<footer>
This is the footer
</footer>
</body>
</html>