diff --git a/app/assets/css/button.css b/app/assets/css/button.css
index 69b21ba..b86e8fd 100755
--- a/app/assets/css/button.css
+++ b/app/assets/css/button.css
@@ -1,5 +1,6 @@
.Button {
all: unset;
+ font-family: 'Roboto Condensed', sans-serif;
transition: 250ms;
cursor: pointer;
padding: 1rem 1.5rem;
@@ -9,7 +10,6 @@
align-items: center;
justify-content: center;
gap: 1rem;
- font-weight: bold;
&.default {
background: var(--color-orange);
@@ -49,49 +49,6 @@
}
}
-.DualButton {
- --size: 2.2rem;
- display: flex;
- width: 100%;
-
- & .divider {
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: var(--color-black);
- color: var(--color-white);
- border-radius: 9999px;
- width: var(--size);
- height: var(--size);
- padding: var(--size);
- font-size: 1.2rem;
- z-index: 1;
- margin-left: calc(var(--size) * -1 - 25px);
- border: 2px solid var(--color-black);
- }
-
- .Button {
- border: 2px solid currentColor;
- }
-
- & .Button:hover {
- outline: none;
- box-shadow: none;
- background-color: var(--color-black);
- color: var(--color-white);
- border-color: var(--color-orange);
- }
-
- & .Button:first-child {
- padding-right: calc(var(--size) * 2);
- }
-
- & .Button:last-child {
- padding-left: calc(var(--size) * 2);
- margin-left: calc(var(--size) * -1 - 25px);
- }
-}
-
.button-wrapper {
border-radius: 99999px;
}
\ No newline at end of file
diff --git a/app/assets/css/fonts.css b/app/assets/css/fonts.css
deleted file mode 100755
index e4a4fec..0000000
--- a/app/assets/css/fonts.css
+++ /dev/null
@@ -1,24 +0,0 @@
-@font-face {
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 400;
- font-stretch: 100%;
- font-display: swap;
- src: url('/fonts/opensans.woff2') format('woff2');
-}
-
-@font-face {
- font-family: 'Roboto Condensed';
- font-style: normal;
- font-weight: 300;
- font-display: swap;
- src: url('/fonts/roboto_con_reg.woff2') format('woff2');
-}
-
-@font-face {
- font-family: 'Roboto Condensed';
- font-style: normal;
- font-weight: 700;
- font-display: swap;
- src: url('/fonts/roboto_con_bold.woff2') format('woff2');
-}
diff --git a/app/assets/css/header.css b/app/assets/css/header.css
index b3f83fd..7ed1b7b 100755
--- a/app/assets/css/header.css
+++ b/app/assets/css/header.css
@@ -3,6 +3,7 @@
}
.Header {
+ font-family: 'Roboto Condensed', sans-serif;
padding: 15px calc(15vw - 30px);
width: 100%;
background: transparent;
@@ -31,7 +32,6 @@
}
& strong {
- font-family: 'Roboto Condensed', sans-serif;
font-size: 1.5rem;
flex: 1.5;
display: flex;
diff --git a/app/assets/css/pricing.css b/app/assets/css/pricing.css
index fa2d7d1..eef6e34 100644
--- a/app/assets/css/pricing.css
+++ b/app/assets/css/pricing.css
@@ -1,91 +1,45 @@
.Pricing {
display: grid;
- grid-template-columns: max-content 1fr max-content;
- border-radius: 20px;
-
- & article:first-child {
- border-radius: 20px 20px 0 0;
-
- & header,
- & main,
- & footer {
- padding-bottom: 1.5rem;
- }
-
- & header {
- background-color: var(--color-orange-dark);
- color: var(--color-white);
-
- & .bg-icon {
- top: 60%;
- }
- }
-
- & .cols {
- & li .value {
- font-size: 1.5rem;
- font-weight: bold;
- }
- }
- }
-
- & article:last-child {
- border-radius: 0 0 20px 20px;
-
- & header,
- & main,
- & footer {
- padding-top: 1.5rem;
- }
-
- & header {
- background-color: var(--color-orange-dark);
- color: var(--color-white);
- }
-
- & .cols {
- & li .value {
- font-size: 1.5rem;
- font-weight: bold;
- }
- }
- }
-
- & article:nth-child(2) {
- width: 105%;
- margin-left: -2.5%;
- margin-right: -2.5%;
- border-radius: 20px;
- z-index: 2;
-
- & header {
- --size-difference: 7rem;
- width: calc(100% - 2rem);
- padding-top: var(--size-difference);
- padding-bottom: var(--size-difference);
- background-color: var(--color-orange);
- color: var(--color-black);
-
- & .bg-icon {
- right: 20%;
- }
- }
-
- & ul {
- & li .value {
- font-size: 3rem;
- font-weight: bold;
- }
- }
- }
+ grid-template-rows: 150px auto auto auto 1fr;
& article {
display: grid;
- grid-column: 1 / -1;
- grid-template-columns: subgrid;
+ grid-template-rows: subgrid;
+ grid-row: 1 / -1;
background-color: var(--color-orange-black);
overflow: hidden;
+ &:nth-child(2) {
+ border-top-left-radius: 20px;
+ border-bottom-left-radius: 20px;
+ }
+
+ &:nth-child(4) {
+ border-top-right-radius: 20px;
+ border-bottom-right-radius: 20px;
+ }
+
+ &:nth-child(3) {
+ z-index: 100;
+ scale: 1.05;
+ border-radius: 20px;
+ }
+
+ & .value {
+ padding: 2rem;
+ text-align: center;
+
+ &.fat {
+ font-family: 'Roboto Condensed', sans-serif;
+ font-weight: bold;
+ font-size: 1.5rem;
+ }
+
+ &.odd {
+ background: var(--color-black);
+ }
+ }
+
& header,
& main,
& footer {
@@ -106,15 +60,19 @@
}
}
- & main {
- background-color: var(--color-orange-black);
- z-index: 1;
+ &:nth-child(3) header {
+ background: var(--color-orange);
+ color: var(--color-black);
+ }
+
+ &:not(:nth-child(3)) header {
+ background: var(--color-orange-dark);
+ color: var(--color-white);
}
& header {
position: relative;
- padding-right: 8rem;
- width: calc(100% + 8rem);
+ width: 100%;
& strong {
font-size: 2rem;
@@ -124,49 +82,11 @@
& .bg-icon {
position: absolute;
top: 50%;
- right: 40%;
+ right: 25%;
translate: 50% -50%;
font-size: 6rem;
opacity: 0.15;
}
}
-
- & li {
- display: flex;
- align-items: center;
- gap: .5rem;
- }
-
- & .list {
- display: flex;
- flex-direction: column;
- gap: .5rem;
-
- & .point-icon {
- color: var(--color-orange);
- }
- }
-
- & .list-container {
- display: flex;
- justify-content: center;
- gap: 4rem;
- }
-
- & .cols {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-evenly;
- gap: 1rem;
-
- & li {
- flex-direction: column;
- }
-
- & .color-icon {
- color: var(--color-orange);
- }
- }
}
}
\ No newline at end of file
diff --git a/app/components/Flatrate.vue b/app/components/Flatrate.vue
index 87d03f8..f8a65de 100755
--- a/app/components/Flatrate.vue
+++ b/app/components/Flatrate.vue
@@ -7,7 +7,14 @@
Hier gibt's die Entwickler-Flat für planbare Kosten und On-Demand-Entwicklung.