Skip to content

Instantly share code, notes, and snippets.

@bashbaugh
Last active January 26, 2020 21:21
Show Gist options
  • Save bashbaugh/4177d289fe8f4d6b9a5df5187083584f to your computer and use it in GitHub Desktop.
Save bashbaugh/4177d289fe8f4d6b9a5df5187083584f to your computer and use it in GitHub Desktop.
Homepage for makerspace computers at Studio 775, the mini-makerspace at my local library
<!--
Homepage for makerspace computers at Studio 775
https://www.cityoflafayette.com/2097/
If you have a change in mind, please ask Kate, the makerspace manager, before making any changes to this page. Also, the code is stored here: https://gist.github.com/scitronboy/4177d289fe8f4d6b9a5df5187083584f
code by Benjamin Ashbaugh.
Licensed under CC-zero public domain dedication
That means you can use this however you want any you don't need to give credit or attribution to anyone.
-->
<!DOCTYPE html>
<html>
<head>
<title>Welcome To Studio 775</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- <link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Mali" rel="stylesheet">
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->
</head>
<style>
body {
background-color: #543131;
color: #24C64D;
/* font-family: 'Caveat', cursive; */
}
h1 {
text-align: center;
font-size: 5em;
font-family: 'Mali', cursive;
}
.center-text {
font-family: 'Mali', cursive;
text-align: center;
}
.content {
display:flex;
}
.resource-box {
border-right: 2px solid #24C64D;
text-align: center;
font-size: 1.1em;
}
.rb-left {
border-left: 2px solid #24C64D;
}
.row-seperator {
border-bottom: 2px solid grey;
}
a {
color: #FFFFFF;
/* text-transform: uppercase; */
text-decoration: underline;
font-weight: bold;
}
a:hover {
color: grey;
}
h3 {
text-decoration: underline;
}
</style>
<body>
<br/>
<br/>
<div class="container">
<h1><b>Welcome To Studio 775</b></h1>
<br/>
<p class="center-text">Welcome to Studio 775, a collaborative, community-driven mini makerspace where users of all ages can learn to use tech tools in creative ways.
Below are some links to popular websites and resources to use with our equipment :)</p>
<br/>
<!-- <p class="center-text">If you have any questions, please ask one of our volunteers!</p> -->
<!-- START FIRST ROW -->
<div class="content">
<div class="resource-box rb-left col-md-4">
<h3><a href="https://tinkercad.com/" target="_blank">Tinkercad</a></h3>
<p>
A cloud-based, easy drag-and-drop website for designing 3d models. If you have never used CAD software before, this might be a good place to start - after creating an account, you will be redirected to a short tutorial that will teach you the basics.</p>
</p>
<!-- <a href="https://tinkercad.com/">Tinkercad.com</a> -->
</div>
<div class="resource-box col-md-4">
<h3><a href="https://thingiverse.com/" target="_blank">Thingiverse</a></h3>
<p>
Thousands of free 3d models (and inspiration) to download and print. Go here if you want to 3d print something but you don't want to design it on your own.
</p>
<!-- <a href="https://thingiverse.com/">Thingiverse.com</a> -->
</div>
<div class="resource-box col-md-4">
<h3><a href="https://learn.cricut.com/design-space-for-beginners" target="_blank">Cricut Design Space Tutorials</a></h3>
<p>
The official website of tutorial videos about making designs for our Cricut Explore Air 2 - a machine that can draw on or cut shapes from paper or fabric. The software, Cricut Design Space, is installed on these computers.
</p>
<!-- <a href="https://design.cricut.com/">design.cricut.com</a> -->
</div>
</div>
<!-- END FIRST ROW -->
<br/>
<div class="row-seperator"></div>
<br/>
<!-- START SECOND ROW -->
<div class="content">
<div class="col-md-2"></div>
<div class="resource-box rb-left col-md-4">
<h3><a href="http://easel.inventables.com/" target="_blank">Easel</a></h3>
<p>
The official website for making designs for our Carvey, or CNC router - used for carving shapes and other designs into wood, acrylic, or similar materials.
</p>
</div>
<div class="resource-box col-md-4">
<h3><a href="https://f360ap.autodesk.com/courses" target="_blank">Fusion 360 Tutorials</a></h3>
<p>
Courses by Autodesk for their Fusion 360 software (installed on this computer). Fusion 360 is a powerful CAD (Computer Assisted Design) software for designing 3d models. It is harder to learn than Tinkercad but more powerful.
</p>
<!-- <a href="https://tinkercad.com/">Tinkercad.com</a> -->
</div>
<div class="col-md-2"></div>
<!-- <div class="resource-box col-md-3">
<h3><a href="https://thingiverse.com/" target="_blank">Title</a></h3>
<p>
description
</p>
</div>
<div class="resource-box col-md-3">
<h3><a href="https://thingiverse.com/" target="_blank">Title</a></h3>
<p>
description
</p>
</div>
<div class="resource-box col-md-3">
<h3><a href="https://thingiverse.com/" target="_blank">Title</a></h3>
<p>
description
</p>
</div> -->
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment