Hello FCC Fam,
I have passed my Portfolio Exam. Yesssss! However, I have not been able to style my portfolio to my liking. I believe that I have over styled myself into a CSS ‘code freeze’. I cannot move my text to center or apply my margin and paddings.
Creating the div’s in order to structure my background blocks of color have possibly haulted me styling everything else. I don’t know for certain what I did. I cannot see my own mistakes yet.
Can anyone help me see where I went wrong. I have the passed exam here:
I have the updated work on Code Pen here:
**Your code so far**
/* file: index.html */
<!DOCTYPE>
<link rel="stylesheet" href="styles.css">
<!--Portfolio Test development for FCC 07/02/2022
Ok, I've completed the HTML portion and basic CSS
to pass my Portfolio Exam for FCC [@9:55 pm | 7/2/22].
For that I am grateful in sticking it out to the end
today.
Possibly tomorrow I will do some personalizations
in CSS to finish it. In restarting my FCC journey
I've realized that even the older version has
updated how it structures expectations from its
students.
Oddly enough I was shocked this time around, for
there were times I noticed I could style and layout
the structure without referencing my W3schools.com
'go-to' site for guidance. Wowzers!
I should stop underplaying my retention of
coding more, but not too much! Lord, humble my
keyboard strokes. ;-)
-->
<html>
<!--NAVBAR-->
<header class="header">
<nav id="navbar">
<a href="#" target="_blank">About</a>
<a href="#" target="_blank">Work</a>
<a href="#" target="_blank">Contact</a>
<!-- EXAMPLE PAGE LINK JUMP
<a class="nav-link" href="#section_three">Section Three</a><br>
-->
</nav>
</header>
<!--WELCOME-->
<body id="main">
<div id="greeting">
<section id="welcome-section">
<h1 >Greetings I'm Ebony</h1>
<h2>a junior web developer</h2>
</section>
</div>
<!--PROJECTS-->
<div id="work">
<section id="projects">
<h2>Below are my independent learning projects</h2>
<div class="project-tile">
<a href="#" target="_blank"><img src="#" alt="#" /></a>
</div>
</section>
</div>
<!--PROFILE LINKS-->
<div id="together">
<section class="profile">
<h2>Let's grow together...</h2>
<h3>I'm currently seeking a remote paid-apprenticeship program.</h3>
<div class="link-icon">
<a id="profile-link" href="#" target="_blank"><img src="#" alt="email" /></a>
<a id="profile-link" href="#" target="_blank"><img src="#" alt="phone" /></a>
</div>
</section>
</div>
<!--DIVIDE-->
<div id="divider"></div>
<!--FOOTER-->
<footer id="footer" style="text-align: center;" class="footer">
<p>© 2022 Eb's Still Learning. All Rights Reserved.</p>
</footer>
</body>
</html>
/* file: styles.css */
/* Hey Eb! Don't forget. You have many repetitive
code blocks to simplify when you get your rest
and return.
Uh huh, thanks self. I appreciate the reminder.
Is Ebony talking to herself on la computadora?
Si, Yo soy asi divertido.
<h1>Goodnight World</h1>
*/
.header {
background-color: rgb(255, 87, 51);
height: 80px;
position: fixed;
display: inline-flex;
width: 100%;
top: 0;
left: 0;
}
body {
display: block;
width: 100%;
margin: 80px 0px 0px 0px;
padding: 0px;
}
@media (min-width: 800px) {
body {
width: 100%;
}
}
#greeting {
display: block;
top: 0;
left: 0;
width: 100%;
height: 500px;
background-color: rgb(144, 12, 63);
}
#work {
display: block;
top: 0;
left: 0;
width: 100%;
height: 1500px;
margin-top: -20px;
background-color: rgb(88, 24, 69);
}
#together {
display: block;
top: 0;
left: 0;
width: 100%;
height: 500px;
margin-top: -20px;
background-color: rgb(199, 0, 57);
}
#divider {
display: block;
top: 0;
left: 0;
width: 100%;
height: 10px;
margin-top: 0px;
background-color: rgb(255, 87, 51);
}
#footer {
display: block;
top: 0;
left: 0;
width: 100%;
height: 100px;
margin-top: -20px;
background-color: rgb(199, 0, 57);
}
