ANGLESMEDIDATION

 <!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>NavBar</title>
</head>
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght@200&display=swap" rel="stylesheet">


<!-- ICONS -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }

    .navBar {
        background-color: black;
        width: 60px;
        height: 100vh;
        align-items: center;
        position: absolute;
        transition: .5s;
        overflow: hidden;
        z-index: 10;
    }

    .navBar:hover,
    .navBar.active {
        width: 300px;
    }

    .logo {
        height: 60px;
        width: 300px;
        /* background-color: yellow; */
        display: flex;
        /* justify-content: center; */
        align-items: center;
        margin-top: 15px;
    }

    .logo img {
        position: relative;
        width: 40px;
        /* margin: auto; */
        left: 8px;
        cursor: pointer;
    }

    .brand {
        position: relative;
        left: 25px;
        color: white;
    }

    ul {
        /* background-color: orange; */
        position: relative;
        /* top: 60px; */
        width: 100%;
        left: 0;
    }

    li {
        position: relative;
        list-style: none;
    }

    li a {
        text-decoration: none;
        color: white;
        display: flex;
    }

    .icon {
        height: 60px;
        min-width: 60px;
        text-align: center;
        line-height: 60px;
    }

    .title {
        height: 60px;
        display: block;
        min-width: 60px;
        padding: 0 10px;
        text-align: start;
        line-height: 60px;
        white-space: nowrap;
    }

    li:hover {
        background-color: #2e9faF;
        /* background-color: #DB162F; */
    }

    #hamburger {
        position: absolute;
        height: 25px;
        width: 35px;
        /* background-color: black; */
        right: 2rem;
        top: 2rem;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        justify-content: space-between;
        z-index: 100;
    }

    .bar {
        height: 4px;
        border-radius: 3px;
        width: 100%;
        background-color: black;
        background-color: white;
    }

    @media (max-width: 1000px) {
        .navBar {
            left: -80px;
        }

        .navBar.active {
            width: 100%;
            left: 0;
        }

        .bar {
            background-color: #2e9faF;
        }

    }

    .container {
        background-image: url('https://images.wallpaperscraft.com/image/buddha_buddhism_meditation_147451_1440x900.jpg');
        height: 100vh;
        width: 100%;
        background-repeat: no-repeat;
        /* pointer-events: none; */
        background-position: center;
        background-size: cover;
        font-family: 'Montserrat', sans-serif;
        font-family: 'Poppins', sans-serif;
        overflow: hidden;
    }

    .container::before {
        position: absolute;
        content: '';
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        opacity: 0.7;

    }

    .heading {
        position: absolute;
        left: 190px;
        color: white;
        width: 400px;
        height: 200px;
        /* background-color: grey; */
        top: 50%;
        transform: translateY(-50%);
    }

    .colorSpan {
        color: red;
    }

    .heading h1 {
        font-size: 100px;
        line-height: 100px;
    }

    .button {
        height: 50px;
        overflow: hidden;
        width: 180px;
        outline: none;
        background-color: #2e9faF;
        color: black;
        border: none;
        border-radius: 25px;
        padding: 10px;
        top: 30px;
        position: relative;
        font-size: 22px;
        cursor: pointer;
        transition: 0.7s;
    }

    .btnLink {
        text-decoration: none;
        color: black;
        transition: 0.7s;
        font-weight: bold;
    }

    .button:hover {
        background-color: black;
    }

    .button:hover .btnLink {
        color: #2e9faF;
        transition: 0.7s;
    }

    @media (max-width: 1000px) {
        .heading {
            position: absolute;
            left: 50px;
            color: white;
            width: 200px;
            height: 200px;
            /* background-color: black; */
            top: 25%;
            transform: translateY(-50%);
        }

        .heading h1 {
            font-size: 60px;
            line-height: 60px;
        }

        .button {
            top: 20px;
            width: 150px;
            padding: 10px 15px;
        }

        .container::before {
            content: '';
            background-color: rgba(0, 0, 0, 0.7);
            opacity: 0.7;

        }
    }

    .banner {
        height: 100vh;
        width: 100%;
        /* background-color: red; */
        position: relative;

        /* overflow-x: hidden; */
    }

    .shape {
        height: 100%;
        width: 500px;
        /* background-color: yellow; */
        background-image: url('/img/patternPad.png');
        /* background-position: center; */
        background-size: cover;
        float: right;
    }

    .bannerHeading {
        height: 100vh;
        width: 740px;
        /* overflow: hidden; */
        /* background-color: blue; */
        display: inline-block;
        position: relative;
    }

    .colorCalm {
        /* color: #002142; */
        color: #2e9faF;
    }

    .quote {
        position: relative;
        height: 400px;
        width: 500px;
        display: inline-block;
        text-transform: uppercase;
        font-size: 70px;
        /* background-color: purple; */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 80px;

    }

    @media (max-width:1000px) {
        .banner {
            overflow: hidden;
        }

        .bannerHeading {
            width: 200px;
            height: 250px;
            display: inline-block;
            left: 25px;
            top: 50%;
            transform: translateY(-50%);
        }

        .shape {
            position: absolute;
            right: -400px;
            top: 0;
            overflow: hidden;
        }

        .quote {
            font-size: 40px;
            line-height: 40px;
            padding: 10px;
            width: 90%;
            height: 100%;
        }
    }

    .position {
        position: relative;
        top: 100px;
        /* background-color: red; */
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 50px;
        justify-content: space-around;
    }

    .box {
        display: flex;
    }

    .boxImg {
        height: 500px;
        /* border: 2px solid red; */
        width: 400px;
        /* background-color: blue; */
        display: flex;
        flex-direction: column;
        padding: 15px;
        margin: 7px;
        justify-content: center;
        align-items: center;
    }

    .boxImg img {
        width: auto;
        min-height: 250px;
    }

    .boxImg p {
        font-size: 20px;
        margin-top: 30px;
    }

    .benifit {
        font-size: 50px;
        margin-left: 60px;
    }

    @media (max-width:1000px) {
        .position {
            flex-wrap: wrap;
        }

        .box {
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .boxImg {
            width: 250px;
            height: auto;
        }

        .boxImg img {
            height: 200px;
            max-width: 330px;
        }

        .benifit {
            margin-left: 20px;
            font-size: 40px;
        }
    }

    .course {
        width: 90%;
        height: 100vh;
        /* background-color: blanchedalmond; */
        padding: 50px;
        position: relative;
        top: 100px;
        margin: auto;
        display: flex;
        justify-content: space-around;
    }

    .row {
        width: 50%;
        height: 400px;
        /* background-color: grey; */
        /* border: 2px solid rgb(67, 114, 55); */
    }

    .rowForm {
        /* background-color: salmon; */
        height: 400px;
        width: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    input,
    .btnSubmit {
        border-radius: 27px;
        outline: none;
        padding: 15px;
        font-size: 18px;
        border: none;
    }

    input {
        width: 300px;
        height: 50px;
        border: 1px solid black;
        padding: 20px;

    }

    .btnSubmit {
        cursor: pointer;
        width: 150px;
        margin-top: -50px;
        color: black;
        background-color: #2e9faF;
        font-weight: bold;
        transition: 0.7s;
    }

    .btnSubmit:hover {
        color: #2e9faF;
        background-color: black;
    }

    .inputFeild {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 200px;
    }

    form {
        /* background-color: red; */
        height: 300px;
        display: flex;
        width: 300px;
    }

    .rowTitle h1 {
        font-size: 45px;
    }

    .rowDescription {
        padding: 20px;
    }
    .course{
        height: auto;
        margin-bottom: 100px;
    }

    .rowDescription p {
        font-size: 25px;
        margin-top: 20px;
    }
    @media (max-width: 1000px){
        .course{
            /* background-color: red; */
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: auto;
            margin-top: -60px;
            flex-direction: column-reverse;
        }
        .rowTitle h1{
            font-size: 30px;
            margin-top: 20px;
        }
        input{
            width: 200px;
            height: 50px;
        }
        .inputFeild{
            /* background-color: orange; */
            width: 100%;
            height: 250px;
            justify-content: space-evenly;
            padding: 20px;
            margin-top: 10px;
        }
        .rowDescription{
            width: 250px;
            /* background-color: peru; */
            padding: 20px;
            height: 100%;
        }
        .rowForm{
            /* background-color: purple; */
            height: auto;
            max-width: 100vw;
            overflow:hidden ;
        }
        .rowDescription p{
            font-size: 18px;
            margin-bottom: 10px;
            /* background-color: palegreen; */
        }
        .rowDescription h1{
            margin-top: -10px;
        }
        .btnSubmit{
            margin-top: 10px;
        }
    }

    .footerBar{
        width: 100%;
        height: 230px;
        background-color: black;
        color: white;
        position: absolute;
        margin-top: 100px;
        /* overflow-x: hidden; */

    }
    footer{
        position: relative;
        background-color: rgb(133, 133, 116);
        display: flex;
        justify-content: center;
        align-items: center;
        /* position: absolute; */
        padding: 20px 50px;        
    }
    .pvt{
        font-weight: bold;
        margin-top: 20px;
        position: relative;
        margin-left: 20px;

    }
    .copywright p{
        font-size: 13px; 
        padding:20px 50px;
        position: relative;
        /* background-color: turquoise; */
    }
    h6{
        text-align: center;
        margin-top: 10px;
    }
    .social{
        color: white;
        text-align: center;
        padding: 20px;
        font-size: 10px;
        padding-bottom: 0px;
        margin-bottom: 10px;
    }
    .social .fas ,.fab{
        padding: 10px;
        font-size: 30px;
    }
    @media (max-width:1000px) {
        .footerBar{
            height: auto;
            margin-top: 200px;
            overflow: wrap ;
        }
    }
</style>

<body>
    <div class="navigation">
        <nav>
            <div class="hamburger" id="hamburger" onclick="toggle()">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
            <div class="navBar">
                <div class="logoHeading">
                    <div class="logo">
                        <img src="/img/logo (2).png" alt="logo">
                        <h2 class="brand">Angles</h2>
                    </div>
                </div>

                <ul>
                    <li><a href="#">
                            <span class="icon"><i class="fas fa-user"></i></span>
                            <span class="title">Log in</span>
                        </a></li>
                    <li><a href="#">
                            <span class="icon"><i class="fas fa-cog"></i></span>
                            <span class="title">Setting</span>
                        </a></li>
                    <li><a href="#">
                            <span class="icon"><i class="fas fa-shopping-cart"></i></span>
                            <span class="title">Products</span>
                        </a></li>
                    <li><a href="#">
                            <span class="icon"><i class="fas fa-question"></i></span>
                            <span class="title">Help</span>
                        </a></li>
                    <li><a href="#">
                            <span class="icon"><i class="fas fa-phone-alt"></i></span>
                            <span class="title">Contact</span>
                        </a></li>
                </ul>
            </div>
        </nav>
    </div>

    <div class="container">
        <div class="heading">
            <h1 class="mindfulness">MIND <br>F<span class="colorSpan">U</span>LNESS</h1>
            <button class="button"><a href="http://#" class="btnLink">Know More</a></button>
        </div>
    </div>

    <section>
        <div class="banner">

            <div class="bannerHeading">
                <h1 class="quote">Brilliant things happen in <span class="colorCalm">calm</span> minds.</h1>
            </div>


            <div class="shape">

            </div>
        </div>

        <section>
            <div class="position">
                <div class="benifit">
                    <h1>BENIFITS</h1>
                </div>
                <div class="box">
                    <div class="boxImg">
                        <img src="./img/position1.png" alt="">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ipsam architecto quae
                            repellat perspiciatis earum, voluptates rem delectus voluptate animi iure voluptas,
                            excepturi nisi repudiandae numquam sint esse! </p>
                    </div>
                    <div class="boxImg">
                        <img src="./img/position2.png" alt="">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ipsam architecto quae
                            repellat perspiciatis earum, voluptates rem delectus voluptate animi iure voluptas,
                            excepturi nisi repudiandae numquam sint esse! </p>
                    </div>
                    <div class="boxImg">
                        <img src="./img/position3.png" alt="">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ipsam architecto quae
                            repellat perspiciatis earum, voluptates rem delectus voluptate animi iure voluptas,
                            excepturi nisi repudiandae numquam sint esse! </p>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <div class="course">
                <div class="row rowForm">
                    <div class="rowTitle">
                        <h1>ENROLL NOW!</h1>
                    </div>
                    <form method="POST">
                        <div class="inputFeild">
                            <input type="text" placeholder="Name" name="name">
                            <input type="email" placeholder="E-mail" name="e-mail">
                            <div class="submitBtnDiv">
                                <button type="submit" class="btnSubmit">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="row rowDescription">
                    <div class="rowTitle">
                        <h1>WHY CHOOSE <span class="colorCalm">ANGLES</span> ?</h1>
                    </div>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque fuga illum nemo ut, eius aliquid modi quibusdam? Officia vero veniam optio autem, corporis, pariatur, illum aliquam sit sequi quidem quod Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime.</p>
                </div>
            </div>
        </section>
    </section>

    <section>
        <footer id="footerJS">
            <!-- <div class="footerBar">
                <h4 class="pvt">
                    ANGLES PVT LTD.
                </h4>
                <div class="copywright">
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis culpa magnam vero quo, explicabo incidunt quas iure veniam sequi, cumque est. Doloribus amet, veniam consequatur impedit quod, esse dolores soluta incidunt explicabo optio minima!</p>
                </div>
                <h6>
                    ALL RIGHTS RESERVED TO ANGLESMEDITATION.COM
                </h6>
                <div class="social">
                    <i class="fab fa-instagram"></i>
                    <i class="fas fa-paper-plane"></i>
                    <i class="fas fa-at"></i>
                    <i class="fab fa-facebook-f"></i>
                </div>
            </div> -->
        </footer>
    </section>










    <script>
        function toggle() {
            const navBar = document.querySelector('.navBar');
            navBar.classList.toggle('active')
        }

        const footerJS = document.getElementById('footerJS');
        footerJS.innerHTML = `<div class="footerBar">
                <h4 class="pvt">
                    ANGLES PVT LTD.
                </h4>
                <div class="copywright">
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis culpa magnam vero quo, explicabo incidunt quas iure veniam sequi, cumque est. Doloribus amet, veniam consequatur impedit quod, esse dolores soluta incidunt explicabo optio minima!</p>
                </div>
                <h6>
                    ALL RIGHTS RESERVED TO ANGLESMEDITATION.COM
                </h6>
                <div class="social">
                    <i class="fab fa-instagram"></i>
                    <i class="fas fa-paper-plane"></i>
                    <i class="fas fa-at"></i>
                    <i class="fab fa-facebook-f"></i>
                </div>
            </div>`

    </script>
</body>

</html>







Comments

Post a Comment

Popular posts from this blog

(Content) Welcome website background

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <style>     body {         color: beige;         background-color: black;         margin: 0px;         padding: 0px;              }         header::before{         content: "";         background: url('https://source.unsplash.com/random') no-repeat center center/cover;         position: absolute;         width: 100%;         height: 100%;         z-index: -1;            top: 0;         left: 0;       ...
Read more