patrick_zerrer/styles.css at main · patrickzerrer/patrick_zerrer · 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

.abril-fatface-regular {
  font-family: "Abril Fatface", serif;
  font-weight: 400;
  font-style: normal;
}

/* Apply a solid background color to the body */
body {
  margin: 0;
  height: 100vh;
  font-family: Georgia, Sans-Serif;
  background-color: #e2f0e2; /* Helles, gedecktes Waldgrün als Hintergrundfarbe */
  color: black; /* Set all text to black */

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  flex-direction: column;
}

/* Standard Navbar-Stil (allgemein) */
.navbar {
  background-color: #e2f0e2; /* Standard Hintergrundfarbe für die Navbar */
}

/* Styling for the first section */
.first {
  margin-top: 50%;
  width: 100%;
  height: 100%;
  background-color: #e2f0e2; /* Helles, gedecktes Waldgrün */
}

/* Container styling */
.container {
  position: relative;
  width: 100%;
  top: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Elemente mit Abril Fatface */
.name {
    font-size: 5vw;
    font-weight: bold;
    margin-bottom: 20px;
    font-family: "Abril Fatface", serif; /* Verwende Abril Fatface Schriftart */
    color: #d0e0d1;
    text-align: center;
}

.title-container {
    position: relative;
    display: flex;
    justify-content: center;  /* Zentriert die Titel horizontal */
    align-items: center;      /* Stellt sicher, dass die Titel auf der gleichen Höhe sind */
    height: 4em;
    margin-bottom: 20px;
    font-family: "Abril Fatface", serif; /* Verwende Abril Fatface Schriftart */
    color: #d0e0d1;
    text-align: center;
}

.title {
    font-size: 3em;
    opacity: 0;
    transform: translateX(0);
    transition: all 1s ease-in-out;
    position: relative;
    z-index: 1; /* Stellt sicher, dass Titel im Vordergrund bleiben */
    margin: 0 10px; /* Abstand zwischen den beiden Titeln */
}

.title1 {
    transform: translateX(-100%);
}

.title2 {
    transform: translateX(100%);
}

.slogan {
    font-size: 1.5em;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease-in-out;
    font-family: "Abril Fatface", serif; /* Verwende Abril Fatface Schriftart */
    color: #a3b9a4; /* Mittelhelles, gedecktes Grün */
    text-align: center;
}

/* Navbar styling */
.navbar-title {
  font-family: Sans-Serif;
}

.navbar-dark .navbar-brand {
  text-align: right;
}

.navbar-nav {
  margin-right: 50px;
  margin-left: 50px;
}

.navbar-nav .nav-item {
  padding-left: 10px;
  padding-right: 10px;
  font-family: Georgia, serif;
  font-size: 20px;
}

/* Footer styling */
.footer {
  width: 100%;
  text-align: center;
  position: fixed;
  bottom: 0;
  font-family: Georgia, serif;
  background-color: #e2f0e2; /* Hintergrundfarbe des Footers auf helles, gedecktes Waldgrün */
}

.page-footer-title {
  font-family: Sans-Serif;

}

/* Link styling */
a:link {
  color: #013220 !important; /* Dunkles Waldgrün für normale Links */
  text-decoration: none; /* Entfernt die Standardunterstreichung */
}

a:visited {
  color: #013220; /* Dunkles Waldgrün für besuchte Links */
}

a:hover {
  color: #d0e0d1; /* Helleres Grün beim Hover */
  background-color: #4a6e4f; /* Dunkles Waldgrün als Hintergrund beim Hover */
  text-decoration: underline; /* Optional: Unterstreicht den Link beim Hover */
}

a:active {
  color: #d0e0d1; /* Setzt die Farbe beim Klicken auf sehr helles, gedecktes Grün */
  background-color: #4a6e4f; /* Dunkles Waldgrün als Hintergrund beim Klicken */
}

a:focus {
  color: #d0e0d1 !important; /* Verhindert das Auftreten der blauen Farbe beim Klicken */
  background-color: #4a6e4f !important; /* Gleicher Hintergrund wie beim aktiven Link */
}

/* Active state for navbar items */
.navbar-nav .nav-item.active,
.navbar-nav .nav-link.active {
  color: #d0e0d1 !important; /* Textfarbe des aktiven Links auf sehr helles, gedecktes Grün */
  background-color: #4a6e4f !important; /* Hintergrundfarbe des aktiven Links auf dunkles Waldgrün */
}

/* Hover state for navbar items */
.navbar-nav .nav-item:hover,
.navbar-nav .nav-link:hover {
  color: #a3b9a4 !important; /* Setzt die Textfarbe beim Hover auf mittelhelles, gedecktes Grün */
}