myfirstsite.github.io/style.css at main · sespure/myfirstsite.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
body {
     margin: 0;
     height: 400vh;
     font-family: -apple-system, BlinkMacSystemFont, sans-serif;
     background-color: rgb(255, 255, 255);
}

ul {
     margin: 0;
     list-style: none;
}

a {
     text-decoration: none;
     color: inherit;
}

.header {
     display: flex;
     align-items: center;
     justify-content: center;
     position: sticky;
     top: 0;
     height : 80px;
     background-color: rgb(0, 0, 0);
}

.menu {
     display: flex;
     align-items: center;
}

.menu li {
     display: flex;
     padding: 0px 15px;
     color : rgb(255, 255, 255);
     font-weight: 450;
     font-size: 20px;
}

.list-button {
     position: relative;
}

.list-button::after {
     content:"";
     background: #9c27b0;
     height: 2px;
     width: 100%;
     border-radius: 6px;
     position: absolute;
     bottom: -8px;
     left: 0;
     transform: scaleX(0);
     transition: transform 300ms cubic-bezier(0.71, 0, 0.3, 0.99);
     }

.list-button:hover::after {
     transform: scaleX(1);
}

.menu li:last-of-type a {
     display: flex;
     align-items: center;
     height: 40px;
     padding: 0 10px;
     background-color: rgb(176, 37, 176);
     border-radius: 20px;
     transition: background-color 350ms cubic-bezier(0.71, 0, 0.3, 0.99), transform 350ms cubic-bezier(0.71, 0, 0.3, 0.99);

}

.menu li:last-of-type a:hover {
     background-color: #9c27b0;
     transform: scale(1.1);
}

.search {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     border-radius: 10px;
     margin-top: 50px;
}