-
Notifications
You must be signed in to change notification settings - Fork 0
/
week5-e.html
165 lines (139 loc) · 7.85 KB
/
week5-e.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>week 5 eportfolio</title>
<style>
/* THIS TASK IS A COMBINATION OF WEEK 5 AND PART OF WEEK 6 (PADDING & MARGIN)
WHEN SUBMITTING THIS TASK, CHOOSE WEEK 5
TO MOVE ELEMENTS OR ACHIEVE SPACING SURROUNDING THE TEXT, YOU CAN ONLY USE MARGIN OR PADDING
THE USE OF POSITION PROPERTY AND FLEXBOX WILL NOT BE MARKED*/
/*ORGANIZE YOUR CSS IN THE FOLLOWING ORDER
1. ELEMENT SELECTOR
2. ID SELECTOR
3. CLASS SELECTOR
4. DESCENDENT SELECTOR
5. CHILD SELECTOR
6. SIBLING SELECTOR
7. ATTRIBUTE SELECTOR
8. PSEUDO CLASS SELECTOR
FAILURE TO COMPLY WILL RESULTS IN MARK DEDUCTION*/
body{
background-image: url("assets/images/id/i-1.jpg");
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
}
img{
width: 200px;
height: 150px;
}
img:nth-child(even){opacity: 30%;}
img[alt^="The best place"]:hover{border-radius: 50%;}
b{color: blue;}
#thebold{
color: red;
font-size: 1.75em
} /*purposely included*/
#anotherlorem{
margin: auto;
margin-top: 1.2em;
text-transform: uppercase;
text-align: justify;
border: 1px solid;
height: 200px;
width: 50%;
line-height: 1.1em;
font-family: courier new;
overflow: hidden;
text-overflow: clip;
}
#lorem{
margin: auto;
margin-top: 1.2em;
height: 500px;
width: 75%;
border-top: 5px solid deepskyblue;
border-bottom: 5px solid deepskyblue;
border-left: 10px solid darkblue;
border-right: 10px solid darkblue;
text-transform: uppercase;
text-align: justify;
align-items: center;
font-size: 2em;
overflow: auto;
}
.rounded{
width: 400px;
border-radius: 50px;
border: 1px solid;
font-size: 1em;
text-align: center;
position: relative;
display: inline-block;
flex-wrap: wrap;
justify-content: center;
}
.cn{
padding-top: 80px;
padding-left: 30px;
padding-right: 30px;
background-image: url("assets/images/id/dancing.gif");
background-repeat: repeat-x;
background-size: 100px 80px;
font-family: courier new;
position: relative;
padding-bottom: 30px;
}
p>span{
font-weight: bold;
color: magenta;
font-size: 1.35em;
text-shadow: 10px 5px 5px orange;
font-family: courier new;
}
div:nth-child(1){
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
}
div:nth-child(3){
border-color: black;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
color: deepskyblue;
font-style: bold;
}
</style>
</head>
<body>
<!-- INSTRUCTIONS
YOU ARE NOT ALLOWED TO CHANGE ANY PART OF THE HTLM CODES (SUCH AS ADDING ID attributes or additional values to classes atributes.)
YOU CAN CHANGE IMAGE SRC VALUES HOWEVER FOR IMAGES AT THE BOTTOM-->
<div class="rounded"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos quidem, sit saepe consectetur nemo ullam nihil voluptates nostrum facere totam excepturi alias similique sint qui ad accusamus culpa quae suscipit. Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Nobis ullam doloribus, minus nisi inventore, aliquid nesciunt temporibus libero id, dignissimos magni. Repellendus, beatae porro, eius dolorum explicabo possimus perferendis doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis distinctio voluptate, minus, placeat dolor quia nemo obcaecati aliquid maiores. Id, eum, in! Fugiat atque iusto quasi corrupti nulla, unde inventore.</p></div>
<div class="rounded cn">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos quidem, sit saepe consectetur nemo ullam nihil voluptates nostrum facere totam excepturi alias similique sint qui ad accusamus culpa quae suscipit. Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Nobis ullam doloribus, minus nisi inventore, aliquid nesciunt temporibus libero id, dignissimos magni. Repellendus, beatae porro, eius dolorum explicabo possimus perferendis doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis distinctio voluptate, minus, placeat dolor quia nemo obcaecati aliquid maiores. Id, eum, in! Fugiat atque iusto quasi corrupti nulla, unde inventore.</div>
<div class="rounded">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos quidem, sit saepe consectetur nemo ullam nihil voluptates nostrum facere totam excepturi alias similique sint qui ad accusamus culpa quae suscipit. Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Nobis ullam doloribus, minus nisi inventore, aliquid nesciunt temporibus libero id, dignissimos magni. Repellendus, beatae porro, eius dolorum explicabo possimus perferendis doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis distinctio voluptate, minus, placeat dolor quia nemo obcaecati aliquid maiores. Id, eum, in! Fugiat atque iusto quasi corrupti nulla, unde inventore.</div>
<div id="lorem"><p> Here is another lorem for you! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam temporibus illum ad dolorum enim, voluptatem distinctio officia maiores necessitatibus sit est autem exercitationem ratione, tenetur. Quam natus necessitatibus placeat culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio impedit, repudiandae architecto suscipit repellat officiis pariatur quo, eveniet placeat amet optio? Officia neque eum quam labore explicabo impedit beatae dolore!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. 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. Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Cupiditate reiciendis, delectus! Nihil est, vel ea nisi animi placeat accusantium sapiente, impedit atque eveniet, rerum nemo, perspiciatis aliquid! Nulla, voluptatibus, hic.</p></div>
<div id="anotherlorem"><p><span>I am a span with text shadow! how cools</span></p>Here is another lorem for you! Lorem, ipsum dolor sit amet consectetur adipisicing elit. <span>[Im a span. sadly I dont have shadow]</span> Quibusdam temporibus illum ad dolorum enim, voluptatem distinctio officia maiores necessitatibus sit est autem exercitationem ratione, tenetur. Quam natus necessitatibus placeat culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio impedit, repudiandae architecto suscipit repellat officiis pariatur quo, eveniet placeat amet optio? Officia neque eum quam labore explicabo impedit beatae dolore!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. 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. </div>
<b id="thebold">Im just a bold. using element selector, make me blue without changing the color in the #thebold{color: red;font-size: 1.75em} to blue</b>
<h4>I am H4!</h4>
<img src="assets/images/id/dancing.gif" alt="">
<img src="assets/images/id/i-1.jpg" alt="">
<img src="assets/images/my/pigeon.gif" alt="">
<img src="assets/images/id/i-2.jpg" alt="The best place">
<img src="assets/images/th/flying.gif" alt="">
<img src="assets/images/id/i-3.jpg" alt="">
</html>