Web Assignment 1 & 2

WEB TECHNOLOGIES
ASSIGNMENT #1
Submitted by:
Nasir Shahzad
SP22-BCS-077
Submitted to:
Sir Bakhtiar
PROJECT 1 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Share Your Travel Photos</title>
</head>
<body>
<header>
<h1>Share Your Travel Photos</h1>
</header>
<nav>
<ul>
<li><a href="#Descriptions">Descriptions</a></li>
<li><a href="#Reviews">Reviews</a></li>
<li><a href="#RelatedPhotos">Related Photos</a></li>
</ul>
</nav>
<section id="Descriptions">
</section>
<section id="Reviews">
</section>
<section id="RelatedPhotos">
<h2>Related Photos</h2>
<time>
<a href="related-square1-large.jpg" alt="Related Photo 1"
title="Related Photo 1">
<img src="Images/img1.jpg" alt="Related Photo 1" title="Related
Photo 1">
</a>
</time>
<br><br><br>
<time>
Photo 2" style="background-repeat: none; background-size: contain; width: 20vw;
height: 30vh;">
</a>
</time>
<time>
height: 30vh;">
</a>
</time>
<time>
height: 30vh;">
</a>
</time>
</section>
<div style="width: 99vw; border: 1px solid black; margin-top: 1rem; margin-
bottom: 1rem;">
</div>
<footer>
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>
<p>© 2024 Art Store. All rights reserved.</p>
</footer>
</body>
</html>
PROJECT 2 CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CRM Website</title>
</head>
<body>
<header>
<h1>Welcome to CRM Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section>
<h2>About Us</h2>
<article>
<h3>Our Mission</h3>
<p>We are dedicated to providing exceptional customer relationship
management services to our clients.</p>
</article>
<article>
<h3>Our Team</h3>
<p>Meet our team of dedicated professionals who are passionate about
delivering the best solutions for our clients.</p>
</article>
</section>
<section>
<h2>Services</h2>
<article>
<h3>CRM Solutions</h3>
<p>We offer a range of CRM solutions tailored to meet the unique
needs of our clients.</p>
</article>
<article>
<h3>Consulting</h3>
<p>Our experienced consultants provide expert guidance to help
optimize your CRM strategies.</p>
</article>
</section>
<section>
<h2>Location</h2>
<img src="Images/map.png" alt="Google Map Screenshot" title="Google Map
Screenshot" style="width: 30vw;">
</section>
<footer>
<p>© 2024 CRM Website. All rights reserved.</p>
</footer>
</body>
</html>
PROJECT 2 IMAGES:
PROJECT 3
<!DOCTYPE html>
<html lang="en">
<head>
<title>Art Store</title>
</head>
<body>
<header>
<h1>My Sample Art Store</h1>
<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>New Arrivals</h2>
<article>
<img src="Images/shoes.jpg" alt="New Arrivals Trainers"
title="New Arrivals" style="width: 20vw; height: 30vh;">
<p>Discover our latest collection of artworks.</p>
</article>
</section>
<section>
<h2>Featured Artists</h2>
<article style="display: inline-block;">
<img src="Images/art1.jpg" alt="Featured Artist 1"
title="Featured Artist John Smith" style="width: 20vw; display: inline-block;">
</article>
<img src="Images/art2.jpg" alt="Featured Artist 2"
title="Featured Artist John Smith" style="width: 20vw; height: 24vh;">
</article>

<img src="Images/art3.jpg" alt="Horse Art Paint" title="Featured
Artist John Smith" style="width: 20vw; height: 24vh;">
</article>
<p>Admire the unique style of artist John Smith.</p>
</section>
<section>
<h2>Popular Categories</h2>
<a href="#">Shoes</a>
<a href="#">Clothing</a>
<a href="#">Art</a>
<a href="#">Books</a>
</section>
<div style="width: 99vw; border: 1px solid black; margin-top: 1rem;
margin-bottom: 1rem;">
</div>
</main>
<footer>
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>
<p>© 2024 Art Store. All rights reserved.</p>
</footer>
</body>
</html>
ASSIGNMENT #2
Project 1
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="Chapter 3 - Project 1.css" />
</head>
<body>
<header>
<hgroup>
<h1>Share Your Travels</h1>
<h2>let us know where you've been</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">Description</a></li>
<li><a href="#">Related Photos</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</nav>
</header>
<article>
<section>
<h3>Description</h3>
<p class="line">Photo by Randy Connolly</p>
<p>This photo of Conservatory Pond in
<a href="http://www.centralpark.com/">Central Park</a> in
<a href="newyork.html">New York City</a> was taken on October
22, 2011 with a Canon EOS 30D camera.
</p>
<figure>
<a href="images/large-central-park.jpg"><img
src="images/central-park.jpg" alt="Central Park" title="Central Park"/></a>
<figcaption><em>Conservatory Pond in Central
Park</em></figcaption>
<div>
<p><span class="share"></span>Share:
<img src="images/social/email_16.png" alt="Email this to
someone" />
<img src="images/social/rss_16.png" alt="Syndicated
content" />
<img src="images/social/twitter_16.png" alt="Share this
on Twitter" />
<img src="images/social/facebook_16.png" alt="Share this
on Facebook" />
<img src="images/social/flickr_16.png" alt="See this on
Flickr" />
</p>
</div>
</figure>
</section>
<section>
<h3>Related Photos</h3>
<div>
<a href="images/related-large1.jpg"><img
src="images/related-square1.jpg" alt="related photo" title="related photo"
/></a>
/></a>
/></a>
</div>
</section>
<section id="reviews">
<h3>Reviews</h3>
<div>
<p class="byline">By Ricardo on <time>September 15,
2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<div>
<p class="byline">By Susan on <time>October 1,
2012</time></p>
<p>I love Central Park.</p>
</div>
</section>
</article>
<footer>
<p><a href="#">Home</a> | <a href="#">Browse</a> | <a
href="#">Search</a></p>
<p><em>Copyright © 2013 Share Your Travels</em></p>
</footer>
</body>
</html>
CSS:
h1, h2, h3, nav, footer {

font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;
}
body {
font-family: Georgia, Cambria, "Times New Roman", serif;
font-size: 100%;
background-color: rgb(33, 54, 66);
}
h1
{
font-size: 1.5rem;
}
h2
{
font-size: 0.75rem;
}
p
{
font-size: 1rem;
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0.5em;
margin-left: 0em;
letter-spacing: 1px;
}
nav
{
font-size: 1.125rem;
}
/* Style for the link */

a:link
{
font-weight: bold;
color: rgb(71, 179, 215);
}
a:visited
{
color: rgb(187,120,255);
}
a:hover {
background-color: rgb(255,255,204);
}
header, footer
{
color: white;
background-color: #3D6271;
margin-top: 0em;
margin-right: 4em;
margin-left: 4em;
}
hgroup
{
padding: 0.5em;
}
nav
{
background-color: rgb(61,98,113)
}
nav ul li
{
list-style: none;
display: inline;
}
nav
{
padding: 0.25em;
}
nav a
{
padding: 0.25em;
}
article
{
background-color: white;
margin-top: 1em;
margin-right: 4em;
margin-bottom: 1em;
margin-left: 4em;
padding: 0.5em;
}
.line
{
color: #728B96;
font-style: italic;
}
figcaption
{
color: #728B96;
font-style: italic;
}
/* Style for Figure */
figure
{
margin-top: 0.5em;
margin-right: 0em;
margin-left: 0em;
}
figure img
{
padding: 0.25em;
border: solid 1.5px #999999;
}
figure div
{
margin: 0.25em 0 2em 0;
padding: 0.5em;
width: 485px;
background-color: #9FAAB0;
border-radius: 4px;
background-repeat: repeat-x;
}
figure div p
{
font-size: 70%;
}
figure div img
{
padding: 0;
border: 0;
}
figure div p
{
margin: 0;
}
#reviews
{
margin-top: 1em;
}
#reviews div
{
border-bottom: dotted 1pt #999999;
}
#reviews p
{
margin: 0;
}
/* Style for footer */

footer
{
padding: 0.5em;
}
footer p
{
font-size: .875rem;
}
h3
{
font-size: 20px;
border-bottom: solid 1pt rgb(153, 153, 153);
margin: 0 0 0.5em 0;
}
Images
Project 2
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<title>Not a Real CRM</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="Chapter 3 -Project 2.css">
</head>
<body>
<header>
<nav id="firstMenu">
<ul>
<li><a href="#">Catalog</a></li>
<li><a href="#">Inventory</a></li>
</ul>
</nav>
<h1><img src="images/notacrm-logo.png" alt="logo"></h1>
<nav id="secondaryMenu">
<ul>
<li><a href="#">Contacts</a></li>
<li><a href="#">Orders</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Tasks</a></li>
<li><a href="#">Evaluation Copies</a></li>
</ul>
</nav>
</header>
<article id="mainContact">
<div>
<img src="images/profile-96x96.jpg">
<h2>Jack Smith</h2>
</div>
<section>
<h3>Personal Details</h3>
<p>
<em>Address:</em> 1 Microsoft Way<br>
<em>City:</em> Redmond<br>
<em>Region:</em> WA<br>
<em>Country:</em> USA<br/>
<em>Postal:</em> 98052-8300<br/>
</p>
<div class="act">
<ul>
<li><a href="#" class="Edit">Edit</a></li>
<li><a href="#" class="Flag">Flag</a></li>
</ul>
</div>
</section>
<section>
<h3>Contact</h3>
<p>
<em>Phone:</em> <a href="tel:+14258828080">+1 (425) 882-
8080</a><br/>
<em>Email:</em> <a
href="mailto:[email protected]">[email protected]</a>
</p>
<div class="act">
<ul>
<li><a href="#" class="Edit">Edit</a></li>
<li><a href="#" class="Flag">Flag</a></li>
</ul>
</div>
</section>
<section>
<h3>Sales Activity</h3>
<figure>
<img src="images/chart.png" alt="chart" title="sales chart"
/>
</figure>
</section>
</article>
<footer>
<p><a href="#">Home</a> | <a href="#">Catalog</a> | <a
href="#">Inventory</a></p>
<p id="copyright">Copyright © 2013 Not a Real CRM</p>
</footer>
</body>
</html>
CSS:
h1, h2, h3, nav, footer, .actions
{
}
body
{
font-size: 100%;
background-color: whitesmoke;
background-image:
url(images/background-pattern.png);
}
h2
{
}
h3
{
font-size: 1.125em;
border-bottom: solid 1pt #999999;
margin-top: 0em;
margin-right: 0em;
margin-left: 0em;
}
p
{
font-size: 1em;
}
a:hover
{
background-color: #FFFFCC;
}
a:visited
{
color: #BB78BB;
}
a:link
{
font-weight: bold;
color: #47B3F7;
}
a[href^="mailto"] {
background: url(images/email.png) no-repeat 0 3px;
padding-left: 1em;
}
a[href^="tel"]
{
background: url(images/call.png) no-repeat 0 3px;
padding-left: 1em;
}
/* Style for header and navigation */
header
{
background-image: url(images/header-background.png);
background-repeat: repeat;
}
h1
{
padding-left: 6em;
}
nav#firstMenu
{
background-color: #283649;
font-size: 0.85em;
text-align: right;
padding-right: 6em;
}
nav#secondaryMenu
{
background-color: #DAE1E8;
font-size: 1em;
padding-left: 6em;
}
nav ul li
{
list-style: none;
display: inline;
}
nav
{
padding: 0.50em;
}
nav a
{
padding: 0.25em;
}
/* Style for section */

article>div
{
text-align: center;
margin-top: 1.5em;
margin-right: 6em;
margin-left: 6em;
}
section
{
margin-top: 1em;
margin-right: 6em;
margin-bottom: 1em;
margin-left: 6em;
border: solid 1pt black;
article>div img
{
padding: 0.5em;
margin-top: 1em;
}
section h3
{
color: mintcream;
padding: 0.5em;
background-image: url(images/header-background.png);
background-repeat: repeat;
}
section p
{
margin-left: 0.5em;
}
section em
{
color: #828275;
}
/*act style */
div.act ul li
{
list-style: none;
display: inline;
}
div.act
{
font-size: 0.75em;
padding: 0.5em;
margin-top: 1em;
}
div.act a
{
background-color: #DAE1E8;
padding-top: 0.1em;
padding-right: 1em;
padding-bottom: 0.1em;
padding-left: 2em;
border: solid 1px #999999;
border-radius: 4px;
margin-right: 0.5em;
}
.Edit
{
background: url(images/edit.png) no-repeat;
background-position: 0.250em 0.150em;
}
.Flag
{
background: url(images/flag.png) no-repeat;
background-position: 0.250em 0.150em;
}
/* Style for footer */

footer
{
margin-top: 1em;
margin-right: 6em;
margin-bottom: 1em;
margin-left: 6em;
padding: 0.5em;
}
footer p
{
color: mintcream;
font-size: 0.875em;
Images
Project 3
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<title>Hypothetical Art Store</title>
<link href="http://fonts.googleapis.com/css?family=Six+Caps"
rel="stylesheet" type="text/css">
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="Chapter 3 -Project 3.css" />
</head>
<body>
<header>
<h1>Hypothetical Art Store</h1>
<h2>Super cool tagline will go here</h2>
</header>
<article>
<h2>Under Construction</h2>
<p>Our website will be live in</p>
<p id="time">4 years, 3 months, and 2 days</p>
<footer><a href="mailto:[email protected]">Contact Us</a>

<img src="images/social/email_16.png" alt="Email this to
someone" />
<img src="images/social/rss_16.png" alt="Syndicated content" />
<img src="images/social/twitter_16.png" alt="Share this on
Twitter" />
<img src="images/social/facebook_16.png" alt="Share this on
Facebook" />
<img src="images/social/flickr_16.png" alt="See this on Flickr"
/></footer>
</article>
</body>
</html>
CSS:
h1, h2, h3, nav, footer, .actions
{
}
body
{
font-size: 100%;
background: #150b09 url(images/art-background4.jpg) no-repeat;
background-size: cover;
}
header
{
margin-left: 8rem;
width: 18rem;
height: 6rem;
padding: 1rem;
}
header h2
{
font-size: 0.75rem;
}
header h1
{
font-family: 'Six Caps', sans-serif;
font-size: 3rem;
}
article
{
background-color:rgba(255,255,255,0.5);
margin-top: 6rem;
margin-right: 0rem;
margin-bottom: 0rem;
margin-left: 8rem;
width: 30rem;
}
article p
{
padding-top: 2rem;
padding-right: 1rem;
padding-bottom: 0rem;
padding-left: 1rem;
font-size: 1.4rem;
font-weight: bold;
}
article h2
{
padding: 1rem;
font-size: 1.5rem;
}
article p#time
{
color: white;
margin: 1rem;
padding: 1rem;
font-size: 1.2rem;
font-weight: bold;
width: 19rem;
}
article footer
{
background-color:#EFEFEF;
padding: 1.5rem 1rem;
}
a[href^="mailto"]
{
background: url(images/email.png) no- repeat 0 5px;
padding-left: 1.25em;
border-bottom: dotted 1pt black;
text-decoration: none;
Image

Web Assignment 1 & 2

Uploaded by

Copyright:

Available Formats

Web Assignment 1 & 2

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

Web Assignment 1 & 2

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGIES

<article style="display: inline-block;">

h1, h2, h3, nav, footer {

/* Style for the link */

/* Style for Figure */

/* Style for footer */

/* Style for header and navigation */

/* Style for section */

/* Style for footer */

You might also like