forked from w4rner/ninety-five
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbio.html
154 lines (144 loc) · 6.76 KB
/
bio.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
<!-- Design inspired from https://codepen.io/alvaromontoro/pen/mdggGbg However, I tried to modify and re-write the code as much as possible while ensuring I understand each line of code-->
<!-- Since I will not be in the class for the second week, I will try to explain the full code line-by-line in the end of my code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bart-Bio</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
body {
overflow: clip;
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
background:
radial-gradient(70% 1% at 30% 5%, #c632 80%, #0000 0) 50% 50% / 100% 10%,
radial-gradient(60% 1.3% at 30% 5%, #c631 80%, #0000 0) 30% 50% / 70% 7.5%,
radial-gradient(50% 0.7% at 30% 5%, #c631 80%, #0000 0) 30% 50% / 50% 17.5%,
radial-gradient(60% 1% at 30% 5%, #c631 80%, #0000 0) 0% 10% / 60% 9%,
radial-gradient(80% 1.3% at 30% 5%, #a411 80%, #0000 0) 70% 20% / 66% 7.5%,
radial-gradient(100% 1.1% at 30% 5%, #c631 80%, #0000 0) 0% 17% / 70% 12.5%,
radial-gradient(60% 3% at 50% 0, #c631 80%, #0000 0) 0% 10% / 70% 7.5% repeat-y,
radial-gradient(40% 4% at 70% 5%, #b521 80%, #0000 0) 100% 2% / 70% 5%,
radial-gradient(80% 50% at 20% 20%, #c0824334 10%, #0000 25%),
radial-gradient(140% 50% at 90% 45%, #c0824324 10%, #0000 15%),
radial-gradient(100% 50% at 70% 50%, #c0824324 10%, #0000 15%),
linear-gradient(to top right, #0001, #ffc5),
#f0a274;
}
.bio-container {
font-family: 'Indie Flower', 'Patrick Hand SC', 'Comic Neue', 'Comic Sans', 'Comic Sans MS', Helvetica, Arial, sans-serif;
font-size: 5vmin;
background: white;
box-shadow:
0.1em 0.1em #ddd,
0.065em 0.05em #fff,
0.15em 0.15em #bbb,
0.125em 0 0 0.15em #333,
0.25em 0.125em 0 0.15em #000;
transform: rotate(3deg) translate(5%, 5%);
transform-origin: 10% 10%;
border-radius: 0.05em;
filter: drop-shadow(-0.25vmin 0.1em 0.35vmin #0002) drop-shadow(1vmin 0 1vmin #0003);
width: 85vmin;
height: 110vmin;
position: relative;
padding: 2em 2em 2em 3em;
background:
radial-gradient(circle at 0.4em 50%, #000 0.125em, #0000 0.135em) 0 0 / 100% 3vmin repeat-y,
linear-gradient(90deg, #0000 2.35em, #fbb 0 2.4em, #0000 0),
repeating-linear-gradient(#0000 0 5%, #99f 0 5.1%) 100% 50% / calc(100% - 2.35em) 82% no-repeat,
#eee;
}
.bio-container::before {
content: "";
position: absolute;
top: 0;
left: -1em;
width: 1.5em;
height: 100%;
background:
linear-gradient(#0000 0.225em, #999 0 0.375em, #0000 0) 80% 0 / 68% 3vmin repeat-y,
linear-gradient(25deg, #0000 0.225em, #666 0 0.35em, #0000 0) 44% 0.1% / 40% 3vmin repeat-y,
radial-gradient(circle at 0.4em 50%, #999 0.075em, #0000 0.085em) 0 0 / 100% 3vmin repeat-y,
radial-gradient(circle at 1.4em 50%, #999 0.075em, #0000 0.085em) 0 0 / 100% 3vmin repeat-y,
#f000;
}
.bio-container::after {
content: "";
position: absolute;
top: 0;
left: -1em;
width: 1.5em;
height: 100%;
background:
linear-gradient(#0000 0.225em, #fff7 0 0.375em, #0000 0) 80% 0 / 68% 3vmin repeat-y;
mask:
linear-gradient(90deg, #0000 0.4em, #000 0.6em, #0000 1.2em),
linear-gradient(#0000 0.225em, #fff7 0.28em 0.3em, #0000 0.375em) 80% 0 / 68% 3vmin repeat-y;
mask-composite: intersect;
}
.bio-header {
margin: 0;
font-size: 6.5vmin;
white-space: pre;
position: relative;
}
.bio-header::before {
content: "";
position: absolute;
width: 95%;
height: 100%;
background: #f003;
background: radial-gradient(175% 100% at 50% 100%, #0000 50%, #000 51% 55%, #0000 56%);
left: -1%;
top: 25%;
transform: rotate(0.25deg);
}
.bio-list {
line-height: 5.4vmin;
margin-top: 4.25vmin;
}
.fixed-image {
position: fixed;
bottom: 0;
left: 0;
}
.bottom-left-img {
width: 200px;
height: auto;
}
</style>
</head>
<body>
<article class="bio-container">
<h2 class="bio-header">Who is Bart Simpson?</h2>
<ol class="bio-list">
<li>Full Name: Bartholomew JoJo Simpson</li>
<li>Age: 10 years old.</li>
<li>Family: Son of Homer and Marge Simpson; brother to Lisa and Maggie.</li>
<li>Personality: Mischievous, rebellious, and often disrespectful, but has a good heart.</li>
<li>Best Friend: Milhouse Van Houten.</li>
<li>School: Attends Springfield Elementary; often in trouble with Principal Skinner and teacher Mrs. Krabappel.</li>
</ol>
</article>
<div class="fixed-image">
<a href="menu.html">
<img src="media/image-Photoroom.png" alt="Bottom Left Image" class="bottom-left-img">
</a>
</div>
</body>
</html>
<!--
-In the BG, the color scheme makes use of a light text on a textured background.The background is created with a mix of radial and
linear gradients which aimss to copy the textures and wood stains. I will be using thsi BG color and texture for other html files as well.
-The article container uses a specific font family for a hand-written look, enhancing the playful and casual theme.
-The contaner has been given a white color and is designed to look like a piece of paper with rounded corners, sahows and a rotation for givng a 3D effect
-The container BG has gradients that resembles lined paper, with addiotional textures
-Before and after pseudo-elements add additional visual effects to the article container, such as vertical lines and radial gradients that create a shadow and border effect, enhancing the 3D appearance.
-The ordered list (bio-list) is styled with line height and margin.
-A pseudo-element adds a radial gradient shadow behind the text, for depth effects and focus for the ones reading.
-->