Skip to content

Commit

Permalink
make buttons fully clickable, rather than just text
Browse files Browse the repository at this point in the history
  • Loading branch information
@michellewong793
michellewong793 committed Aug 15, 2024
1 parent 4b54852 commit 00b6246
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 75 deletions.
77 changes: 35 additions & 42 deletions website/src/pages/Homepage.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
font-size: 14px;
}

.button {
background-color:#12E172;
.button {
background-color: #12e172;
padding: 16px 32px 16px 32px;
border-radius: 9px;
font-size:18px;
font-size: 18px;
color: white;
border: none;

Expand All @@ -30,15 +30,15 @@
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-content: center;
width: 100%;
}

.header {
font-size:3rem;
font-size: 3rem;
max-width: 1200px;
width: 100%;
margin: 10rem auto 0;
width: 100%;
margin: 10rem auto 0;
text-align: center;
}

Expand All @@ -50,23 +50,22 @@
.secondSubheader {
font-size: 16px;
text-align: center;
margin-top:6rem;
margin-top: 6rem;
}



.actionRow {
display: flex;
flex-direction: column;
height: 100%;
max-height: 100rem;
align-items:center;
align-items: center;
justify-content: space-between;
margin: 5rem auto 0;
padding-left: 0;
}

.actionRow li:nth-child(2), li:nth-child(3) {
.actionRow li:nth-child(2),
li:nth-child(3) {
margin-top: 2rem;
}

Expand All @@ -77,25 +76,21 @@
border-radius: 20px;
list-style-type: none;
text-align: center;

a {
color: white;
text-decoration: none;
font-size: 1rem;
align-content:center;
}
color: white;
text-decoration: none;
font-size: 1rem;
align-content: center;
}

.actionItem:hover {
background-color: #0bb359;
}


/* Desktop Styles */
@media (min-width: 1024px) {
/* Desktop Styles */
@media (min-width: 1024px) {
.homepage {
padding: 20px;
font-size: 18px;
padding: 20px;
font-size: 18px;
}

.actionRow {
Expand All @@ -108,10 +103,10 @@
}

.header {
font-size:6rem;
font-size: 6rem;
max-width: 1200px;
width: 100%;
margin: 10rem auto 0;
width: 100%;
margin: 10rem auto 0;
text-align: center;
}

Expand All @@ -125,10 +120,11 @@
font-size: 32px;
width: 35rem;
text-align: center;
margin-top:10rem;
margin-top: 10rem;
}

.actionRow li:nth-child(2), li:nth-child(3) {
.actionRow li:nth-child(2),
li:nth-child(3) {
margin-top: 0;
}

Expand All @@ -139,35 +135,32 @@
border-radius: 30px;
list-style-type: none;
text-align: center;

a {
color: white;
text-decoration: none;
font-size: 24px;
align-content:center;
align-content: center;
}
}

.actionItem:hover {
background-color: #0bb359;
}

}

}

@font-face {
font-family: 'AleoSans';
src: url('/assets/fonts/AleofontSans-Regular.otf') format('opentype');
@font-face {
font-family: "AleoSans";
src: url("/assets/fonts/AleofontSans-Regular.otf") format("opentype");
font-weight: normal;
font-style: normal;
}

body {
font-family: 'AleoSans', sans-serif;
font-family: "AleoSans", sans-serif;
color: white;
}


.logo {
height: 1.5rem;
}
Expand All @@ -176,5 +169,5 @@ body {
display: flex;
flex-direction: column;
align-items: center;
margin-top:10rem;
}
margin-top: 10rem;
}
69 changes: 36 additions & 33 deletions website/src/pages/Homepage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,47 +15,50 @@ const Homepage = () => {
<p className="subheader">
The tooling for building zero knowledge applications at your
fingertips
</p>
<button className="button">
{" "}
<Link
target="_blank"
rel="noopener noreferrer"
to="https://developer.aleo.org/sdk/"
>
</p>{" "}
<Link
target="_blank"
rel="noopener noreferrer"
to="https://developer.aleo.org/sdk/"
>
<button className="button">
{" "}
View Docs <span className="arrow">&rarr;</span>{" "}
</Link>{" "}
</button>

</button>
</Link>{" "}
<ul className="actionRow">
<li className="actionItem">
<Link to="/account">Create and manage accounts</Link>
</li>
<li className="actionItem">
<Link to="/develop">Execute and deploy programs</Link>
</li>
<li className="actionItem">
<Link to="/transfer">
<Link to="/account" className="actionItem">
{" "}
<li>
Create and manage accounts{" "}
</li>
</Link>

<Link to="/develop" className="actionItem">
{" "}
<li>
Execute and deploy programs{" "}
</li>
</Link>

<Link to="/transfer" className="actionItem">
<li>
Manage program state and data
</Link>
</li>
</li>
</Link>
</ul>

<p className="secondSubheader">
Build your first zero knowledge app with create-leo-app
</p>
<button className="button">
{" "}
<Link
target="_blank"
rel="noopener noreferrer"
to="https://docs.leo-lang.org/sdk/create-leo-app/tutorial/"
>
</p>{" "}
<Link
target="_blank"
rel="noopener noreferrer"
to="https://docs.leo-lang.org/sdk/create-leo-app/tutorial/"
>
<button className="button">
Try it now <span className="arrow">&rarr;</span>
</Link>{" "}
</button>

</button>
</Link>{" "}
<div className="footer">
<a href="https://github.com/ProvableHQ/sdk">
<img
Expand Down

0 comments on commit 00b6246

Please sign in to comment.