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
Unified 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 {
background-color: #A3C1AD; 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 { .how-it-works-button:hover {
text-decoration: underline; text-decoration: underline;
} }

2
templates/footer.html
Unescape View File

@ -1,5 +1,5 @@
{{define "footer"}} {{define "footer"}}
<footer class="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> </footer>
{{end}} {{end}}

34
templates/index.html
Unescape View File

@ -4,19 +4,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head> </head>
<body> <body>
<div class="header"> {{template "pageheader"}}
<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>
<div class="content"> <div class="content">
<h2 class="difference">Set Goals. Support Dreams. Build Community.</h2> <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. <p class="product-description">Our platform connects aspiring tech professionals with a supportive community eager to help them succeed.
@ -24,31 +12,31 @@
Together, we make tech education more accessible, one goal at a time.</p> 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> <a href="#" class="how-it-works-button">How it works</a>
</div> </div>
<div class="how-it-works-container"> <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"> <div class="column">
<h3>Create Your Wishlist</h3> <h3>Set Your Goals</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> <p>Sign up to add your certification or course goals and share why they matter for your tech journey.</p>
</div> </div>
<div class="column"> <div class="column">
<h3>Get Community Support</h3> <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>
<div class="column"> <div class="column">
<h3>Participate in Hackathons</h3> <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> </div>
<div class="become-a-supporter-container"> <div class="become-a-supporter-container">
<h2 class="headline">Become a supporter</h2> <h2 class="headline">Become a Supporter</h2>
<div class="column"> <div class="column">
<h3>Sponsor a Hackathon</h3> <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>
<div class="column"> <div class="column">
<h3>Donate Directly to a Goal</h3> <h3>Donate Directly to a Goal</h3>
@ -56,9 +44,9 @@
</div> </div>
<div class="column"> <div class="column">
<h3>Support Community Leaders</h3> <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>
</div> </div>
{{template "footer"}}
</body> </body>
</html> </html>

104
templates/login.html
Unescape View File

@ -1,20 +1,96 @@
<html> <!DOCTYPE html>
<html lang="en">
<head> <head>
<link rel="stylesheet" type="text/css" href="assets/css/style.css" /> <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="assets/css/login.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.css"> <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> </head>
<body> <body>
<div class="login-page-container">
<a href="/auth/login/twitch" class="login-button twitch"> <div class="login-container">
<i class="fab fa-twitch"></i> Login with Twitch <img src="assets/images/logo.jpg" alt="Sponsor a Hacker Logo">
</a> <h1>Welcome!</h1>
<!-- <a href="/auth/login/google" class="login-button google">--> <p>Login with Twitch to continue and connect with your tech community.</p>
<!-- <i class="fab fa-youtube"></i> Login with Youtube--> <a href="/auth/twitch" class="twitch-button">Login with Twitch</a>
<!-- </a>--> <p class="footer-text">
<!-- <a href="/auth/login/twitter" class="login-button x">--> By logging in, you agree to our <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy Policy</a>.
<!-- <i class="fab fa-x-twitter"></i> Login with X--> </p>
<!-- </a>-->
</div> </div>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save