Skip to content

Commit 0fca79b

Browse files
authored
feat: add Joy Brown HTML page and styles (#101)
1 parent 3a3908e commit 0fca79b

File tree

2 files changed

+107
-0
lines changed

2 files changed

+107
-0
lines changed

lesson_01/joybrown/index.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<link rel="stylesheet" href="styles.css" />
7+
<title>How to Work with Joy Brown</title>
8+
</head>
9+
<body>
10+
<h1>How to Work with Joy Brown</h1>
11+
<hr/>
12+
<h2>🕘 Availability &amp; Work Style</h2>
13+
<hr/>
14+
<ul>
15+
<li>I typically work from <strong>9 AM to 5 PM</strong>, but I’m generally available until <strong>7 PM</strong> if something urgent comes up.<br /></li>
16+
<li>I’m a <strong>morning person</strong>—I like to knock out my most important tasks early in the day.<br /></li>
17+
<li>I prefer <strong>in-person meetings</strong> over chat when possible.</li>
18+
<li>Feel free to <strong>interrupt me</strong>, just give me a <strong>heads-up first</strong>.</li>
19+
<li>If I can't assist you right away, please try another team member first. If no one’s available, feel free to <strong>reach out to me on my personal number</strong>.</li>
20+
</ul>
21+
22+
<h2>💬 Communication Style</h2>
23+
<hr/>
24+
<ul>
25+
<li>I prefer to give and receive <strong>feedback via email</strong>—it helps me process and respond more thoughtfully.<br /></li>
26+
<li>I'm generally responsive during work hours, but I appreciate some heads-up for anything time-sensitive.</li>
27+
<li>For non-urgent matters, email is the best way to ensure I don’t miss anything.</li>
28+
</ul>
29+
30+
<h2>📌 Priorities</h2>
31+
<hr/>
32+
<ul>
33+
<li>I focus on <strong>clarity, consistency, and quality</strong> in customer service.</li>
34+
<li>I value <strong>transparency and ownership</strong>—I’m happy to collaborate, but I appreciate when people take initiative.</li>
35+
</ul>
36+
37+
<h2>🧘‍♀️ Personal Preferences</h2>
38+
<hr/>
39+
<ul>
40+
<li>I get <strong>migraines</strong> occasionally, and they hit hard. If I seem off, that might be why.</li>
41+
<li>I work best with a bit of quiet time to focus. I don’t mind background noise, but I like having blocks of time without distractions.</li>
42+
<li>A quick <strong>coffee and a playlist</strong> go a long way for my productivity.</li>
43+
<li>I appreciate people who are <strong>direct but kind</strong>.</li>
44+
</ul>
45+
46+
<h2>🆘 When Things Go Wrong</h2>
47+
<hr/>
48+
<ul>
49+
<li>If something urgent happens and I’m unavailable, don’t hesitate to escalate or involve someone else.</li>
50+
<li>If there's ever a miscommunication, I'm open to a quick, honest conversation—no drama needed.</li>
51+
</ul>
52+
53+
<h2>💡 Fun Facts</h2>
54+
<hr/>
55+
<ul>
56+
<li>I love <strong>Lo-fi music</strong>—it helps me focus and unwind.</li>
57+
<li>I’m always down for a good <strong>YouTube Music playlist recommendation</strong>.</li>
58+
<li>I enjoy reading, organizing things, and drinking Starbucks Refreshers no matter the season.</li>
59+
<li>Favorite quote: <em>“Everything is gonna be okay in the end, and if it's not okay, then it's not the end.”</em></li>
60+
</ul>
61+
</body>
62+
</html>

lesson_01/joybrown/styles.css

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
max-width: 800px;
4+
margin: 0 auto;
5+
padding: 40px;
6+
line-height: 1.6;
7+
background-color: #fff;
8+
color: #333;
9+
}
10+
11+
h2 {
12+
font-size: 28px;
13+
color: #222;
14+
margin-top: 40px;
15+
}
16+
17+
h3 {
18+
font-size: 22px;
19+
color: #444;
20+
margin-top: 30px;
21+
}
22+
23+
ul {
24+
list-style-type: disc;
25+
padding-left: 20px;
26+
}
27+
28+
li {
29+
margin-bottom: 10px;
30+
}
31+
32+
img {
33+
margin: 10px;
34+
border-radius: 8px;
35+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
36+
}
37+
38+
.section-divider {
39+
border: none;
40+
height: 1px;
41+
background-color: #ccc;
42+
margin-top:-20px;
43+
margin-bottom: 20px;
44+
45+
}

0 commit comments

Comments
 (0)