https://github.com/zyx-0314/wd-seatwork-3

https://github.com/zyx-0314/wd-seatwork-3

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/zyx-0314/wd-seatwork-3
• Owner: zyx-0314
• Created: 2024-06-04T07:49:58.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-06-22T07:47:58.000Z (7 months ago)
• Last Synced: 2024-06-22T17:49:21.199Z (7 months ago)
• Language: CSS
• Size: 4.34 MB
• Stars: 4
• Watchers: 1
• Forks: 22
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        










  

    

  

  
Seatwork 3: Footer & Header





  This is for demonstrating skills in HTML and CSS with Multiple Pages, Effects and Container Manipulations. Providing a Different Versions of Headers and Footers.






![](https://visit-counter.vercel.app/counter.png?page=zyx-0314/WD-Seatwork-3)

---







  Table of Contents

  


    


      Overview

      


        


          Key Components

        

        


          Technology

        

      

    

    


      Rules, Practices and Principles

    

    


      Resources

    

  


---

## Overview

Project demonstrate the coding of HTMl and CSS in different kinds of headers and footers in addition of animations. This is to have hands-on experience in coding and having an actual output.

### Key Components

- Header Animation

  - Hover Effect

  - Active Effect

  - Multi Layer Domino Effect

  - Not Effect

### Technology

![HTML](https://img.shields.io/badge/HTML-E34F26?style=for-the-badge&logo=html5&logoColor=white)

![CSS](https://img.shields.io/badge/CSS-1572B6?style=for-the-badge&logo=css3&logoColor=white)

## Rules, Practices and Principles

1. Always use `WD-` in the front of the Title of the Project for the Subject followed by your custom naming.

2. Do not rename any .html files; always use `index.html` as the filename.

3. Place Files in their respective folders.

4. All file naming are in camel case.

   - Camel case is naming format where there is no white space in separation of each words, the first word is in all lower case while the succeding words first letter are in upper followed by lower cased letters.

   - ex.: buttonAnimatedStyle.css

5. Use only `External CSS`.

6. Renaming of Pages folder names are a must, and relates to what it is doing or data it holding.

7. File Structure to follow below.

```

WD-ProjectName

└─ assets

|   └─ css

|   |   └─ style.css

|   └─ img

|   |   └─ fileWith.jpeg/.jpg/.webp/.png

|   └─ js

|       └─ script.js

└─ pages

|  └─ pageName

|     └─ assets

|     |  └─ css

|     |  |  └─ style.css

|     |  └─ img

|     |  |  └─ fileWith.jpeg/.jpg/.webp/.png

|     |  └─ js

|     |     └─ script.js

|     └─ index.html

└─ index.html

└─ readme.md

```

## Resources

| Title | Purpose | Link |

|-|-|-|

| Sample Title | Sample purpose would be here like this and this is the example of what it is. | trykolang.com |