Hey everyone, I’m super new to HTML and CSS but I’ve been having a lot of fun with freeCodeCamp!
I know this topic has been posted everywhere and I have gone through like 7 different threads, input the changes into my code and still cannot pass. I’ve got 9/10 and this is driving me nuts.
Please feel free to help me fix my documentation if needed. I’m still getting the hang of how everything should look in html and css layout. lol
I’ve posted my link below…that’s about all I know how to do lol I
I think I’ve got an issue with class vs id and how to do all of that in CSS but I’m trying and learning as I go. I think I get ID happy or something.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC:400i|Playfair+Display:400i&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100&display=swap" rel="stylesheet">
<style></style>
<main id="main">
<header>
<h1 id="title">Marilyn
</h1>
<p id="tagline">the icon and the legend</p>
</header>
<body>
<figure id="img-div">
<img id="image" src="https://www.everythingaudrey.com/wp-content/uploads/2016/03/Marilyn-Monroe-Facts-18.jpg" alt="Marilyn Monroe posing in her signature red lipstick." />
<figcaption id="img-caption">Marilyn Monroe sporting her blonde locks and signature red lipstick.
</figcaption>
</figure>
<section id="tribute-info">
<h3 id="headline">ICON</h3>
<p class="about-marilyn"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h3>DREAMER</h3>
<p class="about-marilyn">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h3>SIREN</h3>
<p class="about-marilyn">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
<div id="link">
<a id="tribute-link" href="https://marilynmonroe.com/" target="_blank">Visit the official Marilyn Monroe website to learn more.</a>
</div>
</body>
</section>
</main>
</html>
CSS As Follows
<link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC:400i|Playfair+Display:400i&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100&display=swap" rel="stylesheet">
main #main {
background-color: black;
}
#title {
font-family: 'Playfair Display SC', serif;
font-size: 200px;
letter-spacing: 20px;
text-transform: uppercase;
color: black;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
-webkit-animation: fadein 3.5s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#main p {
text-align: center;
margin-top: 0px;
color: black;
font-family: 'Montserrat', sans-serif;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 25px;
padding-top: 0px;
-webkit-animation: fadein 3.5s;
}
figure #img-div {
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
text-color: black;
max-width: 476px;
margin: 0 auto;
background-color: transparent;
}
#image {
border-radius: 40px;
width: 100%;
display: block;
height: auto;
-webkit-animation: fadein 3.5s;
}
#img-caption {
color: black;
padding-top: 30px;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
}
#tribute-info{
}
h3 {
font-family: 'Playfair Display SC', serif;
font-size: 40px;
color: black;
text-align: left;
margin-bottom: 10px;
margin-left: 20px;
text-transform: lowercase;
}
#tribute-info .about-marilyn {
text-transform: lowercase;
font-family: 'Montserrat', sans-serif;
font-size: 25px;
letter-spacing: 0px;
text-align: left;
margin-left: 20px;
}
a #tribute-link {
text-align: center;
}
#link {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
text-align: center;
color: pink;
}