Scribd
Upload
2K views

Web Development Project

This document contains code for a basic static website on fashion. It includes 3 pages of HTML and CSS code. Page 1 contains the homepage layout and navigation menu. Page 2 contains a registration form. Page 3 displays gallery images that users can click to view larger versions. The website is designed and coded by a 3rd year B.Tech CSE student as a class project.

Uploaded by

manashri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2K views

Web Development Project

This document contains code for a basic static website on fashion. It includes 3 pages of HTML and CSS code. Page 1 contains the homepage layout and navigation menu. Page 2 contains a registration form. Page 3 displays gallery images that users can click to view larger versions. The website is designed and coded by a 3rd year B.Tech CSE student as a class project.

Uploaded by

manashri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 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>

You might also like