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
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
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