nicola/WEB124-repo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Project3] page content + styles

Browse Source
This commit is contained in:
Nicola Clark 2025-03-31 00:21:58 -05:00
parent 94a9d26309
commit 3674e55225
Signed by: nicola
GPG Key ID: BEF8036296D094BF
2 changed files with 165 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
Chapter3Project/index.html
View File

@ -10,8 +10,64 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>WEB124 Project 3</h1>
<h2>Nicola Clark</h2>
<header>
<h1>WEB124 Project 3</h1>
<h2>Nicola Clark</h2>
</header>
<main>
<dl>
<dt>
<span class="qNum">1.</span>
Create a variable to store your full name.
</dt>
<dd>
<code>const myName = 'Nicola Clark';</code>
</dd>
<dt>
<span class="qNum">2.</span>
Create a variable to store your desired annual salary.
</dt>
<dd>
<code>const myDesiredAnnualSalary = 60_000;</code>
</dd>
<dt>
<span class="qNum">3.</span>
Create a variable to store your veteran status.
</dt>
<dd>
<code>const amIAVeteran = false;</code>
</dd>
<dt>
<span class="qNum">4.</span>
Create an array to store the names of three of your friends.
</dt>
<dd>
<code>const threeOfMyFriends = ['Jay', 'Alssya', 'Tonisha'];</code>
</dd>
<dt>
<span class="qNum">5.</span>
Create an array to store the desired annual salaries of your three
friends.
</dt>
<dd>
<code>const myThreeFriendsDesiredSalaries = [84_000, 72_000, 60_000];</code>
</dd>
<dt>
<span class="qNum">5.</span>
Create a literal object to store the first name, last name, and
desired annual salaries of a fourth friend.
</dt>
<dd>
<code>
const myFourthFriend = {<br>
&nbsp;&nbsp;firstName: 'Colton',<br>
&nbsp;&nbsp;lastName: 'H',<br>
&nbsp;&nbsp;desiredSalary: 84_000,<br>
};
</code>
</dd>
</dl>
</main>
<script src="project3.js"></script>
</body>
</html>

107
Chapter3Project/styles.css
View File

@ -0,0 +1,107 @@
/*
Nicola Clark
30MAR25
*/
/*
Web fonts from Google Fonts
Serif: Domine
Sans-serif: Nunito Sans
Monospace: Fira Code
*/
@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&family=Fira+Code&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-family: 'Nunito Sans', sans-serif;
font-size: 1.125rem;
line-height: 1.5;
color: var(--color-rich-black);
/*
Colors from coolors.co:
https://coolors.co/001524-3c5233-ffecd1-a28497-750d37
*/
--color-claret: #750d37;
--color-hunter-green: #3c5233;
--color-mountbatten-pink: #a28497;
--color-papaya-whip: #ffecd1;
--color-rich-black: #001524;
}
header {
background-color: var(--color-rich-black);
color: var(--color-papaya-whip);
padding: 0.5rem 1rem;
}
h1,
h2 {
font-family: Domine, serif;
}
main {
padding: 0.5rem 1rem;
}
dl > dt,
dl > dd:not(:last-child) {
margin-bottom: 0.125rem;
}
dl > dt > span.qNum {
font-weight: bold;
color: var(--color-hunter-green);
}
dl > dd {
background-color: var(--color-hunter-green);
color: var(--color-papaya-whip);
padding: 0.125rem 0.25rem;
}
dl > dd > code {
font-family: 'Fira Code', monospace;
font-feature-settings: 'calt';
}
@media screen and (prefers-color-scheme: dark) {
:root {
background-color: var(--color-rich-black);
color: var(--color-papaya-whip);
}
header {
border-bottom: 2px dotted var(--color-papaya-whip);
}
dl > dt > span.qNum {
color: var(--color-mountbatten-pink);
}
dl > dd {
background-color: var(--color-claret);
}
}
@media screen and (min-width: 1024px) {
header,
main {
padding: 1rem 1.5rem;
}
dl > dt,
dl > dd:not(:last-child) {
margin-bottom: 0.5rem;
}
}