JohnCosta27/JohnTech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added front page menu and Cdiv component as a centered div component

Browse Source
This commit is contained in:
John Costa
2021-12-14 23:04:12 +00:00
parent b6acbc8e67
commit 173940d939
3 changed files with 49 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/pages/Front.page.js
View File

@@ -9,6 +9,7 @@ import React from 'react';
//============================================================
import AppearText from '../text/AppearText';
import Cdiv from '../core/Cdiv';
//============================================================
// Component
@@ -16,10 +17,37 @@ import AppearText from '../text/AppearText';
const FrontPage = () => {
return (
<div className="w-full h-screen flex justify-center items-center bg-polar-night-400">
<div className="flex flex-col justify-center items-center">
<AppearText className="font-mono text-7xl text-frost-400" text="JOHN COSTA" delay={100} />
<AppearText className="font-mono text-5xl text-frost-200" text="DEVELOPER" delay={1200} />
<div className="w-full h-screen bg-polar-night-400">
<Cdiv className="w-full h-32 py-6 px-24">
<Cdiv className="w-full h-full gap-2">
<Cdiv className="flex-1 h-full">
<AppearText
className="font-mono text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
text="Option #1"
delay={2500}
/>
</Cdiv>
<Cdiv className="flex-1 h-full">
<AppearText
className="font-mono text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
text="Option #2"
delay={2500}
/>
</Cdiv>
<Cdiv className="flex-1 h-full">
<AppearText
className="font-mono text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
text="Option #3"
delay={2500}
/>
</Cdiv>
</Cdiv>
</Cdiv>
<div className="w-full h-3/5 flex justify-center items-center">
<div className="flex flex-col gap-4 justify-center items-center">
<AppearText className="font-mono text-7xl text-frost-400" text="JOHN COSTA" delay={750} />
<AppearText className="font-mono text-5xl text-frost-200" text="DEVELOPER" delay={1500} />
</div>
</div>
</div>
);