Second Project

NAME: SATHAR DINESH
ROLL NO: 20261A05G6

WEB TECHNOLOGIES STATIC PAGES
WEBSITE TOPIC:
SOCIAL MEDIA WEBSITE
(INSTAGRAM)
HTML files:
Index.html
<!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>Instagram</title>
<link rel="icon" href="instagramlogo.png" />
<link rel="stylesheet" href="styles.css" />
</head>
<body bgcolor="white">
<div class="header">
<header>
<nav>
<ul>
<li><a href="index.html">🏠</a></li>
<li><a href="shopping.html">👜</a></li>
<li><a href="profile.html">🤵</a></li>
<li><a href="userlogin.html">️️</a></li>
<li>
<form>
<input type="search" name="search" placeholder="search users"
/>
</form>
</li>
</ul>
<li
style="
list-style: none;
color: white;
font-size: 50px;
text-align: center;
"
>
<em>Instagram</em>
</li>
</nav>
</header>
</div>
<div>
<table align="center">
<tr>
<td>
<img src="dinni-modified (1).png" alt="" height="140px" /><img
src="angela-modified.png"
alt=""
height="140px"
/><img src="dualipa-modified.png" alt="" height="140px" />
</td>
</tr>
<tr>
<td>joy_boy_dinni212 angela_yu dualipa</td>
</tr>
<tr>
<td>
<img src="dinni-modified (1).png" alt="" height="20px" />
<label for=""><strong>joy_boy_dinni212</strong></label>
</td>
</tr>
<tr>
<td>
<img src="ayanokoji.jpg" alt="" height="400px" width="400px" />
</td>
</tr>
<tr>
<td>
<img src="instagramicons.png" alt="" width="400px" />
</td>
</tr>
<tr>
<td>
<img src="dinni-modified (1).png" alt="" height="20px" />
<label for=""><strong>joy_boy_dinni212</strong></label>
</td>
</tr>
<tr>
<td>
<img src="dinni.jpg" alt="" height="400px" width="400px" />
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<img src="angela.png" alt="" height="20px" />
<label for=""><strong>angela_yu</strong></label>
</td>
</tr>
<tr>
<td>
<img src="angela.png" alt="" height="400px" width="400px" />
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</div>
</body>
</html>
Output:
Profile.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="profilestyle.css" />
</head>
<body>
<header>
<nav>
<ul>
<li>
<form>
/>
</form>
</li>
</ul>
<li
style="
list-style: none;
color: white;
font-size: 50px;
text-align: center;
"
>
<em>Instagram</em>
</li>
</nav>
</header>
</div>
<div style="top: 200px">
<span>
<img
src="dinni-modified (1).png"
alt=""
style="float: left; padding-right: 50px"
/></span>
<b>joy_boy_dinni212</b>
<input type="button" value="Edit Profile" />
<input type="button" value="️️" /><br /><br />

27 posts 139 followers 127 following<br /><br />
Prince Dinni<br />
</div>
<div id="highlight-circle" style="top: 400px">
Highlights<br />
<img src="highlight circle.png" alt="" width="100px" /><br />
new
<br /><br />
<hr width="500px" />
<br />
<u><h4>posts</h4></u>
<br />
<br />
<img class="post" src="dinni.jpg" alt="" /><br />
<img class="post" src="angela.png" alt="" /><br />
<img class="post" src="dualipa.png" alt="" /><br />
<img class="post" src="ayanokoji.jpg" alt="" /><br />
</div>
</body>
</html>
Output:
Userlogin.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="instagram-mockup">
<img src="instagrammockup.png" alt="" />
</div>
<div class="user-login">
<h1 id="h1-instagram"><em>Instagram</em></h1>
<table>
<tr>
<td>Email id</td>
<td><input type="email" placeholder="email address" /></td>
</tr>
<tr>
<form>
<td>Password</td>
<td><input type="password" placeholder="password" /></td>
</form>
</tr>
<tr>
<td>
<input type="submit" value="Log In" class="button" />
</td>
<td><input type="submit" value="Sign Up" class="button" /></td>
</tr>
</table>
<hr />
<table>
<tr>
<td>or</td>
<td><a href="https://www.facebook.com">sign up with
facebook</a></td>
</tr>
</table>
</div>
</body>
</html>
Output:
Shopping.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Instagram shopping</title>
</head>
<body align="center">
<header>
<nav>
<ul>
<li>
<form>
/>
</form>
</li>
</ul>
<li
style="
list-style: none;
color: white;
font-size: 50px;
text-align: center;
"
>
<em>Instagram</em>
</li>
</nav>
</header>
</div>
<table align="center">
<tr>
<td><img src="instagramlogo.png" alt="" height="100" /></td>
<td>
<h1><em>Instagram</em></h1>
</td>
</tr>
<tr>
<td><h3>My Cart</h3></td>
</tr>
<tr>
<td>Case1</td>
<td><img src="shopping1.png" alt="" />MRP:Rs.562</td>
</tr>
<tr>
<td>Case1</td>
<td><img src="shopping2.png" alt="" />MRP:Rs.438</td>
</tr>
<tr>
<td>Total Bill:</td>
<td>Rs.1000</td>
</tr>
</table>
pay using upi <a href="https://www.phonepe.com/"> Phone pe </a
><a href="https://pay.google.com/intl/en_in/about/"> Google pay </a
><a href="https://paytm.com/"> Paytm </a>
</body>
</html>
Output:
CSS files:
Styles.css
body{
background:#EEEEEE;
color:#B1B2FF;
font-size: 20px;
}
td{
padding:20px;
}
hr {
border-style: dotted none none;
border-color: grey;
border-width: 5px;
width: 20%;
}
a{
text-decoration: double;
color:grey;
}
.user-login{
position:absolute;
left:1200px;
top:100px;
}
.button{
background-color: #B1B2FF;
color: white;
padding:5px 15px;
font-size: 17px;
}
#h1-instagram{
padding-left:70px;
}
.header {
background-color: #b1b2ff;
left:0px;
right:0px;
}
nav ul {
display: flex;
justify-content: flex-end;
}
nav ul li {
color: white;
padding: 10px;
border: 50px;
list-style: none;
}
nav ul li a {
text-decoration: none;
}
Profile.css
div{
position: absolute;
left:700px;
}
#highlight-circle{
position:absolute;
left:700px;
top:200px;
}
.post{
height:400px;
}

Second Project

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Second Project

Uploaded by

Copyright:

Available Formats

NAME: SATHAR DINESH

ROLL NO: 20261A05G6

<input type="button" value="️️" /><br /><br />

You might also like