Scribd Logo
Upload

Welcome to Scribd!

  • Task 1 Js

    Uploaded by

    Gorty Prasanna Srinivasan
    2 views3 pages

    Original Title

    task1js

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

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

    Task 1 Js

    Uploaded by

    Gorty Prasanna Srinivasan

    Copyright:

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

    ##### html page

    <!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>ui/ux</title>
    <link rel="stylesheet" href="styles/index.css">
    </head>
    <body>
    <nav class="navbar">
    <h1 class="logo">EI-Gadget's</h1>

    <ul class="link">
    <li class="item"><a href="./mobile.html">Mobile</a></li>
    <!-- <li class="item"><a href="#">Tablet</a></li>
    <li class="item"><a href="#">Laptop</a></li>
    <li class="item"><a href="#">Household Machines</a></li>
    <li class="item"><a href="#">Gaming</a></li> -->
    </ul>
    </nav>
    <div class="body">
    <h1 class="heading">EI-Gadgets</h1>
    <h4 class="bodyh4">Electronic Gadgets for daily use!!!</h4>
    <h7 class="h7">View your required gadgets and enjoy buying it :)</h7>
    </div>
    <!--
    <footer class="foot">
    <h1 class="head1">
    CONTACT DETAILS
    </h1>
    <H3 class="phn">PHONE NO: 8465321012</H3>
    <h3 class="email">EMAIL-ID: eigadgets@gmail.com</h3>
    </footer> -->
    </body>
    </html>

    styles>index.css
    ###index.css
    body{
    margin: 0;
    padding: 0;
    }
    .navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    background-color: black;
    color: aliceblue;
    }
    .link{
    list-style: none;
    text-decoration: none;
    display: flex;
    }
    .item{
    margin-left :2rem;
    text-decoration: none;
    }
    li {
    float: right;
    }
    li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    }
    li a:hover {
    background-color: #111;
    }
    body{
    background-image: url("../images/bgimg.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 20px;

    }
    .heading{
    position: absolute;
    left: 350px;
    font-size: 60px;
    }
    .bodyh4{
    position: absolute;
    left: 270px;
    top: 200px;
    font-size: 30px;

    }
    .h7{
    position: absolute;
    left: 200px;
    top: 290px;
    font-size: 30px;
    }
    /* h1 {
    float: right;
    }
    h1 a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 30px;
    }
    h1 a:hover {
    background-color: #111;
    } */

    You might also like