Laboratory Activity #9

Create a page that will tell something about yourself (personal, interests/hobbies, dreams/aspirations/goals, travels, food trip, etc).  Use also the picture to link to other pages about the related contents.

Place a menu in the image (something about yourself).  Apply what you have learned in Activity #8

The menu should tell something about yourself and all the entries associated with the menu should be displayed on the same page only.  The links on the pictures should be directed to other pages of your own choice.



Ex. HTML code in creating a navigation bar
<div class="image">
  <div class="container">
    <div class="topright">
      <a href="#home">Home</a>
      <a href="#hotpicks">Hot Picks</a>
      <a href="#items">Items</a>
      <a href="#about">About</a>
    </div>
  </div>
</div>

.image {
  /* The image used */
  background-image: url("place the image filename here");

  min-height: 380px;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* Needed to position the navbar */
  position: relative;}

/* Position the navbar container inside the image */
.container {
  position: absolute;
  margin: 20px;
  width: auto;}

/* The navbar */
.topright {
  overflow: hidden;
  background-color: #333;}

/* Navbar links */
.topright a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;}

.topright a:hover {
  background-color: #ddd;
  color: black;}