appleweb.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <title>Apple copy</title>
    <link href="finalproject.css" rel="stylesheet" type="text/css">    
</head>
<body>
    <nav>
        <div class="menu">
            <ul>
                <li><a href="#"><i class="fa fa-apple"></i></a></li>
                <li><a href="#" class="menu-item">Mac</a></li>
                <li><a href="#" class="menu-item">iPad</a></li>
                <li><a href="#" class="menu-item">iPhone</a></li>
                <li><a href="#" class="menu-item">watch</a></li>
                <li><a href="#" class="menu-item">TV</a></li>
                <li><a href="#" class="menu-item">Music</a></li>
                <li><a href="#" class="menu-item">Support</a></li>
                <li><a href="#" id="search"><i class="fa fa-search"></i></a></li>
                <li><a href="#"><i class="fa fa-shopping-basket"></i></a></li>    
            </ul>
        </div>
    </nav>
    <div class="body">
        <h2 class="h2">
            A planet-size plan.
        </h2>
        <p class="p1">
            Apple is a carbon neutral company for good.
        </p>
        <p class="p2">    
            And by 2030, our products will be too.
        </p>   
    </div>
    <div class="button">
        <a href="#">Learn more</a>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
        crossorigin="anonymous">
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#search').click(function(){
                $('.menu-item').toggleClass('hide-item')
            })
        })
    </script>

</body>
</html>