Scribd
Upload
41 views27 pages

Web Assignment 1 & 2

The document contains code for a website called Share Your Travels. It includes HTML code to create the structure and layout of the pages, with sections for a description, related photos, and reviews. It also includes CSS code to style elements like headings, navigation, and footer. The HTML code contains headings, paragraphs, images, and other elements to display travel photos and allow users to share descriptions and reviews.

Uploaded by

Nasir Bhotta
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
41 views27 pages

Web Assignment 1 & 2

The document contains code for a website called Share Your Travels. It includes HTML code to create the structure and layout of the pages, with sections for a description, related photos, and reviews. It also includes CSS code to style elements like headings, navigation, and footer. The HTML code contains headings, paragraphs, images, and other elements to display travel photos and allow users to share descriptions and reviews.

Uploaded by

Nasir Bhotta
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/ 27

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>
<a href="related-square2-large.jpg" alt="Related Photo 2"
title="Related Photo 2">
<img src="Images/img2.jpg" alt="Related Photo 2" title="Related
Photo 2" style="background-repeat: none; background-size: contain; width: 20vw;
height: 30vh;">
</a>
</time>
<time>
<a href="related-square3-large.jpg" alt="Related Photo 3"
title="Related Photo 3">
<img src="Images/img3.jpg" alt="Related Photo 3" title="Related
Photo 3" style="background-repeat: none; background-size: contain; width: 20vw;
height: 30vh;">
</a>
</time>

<time>
<a href="related-square3-large.jpg" alt="Related Photo 3"
title="Related Photo 3">
<img src="Images/img4.jpg" alt="Related Photo 3" title="Related
Photo 3" style="background-repeat: none; background-size: contain; width: 20vw;
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>&copy; 2024 Art Store. All rights reserved.</p>
</footer>
</body>
</html>
PROJECT 2 CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>&copy; 2024 CRM Website. All rights reserved.</p>
</footer>
</body>
</html>

PROJECT 2 IMAGES:
PROJECT 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Art Store</title>
</head>
<body>
<header>
<h1>My Sample Art Store</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<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>
<article style="display: inline-block;">
<img src="Images/art2.jpg" alt="Featured Artist 2"
title="Featured Artist John Smith" style="width: 20vw; height: 24vh;">
</article>

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


<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>&copy; 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 href="images/related-large2.jpg"><img
src="images/related-square2.jpg" alt="related photo" title="related photo"
/></a>
<a href="images/related-large3.jpg"><img
src="images/related-square3.jpg" alt="related photo" title="related photo"
/></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 &copy; 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-bottom: 0.5em;
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
{
font-size: 0.875rem;
color: #728B96;
font-style: italic;

}
figcaption
{
font-size: 0.875rem;
color: #728B96;
font-style: italic;
margin-bottom: 0.5em;
}

/* Style for Figure */

figure
{
margin-top: 0.5em;
margin-right: 0em;
margin-bottom: 0.5em;
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: solid 1.5px #999999;
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;
margin-bottom: 1.25em;
}
#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">
<meta charset="utf-8">
<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="#">Home</a></li>
<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 &copy; 2013 Not a Real CRM</p>
</footer>

</body>
</html>
CSS:
h1, h2, h3, nav, footer, .actions
{
font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;
}
body
{
font-family: Georgia, Cambria, "Times New Roman", serif;
font-size: 100%;
background-color: whitesmoke;
background-image:
url(images/background-pattern.png);
}

h2
{
font-size: 1.125rem;
}
h3
{
font-size: 1.125em;
border-bottom: solid 1pt #999999;
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0.5em;
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
{
background-color: white;
text-align: center;
margin-top: 1.5em;
margin-right: 6em;
margin-bottom: 1.5em;
margin-left: 6em;

}
section
{
background-color: white;
margin-top: 1em;
margin-right: 6em;
margin-bottom: 1em;
margin-left: 6em;
border: solid 1pt black;

article>div img
{
border: solid 1.5px #999999;
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
{
background-color: #283649;
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
{
background-color: #283649;
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">
<meta charset="utf-8">
<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>
&nbsp;&nbsp;&nbsp;&nbsp;
<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
{
font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;
}
body
{
font-family: Georgia, Cambria, "Times New Roman", serif;
font-size: 100%;
background: #150b09 url(images/art-background4.jpg) no-repeat;
background-size: cover;
}

header
{
margin-left: 8rem;
background-color: white;
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
{
background-color:rgba(239,239,239,0.5);
padding: 1rem;
font-size: 1.5rem;
}

article p#time
{
color: white;
background-color:rgba(0,0,0,0.5);
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

You might also like