<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400" rel="stylesheet">
</head>
<body>
<div class="banner">
<div class="topnav">
<div 4class="text title">
This Week's Colour for 3D Printing is: Grey (v4)
</div>
<div class="text nav ralign">
<a href="#FAQ" ><u>FAQ</u></a>
<a href="#tutorials" ><u>Video Tutorials</u></a>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfkIClHlVpnUXOruOmRY8aHEJZ7ft8Wted6lcelWX4NaFChcg/viewform" ><u>Submission Form</u></a>
<a href="#" ><u>Email Us</u></a>
</div>
</div>
<h1 id="maintitle">3D Printing at Paterson Library</h1>
<p id="bannertext">Bring Your Creations To Life With Us!</p>
</div>
<div class="box">
<div class="box3">
<h1>About 3D Printing</h1>
<p>The Paterson Library is home to a budding Makerspace, titled the Emerging Media Lab. All students, staff and faculaty are welcome to use the equipment. The space includes the <a href="https://formlabs.com/3d-printers/form-2/">Form2 Resin 3D Printer</a> and the <a href="https://www.youtube.com/watch?v=MTZ5FunrcDY">Mayku Vacuume Former</a>.
</p>
</div>
<div class="box3 line" >
<h1>Who can use the 3D Printing service?
</h1>
<p>The service is available to Confederation students, faculty and staff.
<br><br><br><br>
</p>
</div>
<div class="box3 line">
<h1>How can I use the Emerging Media Lab’s equipment?</h1>
<p>To submit a 3D print to be printed for you, please see the <a href="https://confederationc.libguides.com/c.php?g=704916&p=5060909">3D print job submission form</a> for more information.
<br><br><br>
</p>
</div>
</div>
<div class="boxp">
<div class="title">
<h1>Prints We've Done</h1>
<p>Check out these cool projects we've already printed</p>
</div>
<div class="boxphoto">
<img id="print" src="https://www.handydans3dprints.com/images/homepage/FrontpageoraboutmeThwomp.jpg">
<h3>Title</h3>
</div>
<div class="boxphoto">
<img id="print" src="https://cdn.shopify.com/s/files/1/2116/1647/products/elefilament-pla-pellets-blue_900x.JPG?v=1515082559">
<h3>Title</h3>
</div>
<div class="boxphoto">
<img id="print" src="https://tractus3d.com/wp-content/uploads/3d-printing-with-petg.jpg">
<h3>Title</h3>
</div>
<div class="boxphoto">
<img id="print" src="https://cdn.myminifactory.com/assets/object-assets/5a19854ea9602/images/720X720-for-mmf-614-2.jpg">
<h3>Title</h3>
</div>
</div>
<div class="box2p">
<div class="title">
<h1 id="tutorials">Video Tutorials</h1>
<p>Here's some Vids to help you out </p>
</div>
<div class="pbox">
<div class="photo">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/Vx0Z6LplaMU"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3>What is 3D Printing and How does it work?</h3>
<p>Youtube Mashables explains how the basics of 3D printing works and some tips and tricks for your prints.</p>
</div>
<div class="box3 line">
<div class="photo">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/FnHYVj0j8fU"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3>FormLabs Form 2 Printer Review</h3>
<p>Barnacules Nerdgasm reviews FormsLabs Printer giving you a sneak peek at what you can create.</p>
</div>
</div>
</div>
<hr class="line">
</div>
<div class="box2p">
<div class="title">
<h1 id="FAQ">FAQ</h1>
<p id="texttest">The Questions we get asked the most</p>
</div>
<div class="pbox">
<p id="question">What Is 3D Printing?</p>
<p id="answer">3D printing turns computer models into physical objects. The printer will take the material (usually resin or plastic), melt it to a point when it can be extruded out of a small nozzle, and deposits the successive layers according to your design model. This is possible through uploading your design to our computer system which will compute the 3D printing, hands-free!</p>
<p id="question">I Don’t Know Anything About 3D Printing. Can I Still Use The Printers?</p>
<p id="answer">Absolutely! You don’t have to be a seasoned professional to use a 3D printer. Simply contact one of our library staff members, provide us with your design and watch as our library technician brings your masterpiece to life!<br>In order to operate the printer yourself, we do require all users to complete Confederation College’s certified 3D printer training. This includes the successful completion of our safety precautions, operational tutorials, and hands-on experience training.</p>
<p id="question">What Are The Finished Products Made Of?</p>
<p id="answer">3D printed models can be made of various materials, although most commonly plastic and resin, they can also be printed using nylon, stainless steel, gold, silver, titanium, and ceramic.<br>Ultimately the material used will depend on it’s intended purpose. 3D printing is often used for rapid prototyping and product development and is increasingly popular in biotechnology, fashion, construction, and other industries. It’s also used among hobbyists, as well as, maker spaces in public and academic libraries, such as ours here at Confederation College.</p>
</div>
<hr class="line">
</div>
<div id="demobox">
<div>
<section class="get-in-touch">
<h1 class="title">Get in touch</h1>
<form class="contact-form row">
<div class="form-field col-lg-6">
<input id="name" class="input-text js-input" type="text" required>
<label class="label" for="name">Name</label>
</div>
<div class="form-field col-lg-6 ">
<input id="email" class="input-text js-input" type="email" required>
<label class="label" for="email">E-mail</label>
</div>
<div class="form-field col-lg-12">
<input id="message" class="input-text js-input" type="text" required>
<label class="label" for="message">Message</label>
</div>
<div class="form-field col-lg-12">
<input class="submit-btn" type="submit" value="Submit">
</div>
</form>
</section>
</div>
</div>
<div class="last">
<div class="combo lalign"><p>© Untitled. Design: SIIT. Images: Unsplash.</p></div>
<div class="combo ralign social">
<a href="#"> <i class="fa fa-facebook " aria-hidden="true"></i> </a>
<a href="#"> <i class="fa fa-twitter " aria-hidden="true"></i> </a>
<a href="#"> <i class="fa fa-pinterest-p " aria-hidden="true"></i> </a>
</div>
</div>
</body>
</html>
body { min-width:200px; margin: 0 auto; font-family: 'Raleway', sans-serif; background:url('https://cdn.shopify.com/s/files/1/2104/4351/products/complete_37ece60e-df28-40f9-b2e7-ca0c9227a23e.png?v=1564174648'); background-size: cover; background-attachment:fixed; }
.banner { height: 400px; display:block; padding-top:70px; }
.topnav {
display:table;
width:100%;
min-width:200px;
margin:0.px auto 0px auto;
padding:5px;
background-color:#424040;
color:#ffffff;
max-width:100%;
text-align: right;
}
.text { display:inline-block; width:49%; margin:0 auto; }
.text.title a { text-decoration:none; color: rgb(255,255,255); font-size:11pt; font-weight:bold; }
.text.nav { min-width:200px; }
.text.nav a {text-decoration:none; color: rgb(255,255,255); font-size:11pt; font-weight:bold; padding:6px; }
.text.nav a:hover { color:#162bec; }
#maintitle{
display: table; /* keep the background color wrapped tight */
margin: 85px auto 0px auto; /* keep the table centered */
padding:5px;
font-size:45px;
background-color:#424040;
color:#ffffff;
max-width:100%;
}
#bannertext{
display: table; /* keep the background color wrapped tight */
margin: 0.px auto 0px auto; /* keep the table centered */
padding:5px;
font-size:20px;
background-color:#424040;
color:#ffffff;
max-width:100%;
}
.banner h1 { text-decoration:none; color: rgb(0,0,0); font-size:40pt; font-weight:bold; width:80%; min-width:200px; text-align:center; padding-top:85px;}
.banner p { color: rgb(0,0,0); font-size:13pt; font-weight:bold; text-align:center;width:80%; min-width:200px; display:block; margin:0 auto; padding: 10px; }
.box { background: white; display:block; padding:5%; }
.line { border-left:1px solid lightgray; }
.box3 { margin:0 auto; width:28%; min-width:200px ; display: inline-block; padding: .5% 2.5%; padding-bottom: 50px;}
.box3 h1{ font-weight:normal; font-size:16pt; margin:0 auto; color:#5385c1; }
.box3 p{ color:#9a9a9a; font-size:11pt; margin-bottom:30px; margin-top:20px; }
.boxp{ background:rgba(83,133,193,0.8); display: block; width:100%; margin:0 auto; text-align:center; }
.boxp h1 { color:#fff; font-size:20pt; font-weight:normal; text-align: center; }
.boxp p { color:#bacee6; font-size:11pt; font-weight:normal; text-align: center; }
.boxp h3 { color: #fff; font-weight: normal;}
.More{ background:#5385c1; color: white; text-decoration: none; padding:10px 20px; }
.More:hover { background-color:#5383c1; }
#print {max-width:200px; max-height:200px;}
.boxphoto { display:inline-block; width:20%; min-width:200px; margin:0 auto; padding:10px; padding-top:30px; padding-bottom:30px; text-align:center; margin-top:20px; margin-bottom:40px; margin-left:2%; margin-right:2%; }
.boxphoto h3 { margin:0 auto; padding-top:30px; }
.boxphoto p{margin:0 auto; padding: 5px;}
.boxphoto img{ border-radius: 50%; }
.box2p{ background:#fff; display: block; margin:0 auto; }
.pbox { width:95%; margin:0 auto; text-align:center; }
.box2p h1 { color:#5385c1; font-size:30pt; font-weight: lighter; margin-bottom:10px; text-align:center; }
.box2p h3 { color:#5385c1; font-weight:normal; font-size: 15pt; }
.box2p p { color:#9a9a9a; font-size:11pt; font-weight:normal; margin-bottom: 30px; text-align:justify; }
.photo { display:inline-block; width:40%; min-width:200px; margin:0 auto; margin-bottom:50px; padding:1%; text-align:left; }
h1 {margin: 0 auto;}
.box2p hr { border-top: 1px solid #dbdbdb; margin:0 auto; }
.last { text-align:center; background:#fff; margin:0 auto; padding:20px; display:block; }
.last p { color:#bbb; font-size:10pt; font-weight:normal; margin:0 auto; }
hr.line { background-color:#dbdbdb; width:80%; margin:0 auto; }
.last .combo { display:inline-block; padding:2%; width:38%; min-width:200px; margin:0 auto; }
.ralign { text-align:right; }
.lalign { text-align:left; }
.calign { text-align:center; }
.social a { text-decoration:none; padding:5px; color:#5385c1; font-size: 14pt; }
.title { text-align:center; padding-top:50px; padding-bottom:20px; }
.title p {text-align:center; }
#question {
text-align:center; font-size:20px; font-weight:bold; color:rgb(0,0,0); margin:15px;
}
#answer {
font-size:18px;
padding-left:125px;
padding-right:125px;
text-align:center;
}
#texttest {
margin:0;
}
.get-in-touch {
max-width: 800px;
margin: 50px auto;
position: relative;
}
.get-in-touch .title {
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 3.2em;
font-weight:bold;
line-height: 48px;
padding-bottom: 48px;
color: #5543ca;
background: #5543ca;
background: -moz-linear-gradient(left,#f4524d 0%,#0c005e 100%) !important;
background: -webkit-linear-gradient(left,#f4524df 0%,#0c005e 100%) !important;
background: linear-gradient(to right,#f4524d 0%,#0c005e 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.contact-form .form-field {
position: relative;
margin: 32px 0;
}
.contact-form .input-text {
display: block;
width: 100%;
height: 36px;
border-width: 0 0 2px 0;
border-color: #5543ca;
font-size: 18px;
font-weight:bold;
line-height: 26px;
font-weight: 400;
}
.contact-form .input-text:focus {
outline: none;
}
.contact-form .input-text:focus + .label,
.contact-form .input-text.not-empty + .label {
-webkit-transform: translateY(-24px);
transform: translateY(-24px);
}
.contact-form .label {
position: absolute;
left: 20px;
bottom: 11px;
font-size: 18px;
line-height: 26px;
font-weight: 400;
color: #5543ca;
cursor: text;
transition: -webkit-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
transition: transform .2s ease-in-out,
-webkit-transform .2s ease-in-out;
}
.contact-form .submit-btn {
display: inline-block;
background-color: #000;
background-image: linear-gradient(125deg,#a72879,#064497);
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 16px;
font-weight:bold;
padding: 8px 16px;
border: none;
width:200px;
cursor: pointer;
}
#demobox { background:rgba(255,255,255,0.8);
display: block;
width:100%;
height:100%;
margin:0 auto;
padding-top: 10px;
text-align:center; }
