Skip to content

Added advice page and new css file; updated index.html #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jsanders316 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added advice page and new css file; updated index.html #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions advice/jazmine-sanders-advice.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/jazmine-s.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Playfair+Display:wght@700&display=swap"
rel="stylesheet"
/>
<!-- replace Skillcrush with your name here -->
<title>Jazmine's Advice For Newbies</title>
</head>

<!-- replace skillcrush with your name here -->

<body class="skillcrush-advice">
<header>
<section class="hero">
<div class="hero-content">
<a href="../index.html">Back to Main Page</a>
<h1>
Hi, my name is <span>Jazmine</span> and I have some advice for you!
</h1>
</div>
</section>
</header>

<section>
<div class="advice">
<h4>Confusion is your friend!</h4>
<p>
When you start programming your first web app you are doing something
that you have never done before. It's a new challenge, a new
opportunity, and in the case of software development, something so
specific that it's probably never been done before.
</p>

<p>
Confusion, therefore, is a sign that you are heading in the right
direction. It's a signal that you have engaged in the problem solving
pursuit that is math and technology and that it's time for you to dig
deeper and keep going because clarity awaits.
</p>

<h4>Suspended disbelief plays an important role.</h4>
<p>
When you are learning a new technology, whether you are learning to
write your first programming language, or just the latest framework,
you go through this uncomfortable phase where you know that the code
you are looking at is doing this THING but you don't understand HOW
exactly it's happening.
</p>

<p>
This is a normal part of the process of learning a new technology, and
in fact, it's a critical part of the process.
</p>

<p>
You see when you encounter a new programming language part of your
learning process includes learning to train your eye. The way to train
your eye is to read a good deal of code even when you don't totally
understand what it's doing.
</p>
</div>
</section>

<footer>
<!-- replace Skillcrush with your name here -->
<p>&copy; Copyright Jazmine 2025.</p>
</footer>
</body>
</html>
95 changes: 95 additions & 0 deletions css/jazmine-s.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
body {
color: #2e2e2e;
font-size: 16px;
font-family: "Poppins", "Helvetica Neue", sans-serif;
margin: 0 auto;
background: #faf9f7;
max-width: 800px;
line-height: 1.6;
padding: 0 1.5em;
}

.hero {
text-align: center;
padding: 5em 1.5em 4em;
background: linear-gradient(180deg, #fff8f5 0%, #faf9f7 100%);
border-radius: 1.5em;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
margin-top: 2em;
position: relative;
overflow: hidden;
}

.hero::before {
content: "";
position: absolute;
top: -50px;
right: -50px;
width: 150px;
height: 150px;
background: #f8d7da;
opacity: 0.3;
border-radius: 50%;
z-index: 0;
}

.hero::after {
content: "";
position: absolute;
bottom: -50px;
left: -50px;
width: 120px;
height: 120px;
background: #9e7b9b;
opacity: 0.25;
border-radius: 50%;
z-index: 0;
}

.hero-content {
position: relative;
z-index: 1;
}

h1 {
font-size: 2.25em;
color: #c97c5d;
margin-top: 1em;
text-align: center;
font-family: "Playfair Display", serif;
letter-spacing: 0.5px;
}

h1 span {
font-family: "Dancing Script", cursive;
color: #9e7b9b;
font-weight: 500;
}

h4 {
font-size: 1.5em;
font-weight: bold;
color: #9e7b9b;
text-align: center;
font-family: "Playfair Display", serif;
margin-bottom: 25px;
}

a {
text-decoration: none;
color: #c97c5d;
transition: color 0.3s ease;
}

a:hover {
color: #9e7b9b;
}

footer {
text-align: center;
padding-top: 1em;
font-size: 0.9em;
color: #6b6b6b;
border-top: 1px solid #eadbd2;
margin-top: 2em;
}
3 changes: 1 addition & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,7 @@ <h2>Skillcrusher's Advice for Newbies!</h2>
<a href="advice/tiffany-k-advice.html">Tiffany K's Advice</a><br>
<a href="advice/megan-ducote-advice.html">Megan D's Advice</a><br>
<a href="advice/najja-meeks-advice.html"> Najja M's Advice</a><br>
</section>
<a href="advice/jazmine-sanders-advice.html" target="_blank">Jazmine S.'s Advice</a><br>
</section>
</body>

</html>