Responsive web design
Madhukar Kunam 
Port1_PA1-Madhukar-12048094.zipPRACASSN 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
Birthday
Placeholder for item description
Flower
Placeholder for item description
Magic Boxes
Placeholder for item description
Valentine
Placeholder for item description
Full Moon
Placeholder for item description
Christmas
Placeholder for item description
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
Bicycle
Placeholder for item description
Nomad
Placeholder for item description
Sentinels
Placeholder for item description
Tycoon
Placeholder for item description
Artisans
Placeholder for item description
Union
Placeholder for item description
Steam Punk
Placeholder for item description
PRACASSN 1/postcards.html
Malaysia
Placeholder for item description
Hong Kong
Placeholder for item description
Singapore
Placeholder for item description
Sydney
Placeholder for item description
Rockhampton
Placeholder for item description
Brisbane
Placeholder for item description
Melbourne
Placeholder for item description
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; }
