Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

When I click on the view button, instead of opening the card in the index I selected, they all open. Where am I making a mistake?

byMR
September 1, 2022

I added View buttons that show more detailed information about the characters into the card bodies that I created with the data I got from the APIs, but when I click the view button, it opens all of them instead of opening the boxes in the index I selected. where am I doing wrong.I tried for in instead of forEach, but at that time the first card body opens, the others do not open.When I click on the buttons with console.log(event.target) it shows the buttons correctly but they all refer to the cardbody at index 0

    const getAgent = async() =>{
        let url = 'https://valorant-api.com/v1/agents'
        let res = await fetch(url);
        let data = await res.json()
        createAgentBox(data);
    
    }

    const createAgentBox = (element) =>{

        const agentContainer  = document.querySelector('.agent-container');
        
        let agents = element.data; 
        
        agents.forEach(agent =>{
            
            let agentName = agent.displayName;
            let agentImage = agent.fullPortrait;
            let desc = agent.description;
            let abilitiesImage1 = agent.abilities[0].displayIcon;
            let abilitiesImage2 = agent.abilities[1].displayIcon;
            let abilitiesImage3 = agent.abilities[2].displayIcon;
            let abilitiesImage4 = agent.abilities[3].displayIcon;
            let abilitiesName1 =  agent.abilities[0].displayName;
            let abilitiesName2 =  agent.abilities[1].displayName;
            let abilitiesName3 =  agent.abilities[2].displayName;
            let abilitiesName4 =  agent.abilities[3].displayName;

            let x = `<div class="agentbox">
            <img src=${agentImage} alt="">
            <h1 class='agentname'>${agentName}</h1>
        
            <button class="seeDetails" >View
                <div class="showdetails"  >
                    <i class="fa-solid fa-xmark"></i>
                            <p>${desc}</p>
                        <div class='boxs'>
                            <div class="box1">
                                <img src=${abilitiesImage1} alt="">
                                <p>${abilitiesName1}</p>
                            </div>
                            <div class="box2">
                                <img src=${abilitiesImage2} alt="">
                                <p>${abilitiesName2}</p>
                            </div>
                            <div class="box3">
                                <img src=${abilitiesImage3} alt="">
                                <p>${abilitiesName3}</p>
                            </div>
                            <div class="box4">
                                <img src=${abilitiesImage4} alt="">
                                <p>${abilitiesName4}</p>
                            </div>
                        </div>    
                        </div>
                    </div>
                
                </button>
                
            
        </div>`
    
            

        agentContainer.innerHTML += x;  

        });   

        let seeDetails = document.querySelectorAll('.seeDetails')

        seeDetails.forEach(seeDetail =>{
            seeDetail.addEventListener('click',showInfos)
        })
        function showInfos(e){
            
            
            let showdetails = document.querySelectorAll('.showdetails');
            showdetails.forEach((showdetail,index) =>{
                showdetail.style.display = 'block'

            })
        }
    
    }

    getAgent()


    let searcInput = document.querySelector('.searchbox');


    searcInput.addEventListener('input',function(){
        const agentsName = document.querySelectorAll('.agentname')
        let container  = document.querySelector('.container')
        
        const search = searcInput.value;
        

        agentsName.forEach((agentName) =>{
            agentName.parentElement.style.display = 'block';
            container.style.height = '100%'
            if(!agentName.innerHTML.toLowerCase().includes(search)){
                agentName.parentElement.style.display = 'none';
                container.style.height = "100vh"
            }
        })
        
    })
@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
}

a {
  text-decoration: none;
  color: black;
  font-family: "Audiowide", cursive;
}

/*Navbar CSS*/

.navbar {
  width: 100%;
  background: #fe4655;
  border-bottom: 1px solid #fe4655;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 75px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.navlogo {
  margin-left: 2rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.navlogo > p {
  font-family: "Audiowide", cursive;
  font-size: 25px;
  color: white;
}

.navList {
  display: flex;
  justify-content: space-between;
  width: 30rem;
  margin-right: 5rem;
}

li {
  list-style: none;
}

ul > li > a {
  text-decoration: none;
  font-family: "Audiowide", cursive;
  color: black;
  font-size: 23px;
  transition-duration: 1s;
  cursor: pointer;
}

ul > li > a:hover {
  color: white;
  position: relative;
  bottom: 5px;
}

/*Body*/
.container {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, #2a1925, #651830, #ff425c);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.search-input {
  display: flex;
  margin: 5rem auto;
}
.searchbox {
  outline: none;
  border: 1px;
  padding: 0.5rem;
  width: 20rem;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.searchbox::placeholder {
  font-family: "Audiowide", cursive;
}

.searcBtn {
  border: 1px solid;
  padding: 0.5rem;
  width: 5rem;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  cursor: pointer;
  color: white;
  background-image: linear-gradient(to right, #2a1925, #651830, #ff425c);
}

.agent-container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  gap: 3rem;
  justify-content: center;
}

.agentbox {
  width: 270px;
  height: 350px;
  border: 1px solid white;
  border-radius: 20px;
  display: block;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.agentbox > img {
  height: 70%;
  width: 100%;
}

.agentbox > h1 {
  font-family: "Audiowide", cursive;
  color: white;
  text-align: center;
}

.agentbox > button {
  padding: 0.5rem;
  border-radius: 10px;
  margin: 10px auto;
  border: 1px solid;
  cursor: pointer;
  font-family: "Audiowide", cursive;
  display: flex;
  
}

.showdetails {
  position: absolute;
  width: 270px;
  height: 250px;
  border: 1px solid white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  top: 0.01rem;
  background: black;
  opacity: 0.7;
  flex-direction: column;
  display: none;
  left: 0.2px;
  
}

.showdetails > p {
  text-align: center;
  margin-top: 0.9rem;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  color: white;
  
}





.boxs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 0.9rem;
  
}

.box1,
.box2,
.box3,
.box4 {
  height: 50px;
  width: 50px;
  
  display: flex;
  flex-direction: column;
}

.box1 > img,
.box2 > img,
.box3 > img,
.box4 > img {
  height: 100%;
  width: 100%;
}

.box1 > p,
.box2 > p,
.box3 > p,
.box4 > p {
  color: white;
  font-size: 13px;
  text-align: center;
}

.fa-xmark {
  color: white;
  position: relative;
  left: 7rem;
  top: 0.5rem;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Document</title>
</head>
<body>
    <nav class="navbar">
        <div class="navlogo">
            <a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Valorant_logo.svg/2560px-Valorant_logo.svg.png" alt="#" height="30px" width="150px"></a>
            <p>-wiki</p>
        </div>
        <div class="navMenu">
            <ul class="navList">
                <li class="navItem">
                    <a href="/Valorant_wiki/home page/index.html">Home</a>
                </li>
                <li>
                    <a href="#">About Us</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    
    <div class="container">
        <div class="search-input">
            <input type="text" class="searchbox" placeholder="Search Agents...">
            <button class="searcBtn"><i class="fa-solid fa-magnifying-glass"></i></button>
         </div>
         <div class="agent-container">
           
            </div>
         </div>
         
        
    </div>
    
    <script src="app.js"></script>
</body>
</html>
const getAgent = async() =>{
    let url = 'https://valorant-api.com/v1/agents'
    let res = await fetch(url);
    let data = await res.json()
    createAgentBox(data);
   
}

const createAgentBox = (element) =>{

    const agentContainer  = document.querySelector('.agent-container');
    
    let agents = element.data; 
    
    agents.forEach(agent =>{
        
        let agentName = agent.displayName;
        let agentImage = agent.fullPortrait;
        let desc = agent.description;
        let abilitiesImage1 = agent.abilities[0].displayIcon;
        let abilitiesImage2 = agent.abilities[1].displayIcon;
        let abilitiesImage3 = agent.abilities[2].displayIcon;
        let abilitiesImage4 = agent.abilities[3].displayIcon;
        let abilitiesName1 =  agent.abilities[0].displayName;
        let abilitiesName2 =  agent.abilities[1].displayName;
        let abilitiesName3 =  agent.abilities[2].displayName;
        let abilitiesName4 =  agent.abilities[3].displayName;

        let x = `<div class="agentbox">
        <img src=${agentImage} alt="">
        <h1 class='agentname'>${agentName}</h1>
    
        <button class="seeDetails" >View
            <div class="showdetails"  >
                <i class="fa-solid fa-xmark"></i>
                        <p>${desc}</p>
                    <div class='boxs'>
                        <div class="box1">
                            <img src=${abilitiesImage1} alt="">
                            <p>${abilitiesName1}</p>
                        </div>
                        <div class="box2">
                            <img src=${abilitiesImage2} alt="">
                            <p>${abilitiesName2}</p>
                        </div>
                        <div class="box3">
                            <img src=${abilitiesImage3} alt="">
                            <p>${abilitiesName3}</p>
                        </div>
                        <div class="box4">
                            <img src=${abilitiesImage4} alt="">
                            <p>${abilitiesName4}</p>
                        </div>
                    </div>    
                    </div>
                </div>
            
            </button>
             
        
    </div>`
   
        

    agentContainer.innerHTML += x;  

    });   

    let seeDetails = document.querySelectorAll('.seeDetails')

    seeDetails.forEach(seeDetail =>{
        seeDetail.addEventListener('click',showInfos)
    })
    function showInfos(e){
        
        /*open view buttons*/
        let showdetails = document.querySelectorAll('.showdetails');
        showdetails.forEach((showdetail,index) =>{
            showdetail.style.display = 'block'

        })
    }
   
 }

getAgent()


let searcInput = document.querySelector('.searchbox');


searcInput.addEventListener('input',function(){
    const agentsName = document.querySelectorAll('.agentname')
    let container  = document.querySelector('.container')
    
    const search = searcInput.value;
    

    agentsName.forEach((agentName) =>{
        agentName.parentElement.style.display = 'block';
        container.style.height = '100%'
        if(!agentName.innerHTML.toLowerCase().includes(search)){
            agentName.parentElement.style.display = 'none';
            container.style.height = "100vh"
        }
    })
    
})
@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
}

a {
  text-decoration: none;
  color: black;
  font-family: "Audiowide", cursive;
}

/*Navbar CSS*/

.navbar {
  width: 100%;
  background: #fe4655;
  border-bottom: 1px solid #fe4655;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 75px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.navlogo {
  margin-left: 2rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.navlogo > p {
  font-family: "Audiowide", cursive;
  font-size: 25px;
  color: white;
}

.navList {
  display: flex;
  justify-content: space-between;
  width: 30rem;
  margin-right: 5rem;
}

li {
  list-style: none;
}

ul > li > a {
  text-decoration: none;
  font-family: "Audiowide", cursive;
  color: black;
  font-size: 23px;
  transition-duration: 1s;
  cursor: pointer;
}

ul > li > a:hover {
  color: white;
  position: relative;
  bottom: 5px;
}

/*Body*/
.container {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, #2a1925, #651830, #ff425c);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.search-input {
  display: flex;
  margin: 5rem auto;
}
.searchbox {
  outline: none;
  border: 1px;
  padding: 0.5rem;
  width: 20rem;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.searchbox::placeholder {
  font-family: "Audiowide", cursive;
}

.searcBtn {
  border: 1px solid;
  padding: 0.5rem;
  width: 5rem;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  cursor: pointer;
  color: white;
  background-image: linear-gradient(to right, #2a1925, #651830, #ff425c);
}

.agent-container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  gap: 3rem;
  justify-content: center;
}

.agentbox {
  width: 270px;
  height: 350px;
  border: 1px solid white;
  border-radius: 20px;
  display: block;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.agentbox > img {
  height: 70%;
  width: 100%;
}

.agentbox > h1 {
  font-family: "Audiowide", cursive;
  color: white;
  text-align: center;
}

.agentbox > button {
  padding: 0.5rem;
  border-radius: 10px;
  margin: 10px auto;
  border: 1px solid;
  cursor: pointer;
  font-family: "Audiowide", cursive;
  display: flex;
  
}

.showdetails {
  position: absolute;
  width: 270px;
  height: 250px;
  border: 1px solid white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  top: 0.01rem;
  background: black;
  opacity: 0.7;
  flex-direction: column;
  display: none;
  left: 0.2px;
  
}

.showdetails > p {
  text-align: center;
  margin-top: 0.9rem;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  color: white;
  
}





.boxs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 0.9rem;
  
}

.box1,
.box2,
.box3,
.box4 {
  height: 50px;
  width: 50px;
  
  display: flex;
  flex-direction: column;
}

.box1 > img,
.box2 > img,
.box3 > img,
.box4 > img {
  height: 100%;
  width: 100%;
}

.box1 > p,
.box2 > p,
.box3 > p,
.box4 > p {
  color: white;
  font-size: 13px;
  text-align: center;
}

.fa-xmark {
  color: white;
  position: relative;
  left: 7rem;
  top: 0.5rem;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Document</title>
</head>
<body>
    <nav class="navbar">
        <div class="navlogo">
            <a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Valorant_logo.svg/2560px-Valorant_logo.svg.png" alt="#" height="30px" width="150px"></a>
            <p>-wiki</p>
        </div>
        <div class="navMenu">
            <ul class="navList">
                <li class="navItem">
                    <a href="/Valorant_wiki/home page/index.html">Home</a>
                </li>
                <li>
                    <a href="#">About Us</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    
    <div class="container">
        <div class="search-input">
            <input type="text" class="searchbox" placeholder="Search Agents...">
            <button class="searcBtn"><i class="fa-solid fa-magnifying-glass"></i></button>
         </div>
         <div class="agent-container">
           
            </div>
         </div>
         
        
    </div>
    
    <script src="app.js"></script>
</body>
</html>

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

If you call document.querySelectorAll(...) you will get all matching elements over the whole document. That’s why all info boxes are being display after clicking the "View" button.

function showInfos(e){
    
    /* !!! open view buttons*/
    let showdetails = document.querySelectorAll('.showdetails');

    showdetails.forEach((showdetail,index) =>{
        showdetail.style.display = 'block'
    });
}

Simply change the code to:

function showInfos(e) {
    const showdetails = e.target.querySelector('.showdetails');
    showdetails.style.display = 'block';
}

This will get the reference to the clicked element (the button) and execute the query on that element.

Fully working example

const getAgent = async() =>{
    let url = 'https://valorant-api.com/v1/agents'
    let res = await fetch(url);
    let data = await res.json()
    createAgentBox(data);
   
}

const createAgentBox = (element) =>{

    const agentContainer  = document.querySelector('.agent-container');
    
    let agents = element.data; 
    
    agents.forEach(agent =>{
        
        let agentName = agent.displayName;
        let agentImage = agent.fullPortrait;
        let desc = agent.description;
        let abilitiesImage1 = agent.abilities[0].displayIcon;
        let abilitiesImage2 = agent.abilities[1].displayIcon;
        let abilitiesImage3 = agent.abilities[2].displayIcon;
        let abilitiesImage4 = agent.abilities[3].displayIcon;
        let abilitiesName1 =  agent.abilities[0].displayName;
        let abilitiesName2 =  agent.abilities[1].displayName;
        let abilitiesName3 =  agent.abilities[2].displayName;
        let abilitiesName4 =  agent.abilities[3].displayName;

        let x = `<div class="agentbox">
        <img src=${agentImage} alt="">
        <h1 class='agentname'>${agentName}</h1>
    
        <button class="seeDetails" >View
            <div class="showdetails"  >
                <i class="fa-solid fa-xmark"></i>
                        <p>${desc}</p>
                    <div class='boxs'>
                        <div class="box1">
                            <img src=${abilitiesImage1} alt="">
                            <p>${abilitiesName1}</p>
                        </div>
                        <div class="box2">
                            <img src=${abilitiesImage2} alt="">
                            <p>${abilitiesName2}</p>
                        </div>
                        <div class="box3">
                            <img src=${abilitiesImage3} alt="">
                            <p>${abilitiesName3}</p>
                        </div>
                        <div class="box4">
                            <img src=${abilitiesImage4} alt="">
                            <p>${abilitiesName4}</p>
                        </div>
                    </div>    
                    </div>
                </div>
            
            </button>
             
        
    </div>`
   
        

    agentContainer.innerHTML += x;  

    });   

    let seeDetails = document.querySelectorAll('.seeDetails')

    seeDetails.forEach(seeDetail =>{
        seeDetail.addEventListener('click', showInfos)
    })
    
    function showInfos(e) {
        const showdetails = e.target.querySelector('.showdetails');
        showdetails.style.display = 'block';
    }   
 }

getAgent()


let searcInput = document.querySelector('.searchbox');


searcInput.addEventListener('input',function(){
    const agentsName = document.querySelectorAll('.agentname')
    let container  = document.querySelector('.container')
    
    const search = searcInput.value;
    

    agentsName.forEach((agentName) =>{
        agentName.parentElement.style.display = 'block';
        container.style.height = '100%'
        if(!agentName.innerHTML.toLowerCase().includes(search)){
            agentName.parentElement.style.display = 'none';
            container.style.height = "100vh"
        }
    })
    
})
@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
}

a {
  text-decoration: none;
  color: black;
  font-family: "Audiowide", cursive;
}

/*Navbar CSS*/

.navbar {
  width: 100%;
  background: #fe4655;
  border-bottom: 1px solid #fe4655;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 75px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.navlogo {
  margin-left: 2rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.navlogo > p {
  font-family: "Audiowide", cursive;
  font-size: 25px;
  color: white;
}

.navList {
  display: flex;
  justify-content: space-between;
  width: 30rem;
  margin-right: 5rem;
}

li {
  list-style: none;
}

ul > li > a {
  text-decoration: none;
  font-family: "Audiowide", cursive;
  color: black;
  font-size: 23px;
  transition-duration: 1s;
  cursor: pointer;
}

ul > li > a:hover {
  color: white;
  position: relative;
  bottom: 5px;
}

/*Body*/
.container {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, #2a1925, #651830, #ff425c);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.search-input {
  display: flex;
  margin: 5rem auto;
}
.searchbox {
  outline: none;
  border: 1px;
  padding: 0.5rem;
  width: 20rem;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.searchbox::placeholder {
  font-family: "Audiowide", cursive;
}

.searcBtn {
  border: 1px solid;
  padding: 0.5rem;
  width: 5rem;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  cursor: pointer;
  color: white;
  background-image: linear-gradient(to right, #2a1925, #651830, #ff425c);
}

.agent-container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  gap: 3rem;
  justify-content: center;
}

.agentbox {
  width: 270px;
  height: 350px;
  border: 1px solid white;
  border-radius: 20px;
  display: block;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.agentbox > img {
  height: 70%;
  width: 100%;
}

.agentbox > h1 {
  font-family: "Audiowide", cursive;
  color: white;
  text-align: center;
}

.agentbox > button {
  padding: 0.5rem;
  border-radius: 10px;
  margin: 10px auto;
  border: 1px solid;
  cursor: pointer;
  font-family: "Audiowide", cursive;
  display: flex;
  
}

.showdetails {
  position: absolute;
  width: 270px;
  height: 250px;
  border: 1px solid white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  top: 0.01rem;
  background: black;
  opacity: 0.7;
  flex-direction: column;
  display: none;
  left: 0.2px;
  
}

.showdetails > p {
  text-align: center;
  margin-top: 0.9rem;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  color: white;
  
}





.boxs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 0.9rem;
  
}

.box1,
.box2,
.box3,
.box4 {
  height: 50px;
  width: 50px;
  
  display: flex;
  flex-direction: column;
}

.box1 > img,
.box2 > img,
.box3 > img,
.box4 > img {
  height: 100%;
  width: 100%;
}

.box1 > p,
.box2 > p,
.box3 > p,
.box4 > p {
  color: white;
  font-size: 13px;
  text-align: center;
}

.fa-xmark {
  color: white;
  position: relative;
  left: 7rem;
  top: 0.5rem;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Document</title>
</head>
<body>
    <nav class="navbar">
        <div class="navlogo">
            <a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Valorant_logo.svg/2560px-Valorant_logo.svg.png" alt="#" height="30px" width="150px"></a>
            <p>-wiki</p>
        </div>
        <div class="navMenu">
            <ul class="navList">
                <li class="navItem">
                    <a href="/Valorant_wiki/home page/index.html">Home</a>
                </li>
                <li>
                    <a href="#">About Us</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    
    <div class="container">
        <div class="search-input">
            <input type="text" class="searchbox" placeholder="Search Agents...">
            <button class="searcBtn"><i class="fa-solid fa-magnifying-glass"></i></button>
         </div>
         <div class="agent-container">
           
            </div>
         </div>
         
        
    </div>
    
    <script src="app.js"></script>
</body>
</html>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading