Plz help me out

THis is the source code of index.html

<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>colledge website</title>

<link rel="stylesheet" href="style.css">

<script src="https://kit.fontawesome.com/a980677539.js" crossorigin="anonymous"></script>
<section class="header">

   <nav class="navbar">

     <a href="index.html"> <img class="logo" src="images/logo.png" alt="knowledgehub"></a>

       

       <div class="list">

         

        <i class="fas fa-times"></i>

           

             <ul class="ul">

                                       

               <li class="li1"><a href="home.html" class="a1">HOME</a></li>

               <li class="li2"><a href="about.html" class="a2">ABOUT</a></li>

               <li class="li3"><a href="course.html" class="a3">COURSE</a></li>

               <li class="li4"><a href="blog.html" class="a4">BLOG</a></li>

               <li class="li5"><a href="contact.html" class="a5">CONTACT</a></li>

             </ul>

                          

       </div>

       

       </div>

       <i class="fas fa-bars"></i>    

    </nav>

    <div class="textbox">

        <h1>The World's Biggest University</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto et quis itaque consequatur ratione animi voluptates eveniet<br> facere, molestiae optio commodi accusantium quidem esse doloribus!Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br> Ea perspiciatis asperiores reprehenderit?</p><br><br>

        <a href="" class="hero-btn">Visit Us To Know More !</a>

    </div>

</section>

this is the style.css

@import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap’);

{

margin: 0;

padding: 0;

}

.header

{

height: 100vh;

width: 100vw;

background-image: url(images/banner.png);

background-position: center;

background-repeat: no-repeat;

background-size: cover;

opacity: 0.85;

}

.navbar

{

height: 15vh;

width: 100vw;

/* background-color: white;*/

display: flex;

flex-direction: row;

align-items: center;

justify-content:space-between;

}

.logo

{

height: 10vh;

width: 15vw;

margin-left: 0.5vw;

/* opacity: .75;*/

/* background-color: chocolate;*/

}

.list

{

height: 15vh;

width: 82vw;

/* background-color: violet;*/

margin-left: .5vw;

display: flex;

flex-direction: row;

}

nav .fa

{

}

.ul

{

height: 15vh;

width: 83vw;

/* background-color:turquoise;*/

list-style: none;

display: flex;

flex-direction: row;

align-items: center;

justify-content: space-evenly;

}

.a1,.a2,.a3,.a4,.a5

{

color: white;

text-decoration: none;

font-family: 'Poppins', sans-serif;

font-size: small;

font-weight: bold ;

}

.a5:hover

{

color:red;

font-family: 'Poppins', sans-serif;

font-size: large;

font-weight: bold;

}

.a1:hover

{

color:red;

font-family: 'Poppins', sans-serif;

font-size: large;

font-weight: bold;

}

.a2:hover

{

color:red;

font-family: 'Poppins', sans-serif;

font-size: large;

font-weight: bold;

}

.a3:hover

{

color:red;

font-family: 'Poppins', sans-serif;

font-size: large;

font-weight: bold;

}

.a4:hover

{

color:red;

font-family: 'Poppins', sans-serif;

font-size: large;

font-weight: bold;

}

.textbox

{

height:67vh;

width:85vw ;

/* background-color: seashell;*/

text-align: center;

margin-left: 15vw;

margin-top: 18vh;

/* color: white;*/

}

.textbox h1

{

font-size: 55px;

font-weight: 900;

color: black;

}

.textbox p

{

color: black;

font-size: medium;

font-weight: 500;

}

.hero-btn

{

text-decoration: none;

text-align: center;

border: 1px solid black;;

background: transparent;

color: black;

padding: 5px;

font-size: 25px;

font-weight: 200;

}

.hero-btn:hover

{

border: 1px solid red;

background: red;

color: white;

cursor: pointer;

}

@media (max-width:700px)

{

.textbox h1

{

    font-size: 20px;

}

.textbox p

{

    font-size: 15px;

    text-align: center;

}

}

i have put two icons from font awsome on my webpage…
now i want to hide this two icons before media query…
but i am not able to do it …

can anyone plz help me out ???

hi,
your question is not clear buddy.
if you are thinking to hide icons from width 0 to 700px
you can place inside @media(max-width:700px), because if you are not using the combination of min-width, then mix-width always starts from 0 width to upwards

@media (max-width:700px) {

    /* all code here that for 0 to 700px width */
    .fa-bars,
    .fa-bars::before,
    .fa-times,
    .fa-times::before {
        display: none;
    }
}

if you think to hide from width 500px to 700px

@media (min-width:500px) and (max-width:700px) {

    /* all code here that for 500px to 700px width */
    .fa-bars,
    .fa-bars::before,
    .fa-times,
    .fa-times::before {
        display: none;
    }
}