Scribd Logo
Carica

Benvenuto in Scribd!

  • Web Development Project

    Caricato da

    manashri
    389 visualizzazioni7 pagine
    BASIC WEB PAGE USING HTML AND CSS

    Copyright

    © © All Rights Reserved

    Formati disponibili

    DOCX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    BASIC WEB PAGE USING HTML AND CSS

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    389 visualizzazioni7 pagine

    Web Development Project

    Caricato da

    manashri
    BASIC WEB PAGE USING HTML AND CSS

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 7

    WEB DEVELOPMENT PROJECT:

    STATIC BASIC WEB PAGE CODE USING HTML TAGS


    AND CSS

    B.TECH CSE

    3RD YR
    PAGE 1.

    <!DOCTYPE html>

    <html>

    <head>

    <title>fashion</title>

    <style>

    body { background-image: url("pic1.jpg");

    background-size: cover;

    #div1

    width:400px;

    height: 200px;

    background:url("https://www.tipsnailbar.ca/wp-content/uploads/2015/09/fashion-logo.png");

    margin-left:400px;

    #div2

    width:300px;

    height: 300px;

    background:url(http://www.paperfashionstore.com/wpcontent/uploads/2019/04/PaperFashionLogo_800p
    x.png);

    background-size: 300px,300px;

    margin-left:100px;

    float:left;

    #ul2

    { list-style: none; }

    #ul2 li

    font-size:20px;

    float: left;

    background: linear-gradient(#d10ac7, #fc619c);


    margin-left:70px;

    width:130px;

    height:20px;

    padding: 20px;

    text-align: center;

    color:black;

    #ul2 li:hover {

    background: #C792C5;

    color: white;

    #div3

    width:500px;

    height: 270px;

    background:url(https://www.sccpre.cat/mypng/detail/53-533075_fashion-blogger-style-fashion-magazine-
    text-png.png);

    background-size: 500px,600px;

    float: right;

    </style>

    </head>

    <body >

    <ul id="ul2">

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

    <a href="form1.html"><li>REGISTRATION</li></a>

    <a href="gallery.html"><li>GALLERY</li></a>

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

    </ul>

    <div id="div1"> </div>

    <div id="div2"> </div>

    <div id="div3"> </div>

    </body> </html>
    PAGE 2.

    <!DOCTYPE html>

    <html>

    <head>

    <title>application</title>

    <style>

    #div1

    width:400px;

    height: 600px;

    border-style:solid;

    margin-left:400px;

    body{

    background-image:url(https://img.freepik.com/free-vector/colorful-memphis-design-background-
    vector_53876-81744.jpg?size=626&ext=jpg);

    background-size: cover; }

    background: linear-gradient(#d10ac7, #fc619c);

    font-size:20px;

    </style>

    </head>

    <body>

    <center>

    <hr>

    <h1> REGISTRATION FORM </h1> <hr> </center>

    <a href="fashion.html"> GO BACK </a>

    <form action="submit.html" method="get">

    <div id="div1">

    <pre>
    FIRST NAME :<input type="text" name="firstname">

    <br>

    LAST NAME :<input type="text" name="lastname">

    <br>

    RRN :<input type="text" name="RRN">

    <br>

    STREAM :<select name = "dropdown">

    <option value = "CSE" selected>CSE</option>

    <option value = "COMMERCE">COMMERCE</option>

    <option value = "BIO" selected>BIO</option>

    </select>

    <br>

    GENDER : <input type="radio" name="gender" value=" male" checked> Male<input type="radio"


    name="gender" value=" female"> Female<input type="radio" name="gender" value=" other"> Other <br>

    <br>

    PHONE NUMBER:<input type="text" name="phone number">

    <br>

    EMAIL ID :<input type="text" name="emailid">

    <br><br>

    User ID : <input type = "text" name = "user_id" />

    <br> <br>

    Password : <input type = "password" name = "password" />

    <br>

    <center><input type = "submit" name = "submit" value = "Submit" /></center> </pre>

    </div>

    </form>

    </body>

    </html>
    PAGE 3.

    <html>

    <head>

    <style>

    div.word {

    margin-left: 120px;

    width: 600px;

    div.gallery {

    margin: 30px;

    border: 1px solid #ccc;

    float: left;

    width: 200px;

    div.gallery:hover {

    border: 1px solid #777;

    div.gallery img {

    width: 100%;

    height: auto;

    div.desc {

    padding: 15px;

    text-align: center;

    </style>

    </head>

    <body>

    <div class="word">

    <img src="img1.jpg" alt="unavailable" width="600" height="200"> </div>

    <div class="gallery">

    <a target="_blank" href="img2.jpg">

    <img src="img2.jpg" alt="unavailable" width="600" height="400">


    </a>

    <div class="desc">click to view</div>

    </div>

    <div class="gallery">

    <a target="_blank" href="img3.jpg">

    <img src="img3.jpg" alt="unavailable" width="900" height="600">

    </a>

    <div class="desc">click to view</div>

    </div>

    <div class="gallery">

    <a target="_blank" href="img4.jpg"> <img src="img4.jpg" alt="unavailable" width="600" height="400">


    </a>

    <div class="desc">click to view</div>

    </div>

    <div class="gallery">

    <a target="_blank" href="img5.jpg">

    <img src="img5.jpg" alt="Northern Lights" width="600" height="400"> </a>

    <div class="desc">click to view</div>

    </div>

    </body>

    </html>

    Potrebbero piacerti anche