grid-template-areas

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: grid;

            /* call grid area with asign grid area name  */
            grid-template-areas:
                ' navbar navbar navbar'
                'section section aside'
                'footer footer footer';
        }

        nav ul {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid #000;
        }

        li {
            list-style: none;
            margin: 10px 15px;
            /* border: 2px solid #000; */
        }

        /* style css */
        #section {
            border: 2px solid #000;
            padding: 10px 15px;
        }

        #section h1 {
            text-align: center;
        }

        aside {
            border: 2px solid black;
            padding: 5px 15px;
            margin: 5px 10px;
        }

        /* name grid area for design layout */
        nav {
            grid-area: navbar;
        }

        #section {
            grid-area: section;
        }

        aside {
            grid-area: aside;
        }

        footer {
            grid-area: footer;
        }
    </style>
</head>

<body>
    <div class="container">
        <nav>
            <ul>
                <li>Home</li>
                <li>services</li>
                <li>contact us</li>
                <li>About Us</li>
            </ul>
        </nav>
        <section id="section">
            <h1>Learn Code With Esay Tutorial </h1>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed doloremque eum quas odio fugiat inventore
                voluptas asperiores nemo, reiciendis modi delectus esse iste numquam nulla? Saepe facere laboriosam, at
                quod minus laudantium possimus consequatur numquam illum consequuntur, nulla nemo. Porro alias eum atque
                quae accusamus ea magni quisquam a illum consequatur dolores aperiam, nostrum, possimus, numquam
                accusantium maxime blanditiis amet fugiat eos ullam exercitationem obcaecati quasi cupiditate modi.
                Omnis numquam labore nostrum reiciendis debitis in fugiat id deleniti blanditiis, quisquam possimus
                nulla animi sint ea neque aliquam nihil earum alias! Quasi vero aspernatur aut, corrupti reiciendis quis
                autem perferendis excepturi delectus nostrum possimus officia, quas rerum numquam. Praesentium
                voluptatem a earum modi ullam natus nobis doloribus magni. Aspernatur ipsam similique quasi animi minima
                velit id quae sapiente quidem, reiciendis molestias hic saepe quod sunt corrupti illo rerum beatae
                aperiam, commodi quis autem ex. Earum cumque aliquam laudantium dolore error consequuntur?</p>
        </section>
        <aside>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum ut porro earum laboriosam exercitationem
                quod consectetur quibusdam maxime enim quis aliquam delectus tempora consequatur, provident eaque
                dolorem fugit aut eveniet saepe necessitatibus explicabo obcaecati! Voluptatem praesentium officiis esse
                possimus a rerum, saepe totam, fuga id fugit dignissimos hic architecto. Veniam qui, earum in dolore
                natus nihil, eaque magnam ipsa saepe libero repellendus quam quidem voluptatum pariatur vero
                reprehenderit voluptas. Totam quia inventore vero eligendi tempora nihil cum magni tempore voluptates
                deleniti impedit nobis sint necessitatibus nemo iusto doloremque dolorem cupiditate, facere quod
                laboriosam. Maiores eius veniam, vitae recusandae saepe qui.</p>
        </aside>
        <footer>Copyright By Nazrul</footer>
    </div>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Loop In javaScript

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Loop In javaScript</title> </head> <body>     <h1>javaScript Loop</h1>     <p id="demo"></p>     <p id="demo1"></p>     <h1>hello </h1>     <script>         // for loop         // let i=0;         // for(i=0; i<10; i++){         //     console.log(i)         // }         // let friends = ["Avengers", "Lost in Space", "Strangers", "Dark", "Chilling Adventure of Sabrina", "Martian", "intastrastailer"]         // for (let index1 = 0; index1 < friends.length; index1++) {        ...
Read more

css grid 2

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>css grid</title>     <style>         .container {             display: grid;             grid-template-columns: repeat(3, 4fr);             /* grid-template-rows: repeat(8, 1fr); */             grid-template-rows: 2fr 4fr 2fr;             /* grid-column-gap: 1rem ;             grid-row-gap: 2rem; */             grid-gap: 1rem;                   }         .box {             background-color: rgb(236, 214, 15);       ...
Read more