Hackathon Challenge: How do we decrease transportation cost for Genesys Works interns?
Larger geographic area that interns are coming from and working in
Increasing cost of transportation and travel time
Change how transportation is coordinated, acquired or funded
Resources for designers:
Color palette: https://www.canva.com/colors/color-palette-generator/
Images: https://www.pexels.com/ and https://unsplash.com/
Wireframes: Use paper/pen/pencils - Here’s a link with an overview of what they could look like.
Resources for developers:
Text editor - check for your version for your laptop: https://www.sublimetext.com/3
Bootstrap: https://getbootstrap.com/docs/5.3/getting-started/introduction/
Setting up your HTML page: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_default&stacked=h
How to set up: https://youtu.be/VjlIfaf3_Pg
Adding styling/css in the Index page: https://www.w3schools.com/html/html_css.asp
How to add Images: Add this tag <img src="foldertheimageisin/imagename.jpg">
Resources for business/idea person:
One page business plan: https://docs.google.com/document/d/1_t5xgOTYmypyPer-AwfMD6mhxHffukUT/edit?usp=sharing&ouid=107647725456331757104&rtpof=true&sd=true
MAKE A COPY THAT YOU CAN EDIT
Your Presentation - What’s included?
Your Name/Brand/Org Name
Who is on your team
2 sentence overview of your solution
Your branding guidelines
Showcase your tech pages
Welcome!
Developer Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hack the Gap | Genesys Works Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {background-color: #c8cfe6;}
h1 {color: #322c7c;}
p {color: #322c7c;}
</style>
</head>
<body>
<!-- START the navigation at the top -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Unlinked</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- END the navigation at the top -->
<div class="container py-4">
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Genesys Works Hackathon</h1>
<p class="col-md-8 fs-4">Thank you for joining this hackathon. You can use this page to kickstart your two to three pages displaying your solutions.</p>
<button class="btn btn-primary btn-lg" type="button">Get Started</button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
Need Help?
Developer help - Ask Mase or Caroline
Mase (They/them)'s Personal Meeting RoomJoin Zoom Meeting
https://us02web.zoom.us/j/6585077334?pwd=ZlNkLzJ1VThiQ2M4alZqNHVrS3Z2QT09
Need Design help? Ask Ashley or Caroline
Need Business help? Ask any of us!