Skip to content
Snippets Groups Projects
Commit aa3b34d6 authored by Monz Philipp's avatar Monz Philipp :computer:
Browse files

Landingpage and CodePen removed

parent aebef434
No related branches found
No related tags found
No related merge requests found
import React from "react";
const Codepen = () => {
return (
<div>
<div class="container">
<div class="box">
<div class="spin-container">
<div class="shape">
<div class="bd">
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Codepen;
* {
box-sizing: border-box;
}
body {
background: #003;
}
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.box {
width: 60vmin;
height: 60vmin;
border: 1px dashed rgba(255, 255, 255, 0.4);
position: relative;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
border: 1px dashed rgba(255, 255, 255, 0.4);
transform: scale(1.42);
}
.spin-container {
width: 100%;
height: 100%;
-webkit-animation: spin 12s linear infinite;
animation: spin 12s linear infinite;
position: relative;
}
.shape {
width: 100%;
height: 100%;
transition: border-radius 1s ease-out;
border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
-webkit-animation: morph 8s ease-in-out infinite both alternate;
animation: morph 8s ease-in-out infinite both alternate;
position: absolute;
overflow: hidden;
z-index: 5;
}
.bd {
width: 142%;
height: 142%;
position: absolute;
left: -21%;
top: -21%;
background: url(https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=2868fd5c3f30697d38732224e0ef51ed);
background-size: 100%;
background-position: center center;
display: flex;
color: #003;
font-size: 5vw;
font-weight: bold;
align-items: center;
justify-content: center;
text-align: center;
text-transform: uppercase;
animation: spin 12s linear infinite reverse;
opacity: 1;
z-index: 2;
}
@-webkit-keyframes morph {
0% {
border-radius: 40% 60% 60% 40%/60% 30% 70% 40%;
}
100% {
border-radius: 40% 60%;
}
}
@keyframes morph {
0% {
border-radius: 40% 60% 60% 40%/60% 30% 70% 40%;
}
100% {
border-radius: 40% 60%;
}
}
@-webkit-keyframes spin {
to {
transform: rotate(1turn);
}
}
@keyframes spin {
to {
transform: rotate(1turn);
}
}
\ No newline at end of file
......@@ -8,7 +8,6 @@ import {
} from "@heroicons/react/outline";
import { Popover, Transition } from "@headlessui/react";
import CodePen from "../codepen/Codepen";
import EasyTrans from "../components/bundel/EasyTrans";
import { Fragment } from "react";
import Gallery from "../components/Gallery";
......@@ -19,11 +18,6 @@ import { XIcon } from "@heroicons/react/outline";
import ccheartlogo from "./../assets/cc/heart.black.png";
import { useNavigate } from "react-router-dom";
//TODO überarbeiten des Designs und https://codepen.io/enbee81/pen/LBMKqV
//TODO<CodePen></CodePen> CSS IMPORT
//TODO features aufschlüsseln
//TODO Farben übernehmen und bereden
const features = [
{
name: <EasyTrans>Landingpage.LandingpageFeature1Header</EasyTrans>,
......@@ -191,7 +185,6 @@ const LandingPage = () => {
<EasyTrans>Landingpage.LandingpageFeatureHeaderCaption</EasyTrans>
</p>
</div>
<CodePen></CodePen>
<div className="mt-10">
<dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
{features.map((feature) => (
......@@ -251,7 +244,7 @@ const LandingPage = () => {
</span>
</h2>
</div>
<div className="bg-fairbrightgreen">
{/* <div className="bg-fairbrightgreen">
<div className="max-w-7xl mx-auto flex flex-col items-center justify-between py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex-row">
<PriceCard
price="0"
......@@ -344,7 +337,7 @@ const LandingPage = () => {
]}
></PriceCard>
</div>
</div>
</div> */}
</div>
);
//#endregion
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment