WIP
This commit is contained in:
parent
263611d67b
commit
f62310b201
3 changed files with 70 additions and 36 deletions
|
|
@ -5,13 +5,6 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root{
|
|
||||||
--primary-col: #fff;
|
|
||||||
--secondary-col: #000;
|
|
||||||
--tertiary-col-1: #c50022;
|
|
||||||
--tertiary-col-2: #6d001a;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
@ -19,32 +12,13 @@ html {
|
||||||
body {
|
body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
font-family: "Space Grotesk", sans-serif;
|
font-family: "Space Grotesk", sans-serif;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg{
|
body{
|
||||||
background: var(--tertiary-col-2);
|
background:
|
||||||
}
|
radial-gradient(circle at 0% 0%, #da0202 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 25% -5%, #da0202 0%, transparent 40%),
|
||||||
.bg1{
|
radial-gradient(circle at 100% 100%, #da0202 0%, transparent 40%),
|
||||||
background: #000;
|
#000
|
||||||
background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(245, 0, 41, 1) 100%);
|
|
||||||
width: 1000;
|
|
||||||
height: 1000;
|
|
||||||
position: fixed;
|
|
||||||
top:-500;
|
|
||||||
right: 50vw;
|
|
||||||
border-radius: 50%;
|
|
||||||
z-index: -999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg2{
|
|
||||||
background: #6D001A;
|
|
||||||
background: linear-gradient(-45deg, rgba(0, 0, 0, 1) 0%, rgba(245, 0, 41, 1) 100%);
|
|
||||||
width: 1000;
|
|
||||||
height: 1000;
|
|
||||||
position: fixed;
|
|
||||||
bottom: -500;
|
|
||||||
left: 50vw;
|
|
||||||
border-radius: 50%;
|
|
||||||
z-index: -999;
|
|
||||||
}
|
}
|
||||||
|
|
@ -12,9 +12,7 @@ export default function RootLayout({
|
||||||
}>) {
|
}>) {
|
||||||
return (
|
return (
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<body className="bg">
|
<body>
|
||||||
<div className="bg1" />
|
|
||||||
<div className="bg2" />
|
|
||||||
{children}
|
{children}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
62
app/page.tsx
62
app/page.tsx
|
|
@ -1,6 +1,68 @@
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<main className="p-8">
|
<main className="p-8">
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
|
|
||||||
|
<h1 className="text-2xl">Section</h1>
|
||||||
|
<p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue