Hello. I’m repeating code of the creating Portfolio website and it seems to be an issue with my code: the header with main menu contains white color and font also is white. It 's seems to be problem with CSS code, but I didn’t find mistake. Can anybody help me to solve this issue?
could you post you code ?
1 Like
Please post your code so we can help you solve your problem
1 Like
Post your code just as you did before but first click the </> and then paste it between the two sets of triple backticks.
2 Likes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="styles/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital@0;1&display=swap" rel="stylesheet">
</head>
<body class="main-content">
<header class="section sec1 header active" id="home">
<div class="header-content">
<div class="left-header">
<div class="h-shape"></div>
<div class="image">
<img src="IMAGES/MYIMAGE.jpg" alt="" width="100" height="125">
</div>
</div>
<div class="right-header">
<h1 class="name">
Hello, I'm <span class="name">My name</span>
A Web Developer.
</h1>
<p>
I'm a Web Developer. I love to create beautiful and functional websites.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque vel euismod ligula, ac blandit ligula.
Phasellus sit amet odio eget lacus aliquet auctor.
</p>
<a href=" " class="main-btn">
<span class="btn-text">Download CV</span>
<span class="btn-icon"><i class="fas fa-download"></i></span>
</a>
</div>
</div>
</header>
<main>
<section class="section sec2 about" id="about"></section>
<section class="section sec3 portfolio" id="portfolio"></section>
<section class="section sec4 blogs" id="blogs"></section>
<section class="section sec5 contact" id="contact"></section>
</main>
<div class="controlls">
<div class="control control-1 active-btn" data-id="home" >
<i class="fas fa-home"></i>
</div>
<div class="control control-2" data-id="about">
<i class="fas fa-user"></i>
</div>
<div class="control control-3" data-id="portfolio">
<i class="fas fa-briefcase"></i>
</div>
<div class="control control-4" data-id="blogs">
<i class="fas fa-newspaper"></i>
</div>
<div class="control control-5" data-id="contact">
<i class="fas fa-envelope-open"></i>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style:none;
}
//toggle between light and dark theme
:root{
--color-primary:#191d2b;
--color-secondary:#27AE60;
--color-white:#FFFFFF;
--color-black:#000;
--color-grey0:#f8f8f8;
--color-grey-1:#dbe1e8;
--color-grey-2:#b2becd;
--color-grey-3:#6c7983;
--color-grey-4:#454e56;
--color-grey-5:#2a2e35;
--color-grey-6:#12181b;
--br-sm-2: 14px;
--box-shadow-1: 0 3px 15px rgba(0,0,0,.2);
}
body{
background-color: var(--color-primary);
font-family: 'Poppins', sans-serif;
font-size: 1.1rem;
color:var(--color-white);
transition: all .4s ease-in-out;
}
a{
display: inline-block;
text-decoration: none;
color:inherit;
font-family: inherit;
}
header{
height:100vh;
color:var(--color-white);
overflow: hidden;
}
section{
min-height: 100vh;
width: 100%;
position:absolute;
left:0;
top:0;
padding:3rem 18rem;
}
.section{
transform:translateY(-100%) scale(0);
transition: all .4s ease-in-out;
background-color: var(--color-primary);
}
.sec1{
display: none;
transform: translateY(0) scale(1);
}
.sec2{
display: none;
transform: translateY(0) scale(1);
}
.sec3{
display: none;
transform: translateY(0) scale(1);
}
.sec4{
display: none;
transform: translateY(0) scale(1);
}
.sec5{
display: none;
transform: translateY(0) scale(1);
}
.active{
display: block;
animation: scaleAnim 1s ease-in-out;
@keyframes scaleAnim {
0%{
transform:translateY(-100%) scaleY(0)
}
100%{
transform:translateY(0) scaleY(1)
}
}
}
.controlls{
position: fixed;
z-index: 10;
top:50%;
right:3%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform:translateY(-50%);
.active-btn{
background-color: var(--color-secondary) !important;
transition: all .4s ease-in-out;
i{
color: var(--color-white) !important;
}
}
.control{
padding: 1rem;
cursor:pointer;
background-color: var(--color-grey-4);
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: .7rem 0;
box-shadow: var(--box-shadow-1) ;
i{
font-size: 1.2rem;
color: var(--color-grey-2);
pointer-events: none;
}
}
}
/*Header content*/
.header-content{
display:grid;
grid-template-columns: repeat(2,1fr);
height: 100%;
.left-header{
display: flex;
align-items: center;
position:relative;
.h-shape{
transition:all .4s ease-in-out;
width:65%;
height:100%;
background-color: var(--color-secondary);
position:absolute;
left:0;
top:0;
z-index: -1;
clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%);
}
}
}
/*independent components*/
const sections = document.querySelectorAll('.section');
const sectBtns = document.querySelectorAll('.controlls');
const sectBtn = document.querySelectorAll('.control');
const allSections = document.querySelector('.main-content');
function PageTransitions(){
for(let i = 0; i < sectBtn.length; i++){
sectBtn[i].addEventListener('click', function(){
let currentBtn = document.querySelectorAll('.active-btn');
currentBtn[0].className = currentBtn[0].className.replace('active-btn', '');
this.className += ' active-btn';
})
}
allSections.addEventListener('click', (e) =>{
const id = e.target.dataset.id;
if(id){
sectBtns.forEach((btn) =>{
btn.classList.remove('active')
})
e.target.classList.add('active')
//hide other sections
sections.forEach((section)=>{
section.classList.remove('active')
})
const element = document.getElementById(id);
element.classList.add('active');
}
})
}
PageTransitions();
How are you compiling the SCSS?
The CSS seems to be working as written. Please explain better what you are expecting vs what you are seeing. Maybe post an image as well so we can see what you are seeing.
actually CSS aren’t working since I’ve adeed an image. I’m using Visual Studio Code with extension installed SaSS.
According to the tutorial it should look like this
So far it looks like this one with white fonts and background
I checked my code but didn’t find any issues…May be an image makes problems.
Doesn’t look like that for me. Are you sure you are using the latest compiled CSS?
But you are missing some styles. You have unused classes, like .name for the color and .right-header for example, so it can’t be the complete code you have.
Edit: it also seems unlikely that .name would be used both for the h1 and span considering the image you have shown.
thanx a lot for a helpful advice! 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.