-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (121 loc) · 6.09 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
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
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Craftsy Peeks</title>
<link rel="stylesheet" href="style.css">
<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=Dosis&display=swap" rel="stylesheet">
<style>@import url('https://fonts.googleapis.com/css2?family=Dosis&display=swap');</style>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="nav-bar">
<h1 class="nav-title">Craftsy Peeks</h1>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Craftsy inspirations</a></li>
<li><button class= 'sub-btn'
onclick="window.location.href='./form.html'">Subscribe</button></li>
</ul>
</div>
<div class="homepg-body">
<h1 class="pg-title">Welcome to my page!</h1>
<div class="row">
<span class="magenta">
<div class="col-2">
<h2>Thanks for stopping by!</h2>
<img id="woman-crafting"
src="images/woman crafting img.jpg"
alt="woman crafting">
<p><a href="#">More about me here</a></p>
<p>Thanks for coming to visit my page! I love crafting
and I want to share that passion with others who feel
the same...or are just getting started.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. A diam sollicitudin tempor id eu nisl nunc mi ipsum.
Turpis egestas sed tempus urna et pharetra pharetra massa.
Aenean euismod elementum nisi quis eleifend quam adipiscing
vitae. Morbi quis commodo odio aenean sed. Neque
viverra justo nec ultrices dui. Morbi blandit
cursus risus at ultrices mi. Dui sapien eget
mi proin. Sociis natoque penatibus et magnis
dis parturient montes. Amet facilisis magna
etiam tempor orci eu lobortis elementum.
Ornare suspendisse sed nisi lacus sed viverra.
Non odio euismod lacinia at quis risus sed.
Aliquet enim tortor at auctor urna nunc id.
Ultrices mi tempus imperdiet nulla malesuada.
Dictum fusce ut placerat orci. Lacus viverra
vitae congue eu consequat ac felis. Magnis dis
parturient montes nascetur ridiculus mus mauris
vitae ultricies. Elit sed vulputate mi sit amet
mauris commodo quis. Varius sit amet mattis vulputate enim.
</p>
</p>
</div>
</span>
<div class="col-2">
<h2>Here are my latest posts!</h2>
<div class="box">
<div class="col-3">
<img id="nye-toast"
src="images/pexels-cottonbro-studio-3171770.jpg"
alt="Toasting the new year"
/>
</div>
<div class="col-3">
<h2>Happy New Year</h2>
<p>I am totally looking forward to this
New Year's Eve. To me, it's a chance to
reflect on how my year has gone. And it's a
chance for me to get prepared for the new year.
<a href="#">More...</a>
</p>
</div>
<div class="col-3">
<p><span id="likes-2">0</span> Like(s)</p>
<button class="like-btn"
onclick="addLike('likes-2')">
Like!
</button>
</div>
</div>
<div class="box">
<div class="col-3">
<img id="nye-toast"
src="images/pexels-cottonbro-studio-3171770.jpg"
alt="Toasting the new year"
/>
</div>
<div class="col-3">
<h2>Happy New Year</h2>
<p>I am totally looking forward to this
New Year's Eve. To me, it's a chance to
reflect on how my year has gone. And it's a
chance for me to get prepared for the new year.
<a href="#">More...</a>
</p>
</div>
<div class="col-3">
<p><span id="likes-1">0</span> Like(s)</p>
<button class="like-btn"
onclick="addLike('likes-1')">
Like!
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>