Scribd Logo
Upload

Welcome to Scribd!

  • 2 views

    Claass

    Uploaded by

    Barnabás Klemens
    This document contains the code for a responsive webpage. It includes CSS styles for the header, navigation bar, and media queries. The navigation bar changes from horizontal to vertical on smaller screens to adapt to different screen sizes. The styles also make the navigation links display as blocks on small screens and inline on larger screens.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Claass

    Uploaded by

    Barnabás Klemens
    2 views3 pages
    This document contains the code for a responsive webpage. It includes CSS styles for the header, navigation bar, and media queries. The navigation bar changes from horizontal to vertical on smaller screens to adapt to different screen sizes. The styles also make the navigation links display as blocks on small screens and inline on larger screens.

    Original Description:

    Original Title

    claass

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains the code for a responsive webpage. It includes CSS styles for the header, navigation bar, and media queries. The navigation bar changes from horizontal to vertical on smaller screens to adapt to different screen sizes. The styles also make the navigation links display as blocks on small screens and inline on larger screens.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    2 views3 pages

    Claass

    Uploaded by

    Barnabás Klemens
    This document contains the code for a responsive webpage. It includes CSS styles for the header, navigation bar, and media queries. The navigation bar changes from horizontal to vertical on smaller screens to adapt to different screen sizes. The styles also make the navigation links display as blocks on small screens and inline on larger screens.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 3

    <!

    DOCTYPE html>

    <html>

    <head>

    <title>Responsive Webpage</title>

    <style>

    /* Common styles */

    body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

    header {

    background-color: #333;

    color: #fff;

    padding: 20px;

    text-align: center;

    nav ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background-color: #f2f2f2;

    nav li {

    float: left;

    }
    nav li a {

    display: block;

    color: #333;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

    /* Media queries for responsiveness */

    @media screen and (max-width: 600px) {

    nav li {

    width: 100%;

    text-align: center;

    nav li a {

    display: inline-block;

    /* Larger screen styles */

    @media screen and (min-width: 601px) {

    nav ul {

    overflow: visible;

    nav li {

    float: left;

    width: auto;

    }
    nav li a {

    display: inline-block;

    </style>

    </head>

    <body>

    <header>

    <h1>Responsive Webpage</h1>

    </header>

    <nav>

    <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">About</a></li>

    <li><a href="#">Services</a></li>

    <li><a href="#">Contact</a></li>

    </ul>

    </nav>

    <section>

    <h2>Welcome to our Website</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat metus nec finibus
    vehicula. Mauris elementum scelerisque sem vitae rhoncus. Sed consectetur, velit in tincidunt
    bibendum, libero risus interdum metus, eget luctus erat mauris vel ipsum.</p>

    </section>

    </body>

    </html>

    You might also like