webapp

1
.navbar {
2
  background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
3
  height: 80px;
4
  display: flex;
5
  justify-content: center;
6
  align-items: center;
7
  font-size: 1.2rem;
8
  position: sticky;
9
  top: 0;
10
  z-index: 999;
11
}
12

13
.navbar-container {
14
  display: flex;
15
  justify-content: center;
16
  align-items: center;
17
  height: 80px;
18
  max-width: 1500px;
19
}
20

21
.navbar-logo {
22
  color: #fff;
23
  justify-self: start;
24
  margin-left: 20px;
25
  cursor: pointer;
26
  text-decoration: none;
27
  font-size: 2rem;
28
  display: flex;
29
  align-items: center;
30
}
31

32
.fa-typo3 {
33
  margin-left: 0.5rem;
34
  font-size: 1.8rem;
35
}
36

37
.nav-menu {
38
  display: grid;
39
  grid-template-columns: repeat(4, auto);
40
  grid-gap: 10px;
41
  list-style: none;
42
  text-align: center;
43
  width: 60vw;
44
  justify-content: end;
45
  margin-right: 2rem;
46
}
47

48
.nav-item {
49
  height: 80px;
50
}
51

52
.nav-links {
53
  color: #fff;
54
  display: flex;
55
  align-items: center;
56
  text-decoration: none;
57
  padding: 0.5rem 1rem;
58
  height: 100%;
59
}
60

61
.nav-links:hover {
62
  border-bottom: 4px solid #fff;
63
  transition: all 0.2s ease-out;
64
}
65

66
.fa-bars {
67
  color: #fff;
68
}
69

70
.nav-links-mobile {
71
  display: none;
72
}
73

74
.menu-icon {
75
  display: none;
76
}
77

78
@media screen and (max-width: 960px) {
79
  .NavbarItems {
80
    position: relative;
81
  }
82

83
  .nav-menu {
84
    display: flex;
85
    flex-direction: column;
86
    width: 100%;
87
    height: 90vh;
88
    position: absolute;
89
    top: 80px;
90
    left: -100%;
91
    opacity: 1;
92
    transition: all 0.5s ease;
93
  }
94

95
  .nav-menu.active {
96
    background: #242222;
97
    left: 0;
98
    opacity: 1;
99
    transition: all 0.5s ease;
100
    z-index: 1;
101
  }
102

103
  .nav-links {
104
    text-align: center;
105
    padding: 2rem;
106
    width: 100%;
107
    display: table;
108
  }
109

110
  .nav-links:hover {
111
    background-color: #fff;
112
    color: #242424;
113
    border-radius: 0;
114
  }
115

116
  .navbar-logo {
117
    position: absolute;
118
    top: 0;
119
    left: 0;
120
    transform: translate(25%, 50%);
121
  }
122

123
  .menu-icon {
124
    display: block;
125
    position: absolute;
126
    top: 0;
127
    right: 0;
128
    transform: translate(-100%, 60%);
129
    font-size: 1.8rem;
130
    cursor: pointer;
131
  }
132

133
  .fa-times {
134
    color: #fff;
135
    font-size: 2rem;
136
  }
137

138
  .nav-links-mobile {
139
    display: block;
140
    text-align: center;
141
    margin: 2rem auto;
142
    border-radius: 4px;
143
    width: 80%;
144
    text-decoration: none;
145
    font-size: 1.5rem;
146
    background-color: transparent;
147
    color: #fff;
148
    padding: 14px 20px;
149
    border: 1px solid #fff;
150
    transition: all 0.3s ease-out;
151
  }
152

153
  .nav-links-mobile:hover {
154
    background: #fff;
155
    color: #242424;
156
    transition: 250ms;
157
  }
158
}
159