Du ska i denna inlämningsuppgift ska du visa att du kan använda dig utav grundläggande HTML & CSS för att bygga upp en enklare hemsida. I denna uppgift kommer du dock få arbeta utifrån ett redan färdigt material. Sidorna ska skapas med enbart egenskriven css och utan ramverk.
Din hemsida ska marknadsföra det påhittade startup-företaget: "Plantify" . Plantify är en prenumerationstjänst för företag. Tjänsten innebär att man får sitt företags kontor inrett med växter med hjälp av experter från Plantify. Sedan betalar man en månadskostnad för att få nya växter levererade och placerade på kontoret varje månad eller vecka beroende på vilken prisplan man har valt.
Plantify revolutionizes the way you think about plants in an office environment. Plantify isn't just a a delivery service for plants, it's a delivery service for new ideas. Plantify makes it easy to keep your workplace fresh and oxygenated. A workplace that is a alive create ideas that live on.
Företaget har inte bestämt sig för någon bestämd färgprofil ännu så valet av färg är fortfarande upp till dig som skapar sidan. Färgvalet ska dock ha någon relation till växtriket. Företaget har en logga som ni ser till höger men färgerna är inte definitiva.
Hemsidan ska total ha 5 sidor varav alla sidor ska vara länkade till från förstasidan: index.html. Varje sida ska använda sig utav samma css-fil.
-
Sidan ska ha en header som presenterar företagets namn. Headern kan också innehålla en bild som på något sätt visar vad företaget gör och står för.
-
På förstasidan ska det finnas information om vad företaget gör.
-
Sidan ska ha navigation med länkar i denna ordning:
- Home
- Pricing
- Plant themes
- About Us
- Contact
-
Under "Pricing" ska en tabell ligga med de olika prisklasserna och vad de innebär. Du får strukturera tabellen valfritt bara all information finns tillgänglig i tabellen. Tabellen ska innehålla följande information:
| Standard | Premium | Exclusive |
|---|---|---|
| Watering not included | Watering included | Web-controlled watering system included |
| No change of dead plants, monthly plant change | Exchange of dead plants included, monthly plant change | Change of dead plants included, weekly plant exchange |
| Surveillence system for every plant. 24/7 support | ||
| Only locally grown plants |
-
Under Plant themes ska det finnas en lista eller tabell på vad de olika temana innebär (exempelteman nedanför, listan kan utökas efter vad man vill ha för teman):
- Aloha
- This rich theme includes exotic coconuts spilling all over the floor combined with palm trees that hang down and are always in the way of your workflow. This theme is very complicated, suitable for complex startups.
- Siberia
- Dead plants everywhere. Plants sprayed with white color to give that cold secluded look. Is your startups policy very coldhearted? This is the setting for you!
- Exotique Nordic
- A shitload of pine and spruce. Get that Norrlands inland-look in your office. Comes with a Christmas Decoration Extension Pack for the first 100 subscribers. (Bears not included).
- Aloha
-
Information under About Us:
-
Plantify revolutionizes the way you think about plants in an office environment. Plantify isn't just a a delivery service for plants, it's a delivery service for new ideas. Plantify makes it easy to keep your workplace fresh and oxygenated. A workplace that is a alive create ideas that live on.
-
Plantify started in Stockholm in 2016 by Steffe Stickling and Petronella, just Petronella.
-
-
Information under Contact us:
- Birger Jarlsgatan 5000
- Stockholm
- Tel: 08-13371337
- Facebook: Plantify, Twitter: @Plantify
- Ett formulär för att skicka mail till företaget ska även finnas på denna sida.
- Sidan är uppmärkt med semantisk HTML5 då alla element ska vara uppmärkta med HTML5-element så som
figure,asideocharticle. - Sidan ska valideras genom validatorn: https://validator.w3.org/ och ska inte innehålla några varningar eller errors.
- Din CSS-fil ska vara strukturerad så att den inte använder några
id-selektorer. Du ska alltså bara använda dig utav klasser. Du ska även ange för varje selektor i din CSS i en kommentar:- Vilken specificitet selektorn har.
- Om selectorn appliceras på flera olika element. D.v.s används klassen mer än en gång?
- Sidan ska till största del använda sig utav %, em samt rem. Tänk på rytmen och grids.
- Samtliga sidor ska ha en enhetlig design. Layouten ska inte skilja sig från sida till sida.
- Tabellen/tabellerna samt formuläret ska ha en custom styling.
- Sidan ska använda sig utav 2 custom fonts. En för headings och en för body text
Laddas upp på din GitHub Pages-sida och länkas till mig innan 23.59 den 2/12
