index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <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>IndianCulture</title>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
    <header>
        <a href="#" class="logo">INDIAN CULTURE AND HERITAGE</a>
        <div class="toggle" onclick="toggleMenu();"></div>
        <ul class="menu">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#heritage">Heritage</a></li>
            <li><a href="#culture">Culture</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </header>
    <section class="banner" id="home">
        <div class="textBx">
            <h2>Welcome To <span>Incredible!ndia</span></h2>
            <h3>Oldest civilizations in the world</h3>
            <a href="#about" class="btn">Read More</a>
        </div>
    </section>
    <section class="about" id="about">
        <div class="heading">
            <h2>About India</h2>
        </div>
        <div class="content">
            <div class="contentBx w50">
                <h3>Why is India <color>Oldest Civilization</color> ?</h3>
                <p>According to reserch, <strong>"India's history and culture is dynamic, spanning back to the beginning of human civilization.
                    The history of India is punctuated by constant integration of migrating people with the diverse cultures that surround India.
                     By the end of the fourth millennium BC, India had emerged as a region of highly developed civilization"</strong></p>
            </div>
            <div>
                <p>India is one of the oldest civilizations in the world with a kaleidoscopic variety and rich cultural heritage.
                     It has achieved all-round socio-economic progress during the last 65 years of its Independence.</p>
            </div>
        </div>
    </section>
    <section class="services" id="heritage">
        <div class="heading white">
            <h2>Indian Heritage</h2>
            <p>Here are some heritage destiny of India, where you have to go. <a href="https://youtu.be/lK3oqU2WNY0">click here</a></p>
        </div>
        <div class="content">
            <div data-aos="flip-up" class="servicesBx">
                <img src="Taj.jpg" alt="">
                <h2>Tajmahal is symbol of love</h2>
                <p>An immense mausoleum of white marble, built in Agra between 1631 and 1648 by order of the Mughal emperor Shah Jahan in memory of his favourite wife, the Taj Mahal is the jewel of Muslim art in India and one of the universally admired masterpieces of the world's heritage.</p>
            </div>
            <div data-aos="flip-up" class="servicesBx">
                <img src="indiaget.jpg" alt="">
                <h2>India gate placed in delhi</h2>
                <p>India Gate, official name Delhi Memorial, originally called All-India War Memorial, dedicated to the troops of British India who died in wars fought between 1914 and 1919.The iconic India Gate, an arch gate made using sandstone,situated in the Rajpath area, Delhi.</p>
            </div>
            <div data-aos="flip-up" class="servicesBx">
                <img src="varansi.jpg" alt="">
                <h2>It is the city of lord shiva</h2>
                <p>Shri Kashi Vishwanath temple in Varanasi holds immense significance to the Hindus and is one of the most famous temples in India dedicated to Lord Shiva. The divine shrine stands tall on the Western bank of the holy river Ganga and is one of the twelve Jyotirlingas.</p>
            </div>
        </div>
    </section>
    <section class="work" id="culture">
        <div class="heading">
            <h2>Colours Of Culture</h2>
            <p>From splendid paintings to beautiful wood crafts and textiles, India resounds with a rich and unique culture.</p>
        </div>
        <div class="content">
            <div data-aos="flip-right" class="workBx">
                <p>The Indian culinary repertoire reflects the cultural diversity of the country. The term “Indian food” denotes a mélange of flavours from different parts of the country and showcases centuries of cultural exchange with the far corners of the world</p>
            </div>
            <div data-aos="flip-left" class="workBx">
                <p>The most important classical traditions of music in India are the Hindustani classical tradition which finds home in the northern and western parts of the country and the Carnatic classical tradition, which is practiced primarily in the southern parts of the country.</p>
            </div>
            <div data-aos="flip-right" class="workBx">
                <p>Considered to be the oldest dance and an inspiration to all other styles, Bharat Natyam, a temple dance of Tamil Nadu, is an enchanting performance that relates scenes from religious texts and myths. In a series of quick and complicated neat motions.</p>
            </div>
            <div data-aos="flip-left" data-aos-offset="100" class="workBx">
                <p>Festivals in India are a vibrant representation of the culture and ancient traditions of the country. The most prominent celebration is that of Diwali, which is popularly called the festival of lights. Like most festivals in the country, its story is rooted in myths, legends and religion.</p>
            </div>
        </div>
        <div class="heading white">
            <a href="https://indianculture.gov.in/" target="#" class="btn">View More</a>
        </div>
    </section>
    <section class="contact" id="contact">
        <div class="heading white">
            <h2>Feel free to send any suggetion</h2>
            <p>© Copyright sks!<br>
                <a href="mailto:sanjeevsinghkaushik662@gmail.com">sanjeevsinghkaushik662@gmail.com</a></p>
        </div>
    </section>


    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
        AOS.init({
            offset: 150,
            duration: 1000,
        });
    </script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://smtpjs.com/v3/smtp.js"></script>
    <script>
        addEventListener('scroll', function () {
            var header = document.querySelector('header');
            header.classList.toggle('sticky', scrollY > 0);
        });

        function toggleMenu() {
            var menuToggle = document.querySelector('.toggle');
            var menu = document.querySelector('.menu');
            menuToggle.classList.toggle('active');
            menu.classList.toggle('active');
        }
    </script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</body>

</html>