Tell us what’s happening:
There are soo many issues with the CSS of this code that I dn’t have the patience to fix it.
The main problem is obtaining a src for #header_img. It’s asking for a source code that starts with http
Every single image that I have found online so far has started with https. Where can I go to find an image whose html starts with http so that I can satisfy this code requirement for this project?
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Artist Promotion Page</title>
<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=Kanit:wght@100;400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@300..700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant&family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
<link
href="https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<div class="logo_container">
<img id="header-img" src"https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
<h1>Artxluu</h1>
</div>
<nav id="nav-bar">
<ul>
<li ><a class="nav-link" href="#description">Description</a></li>
<li><a class="nav-link" href="#youtube_video">YouTube Video</a></li>
<li><a class="nav-link" href="#social_media">Social medias</a></li>
</ul>
</nav>
</header>
<main>
<div id="description">
<h2>Meet the artist</h2>
<div class="feature">
<i class="ri-flag-fill ri-3x icon"></i>
<div>
<h3 class="info">Maryland Born</h3>
<p class="introduction">I am a Maryland-born self-taught artist. I started my art journey very young, but took a long break before returning back to art during the COVID pandemic (2020). I'm aiming to improve my art skills and to see how far my art takes me.</p>
</div>
</div>
<div class="feature">
<i class="ri-brush-fill ri-3x icon"></i>
<div>
<h3 class="info">Traditional artist</h3>
<p class="introduction">I am a traditional artist, using mediums like pencil, paint, watercolor, acrylics, etc to create my art. My favorite two mediums to combine are alcohol markers and color pencils.</p>
</div>
</div>
<div class="feature">
<i class="ri-camera-2-fill ri-3x icon"></i>
<div>
<h3 class="info">Social media journey</h3>
<p class="introduction">I have an instagram which I started to get a bit serious with in 2023. I also have a youtube channel that I started in November of 2023. You guys can also follow my art journey on tiktok.</p>
</div>
</div>
<p class="mis">Scroll down to see social media links</p>
</div>
<div id="youtube_video">
<h2>Youtube Video</h2>
<p class="soc">Here is the latest video on my YouTube channel:</p>
<iframe
id="video" width="560" height="315" src="https://www.youtube.com/embed/iCgR1XLOl-s?si=5uNjx1iQ-M_612Ei" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<section id="social_media">
<h2>Social Medias</h2>
<section class="my_links">
<p class="soc">Here is my instagram page which you can access below:</p>
<a href="https://www.instagram.com/artxluu/"><img id="instagram" src="https://img.freepik.com/premium-vector/vinnytsia-ukraine-april-27-2023-popular-social-media-icon-instagram-vector-design_545793-1681.jpg"></a>
</section>
<section class="my_links">
<p class="soc">You can access my tiktok account by clicking on the icon below:</p>
<a href="https://www.tiktok.com/@artxluu?is_from_webapp=1&sender_device=pc"><img id="tiktok" src="https://images.rawpixel.com/image_png_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdjk4Mi1kMS0wOC5wbmc.png"></a>
</section>
<section class="my_links">
<p class="soc">You can access my youtube channel by clicking on the icon below, which is where the video above comes from.</p>
<a href="https://www.youtube.com/@artxluu/featured"><img id="ytube" src="https://static.vecteezy.com/system/resources/previews/023/986/480/original/youtube-logo-youtube-logo-transparent-youtube-icon-transparent-free-free-png.png"></a>
</section>
</section>
<section id="email_section">
<h2>Newsletter Sign-up</h2>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<label for="person_email">Email:</label>
<input type="email" name="email" id="email" placeholder="someone@yourmailingsite.com" required />
<input id="submit" type="submit" value="Sign-up">
</form>
</section>
</main>
</body>
</html>
CSS code
:root{
--main-color: #a224f0;
}
*,
*::before,
*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*header CSS*/
header{
background: linear-gradient(90deg,#f28fd1, #eef27c, #f7cda6 );
font-family: "Kanit", Georgia, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
width: 100%;
height: 90px;
}
#header-img{
width: 60px;
}
#nav-bar{
width: 100%;
height: 70px;
max-width: 600px;
}
#nav-bar > ul{
display: flex;
align-items: center;
list-style: none;
}
#nav-bar > ul > li{
margin: 0;
padding: 0.1rem;
}
.nav-link{
text-decoration: none;
color: #3c0252;
padding: 0 40px;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.logo_container{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 20px;
}
a:hover{
color: #f75e7d;
font-weight: bold;
transition: all .20s ease-in-out;
}
h1{
color: var(--main-color);
margin-left: 10px;
font-weight: 700;
}
/*main CSS*/
main{
padding-top: 60px;
margin-top: 50px;
background:linear-gradient(145deg, #f7ba88,#f788d8, #f29c55 );
}
h2{
text-align: center;
font-family: "Kanit", Georgia, sans-serif;
}
h3, p{
font-family: "Ubuntu"
}
h3{
font-weight:700;
}
p{
font-weight: 400;
}
.introduction{
text-indent: 30px;
}
.misc{
margin-right: 30px;
}
.info{
margin: auto;
text-align: left;
}
#youtube_video{
padding-top: 130px;
align-items: center;
}
#video{
display: flex;
justify-content: center;
margin: auto;
}
#social_media{
padding-top: 130px;
}
#instagram{
width: 200px;
height: 200px;
}
#tiktok{
width: 200px;
height: 200px;
}
#ytube{
width: 200px;
height: 200px;
}
#email_section{
text-align: center;
padding: 50px 0;
}
input{
padding: 10px;
border-radius: 7px;
border: 1px solid var(--main-color);
}
#submit{
background-color: var(--main-color);
color: white;
cursor: pointer;
}
#email{
width: 60%;
}
.icon{
color: var(--main-color);
margin-right: 20px;
}
.feature{
display: flex;
align-items: center;
justify-content: center;
margin: 30px;
}
.mis{
margin-left: 30px;
font-weight: 400;
}
.soc{
margin-left: 40px;
}
@media only screen and (max-width: 600px){
#nav-bar{
display: flex;
flex-direction: row;
background: linear-gradient(90deg,#f28fd1, #eef27c, #f7cda6 );
}
}
@media only screen and (width > 1000px) {
.my_links{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
}
.soc{
max-width: 200px;
}
#ytube, #instagram, #tiktok{
width: 100px;
height: 100px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page