nexus.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nexus_task1</title>
    <link rel="stylesheet" href="./nexus.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="firstpg">
        <div class="nav container">
            <div class="shop">
                <h1>Ishara</h1>
                <h2>Made with love 🌴</h2>
            </div>
            <div>
                <ul>
                    <li><button id="story"><h2>Our story</h2></button></li>
                    <li><button id="contact" onclick="goToLink()"><h2>Be our Team</h2></button></li>
                    <li><button id="service"><h2>Our products</h2></button></li>
                </ul>
            </div>
    
        </div>
        <div class="main">
            <h1>Together we can create a world where business thrives in harmony with nature!</h1>
            <button id="view-products">View products</button>
    
    
        </div>
    </div>
    <div class="aboutuspg">
        <div class="heading">
            <h1>Our Story</h1>
        </div>
        <div class="story">
            <em>
                Frustrated with how society talks big about saving the environment through essays, art contests, 
                and climate change runs, but still uses plastics, wastes water, and pollutes,
                I decided it was time for action. This drive brought together a group of like-minded individuals, and that's how ISHARA,
                our line of eco-friendly products, was born.
            </em>
        </div>
    </div>

    <div class="view">
        <div class="carousel-container">
            <div class="carousel">
                <div class="carousel-item">
                    <img src="./bottle.png" >
                </div>
                <div class="carousel-item">
                    <img src="./cleaner.png">
                </div>
                <div class="carousel-item">
                    <img src="./toothbrush.png">
                </div>
            </div>
            <button class="prev" onclick="moveSlide(-1)">&#10094;</button>
            <button class="next" onclick="moveSlide(1)">&#10095;</button>
        </div>

    
    </div>

    
    <script src="./nexus.js" charset="UTF-8"></script>
</body>
</html>