In: Computer Science
Design an activities page to make this web site complete. a.Use your imagination to create at least four activities. b.Organize these activities in a table. c.Some activities are free but some may charge some fee. d.Once again, the correct resort title and navigation menu bar shall be included.e.Include an image for each activity. Make sure the images’ size are the same.f.When mouse hovers on any image, its size will be enlarged.
ANSWER:-
GIVEN THAT:-
1)
Use a jpg/png type image of width 500px and height 500px
2)
Put this image link into <img> tag of href =" " attribute.
3)
save the file with extension .html(ex:-abc.html)
4)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pasific Trial Resort</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
.bodystyle {
border: 3px solid red;
Padding:20px;
margin-right:43%;
}
.heading{
font-size:40px;
}
.menu{
padding:15px;
}
.menu a{
padding-right:10px;
font-size:20px;
}
table, th, td {
border-style:inset;
margin:0px;
padding:0px;
}
th p{
float:left;
padding:0px;
}
table tr img:hover{
transform: scale(1.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
table tr td img{
height:450px;
width:400px;
}
</style>
</head>
<body>
<div class="bodystyle">
<!-- Heading wihch include heading and menu bar-->
<header>
<h3 class="heading">Pasific Trial Resort (Need
Modifications)</h3>
<div class="menu">
<a href="#">Home</a>
<a href="#">Yurts</a>
<a href="#">Activities</a>
<a href="#">Reservations</a>
</div>
<h2>Activites at Pacific Trails</h2>
</header>
<!-- Header end here-->
<!-- table start from here include image and title with
fee-->
<table width="100%" " border="0" cellpadding="5">
<tr>
<th><p>Pool-Free</p></th>
<th><p>Parasailing- $100</p></th>
</tr>
<tr>
<td align="center" valign="center" >
<!-- image size should be of width=500px and height= 500px-->
<img src="1.jpg" />
</td>
<td align="center" valign="center">
<!-- image size should be of width=500px and height= 500px-->
<img src="2.jpg" />
</td>
<tr>
<th><p>Golf-$20</p></th>
<th><p>Hiking- Free</p></th>
</tr>
<tr>
<td align="center" valign="center">
<!-- image size should be of width=500px and height= 500px-->
<img src="3.jpg" />
</td>
<td align="center" valign="center">
<!-- image size should be of width=500px and height= 500px-->
<img src="4.jpg" />
</td>
</tr>
</table>
<!-- table ends here-->
<!-- footer start here which include copyright and
link-->
<footer>
<i>Copyright © 2019 Pasific Trail
Resort</i></br>
<a
href=#><i>[email protected]</i></a>
</footer>
<!-- footer ends here-->
</div>
</body>
</html>