Skip to content

Commit

Permalink
[feature] footer
Browse files Browse the repository at this point in the history
  • Loading branch information
younghyun1 committed Oct 28, 2024
1 parent bc28bad commit 8e75cfc
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 2 deletions.
51 changes: 49 additions & 2 deletions src/components/home-blurb/home-blurb.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,53 @@
.blurb {
display: flex;
display: grid;
justify-items: center;
align-items: center;
justify-content: center;
grid-template-columns: 1fr 1fr;
width: 100%;
height: 100%;
}

.blurbTextBox {
display: flex;
flex-direction: column;
align-items: center;
}

.blurbTextBox h1 {
color: var(--shade-color);
font-size: 48px;
font-weight: 600;
text-align: center;
margin: 0;
}

.blurbTextBox p {
font-size: 20px;
font-weight: 600;
text-align: center;
}

.startNow {
color: var(--bg-color);
font-size: 18px;
font-weight: 600;
background-color: var(--shade-color);
box-shadow: 2px 2px 2px var(--black-shadow-color);
border-style: solid;
border-color: var(--shade-color);
border-radius: 100px;
border-width: 1px;
padding: 10px 20px; /* Added padding to create nice margins around the text */
transition:
background-color 0.166666s ease,
transform 0.166666s ease;
}

.startNow:active {
transform: scale(0.9) scale(1);
transition: transform 0.166666s ease;
}

.startNow:hover {
background-color: var(--accent-color);
}
15 changes: 15 additions & 0 deletions src/components/home-blurb/home-blurb.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,25 @@
import React from "react";
import "./home-blurb.css"; // Import the CSS file
import FormButton from "../formbutton/formbutton";

const Blurb: React.FC = () => {
return (
<div className="blurb">
<img src="src/assets/wasona.svg" alt="Wasona bird!" />
<div className="blurbTextBox">
<h1>
Wasona
<br />
welcomes you!</h1>
<p>
Learn Toki Pona
<br />
with fun exercises!
</p>
<FormButton className="startNow">
<span className="startNowText">get started</span>
</FormButton>
</div>
</div>
);
};
Expand Down
4 changes: 4 additions & 0 deletions src/pages/home/home.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,7 @@
.Blurb {
display: grid;
}

p {
text-align: center;
}
4 changes: 4 additions & 0 deletions src/pages/home/home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ const Home: React.FC = () => {
<div className="HomeScreen">
<Navbar />
<Blurb />
<p>
This site is free and open source (AGPL). The course is Creative Commons
(CC-BY-SA). Help us by contributing on Github!
</p>
<div></div>
</div>
);
Expand Down

0 comments on commit 8e75cfc

Please sign in to comment.