Struktur på sidan
Den här sidan är skapad i övningssyfte för slutprojektet i Folkuniversitetets webbutvecklingskurs. Skapad av Max Ihrén. VT 2024
Sidan innehåller både frontend- (HTML, CSS, JavaScript) och backend-teknik (PHP, SQL, MySQL/MariaDB ).
Alla filer:
Ocellaris_Hemsida O
├── index.php (Start sidan) O /`·.¸
│ o /¸...¸`:·
├── include (mapp för include filerna) ¸.·´ ¸ `·.¸.·´)
│ ├── header.php (Header) : © ):´; ¸ {
│ ├── footer.php (Footer) `·.¸ `· ¸.·´\`·¸)
│ ├── form-error.php (Error sida) `\\´´\¸.·´
│ └── 404.php (404 error sida)
│
├── css (mapp för CSS)
│ ├── boostrap.min.css (Bootstrap 5 bibliotek)
│ └── style.css (CSS för stilsättning. Template och min egen)
│
├── scss (mapp för SCSS)
│ └── bootstrap.scss (Custom stilsättning med SCSS för template)
│
├── img (mapp för bilder)
│ ├── carousel-1.webp, carousel-2.webp, carousel-3.webp (Bilder för carousel)
│ ├── product-header3.webp (Header background för dekorationer)
| ├── service-1.jpg, service-2.jpg, service-3.jpg (Bilder för produkt kategorierna)
│ ├── aquarium-front.webp (Akvarium bild)
│ ├── icons (Bilder för ikoner)
│ │ ├── icon-3.png (Ikon för fiskar)
│ │ ├── icon-5.png (Ikon för växter)
│ │ └── icon-6.png (Ikon för dekorationer)
│ └── products (mapp för produktbilder)
│ ├── d_01.webp ~ d_03.webp (Bilder på produkter > dekorationer)
│ ├── f_01.webp ~ f_18.webp (Bilder på produkter > fiskar)
│ └── p_01.webp ~ p_03.webp (Bilder på produkter > växter)
│
├── js (mapp för javascript)
│ ├── header.js (Javascript funktion för att byta aktiv sida på navbar)
│ └── main.js (Javascript funktioner för sidan. Det mesta inkluderat i template men också lite eget.)
│
├── lib (Javascript biblitek för olika tillägg)
│ ├── animate (Animering: animate.css)
│ ├── counterup (Animering: Räknar upp siffror)
│ ├── easing
│ ├── isotope (Datafilter för sortering av produkter)
│ ├── lightbox (Galleri funktion för bilder)
│ ├── owlcarousel (carousel på startsidan)
│ ├── parallax (Parallax effekten på sidan)
│ ├── waypoint
│ └── wow (Animering: Fade-Up)
│
├── contact.php (Kontakta Oss formulär)
├── contact-process.php (Skicka formulär för contact.php)
├── about.php (Om sidan)
├── products.php (Produkt sidan)
├── fishes.php (Fiskar)
├── plants.php (Växter)
├── decorations.php (Dekorationer)
├── order.php (Beställningsformulär)
├── order-process.php (Skicka beställningsformuläret för order.php)
└── LICENSE.txt (Lisens fil)
Källor:
- Hemsidan är skapad med Bootstrap 5 template (Themewagon - Gardener).
- Produktbilder på fiskar är alla tagna från Unsplash. https://unsplash.com
- Andra produktbilder är tagna från Creative common webbsidor: Pxhere, flickr, wikimedia commons.
- Ikoner för produkt kategorierna kommer från The Noun Project. https://thenounproject.com/