├── Menu Design.mp4
├── README.md
├── index.html
└── style.css
/Menu Design.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bhargavtibadiya/Website-Menu/08957d310d8593aa62b5785f802b7267c8dba1ec/Menu Design.mp4
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Website-Menu
2 | Created Website Menu Design
3 |
4 | Skills :: HTML , CSS
5 |
6 |
7 | See the design video
8 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Document
9 |
10 |
11 |
12 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | *
2 | {
3 | margin: 0;
4 | padding: 0;
5 | text-decoration: none;
6 | list-style: none;
7 | font-family: "Open Sans",sans-serif;
8 | }
9 |
10 | body
11 | {
12 | display: flex;
13 | height: 100vh;
14 | background-color: black;
15 | align-items: center;
16 | justify-content: center;
17 | text-align: center;
18 | }
19 |
20 | .menu a
21 | {
22 | display: inline-block;
23 | margin: 30px;
24 | padding: 12px 60px;
25 | color: #fff;
26 | text-transform: uppercase;
27 | font-size: 30px;
28 | font-weight: 600;
29 | transition: .5s linear;
30 | position: relative;
31 | }
32 |
33 | .menu a:hover
34 | {
35 | color: #111;
36 | }
37 |
38 | .menu a::before,
39 | .menu a::after
40 | {
41 | content: "";
42 | position: absolute;
43 | width: 100%;
44 | height: 0%;
45 | left: 0;
46 | box-sizing: border-box;
47 | z-index: -1;
48 | }
49 |
50 | .menu a::before
51 | {
52 | bottom: 0;
53 | border-left: 2px solid white;
54 | border-right: 2px solid white;
55 | transition: 0.3s linear;
56 | }
57 |
58 | .menu a::after
59 | {
60 | top: 0;
61 | background-color: #fff;
62 | transition: 0.3s linear 0.3s;
63 | }
64 |
65 | .menu a:hover::before,
66 | .menu a:hover::after
67 | {
68 | height: 100%;
69 | }
--------------------------------------------------------------------------------