Responsive web design
PRACASSN 1/business-hours.html
Opening Hours: |
|
| Mon - Thur | : 10:00 am to 4:00 pm |
| Fri | : 10:00 am to 1:00 pm, 2:00pm to 6:00pm |
| Sat | : 8:00 am to 4:00 pm |
| Sun | : Closed |
| Public Holidays | : Closed |
PRACASSN 1/greeting-cards.html
PRACASSN 1/Images/Floor_Plan.jpg
PRACASSN 1/Images/Greetng_Cards/GC1.jpg
PRACASSN 1/Images/Greetng_Cards/GC2.jpg
PRACASSN 1/Images/Greetng_Cards/GC3.jpg
PRACASSN 1/Images/Greetng_Cards/GC4.jpg
PRACASSN 1/Images/Greetng_Cards/GC5.jpg
PRACASSN 1/Images/Greetng_Cards/GC6.jpg
PRACASSN 1/Images/Logo.png
PRACASSN 1/Images/Playing_Cards/CD1.jpg
PRACASSN 1/Images/Playing_Cards/CD2.jpg
PRACASSN 1/Images/Playing_Cards/CD3.jpg
PRACASSN 1/Images/Playing_Cards/CD4.jpg
PRACASSN 1/Images/Playing_Cards/CD5.jpg
PRACASSN 1/Images/Playing_Cards/CD6.jpg
PRACASSN 1/Images/Playing_Cards/CD7.jpg
PRACASSN 1/Images/Postcards/PC1.jpg
PRACASSN 1/Images/Postcards/PC2.jpg
PRACASSN 1/Images/Postcards/PC3.jpg
PRACASSN 1/Images/Postcards/PC4.jpg
PRACASSN 1/Images/Postcards/PC5.jpg
PRACASSN 1/Images/Postcards/PC6.jpg
PRACASSN 1/Images/Postcards/PC7.jpg
PRACASSN 1/index.html
Welcome to House Of Cards
We sell all types of greeting cards, playing cards and post cards. Please visit our shop to buy our unique collection
Floor Plan
PRACASSN 1/mockup.html
Menu bar - font family - ArialPage body - font family - Arial
Welcome message in Heading 2
Misson statement in Heading 3 and emphasized
Floor Plan in heading 3
PRACASSN 1/nav.js
document.write(" <div class=\"navbar\">"); document.write(" <a class=\"logo\"><img class = \"logo-img\"src=\".\/Images\/Logo.png\"><\/a>"); document.write(" <a href=\"index.html\">Home<\/a>"); document.write(" <div class=\"dropdown\">"); document.write(" <button class=\"dropbtn\">Our Products "); document.write(" <i class=\"fa fa-caret-down\"><\/i>"); document.write(" <\/button>"); document.write(" <div class=\"dropdown-content\">"); document.write(" <a href=\"postcards.html\">Post Cards<\/a>"); document.write(" <a href=\"playing-cards.html\">Playing Cards<\/a>"); document.write(" <a href=\"greeting-cards.html\">Greeting Cards<\/a>"); document.write(" <\/div>"); document.write(" <\/div> "); document.write(" <a href=\"business-hours.html\">Business Hours<\/a>"); document.write(" <\/div>");
PRACASSN 1/playing-cards.html
PRACASSN 1/postcards.html
PRACASSN 1/Read Me.txt
Steps to launch the site. 1. Select index.html 2. Open in Chrome, Mozilla or IE 3. Navigate to different pages by clicking on the links. Further Changes: I have given a place holder to add the Image description and you can include your text as per your requirements. Below are the links I have used to complete the assignment. For image mapping https://www.image-map.net/ https://www.w3schools.com/ for image - map - area - coords https://stackoverflow.com/questions/22888028/how-to-make-html-navigation-bar-simple-without-server-side-programming
PRACASSN 1/style.css
/* Style the text inside the body */ .body { background-color: floralwhite; } body{ background-color: floralwhite; font-family: Arial, Helvetica, sans-serif; } /* Style the navigation bar */ .navbar { overflow: hidden; background-color: yellowgreen; font-family: Arial, Helvetica, sans-serif; } /* Style the links inside the navigation bar */ .navbar a { float: left; font-size: 16px; color: black; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change the color of links on hover */ .navbar a:hover { background-color: #ddd; color: black; } /* Add a color to the active/current link */ .navbar a.active { background-color: #4CAF50; color: white; } /* Style the company logo */ .logo { padding: 0px !important; } .logo-img { height: 48px; } /* Style the welcome message */ .welcome { text-align:center; color:black; } /* Style business hours page */ .businesshours { text-align: left; font-size: 30px; } /* Style image gallery in each item page */ div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: 135px; } div.desc { padding: 15px; text-align: center; } /* Style floor plan div */ .floorplan { text-align: center; border-top: 1px; border-top-color: black; border-top-style:solid; } /* Style floor image*/ .floorplan img { border: 1px; border-style: solid; border-color: black; border-radius: 100px; } .title { text-align: center; font-weight: bold; font-size: 18px; } /* The dropdown container */ .dropdown { float: left; overflow: hidden; } /* Dropdown button */ .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: black; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } /* Add a white background color to navbar links on hover */ .navbar a:hover, .dropdown:hover .dropbtn { background-color: white; } /* Dropdown content (hidden by default) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover { background-color: #ddd; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; }