Hi there,
I have finished landing page project, everything is okay, but need help some topics. 1. How to change header picture’s background that was transparent.
2. I have done header section’s position fixed and when scrolled down the header is transparent. How fix it?
you can give it a background color
is the image transparent?
what’s your code?
/* here is html code */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>product-page.codecrafters.com</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img id="header-img" src="https://www.topinteractiveagencies.com/wp-content/uploads/2012/02/Molde-Logo.jpg">
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#about">about</a></li>
<li><a class="nav-link" href="#courses">courses</a></li>
<li><a class="nav-link" href="#youtube-video">explaining-fullstack</a></li>
<li><a class="nav-link" href="#prices">prices</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h2 class="heading">Add your email to learn more about our courses</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
<input id="email" type="email" name="email" placeholder="Enter your email address" required>
<input id="submit" type="submit" value="GET STARTED">
</form>
</section>
<section id="about">
<h2 class="heading">About Us</h2>
<div class="container">
<div class="text-logo">
<img src="https://media.licdn.com/dms/image/D4E12AQHRwTbkUKwDuw/article-cover_image-shrink_720_1280/0/1721178177835?e=2147483647&v=beta&t=IerKMnnk-uXsSYZs8YcylHeN_EEkEjTOqN2G_PT3sDo" alt="about us logo">
</div>
<div class="text">
<p>At Fullstack, we specialize in delivering comprehensive full-stack development services that bring your ideas to life. Our team of experienced developers excels in both front-end and back-end technologies, ensuring a seamless integration of design, functionality, and user experience.</p>
</div>
</div>
</section>
<section id="courses">
<h2 class="heading">Front-End Excellence</h2>
<div class="container">
<div class="text-logo">
<img src="https://img.freepik.com/premium-vector/front-end-developer-typographic-header_277904-11487.jpg" alt="front end logo">
</div>
<div class="text">
<p>Our front-end developers are skilled in the latest technologies, including HTML5, CSS3, JavaScript, and modern frameworks like React, Angular, and Vue.js. We focus on creating responsive, user-friendly interfaces that engage users and provide an intuitive experience across all devices.</p>
</div>
</div>
<h2 class="heading">Back-End Mastery </h2>
<div class="container">
<div class="text-logo">
<img src="https://img.freepik.com/free-vector/back-end-typographic-header-software-development-process-website-interface-design-improvement-programming-coding-it-profession-isolated-flat-vector-illustration_613284-210.jpg" alt="back-end logo">
</div>
<div class="text">
<p>On the back-end, our developers leverage powerful server-side technologies such as Node.js, Python, Ruby on Rails, and PHP. We build robust and scalable databases using SQL and NoSQL solutions like MySQL, PostgreSQL, and MongoDB, ensuring your application performs efficiently under any load.</p>
</div>
</div>
</section>
<section id="youtube-video">
<h2 class="heading">Explaining Fullstack</h2>
<iframe id="video" src="https://www.youtube.com/embed/7NaeDBTRY1k?si=DRhwNAwb5iOiu7pc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</section>
<section id="prices">
<h2 class="heading">Course Prices</h2>
<div class="box-wrapper">
<form action="https://www.freecodecamp.com/email-submit" method="post">
<div class="box1 boxes">
<h3 class="box-header">Front-End Course</h3>
<p class="price">150$</p>
<p class="about-course">
<span>Html</span>
<span>Css</span>
<span>Java Sctipt</span>
<span>React</span>
</p>
<button class="select-button" type="submit">SELECT</button>
</div>
<div class="box2 boxes">
<h3 class="box-header">Back-End Course</h3>
<p class="price">200$</p>
<p class="about-course">
<span>Python</span>
<span>Java</span>
<span>Java Script</span>
<span>C / C++</span>
</p>
<button class="select-button" type="submit">SELECT</button>
</div>
<div class="box3 boxes">
<h3 class="box-header">Full-Stack Course</h3>
<p class="price">380$</p>
<p class="about-course">
<span>Front-end</span>
<span>Back-end</span>
<span>Cloud Computing</span>
<span>Mysql / Sql</span>
</p>
<button class="select-button" type="submit">SELECT</button>
</div>
</form>
</div>
</main>
</div>
<footer>
<p>©copyright<span>2024</span>, fullstack</p>
</footer>
</body>
</html>
/* it's style */
*, ::before, ::after {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
font-size: 10px;
}
body {
background-color: #e6e5e3;
}
#page-wrapper {
position: relative;
}
header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
position: fixed;
top: 0;
padding: 0 20px;
min-height: 75px;
}
nav {
display: block;
font-family: 'Arial', sans-serif;
}
nav > ul {
font-size: 1.8rem;
display: flex;
flex-direction: row;
justify-content: space-around;
width: 35vw;
}
li {
display: list-item;
list-style: none;
}
li a{
text-decoration: none;
color: black;
}
li a:hover{
background-color:
#5672bf;
color: whitesmoke;
padding: 3px;
}
.logo {
width: 60vw;
height: 35px;
}
.logo > img {
width: 100%;
height: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
object-fit: cover;
}
.hero {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin-top: 75px;
}
.heading {
font-family: 'Arial';
font-size: 2.1rem;
opacity: 0.9;
}
#form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 1rem;
margin-left: 1rem;
}
form > input {
margin-bottom: 1rem;
}
#email {
width: 240px;
height: 30px;
}
#submit {
width: 130px;
height: 30px;
background-color: gold;
border: none;
cursor: pointer;
font-weight: 700;
border-radius: 3px;
padding: 3px;
}
.box-wrapper > form{
display: flex;
flex-direction: row;
column-gap: 1vw;
width: 80%;
margin: 1rem auto;
}
.boxes {
width: 220px;
height: 195px;
border: 1px solid black;
margin: 1rem auto;
}
.heading {
text-align: center;
margin-top: 1em;
}
.container {
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
justify-content: center;
margin: 1em auto;
}
.text-logo {
width: 15%;
text-align: center;
}
.text {
width: 70%;
line-height: 1.5em;
}
.text p{
font-family: 'Arial', sans-serif;
font-size: 1.2em;
}
.text-logo img {
width: 60px;
height: 45px;
border-radius: 50%;
}
.boxes {
font-family: 'Arial', sans-serif;
text-align: center;
}
.boxes h3 {
font-size: 1.4em;
font-weight: 700;
background-color: lightgrey;
padding: 8px;
}
.boxes .price {
font-size: 1.8em;
margin-top: 0.75em;
font-weight: bolder;
}
.about-course {
font-size: 1.1em;
font-weight: 400;
margin: 1em 0 1em 0;
}
.about-course span {
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 2px;
}
.boxes .select-button {
background-color: gold;
border: none;
padding: 8px;
border-radius: 3px;
}
#video {
display: block;
margin:1em auto;
width: 38em;
height: 21em;
border-radius: 2px;
}
/* footer style */
footer {
font-family: 'Arial', sans-serif;
margin: 1rem auto;
width: 80%;
background-color: lightblue;
font-weight: 700;
margin-bottom: 0;
}
footer > p {
font-size: 1.5em;
text-align: center;
padding: 30px;
}
footer span {
font-style: italic;
}
@media (max-width: 420px) {
header {
display: flex;
flex-direction: column;
justify-content: center;
}
header > .logo {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0.5em auto;
}
nav > ul {
display: flex;
flex-direction: column;
margin: 1rem auto;
text-align: center;
}
.hero {
margin-top: 160px;
text-align: center;
}
.box-wrapper > form {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
row-gap: 10vh;
}
#video {
width: 280px;
height: 190px;
}
.text-logo {
display: none;
}
}
Look at image, fullstack’s image has white background, i want to change it.
you can’t do that with code, you need an image with a transparent background
Okay, that’s right. Could you look at heading area it’s not good.
you need to add a background color so it’s not transparent and it doesn’t show the text below
if it is below the rest, change the z-index so it is above
1 Like