├── .gitignore
├── package.json
├── accordions
├── index.html
└── styles.css
├── custom-switches
├── index.html
└── styles.css
├── auto-suggest
├── styles.css
└── index.html
├── smooth-scrolling
├── index.html
└── styles.css
├── scroll-animations
├── styles.css
└── index.html
├── README.md
└── index.html
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "dependencies": {
3 | "http-server": "^14.1.1"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/accordions/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Accordions
7 |
8 |
9 |
10 |
11 | Click to toggle
12 | This is some content!
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/custom-switches/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Custom Switches
7 |
8 |
9 |
10 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/accordions/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | margin: 0;
7 | }
8 |
9 | details {
10 | width: 300px;
11 | background-color: #f9f9f9;
12 | padding: 20px;
13 | border: 1px solid #ddd;
14 | font-size: 18px;
15 | }
16 |
17 | summary {
18 | cursor: pointer;
19 | font-size: 20px;
20 | font-weight: bold;
21 | }
22 |
23 | details[open] summary {
24 | color: #2196F3;
25 | }
26 |
--------------------------------------------------------------------------------
/auto-suggest/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | margin: 0;
7 | font-family: Arial, sans-serif;
8 | }
9 |
10 | /* Container for the input and datalist */
11 | .container {
12 | width: 300px; /* Set width for input container */
13 | display: block; /* Override the body's flex alignment */
14 | }
15 |
16 | input {
17 | padding: 10px;
18 | font-size: 18px;
19 | width: 100%; /* Ensures the input takes up full container width */
20 | box-sizing: border-box;
21 | }
--------------------------------------------------------------------------------
/auto-suggest/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Auto Suggest
7 |
8 |
9 |
10 |
11 |
12 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/smooth-scrolling/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Smooth Scrolling
7 |
8 |
9 |
10 |
15 |
16 |
17 |
20 |
21 |
22 |
25 |
26 |
27 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/scroll-animations/styles.css:
--------------------------------------------------------------------------------
1 | html {
2 | scroll-behavior: smooth;
3 | }
4 |
5 | /* Remove body margins */
6 | body {
7 | margin: 0;
8 | }
9 |
10 | /* Full viewport height for sections with centered content */
11 | section {
12 | display: flex;
13 | justify-content: center;
14 | align-items: center;
15 | height: 100vh;
16 | background-color: #f0f0f0;
17 | transition: background-color 0.6s ease-in-out;
18 | }
19 |
20 | /* Styling for headings */
21 | section h2 {
22 | font-size: 36px;
23 | margin: 0;
24 | transition: transform 0.6s ease, opacity 0.6s ease;
25 | opacity: 0;
26 | transform: translateY(30px);
27 | }
28 |
29 | /* Add margin for scroll snapping */
30 | section:nth-child(odd) {
31 | background-color: #ffcccb;
32 | }
33 |
34 | section:nth-child(even) {
35 | background-color: #d0e7ff;
36 | }
37 |
38 | /* Scroll-triggered animation */
39 | section:target h2 {
40 | opacity: 1;
41 | transform: translateY(0);
42 | }
--------------------------------------------------------------------------------
/smooth-scrolling/styles.css:
--------------------------------------------------------------------------------
1 | html {
2 | scroll-behavior: smooth;
3 | }
4 |
5 | /* Basic styling for sections */
6 | section {
7 | height: 100vh; /* Full viewport height */
8 | padding: 20px;
9 | font-size: 24px;
10 | display: flex;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
15 | /* Different background colors for each section */
16 | #section1 {
17 | background-color: lightcoral;
18 | }
19 |
20 | #section2 {
21 | background-color: lightseagreen;
22 | }
23 |
24 | #section3 {
25 | background-color: lightblue;
26 | }
27 |
28 | /* Styling for the navigation */
29 | nav {
30 | position: fixed;
31 | top: 10px;
32 | left: 10px;
33 | }
34 |
35 | nav a {
36 | display: block;
37 | margin-bottom: 10px;
38 | text-decoration: none;
39 | color: white;
40 | padding: 10px 20px;
41 | background-color: #333;
42 | border-radius: 5px;
43 | }
44 |
45 | nav a:hover {
46 | background-color: #555;
47 | }
--------------------------------------------------------------------------------
/scroll-animations/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Scroll Animations
7 |
8 |
9 |
10 |
11 |
17 |
18 |
19 |
20 | Welcome to Section 1
21 |
22 |
23 |
24 |
25 | Welcome to Section 2
26 |
27 |
28 |
29 |
30 | Welcome to Section 3
31 |
32 |
33 |
34 |
35 | Welcome to Section 4
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/custom-switches/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | margin: 0;
7 | }
8 |
9 | .switch {
10 | position: relative;
11 | display: inline-block;
12 | width: 60px;
13 | height: 34px;
14 | }
15 |
16 | .switch-input {
17 | opacity: 0;
18 | width: 0;
19 | height: 0;
20 | }
21 |
22 | .switch-slider {
23 | position: absolute;
24 | cursor: pointer;
25 | top: 0;
26 | left: 0;
27 | right: 0;
28 | bottom: 0;
29 | background-color: #ccc;
30 | transition: .4s;
31 | }
32 |
33 | .switch-slider:before {
34 | position: absolute;
35 | content: "";
36 | height: 26px;
37 | width: 26px;
38 | left: 4px;
39 | bottom: 4px;
40 | background-color: white;
41 | transition: .4s;
42 | }
43 |
44 | .switch-input:checked + .switch-slider {
45 | background-color: #2196F3;
46 | }
47 |
48 | .switch-input:checked + .switch-slider:before {
49 | transform: translateX(26px);
50 | }
51 |
52 | /* Accessibility outline for keyboard users */
53 | .switch-slider:focus-visible {
54 | outline: 2px solid #4CAF50;
55 | outline-offset: 2px;
56 | }
57 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HTML and CSS Examples
2 |
3 | This repository contains several examples demonstrating how to accomplish common UI tasks using just HTML and CSS, with minimal to no JavaScript. Each example is self-contained in its own folder, and includes an `index.html` and `styles.css` file for easy experimentation.
4 |
5 | ## Folder Structure
6 |
7 | The project is organized into the following folders, each containing a specific example:
8 |
9 | - **accordions**: Example of creating an accordion interface with only HTML and CSS
10 | 
11 | - **auto-suggest**: An auto-suggest input field implemented using the HTML `