News Page


 <!DOCTYPE html>

<html lang="en">
<head>
    <meta name="Author" content="Dev Sumit">
    <title>News Page</title>
</head>
<style>
    *{
        margin: 0px;
        box-sizing: content-box;
    }

    body{
        background-color: rgb(239, 239, 239);
    }

    header{
        padding: 10px;
        color: indigo;
        background-color: white;
        padding-bottom: 5px;
        font-size: larger;
        font-family: laila;
    }

    nav{
        padding: 5px;
        background-color: indigo;
    }

    nav a{
        padding: 5px 20px;
        color: white;
        background-color: indigo;
        text-decoration: underline;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    aside{
        width: 19%;
        height: 50vh;
        margin: 10px 10px;
        padding: 10px;
        font-family: Calibri;
        float: right;
        background-color: white;
    }

    aside .news{
        width: 90%;
        padding: 10px;
        margin-top: 42vh;
        border-radius: 5px;
        background-color: rgb(239, 239, 239);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.241);
        align-items: center;
    }

    .news_input{
        width: 80%;
        padding: 5px;
        border-radius: 15px;
        border: none;
    }

    .send{
        width: 30px;
        float: right;
    }

    section{
        width: 77%;
        height: 100%;
        padding: 10px;
        margin: 10px;
        background-color: rgb(226, 226, 226);
    }

    section h2{
        padding: 10px 0 10px 35px;
        font-family: Arial, Helvetica, sans-serif;
    }

    article{
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
        background-color: white;
        font-family: 'Trebuchet MS';
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    }

    article h3{
        background-color: none;
    }

    article p{
        color: grey;
    }

    footer{
        background-color: indigo;
        padding: 5px;
        overflow: hidden;
    }

    footer h3{
        width: 100vw;
        padding: 5px;
        color: white;
        font-size: larger;
        font-family: 'Lucida Sans';
    }

    footer p{
        font-size: small;
        color: white;
        float: right;
    }

   

</style>
<body>
    <header>
        <h1>News</h1>
        <h5>Local and National News</h5>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">Archive</a>
        <a href="#">About</a>
    </nav>
   
    <aside>
        <h2>Be a news Reporter</h2>
        <p>If you see News happening, Send us a text.</p>

        <div class="news"> <input type="text" class="news_input" placeholder="Type Your News Here..."> <img src="send.png" alt="send button" class="send"></div>
    </aside>

    <section>
        <h2>Local News</h2>
        <article>
            <h3>Fire Fighter Rescue man for Building this is Local News</h3>
            <p>(Reporter Name, Date)</p>
            <p>This is The Fighter Detail text. This is The Story Of Fighter</p>
            <p>This is The Fighter Detail of Rescue of Man. This is The Story Of He is Rescued</p>
        </article>
        <article>
            <h3>New Library to be Built</h3>
            <p>(Reporter Name, Date)</p>
            <p>This is The Story text. This is Story text.</p>
            <p>This is The Story. This is The Story Text.</p>
        </article>
    </section>
    <section>
        <h2>National News</h2>
        <article>
            <h3>Snow Storm is making Travel Difficult</h3>
            <p>(Reporter Name, Date)</p>
            <p>This is the Story Storm. This is Story Distorial of Storm.</p>
            <p>This The Story part continued. This is The Story Text Continued.</p>
        </article>
        <article>
            <h3>Thousands are without Power</h3>
            <p>(Reporter Name, Date)</p>
            <p>This is the Story of not having Power. This is Story the story text continued.</p>
            <p>This The Story Bad Effect. This is The Story about Distorial of Economy.</p>
        </article>
    </section>
   
    <footer>
      <h3>Footer Information</h3>
      <p>© All Rights are Reserved to Sumit</p>
      <br>
      <p>Design and Developed by Sumit .S</p>
    </footer>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

College Profile

Image
  <! 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 > College Profile </ title > </ head > < style >     * {         padding : 0 ;         margin : 0 ;     }     nav {         width : 100vw ;         position : fixed ;         padding : 20px ;         text-align : right ;         background-color : white ;         box-shadow : 0 0 5px rgba ( 0 , 0 , 0 , 0.355 );     }     nav a {         padding : 8px ;         margin-right : 20px ;   ...
Read more

Semantict Tag

  <! 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 > Use Of Semantic Tags </ title > </ head > < style >     header {         background-color : pink ;         width : 100% ;         height : 20% ;     }     nav {         background-color : skyblue ;         width : 100% ;         height : 20% ;     }     aside {         background-color : pink ;         width : 40% ;         height : 42% ;         float : right ;     }     sect...
Read more