Creating Photo Gallery Using HTML5 | Get Help In HTML Project



Requirement

Create a site structure for a home page that will inform people about various zoos in the Massachusetts area, This does not have to be limited to the Boston area, You are to have a banner image with an overlay that displays your name plus the words “Zoos to be Seen”. You must have a nav section that is contained in the header section. You are to have a page narrative that discusses the reasons for zoos and the benefits of maintaining zoos for both the animals and the people that visit. Your narrative must be extensive and fill a majority of the page. You must use fonts that are obtained from another source. You must use at least three HTML5 semantic elements in your page design. You must have links to at least 5 zoos in the Massachusetts area. All links must display a hover effect. You must have a footer that identifies you as the page author. You must have multiple images on the page that are mixed in with the text narrative. All content is to be displayed using CSS to control the appearance and functionality of the page. The CSS page must be external to the index page. The entire site/site structure must be submitted as one compressed folder.


Code Implementation

zoos.html

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>

	<div class="topnav">
		<a class="active" href="zoos.html">Home</a>
		<a href="gallery.html">Gallery</a>
	</div>
	
	<div class="hero">
		<img src="nlion1.jpg" alt="Snow" style="width:100%; height:200px; filter: blur(0px); -webkit-filter: blur(0px);">
		<div class="centered"><h1>Created By Realcode4you</h1><p><h3>Web Application Developer</h3></div>
	</div>
	
<form>
	<div class="main">
		<h1><center>Zoo's Area</center></h1>
		<!-- Portfolio Gallery Grid -->
		<div class="row">
			<div class="column">
				<div class="content">
					<a href="franklin.html">
						<img src="zoo-300x225.jpg" alt="Franklin Park Zoo" style="width:100%">
					</a>
					<h3>Franklin Park Zoo</h3>
					<p>The Franklin Park Zoo is a 72 acres (290,000 m2) zoo located in Boston, Massachusetts. 
						It is currently operated by Zoo New England, which also operates the Stone Zoo in Stoneham and...
						<a href="franklin.html" style="color:red">Read More</a></p>
				</div>
			</div>
			<div class="column">
				<div class="content">
					<a href="southwick.html">
						<img src="southwick-e1478289097832-750x350.jpg" alt="Southwick's Zoo" style="width:100%">
					</a>
					<h3>Southwick's Zoo</h3>
					<p>Southwick's Zoo is a 300-acre (120 ha), privately owned and operated, zoological park located in Mendon, Massachusetts, United States. 
						It was opened in 1963, and remains family-operated to...
						<a href="southwick.html" style="color:red">Read More</a></p>
				</div>
			</div>
			<div class="column">
				<div class="content">
					<a href="stone.html">
						<img src="Stone-Zoo-sign-completed.jpg" alt="Stone Zoo" style="width:100%">
					</a>
					<h3>Stone Zoo</h3>
					<p>Stone Zoo is a medium- to small-sized zoo of about 26 acres in Stoneham, Massachusetts, United States. 
						Founded in 1905, the zoo includes low-lying areas densely developed with smaller exhibits...
						<a href="stone.html" style="color:red">Read More</a></p>
				</div>
			</div>
			
			<div class="column">
				<div class="content">
					<a href="buttonwood.html">
						<img src="zoo-sign-300x296.jpg" alt="Buttonwood Park Zoo" style="width:100%">
					</a>
					<h3>Buttonwood Park Zoo</h3>
					<p>The Buttonwood Park Zoo, located in New Bedford, Massachusetts, United States, is a seven-acre zoo located in the 
						center of Buttonwood Park. It is owned and operated by the City of New Bedford,
						<a href="buttonwood.html" style="color:red">Read More</a></p>
				</div>
			</div>
		
		<!-- END GRID -->
		
		</div>

		<div class="content">
			<img src="/w3images/p3.jpg" alt="Bear" style="width:100%">
			<h3>Some Other Work</h3>
			<p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
			<p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
		</div>
	</div>
	</form>
	<div>
		<footer align=bottom>
			<center>
				<p>Posted by: Hege Refsnes</p>
				<p>Contact information: <a href="mailto:someone@example.com" style="color:white;">
				someone@example.com</a>.</p>
			</center>
		</footer>
	</div>
</body>
</html>

gallery.html

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="style.css" >
</head>

<body>
	<div class="topnav">
		<a href="zoos.html">Home</a>
		<a class="active" href="gallery.html">Gallery</a>
	</div>
<form>
	<h1><center>Zoo Gallery</center></h1>
<div class="galmain">
	<div class="gallery">
		<a target="_blank" href="11638.jpg">
			<img src="11638.jpg" alt="Animals" width="600" height="400">
		</a>
	</div>

	<div class="gallery">
		<a target="_blank" href="13728.jpg">
			<img src="13728.jpg" alt="Animals" width="600" height="400">
		</a>
	</div>

	<div class="gallery">
		<a target="_blank" href="583681-zoo-delhi-061217.jpg">
			<img src="583681-zoo-delhi-061217.jpg" alt="Animals" width="600" height="400">
		</a>
	</div>

	<div class="gallery">
		<a target="_blank" href="17883683_10158540603750344_7223141839558561923_n-700x933.jpg">
			<img src="17883683_10158540603750344_7223141839558561923_n-700x933.jpg" alt="Animals" width="600" height="400">
		</a>
	</div>
	
	<div class="gallery">
		<a target="_blank" href="activities251.jpg">
			<img src="activities251.jpg" alt="Animals" width="600" height="400">
		</a>
	</div>
	
	<div class="gallery">
		<a target="_blank" href="28468757_10160084470465344_1756993151435763478_n-700x753.jpg">
			<img src="28468757_10160084470465344_1756993151435763478_n-700x753.jpg" alt="Animals" width="600" height="400">
		</a>
	</div>
	
	<div class="gallery">
		<a target="_blank" href="29594862_10160237474900344_3564239168332707548_n-700x719.jpg">
			<img src="29594862_10160237474900344_3564239168332707548_n-700x719.jpg" alt="Animals" width="600" height="400">
		</a>
	</div>
	
	<div class="gallery">
		<a target="_blank" href="colchester-zoo.jpg">
			<img src="colchester-zoo.jpg" alt="Animals" width="600" height="400">
		</a>
	</div>
	
	<div class="gallery">
		<a target="_blank" href="delhi-zoo.jpg">
			<img src="delhi-zoo.jpg" alt="Animals" width="600" height="400">
		</a>
	</div>
	
	<div class="gallery">
		<a target="_blank" href="red-panda-bamboo-massachusetts-zoo-612x426.jpg">
			<img src="red-panda-bamboo-massachusetts-zoo-612x426.jpg" alt="Animals" width="600" height="400">
		</a>
	</div>
	
	<div class="gallery">
		<a target="_blank" href="ruth-emily-elephants.jpg">
			<img src="ruth-emily-elephants.jpg" alt="Animals" width="600" height="400">
		</a>
	</div>
	
	<div class="gallery">
		<a target="_blank" href="southwicks.web.jpg">
			<img src="southwicks.web.jpg" alt="Animals" width="600" height="400">
		</a>
	</div>
	
	<div class="gallery">
		<a target="_blank" href="zoo-inner_0.jpg">
			<img src="zoo-inner_0.jpg" alt="Animals" width="600" height="400">
		</a>
	</div>
	
</div>
</form>
	<div>
		<footer align=bottom>
			<center>
				<p>Posted by: Hege Refsnes</p>
				<p>Contact information: <a href="mailto:someone@example.com" style="color:white;">
				someone@example.com</a>.</p>
			</center>
		</footer>
	</div>
</body>
</html>


style.css


<style type="text/css">
body, html {
    height: 100%;
	font-family: Arial, Helvetica, sans-serif;
}
body {
	background-color: #f1f1f1;
	padding: 10px;
	}

.hero {
  position: relative;
  text-align: center;
  color: #ffff1a;
  margin-top:28px;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.topnav {
  background-color: #333;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

footer {
	position: fixed;
	display: block;
	background-color:#303030;
	color:white;
	position: bottom;
	left: 0;
	bottom: 0;
	width: 100%;   
	text-align: center;
	width: 100%;
	height: 70px;
	padding:2px;
	font-size:15px;
	font-weight:bold;
	}
   



.images	
	{
	float: left;
	width: 310px;
	height: 200px;
	margin: 3px;
	}
.images img	
	{
	transition: 1s;
	padding: 0px;
	width: 310px;
	height:200px;
	border: 1px solid #000;
	border-radius: 2px;
	}
.images img:hover 
	{
	filter:gyayscale(100%);
	transform:scale(1.1);
	}

li 
	{
	display: block;
	}
ul 
	{
	padding:10px;
	margin:10px;
	}
.row::after 	
	{
	content: "";
	clear: both;
	display: table;
	}
form
	{
	max-width: 90%;
	border:1px solid #f1f1f1;
	border-radius: 2px;
	padding:20px;
	margin:auto;
	color:black;
	margin-bottom:100px;
	}

img.sticky 
	{
	position: -webkit-sticky;
	position: sticky;
	float:right;
	top: 0;
	width: 450px;
	height:300px;
	}
	

	
* {
  box-sizing: border-box;
}


/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 40px;
  word-break: break-all;
}

.row {
  margin: 8px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

img {
	width:100%;
	height:150px;
}



div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 266px;
  border-radius:3px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: 200px;
  border-radius:2px;
}
.galmain {
  max-width: 100%;
  margin: 5px;
  margin-bottom:900px;
}


.previous {
  background-color: #f1f1f1;
  color: black;
  position:relative;
  float:left;
}

.next {
  background-color: #4CAF50;
  color: white;
  position:relative;
  float:right;
}



Thanks! I hope it may help you to create Gallery App. If you need any help related to HTML, CSS, JavaScript then please Contact Us at www.realcode4you.com or send your requirement details at:


realcode4you@gmail.com

And get instant help with an affordable prices.

4 views0 comments