a person uses media queries to change properties if they don't change the properties media queries are not used. I mention it because there is unnecessary code like
.body{
background-image\: url(./bg-desktop.svg);
background-repeat: no-repeat;
}
then
@media screen and (min-width: 768px) {
body {
background-image: url(./bg-desktop.svg);
....
background-repeat: no-repeat;
}
.....
}
And you know what...again....
@media screen and (min-width: 375px) and (max-width: 767px) {
body {
....
background-image: url(./bg-mobile.svg);
background-repeat: no-repeat;
}
.....
}
the properties and values did not change why would you write the same thing again??? and that is not the only case you repeat this pattern more than once. Today it might be nothing, but in the future with a big project you will go crazy
It is not good that you use a class for a <div> and an <a> I do not see why they would share the class ".icons"
I recommend that you put .icons-box{ text-decoration:none} to remove the underline
Try to use classes as much as possible and avoid ID's
Writing javascript in the HTML is absolutely no good, neither is putting CSS in your HTML (like inline styling). Now it's nothing but in bigger project , it's necessary split it
First you should solve the previously mentioned problem of the "icons" class being in one <div> and in 3 <a>. I would put something like this
<div class="icon">
<a class="icon__link" href="www.facebook.com" target="_blank">
<i class="icon__italic fab fa-facebook-f fa-lg" ></i>
</a>
<a class="icon__link" href="www.twitter.com" target="_blank">
<i class="icon__italic fab fa-twitter fa-lg" ></i>
</a>
<a class="icon__link" href="www.instagram.com" target="_blank">
<i class="icon__italic fab fa-instagram fa-lg" ></i>
</a>
</div>
javascript-file
const iconLinks = document.querySelector(".icon__link")
iconLinks.forEach(link => {
link.addEventListener("mouseover",()=>{
link.classList.add("mouse-over-colour")
})
link.addEventListener("mouseleave",()=>{
link.classList.remove("mouse-over-colour")
})
});
css-file
.mouse-over-coulour{
color='#E882E8';
}
the default color (white) it'll on the class ".icon__italic" for example
And you have to create folders to separate contents . You really need it
Keep coding . ! No one was born knowing
