pro 5

PHOTO EMBED

Wed Dec 18 2024 02:49:03 GMT+0000 (Coordinated Universal Time)

Saved by @akshva 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newspaper</title>
    <style>
        #container{
            width:95%;
            overflow:auto;
            margin:auto;
        }
        header{
            text-align: center;
            background-color: aquamarine;
        }
        nav ul{
            list-style-type:none;
            margin:0;padding:0;
            overflow:hidden;
        }
        nav li{
            float:left;
        }
        nav li a{
            text-decoration:none;
            text-align:center;
            padding:15px ;
        }
        nav li a:hover{
            background-color: aqua;
        }
        section{
            width:70%;
            margin:5px;
            float:left;
            padding:6px;
            border:solid 1pt black;
            background-color: burlywood;
        }

        aside{
           display:inline-block;
           margin:5px;
           padding:5px;
           width:25%;
            position: inherit;
            vertical-align:top;
            background-color: bisque;

        }
        figure{
            float:left;
            margin-right: 5px;
        }
        footer{
            text-align: center;
            font-weight:500;
            height:30px;
            background-color: rgb(131, 117, 131);
            width: 100%;
            font-size: larger;
        }

    </style>
</head>
<body>
    <div id="container">
        <header>
            <img src="TOI.png" width="500px"/>
            <nav role="navigation">
                <ul>
                    <li><a href="#">City</a></li>
                    <li><a href="#">world</a></li>
                    <li><a href="#">business</a></li>
                    <li><a href="#">tech</a></li>
                    <li><a href="#">Cricket</a></li>
                </ul>
            </nav>
        </header>

        <section>
            <h2>latest News</h2>
            <article>
                <h3>how cyclone done</h3>
                <figure>
                    <img src="cyclone.JPG" width="200px" />
                    <figcaption>CYCLONE</figcaption>
                </figure>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus aspernatur in earum cupiditate odit inventore aperiam iure quia ratione unde. Et voluptatem assumenda fugiat mollitia esse porro recusandae voluptatibus a!
            </article>
        </section>
        <section>
            <h2>latest News</h2>
            <article>
                <h3>how cyclone done</h3>
                <figure>
                    <img src="cyclone.JPG" width="200px" />
                    <figcaption>CYCLONE</figcaption>
                </figure>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus aspernatur in earum cupiditate odit inventore aperiam iure quia ratione unde. Et voluptatem assumenda fugiat mollitia esse porro recusandae voluptatibus a!
            </article>
        </section><section>
            <h2>latest News</h2>
            <article>
                <h3>how cyclone done</h3>
                <figure>
                    <img src="cyclone.JPG" width="200px" />
                    <figcaption>CYCLONE</figcaption>
                </figure>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus aspernatur in earum cupiditate odit inventore aperiam iure quia ratione unde. Et voluptatem assumenda fugiat mollitia esse porro recusandae voluptatibus a!
            </article>
        </section>
        <section>
            <h2>latest News</h2>
            <article>
                <h3>how cyclone done</h3>
                <figure>
                    <img src="cyclone.JPG" width="200px" />
                    <figcaption>CYCLONE</figcaption>
                </figure>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus aspernatur in earum cupiditate odit inventore aperiam iure quia ratione unde. Et voluptatem assumenda fugiat mollitia esse porro recusandae voluptatibus a!
            </article>
        </section>
        <aside>
            <hgroup>
                <h3> <a href="#">SOMETHING</a></h3>
                <h3> <a href="#">SOMETHING</a></h3>
                <h3> <a href="#">SOMETHING</a></h3>
            </hgroup>
            <figure>
                <img src="sucess1.JPG" width="260px"/>
            </figure>
            <figure>
                <img src="quotes2.JPG" width="260px"/>
            </figure>
            <figure>
                <img src="quotes 3.JPG" width="260px"/>
            </figure>
        </aside>
        </div>
        <footer>
            aksh|hey|bhkm
        </footer>
</body>
</html>
content_copyCOPY