-
Notifications
You must be signed in to change notification settings - Fork 0
/
someCss.html
83 lines (63 loc) · 4.22 KB
/
someCss.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
<DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {position: relative; text-align: center;color: white;}
.bottom-left {position: absolute; bottom: 8px; left: 16px;}
.top-left {position: absolute; top: 8px; left: 16px;}
.top-right {position: absolute; top: 8px; right: 16px;}
.bottom-right {position: absolute; bottom: 8px; right: 16px;}
.centered {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
</style>
<head>
<title> Malena's Original Work</title>
</head>
<body>
<h1>Level 1: Newbie</h1>
<h4>1. Two paragraphs that each have a different font</h4>
<p class="a">
Everything will work out exactly how and when it is suppose to, regardless of how and when you may want it to. Let your faith in the journey be stronger than your doubts and fears. Be patient with yourself and your growth, knowing that good things always take time. Give yourself time and space to try things and explore different paths. You will get there one day, so don't forget to enjoy the journey too.
</p>
<style>
p.a{font-size: 12; color: cadetblue;}
</style>
<p class="b">
Everything will work out exactly how and when it is suppose to, regardless of how and when you may want it to. Let your faith in the journey be stronger than your doubts and fears. Be patient with yourself and your growth, knowing that good things always take time. Give yourself time and space to try things and explore different paths. You will get there one day, so don't forget to enjoy the journey too.
</p>
<style>
p.b{font-size: 25; color:coral;}
</style>
<h4>2. Two pictures that were origiannly different sizes, resized to 50px by 50px</h4>
<img src="https://cff2.earth.com/uploads/2017/11/08174338/How-ice-forms-inside-of-clouds.jpg" height="50px" width="50px">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-scaled.jpg" height="50px" width="50px">
<h4>3. One more unique CSS command that was not dicussed in the workshop</h4>
<p>(I changed the background color to light cyan)</p>
<style>
body {background-color:lightcyan;}
</style>
<br />
<h1>Level 2: Apprentice</h1>
<h4>1. Text that is centered on a photo</h4>
<div class="container">
<img src="https://i.ytimg.com/vi/-ROAj71OiUU/maxresdefault.jpg" alt="Clouds" style="width:100%;">
<div class="centered">Malena Was Here.</div>
</div>
<h4>2. A photo with 20 pixel margins on each side</h4>
<img src="https://p.favim.com/orig/2018/10/25/red-dream-aesthetic-Favim.com-6488031.jpg" style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px; margin-right: 20px;">
<h4>3. Text with a border that uses dotted lines</h4>
<div class="border">
<p>This has a dotted line border</p>
</div>
<style>
.border {border-style: dotted;}
</style>
<br />
<h1>Level 3: Master</h1>
<h4>1. An external style sheet</h4>
<link rel="stylesheet" href="css/anExternal.css">
<p>(The external style sheet changed the font of the headings)</p>
<h4>2. A floated element</h4>
<img src="https://i.pinimg.com/474x/87/6b/90/876b90eaf43dbcde25eb85059ad0e198.jpg" style="float: right;">
<p>(Over to the right)</p>
<h4>3. An element with rounded border corners</h4>
<img src="https://i.pinimg.com/originals/fe/99/06/fe99064b82cd48062852b072e8940e66.jpg" style="border-radius: 50%" height= "200px" width= "200px;">