I am struggling with a piece of code in my component that goes like this:
return (
<div className="Home" id="Home">
<Customnav color="" height="80px" padding="5vh"/>
<div className="parent">
<div class="col-5 son">
<span id="codeflow-text" className="codeflow-text">Codeflow</span>
<span style={{color:"black", fontSize:"70px", fontFamily: "Arial"}}><b>Learning</b></span>
</div>
<div class="col-7 daughter">
<img src={img1} alt="loading"/>
</div>
</div>
</div>
);
Now, I have added Home.css to this JS file, and part of it looks like this:
div#Home span.codeflow-text {
color: "#1cbdd6" !important;
font-size: "70px";
font-family: "Raleway";
}
Despite defining the styles for the word "Codeflow," it's not rendering as expected. Upon inspection, I see something different in the browser:
https://i.sstatic.net/ye8y5.png
I've tried increasing specificity and using !important, but there's still an issue. Can someone please assist me?