-
Notifications
You must be signed in to change notification settings - Fork 0
/
challenge.html
128 lines (102 loc) · 4.37 KB
/
challenge.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
124
125
126
127
128
<!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=Nanum+Gothic&family=Raleway:ital,wght@0,100;0,400;1,100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Roboto+Condensed:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../styling_challenge.css">
<title>Website Styling Challenge</title>
</head>
<body>
<div id="main">
<div class="content">
<div class="main-para">
<h1 class="subtitle">Welcome to this challenge!</h1>
<p>Here is your list of objectives:
<ul>
<li>Lay out the Content & Sidebar</li>
<li>Create proper margins & spacing around items</li>
<li>Import & Use a Custom Font</li>
<li>Color Scheme: Blue & Orange (Use however you see fit!)</li>
<li>Style text appropriately</li>
<li>Change the background color of the sidebar</li>
<li>Style image grid however you see fit</li>
<li>Create borders around each sidebar items</li>
<li>Create grid/flexbox for image and text under 'Subtitle 1'</li>
<li>Image grow on hover</li>
<li>Link color change on hover</li>
<li>Page animation sequence for main items (Content, sidebar)</li>
</ul>
</p>
<p>Do not feel limited by the objectives! Change or append anything you like. Good Luck!</p>
</div>
<div class="para-1">
<h2 class="subtitle">Subtitle 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<img src="pexels-ali-naaz-4301252.jpg" width="700" height="400" id="image-1">
</div>
<div class="para-2">
<h2 class="subtitle">Subtitle 2</h2>
<p>Commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2 class="topic-subtitle">Topic 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua:
<ol>
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet consectetur adipisicing elit!</li>
</ol>
</p>
</div>
<div class="image-grid">
<img src="pexels-alyssa-rose-9396336.jpg" width="500" height="500">
<img src="pexels-dids-3029479.jpg" width="500" height="500">
<img src="pexels-mathilde-langevin-11719056.jpg" width="500" height="500">
<img src="pexels-nataliya-vaitkevich-7184344.jpg" width="500" height="500">
<img src="pexels-ali-naaz-4301252.jpg" width="500" height="500">
<img src="pexels-solodsha-8105118.jpg" width="500" height="500">
<img src="pexels-solodsha-8106476.jpg" width="500" height="500">
<img src="pexels-valeriia-miller-3392937.jpg" width="500" height="500">
</div>
</div>
<div class="sidebar">
<div class="post">
<h2 class="post-title">Post 1</h2>
<p class="post-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do.</p>
<a href="">Lorem ipsum dolor sit amet.</a>
</div>
<div class="post">
<h2 class="post-title">Post 2</h2>
<p class="post-text">Eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="">Lorem ipsum dolor sit amet.</a>
</div>
<div class="post">
<h2 class="post-title">Post 3</h2>
<p class="post-text">Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris.</p>
<a href="">Lorem ipsum dolor sit amet.</a>
</div>
<div class="post">
<h2 class="post-title">Post 4</h2>
<p class="post-text">Nisi ut aliquip ex ea commodo
consequat, nuis aute irure.</p>
<a href="">Lorem ipsum dolor sit amet.</a>
</div>
<div class="post">
<h2 class="post-title">Post 5</h2>
<p class="post-text">Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</p>
<a href="">Lorem ipsum dolor sit amet.</a>
</div>
<div class="post">
<h2 class="post-title">Post 6</h2>
<p class="post-text">Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="">Lorem ipsum dolor sit amet.</a>
</div>
</div>
</div>
</body>
</html>