codegirl007
/
sponsorahacker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Minor page enhancements

master
Stephanie Gredell 1 year ago
parent
e13188095c
commit
1acb217f10
4 changed files with 108 additions and 38 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      assets/css/style.css
  2. 2
      templates/footer.html
  3. 34
      templates/index.html
  4. 104
      templates/login.html

6
assets/css/style.css
Unescape View File

@ -76,6 +76,12 @@ body { @@ -76,6 +76,12 @@ body {
background-color: #A3C1AD;
}
.cta-button:hover {
background-color: #356081;
transform: scale(1.05);
transition: all 0.2s ease-in-out;
}
.how-it-works-button:hover {
text-decoration: underline;
}

2
templates/footer.html
Unescape View File

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
{{define "footer"}}
<footer class="footer">
<p>&copy; 2024 Sticky Footer Example. Built with ❤️. <a href="#privacy-policy">Privacy Policy</a></p>
<p>&copy; 2024 Sponsor a Hacker | <a href="/privacy-policy">Privacy Policy</a> | <a href="/contact">Contact Us</a></p>
</footer>
{{end}}

34
templates/index.html
Unescape View File

@ -4,19 +4,7 @@ @@ -4,19 +4,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="header">
<img src="assets/images/logo.jpg" class="logo"/>
<h1 class="title">
{{ .title }}
</h1>
{{if eq .isLoggedIn false}}
<a href="/login" class="login-banner-link">Login</a>
{{ else }}
<a href="auth/logout/twitch" class="login-banner-link">Logout</a>
{{ end }}
</div>
{{template "pageheader"}}
<div class="content">
<h2 class="difference">Set Goals. Support Dreams. Build Community.</h2>
<p class="product-description">Our platform connects aspiring tech professionals with a supportive community eager to help them succeed.
@ -24,31 +12,31 @@ @@ -24,31 +12,31 @@
Together, we make tech education more accessible, one goal at a time.</p>
<a href="/login" class="cta-button">Set Your Goals</a>
<a href="/login" class="cta-button">Get Started</a>
<a href="#" class="how-it-works-button">How it works</a>
</div>
<div class="how-it-works-container">
<h2 class="headline">Find Support In Your Growth</h2>
<h2 class="headline">Your Goals, Supported by Community</h2>
<div class="column">
<h3>Create Your Wishlist</h3>
<p>Sign up and add the certifications or courses you’re aiming to complete. Let people know what you're working toward and why each goal is important for your tech journey.</p>
<h3>Set Your Goals</h3>
<p>Sign up to add your certification or course goals and share why they matter for your tech journey.</p>
</div>
<div class="column">
<h3>Get Community Support</h3>
<p>Share your wishlist with your favorite communities. Your supporters can contribute to your goals, helping you fund the education and certifications you need to grow.</p>
<p>Share your wishlist with your community and get support to fund your education and certifications.</p>
</div>
<div class="column">
<h3>Participate in Hackathons</h3>
<p>Join community hackathons to test your skills, learn from others, and showcase your talent. Collaborate, innovate, and grow in a supportive environment.</p>
<p>Join hackathons to collaborate, innovate, and grow your skills in a supportive community.</p>
</div>
</div>
<div class="become-a-supporter-container">
<h2 class="headline">Become a supporter</h2>
<h2 class="headline">Become a Supporter</h2>
<div class="column">
<h3>Sponsor a Hackathon</h3>
<p>Support community-driven hackathons by covering entry fees or providing prizes. Help aspiring tech professionals showcase their skills and network with others.</p>
<p>Support streamer hackathons by funding prizes that help tech professionals showcase their skills and achieve their goals.</p>
</div>
<div class="column">
<h3>Donate Directly to a Goal</h3>
@ -56,9 +44,9 @@ @@ -56,9 +44,9 @@
</div>
<div class="column">
<h3>Support Community Leaders</h3>
<p>Boost a community content by supporting leaders and help them fund tech education for members of their community. Your support empowers streamers to give back directly.</p>
<p>Support community leaders to fund tech education for their members, empowering streamers to give back directly.</p>
</div>
</div>
{{template "footer"}}
</body>
</html>

104
templates/login.html
Unescape View File

@ -1,20 +1,96 @@ @@ -1,20 +1,96 @@
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<link rel="stylesheet" type="text/css" href="assets/css/login.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #F4F1EB; /* Light cream background */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.login-container {
text-align: center;
background-color: #FFFFFF; /* White box background */
padding: 30px;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
.login-container h1 {
font-size: 2em;
color: #457B9D; /* Muted blue */
margin-bottom: 10px;
}
.login-container p {
color: #495057; /* Dark gray */
font-size: 1em;
margin-bottom: 20px;
}
.login-container img {
max-width: 100px;
margin-bottom: 20px;
}
.login-container .twitch-button {
background-color: #9146FF; /* Twitch purple */
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 1em;
cursor: pointer;
text-decoration: none;
display: inline-block;
margin-top: 20px;
}
.login-container .twitch-button:hover {
background-color: #772CE8; /* Slightly darker Twitch purple */
}
.footer-text {
margin-top: 30px;
font-size: 0.9em;
color: #666;
}
.footer-text a {
color: #457B9D;
text-decoration: none;
}
.footer-text a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-page-container">
<a href="/auth/login/twitch" class="login-button twitch">
<i class="fab fa-twitch"></i> Login with Twitch
</a>
<!-- <a href="/auth/login/google" class="login-button google">-->
<!-- <i class="fab fa-youtube"></i> Login with Youtube-->
<!-- </a>-->
<!-- <a href="/auth/login/twitter" class="login-button x">-->
<!-- <i class="fab fa-x-twitter"></i> Login with X-->
<!-- </a>-->
<div class="login-container">
<img src="assets/images/logo.jpg" alt="Sponsor a Hacker Logo">
<h1>Welcome!</h1>
<p>Login with Twitch to continue and connect with your tech community.</p>
<a href="/auth/twitch" class="twitch-button">Login with Twitch</a>
<p class="footer-text">
By logging in, you agree to our <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy Policy</a>.
</p>
</div>
</body>
</html>
Write Preview
Loading…
Cancel
Save