Scribd Logo
Upload

Welcome to Scribd!

  • 12 views

    Lab 4

    Uploaded by

    Debbie Robinson
    The document contains the code for two website templates - a basic template with header, navigation, sidebar, content, and footer sections and a landing page template with navigation bar, content area, and descriptive text. Both templates include the HTML and CSS code to display the web pages. The HTML establishes the structure and layout while the CSS controls colors, sizes, positions and other styling of the elements.

    Copyright:

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

    You might also like

    Lab 4

    Uploaded by

    Debbie Robinson
    12 views11 pages
    The document contains the code for two website templates - a basic template with header, navigation, sidebar, content, and footer sections and a landing page template with navigation bar, content area, and descriptive text. Both templates include the HTML and CSS code to display the web pages. The HTML establishes the structure and layout while the CSS controls colors, sizes, positions and other styling of the elements.

    Original Description:

    Original Title

    lab 4

    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
    The document contains the code for two website templates - a basic template with header, navigation, sidebar, content, and footer sections and a landing page template with navigation bar, content area, and descriptive text. Both templates include the HTML and CSS code to display the web pages. The HTML establishes the structure and layout while the CSS controls colors, sizes, positions and other styling of the elements.

    Copyright:

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

    Lab 4

    Uploaded by

    Debbie Robinson
    The document contains the code for two website templates - a basic template with header, navigation, sidebar, content, and footer sections and a landing page template with navigation bar, content area, and descriptive text. Both templates include the HTML and CSS code to display the web pages. The HTML establishes the structure and layout while the CSS controls colors, sizes, positions and other styling of the elements.

    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 11

    LAB 4

    Template 1:

    <!DOCTYPE html>

    <html>

    <head>

    <title>LAB 4</title>

    </head>

    <link rel="stylesheet" type="text/css" href="assignment.css">

    <body>

    <div class="container">

    <header><h1>HEADER</h1>

    </header>

    <nav>

    <h1>NAVIGATION BAR<h1>

    </nav>

    <section class="sidebar">

    <h1>SIDE BAR</h1>

    </section>

    <section class="content">

    <h1>CONTENT AREA</h1>

    </section>

    <footer class="footer">

    <h1>FOOTER<h1>

    </footer>

    </div>
    </body>

    </html>

    CSS:

    header{

    background-color: #E58E73;

    width: 960px;

    height:150px;

    border:thin;

    border-style:solid;

    nav{

    background-color: #FFC000;

    width: 960px;

    height:40px;

    border:thin;

    border-style:solid;

    .sidebar{

    background-color: #87FF2A;

    width: 300px;

    height:500px;

    float:left;

    border:thin;

    border-style:solid;

    .content{

    background-color: #FF5470;

    width: 656px;
    height:500px;

    float:left;

    border:thin;

    border-style:solid;

    .footer{

    background-color: #AF6E4D;

    width: 960px;

    height:200px;

    float:left;

    border:thin;

    border-style:solid;

    h1{

    text-align:center;

    }
    2nd Template:

    <!DOCTYPE html>

    <html>

    <head>

    <title>LAB 4</title>

    </head>

    <link rel="stylesheet" type="text/css" href="assignment.css">

    <body>

    <div class="main">

    <div class="nav">

    <h1>

    <a class="active" href=#l>Home</a>

    <a href="product.html">Products</a>

    <a href="about us.html">About Us</a>

    <a href="Careers.html">Careers</a>

    <a href="contact us.html">Contact Us</a>

    </h1>

    </div>

    <div class="mid">

    <center>

    <p><h2>
    START PAGE

    </p></h2>

    <p><h3>

    Template by Kiran Naz

    </p></h3>

    <button type="GET STARTED" class="registerbtn">GET STARTED</button>

    </center>

    </div>

    <div class="center">

    <p class="p1">

    Lorem Ipsum

    </p>

    <p class="p2">

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
    and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
    into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
    release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.

    </p>

    </div>

    </div>

    </body>

    </html>

    CSS:

    nav{
    background-color: #FF0000;

    width:100%;

    min-width:100%;

    max-width:100%;

    height:50px;

    color:#FFFFFF;

    h1

    color: #FFFFFF;

    .nav a:hover

    background-color: #CCCCCC;

    color: black;

    a{

    color: #FFFFFF;

    float:left;

    color: #FFFFFF;

    font-family: sans-serif;

    padding: 1px 1px ;

    text-decoration: none;

    font-size:18px;

    padding-left:100px;

    padding:15px;

    }
    .nav a.active {

    color: black;

    background-color:#FFFFFF;

    .mid{

    background-color:#FF0000;

    width:100%;

    min-width:100%;

    max-width:100%;

    height:400px;

    h1{

    font-size:60px;

    text-align:center;

    color: #000000;

    background-color: #FFFFFF

    h2{

    font-size:60px;

    text-align:center;

    color: #FFFFFF;

    padding-top:100px;

    h3{

    font-size:24px;

    color:#FFFFFF;
    padding-top:10px;

    margin-top:px;

    h4{

    font-size:20px;

    background-color:#000000;

    color:#FFFFFF;

    width:15%;

    height:12px;

    text-transform:capitalize;

    .registerbtn

    background-color: #000000;

    color: #FFFFFF;

    padding: 10px 10px;

    margin: 0px 0;

    border: none;

    cursor: pointer;

    width: 15%;

    font-size:20px;

    margin-left:10%;

    margin-right:10%;

    border-radius:5px;

    margin-top:10px;

    opacity:0.9;

    }
    .registerbtn:hover

    background-color:#000000;

    color: #FFFFFF;

    opacity: 0.8;

    .p1{

    font-size:26px;

    color: #000000;

    padding-left:50px;

    font-weight:500;

    font-style: normal;

    text-align: justify;

    font-size:45px;

    margin-right:0px;

    .p2{

    font-size:26px;

    color: #333333;

    padding-left:30px;

    font-weight:100;

    font-style: normal;

    text-align: justify;

    font-size:24px;

    margin-right:10px;

    .center{

    background-color:#FFFFFF;

    }
    .main{

    background-color: #FF0000;

    height:200px;

    width:100%;

    You might also like