hey there :) good work your project but i got a few improvements for you😁
USE THIS code for the hero section to fix the background image and add the gradient
the background position property just helps to position the image in the container
background repeat : sets the image to not repeat
background size : just sets the size of the image
so yeah play around with to get your desired look
This approach will also work for the "State of the Art Infrastructure" section too, just change the image and the linear gradient color ^_^ and mess around with the back position and size
background-image:url(./images/bg-pattern-intro-desktop.svg), linear-gradient(
to right,
hsl(13, 100%, 72%)19%,
hsl(353, 100%, 62%)50%);
background-position: 27% 52%;
background-repeat: no-repeat;
background-size: 220%;
border-radius: 0 0 0 5rem;
color: white;
And now for the java script
this was the code i used
just add a show class to the css file like this
.show{opacity: 1;}
i set my dropdown to an opacity of 0, but you can use display: none on the dropdown and display block in the show class if you prefer that
so the dropdown will set a display on click
.arrow{
transform: rotate(180deg);
}
added this arrow class to the css to make the arrow to turn 180deg on click
soo this code will set the dropdown to show when the button is clicked
function myFunction() {
document.getElementById("dropdown1").classList.toggle("show");
document.getElementById("arrow").classList.toggle("arrow");
document.getElementById("arrow2").classList.toggle("arrow");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropdown-rel')) {
var dropdowns = document.getElementsByClassName("dropdown");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
i hope this helps 😁😁😁😁
Oh yh I forgot to add that if you want to do different drop downs just use the same code but changed the function name for each drop-down
