Skip to content

Instantly share code, notes, and snippets.

@AttyC

AttyC/index.html

Last active August 29, 2015 14:22
Show Gist options
  • Save AttyC/206fe5698d4dc0e5c91a to your computer and use it in GitHub Desktop.
Save AttyC/206fe5698d4dc0e5c91a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atty's Web Portfolio</title>
<!-- Twitter button -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- /Twitter -->
<!-- jQuery SCript -->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<!-- jQuery Media file -->
<script type='text/javascript' src='http://5c4cf848f6454dc02ec8-c49fe7e7355d384845270f4a7a0a7aa1.r53.cf2.rackcdn.com/js/f96450994b4eafafb288d12bae56358b8580f8ef/js/js.media.js'></script>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel='stylesheet' href='css/normalize.css'/>
<!-- Bootstrap core CSS -->
<!--<link rel="stylesheet" href="css/bootstrap.css"/>-->
<link rel='stylesheet' href='css/styles.scss.css'/>
<link rel='stylesheet' href='css/panel.css'/>
<link rel='stylesheet' href='css/table.css'/>
<link rel='stylesheet' href='css/media.scss.css'/>
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<!-- jQuery for Tooltip <a> -->
<script>
$(function() {
$('#item1').tooltip();
});
</script>
<!-- tooltip for WEXAS Travel -->
<script>
$(function() {
$('#tooltip1').tooltip();
});
</script>
<!-- tooltip for IPC Media -->
<script>
$(function() {
$('#tooltip2').tooltip();
});
</script>
<!-- jQuery for Tooltip <button> -->
<script>
$ (function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script src='js/scripts.js'></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_YHLGQDeo56zYavgF_pSamUi9ppq7d9U"></script>
<!-- Custom styles for this template go here -->
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#myScrollSpy" data-offset="20">
<!-- navbar starts here -->
<nav class="navbar navbar-fixed-top" id="nav" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="myScrollSpy" >
<ul class="navbar-nav nav" >
<li><a href="#about">About</a></li>
<li><a href="#work">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--end navbar collapse -->
</div><!--end navbar container-->
</nav><!-- navbar ends here-->
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron" id="jumbotron">
<div class="container">
<h1><span class="tease">Who knew</span>Creating Websites<span class="tease right">could be so much fun?</span></h1>
</div>
</div>
<div class="container anchor" id="about"><!--container about -->
<h2>- I build websites -</h2>
<div class="inner"><!-- inner class background for text only -->
<!--<img src="img/attyc.jpg"class="img-responsive" alt="Atty Cronin portrait">-->
<p>I'm Atty Cronin and I'm a web developer.</p>
<p>I cut my teeth in <a href="http://www.wexas.com/" title="WEXAS Travel" id="tooltip1">travel</a> web, moved to <a href="http://www.timeincuk.com/" id="tooltip2" title="Time Inc UK">digital magazines</a> and got some skills. </p>
<p>I'm now freelancing and looking for websites to build. </p>
<!--Modal for CV -->
<div class="modal-button">
<!-- Small modal button -->
<button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">View CV</button>
</div>
<!-- Small modal -->
<div class="modal fade bs-example-modal-lg" tab-index="-1" rol="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">CV</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>
</div><!-- /modal header -->
<div class="modal-body">
<!-- CV as PDF -->
<iframe src="img/Antonia_Cronin_CV.pdf" id="modalFrame"></iframe>
</div><!-- /modal body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!-- /modal footer -->
</div>
</div>
</div><!-- /modal -->
</div><!-- /inner class -->
</div><!-- /container about-->
<div class="container anchor" id="work"><!--container work-->
<h2>- Projects -</h2>
<div class="row"><!-- row of images for projects -->
<div class="col-md-3 col-sm-6">
<div class="image" id="0"></div>
</div>
<div class="col-md-3 col-sm-6">
<div class="image" id="1"></div>
</div>
<div class="col-md-3 col-sm-6">
<div class="image" id="2"></div>
</div>
<div class="col-md-3 col-sm-6">
<div class="image" id="3"></div>
</div>
</div><!-- end row -->
</div><!-- /container work-->
<div class="container anchor" id="skills"><!--container skills -->
<h2>- Skills -</h2>
<div class="row">
<div class="inner">
<ul>
<li>HTML &amp; CSS</li>
<li>PHP &amp; MySQL</li>
<li>Bootstrap Front End Framework</li>
<li>Javascript</li>
<li>jQuery</li>
<li>AJAX</li>
<li>Git Version Control</li>
<li>Heroku</li>
<li>Ruby Programming Language</li>
<li>Ruby on Rails MVC Framework</li>
<li>User Authentication &amp; Authorization</li>
<li>Stripe Payment Processing</li>
<li>Caching</li>
</ul>
</div> <!-- /inner -->
</div>
</div><!-- /container skills-->
<div class="container anchor" id="faq"><!--container faq -->
<h2>- Questions -</h2>
<div class="row">
<!-- FAQ accordion -->
<div class="col-md-6" id="accordion">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="glyphicon glyphicon-cloud"></span>How did you get into web development?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>I was working in travel and got involved in implementing an online flight booking system. I helped with further IT projects then moved departments to assist the marketing team with the launch of a brand new website. I learned a huge amount about coding and web project cycles.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class="glyphicon glyphicon-cloud"></span>
What is your turnaround time?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>This will depend entirely on the site we're building. We'll discuss your requirements and see what we can do. A quality site will reflect well on you and your brand.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<span class="glyphicon glyphicon-cloud"></span>How will we set a budget?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>I will discuss your budget with you and we will come up with a plan that fits within that, with room for contingency.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<span class="glyphicon glyphicon-cloud"></span>Who are your clients?
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<p>I have built sites for a photographer, a community organisation, Mandarin teacher and psychologist. See their testimonials <a href="#">here</a>.</p>
</div>
</div>
</div><div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<span class="glyphicon glyphicon-cloud"></span>
What do you do for fun?
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<p>I sing with a covers band and host music classes for babies and toddlers. Smile.</p>
</div>
</div>
</div>
</div>
</div>
<!-- /FAQ accordion -->
<!-- video -->
<!--<div class="col-md-6" id="video">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe>
</div>-->
<!-- /video -->
<!-- test zebra striped table -->
<h3>Test striped table, dummy data only </h3>
<table>
<tr class="my-row">
<th>Services</th>
<th>Responsive Website</th>
<th>Interactive Website</th>
</tr>
<tr class="my-row">
<td class="initial">Responsive?</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr class="my-row">
<td class="initial">Interactive?</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr class="my-row">
<td class="initial">Design?</td>
<td>Basic</td>
<td>Bespoke</td>
</tr>
<tr class="my-row">
<td class="initial">Web Hosting?</td>
<td>3rd Party</td>
<td>3rd Party</td>
</tr>
<tr class="my-row">
<td class="initial">Database?</td>
<td>No</td>
<td>Optional</td>
</tr>
</table>
</div><!--/row div -->
</div><!-- /container faq-->
<div class="container anchor" id="contact"><!--container contact-->
<h2>- Contact me -</h2>
<div class="row">
<div class="col-md-4 contact">
<!-- Google map EMBED API -->
<!--<iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyD_YHLGQDeo56zYavgF_pSamUi9ppq7d9U
&q=Walthamstow,+E17+London,+UnitedKingdom" width = "400"
height = "300" frameborder="0" border ="0">
</iframe>-->
<!-- Google Maps JavaScript APIv3 -->
<div id="map_canvas" style=" height:300px; width:300px"></div>
<ul>
<li><span class="glyphicon glyphicon-envelope"></span> <a href="www.google.com">email: [email protected]</a></li>
<li><span class="glyphicon glyphicon-phone-alt"></span>phone (+44) 555 5555</li>
<li><span class="glyphicon glyphicon-map-marker"></span>address: London, England</li>
</ul>
</div>
<div class="col-md-6 col-md-offset-2" id="form">
<form method='post'><input type='hidden' name='form-name' value='form 1' />
<div class="form-group">
<label for="name">Your name</label>
<input type="text" class="form-control" placeholder="Enter name" id="name">
</div>
<div class="form-group" id="phone">
<label for="phone">Your phone no.</label>
<input type="tel" class="form-control" placeholder="e.g. 07..." id="tel">
</div>
<div class="form-group">
<label for="email">Your email *</label>
<input type="email" class="form-control" placeholder="Enter email" id="email" required="required">
</div>
<div class="form-group">
<label for="message">Your message *</label>
<textarea style="resize:none" cols="40" rows="5" class="message-box form-control" placeholder="Write your message here" id="message" required="required"></textarea>
<p>* = required</p>
<button type="submit" class="btn btn-default" id="contact_button">Submit</button>
<p id="visible_comment"></p>
<p id="charCount"></p>
</div>
</form>
</div>
</div><!-- /row -->
</div><!-- /container contact-->
<footer class="container">
<ul class="socialicons">
<li>
<div class="fb-like" data-href="http://attycronin.bitballoon.com" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
</li>
<li>
<a href="https://twitter.com/AttyCronin" class="twitter-follow-button" data-show-count="false">Follow @AttyCronin</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>
<li class="copyright">&copy; Antonia Cronin 2015</li>
</ul>
</footer>
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
<!-- script to enable smooth scrolling -->
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false
});
</script>
<!-- script to run Facebook like/share buttons -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>
Raw
scripts.js
$(document).ready(function(){
/* Projects - examples of work */
var myProjects = [
{ title: "D'Cunha Vincent Consulting", pic: "img/dcunhavincent_shot.jpg", href: "http://dcunhavincent.bitballoon.com" },
{ title: "Sara Sender Photography", pic: "img/sarasender_shot.jpg", href: "http://sarasender.bitballoon.com" },
{ title: "Atty's Blog", pic: "img/blog.jpg", href: "http://attycool.wordpress.com" },
{ title: "Coming Soon...", pic: "img/chimney.jpg", href: "" }
];
/* display bg image */
for (var i=0; i<myProjects.length; i++){
$("#" + i).css("background-image", "url(" + myProjects[i].pic + ")");
};
/* display title on hover and hide on leave */
$(".image").mouseenter(function() {
console.log(myProjects[this.id].title);
$(this).html("<a target='blank' href=" + myProjects[this.id].href + "><p class='info'><span class='proj-title'>Title: </span>"
+ myProjects[this.id].title + "</p></a>");
}).mouseleave(function() {
$("p.info").html("");
});
/* Google Maps JavaScript APIv3 */
var panorama;
var address = new google.maps.LatLng(51.58842,-0.023069,16);
function initialise () {
/* set location */
var mapOptions = {
center: address,
zoom: 8,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
/* create new marker */
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom',
icon: iconBase + 'schools_maps.png'
});
/* event listener to change zoom level */
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialise);
/* Zebra striped table */
var rows = $(".my-row");
for (var i=0; i < rows.length; i++) {
if (i%2 ===0) {
$(rows[i]).css("background-color", "#eee");
}
};
/* change Contact message box g colour */
$(".message-box").css("background-color","#ccc");
/* Output to page a message after Contact message box on Submit */
$("#contact_button").on("click", function() {
var comment = $(".message-box").val();
$("#visible_comment").html(comment.toUpperCase() + "! jQuery is working beautifully!");
return false;
});
/* Output to console a message on keyup */
$(".message-box").on("keyup", function() {
console.log("keyup happened");
var charCount = $(".message-box").val().length;
console.log(charCount);
$("#charCount").html(charCount);
/* change colour of character count after message box on comtact page if < > 50 */
if (charCount > 50) {
$("#charCount").css("color", "red");
} else {
$("#charCount").css("color", "black");
}
});
/* this is my own task, requested by my first client on their site, changes nav css on scroll */
/* This changes the nav from transparent to opaque and vice versa when scrolling down or up */
var nav = $(".navbar");
$(window).scroll(function () {
if ($(this).scrollTop() > 275) {
nav.css("background-color", "#292322");
} else {
nav.css("background-color", "rgba(41, 35, 35, 0.2)");
}
});
});
Raw
styles.scss.css
/* base */
/* base */
* {
box-sizing: border-box;
}
/* end base */
/* layout */
html {
}
body {
background-color: #fff;
position: relative;
font-family: 'Rokkitt', serif;
width: 100%;
}
ul {
list-style-type: none;
padding-left: 1em;
}
ol {
padding-left: 1em;
}
h1 {
font-size: 2.5em;
}
img,
iframe {
border: 2px solid #ccc;
}
/* footer */
footer {
color: #fff;
background: #c22f71;
font-size: 1.5em;
}
.copyright {
float: right;
}
/* /footer */
/* Containers */
.container {
padding-bottom: 3em;
}
.container-fluid {
padding: 0;
}
.row {
clear: both;
}
.col-md-4 {
padding-top: 1em;
}
/* /containers */
/*Jumbotron */
.jumbotron {
background: url("../img/bulb.jpg") center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 250px; /*mobile */
margin: 0;
}
.jumbotron h1 {
color: pink;
position: relative;
top: 1em;
left: 1em;
line-height: 1em;
width: 75%; /*need width due to position left pushing it off page */
}
span.tease {
font-family: 'Courgette', cursive;
display: block;
font-size: 0.5em;
color: #bbb;
}
.right {
margin-left: 5em;
}
.anchor h2,
#intro .inner {
text-align: center;
}
/* end layout */
/* Nav */
li.active,
li.hover,
li.focus {
background-color: whitesmoke;
}
.nav {
float: right;
}
.navbar {
background-color: rgba(41,35,35, 0.5);
}
.navbar a {
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 600ms;
-webkit-transition: color 600ms;
font-size: 1.4em;
font-weight: bold;
}
nav li,
.navbar-brand,
{
background-color: whitesmoke;
}
.navbar>.container-fluid .navbar-brand {
margin-left: 0.3em;
}
.navbar a {
color: pink;
}
.navbar a:hover,
.navbar a:active
{
color: #081802;
}
button.navbar-toggle:hover,
button.navbar-toggle:focus {
background-color: pink;
}
button.navbar-toggle span {
background-color: #292322;
}
/* end nav */
/* Typography */
h1, h2, .carousel-caption > h3 {
font-weight: bold;
}
.anchor h2 {
margin: 1.5em 0 1em 0;
font-size: 2.5em;
color: #c22f71;
}
h3 {
font-size: 2em;
margin: 0;
}
a,
a:hover,
form label {
text-decoration: none;
color: #c22f71;
}
.col-md-4 p,
.col-md-4 li,
.main-text h3,
#about p,
#about li, #skills li {
font-size: 1.2em;
font-weight: bold;
margin: 0.5em;
line-height: 2em;
}
/* Form */
div#form {
padding: 0;
background: inherit;
}
form {
margin-left: 3em;
}
.form-group {
width: 70%;
}
textarea {
display: block;
}
form label,
form p {
font-size: 1.2em;
}
input[placeholder],
textarea[placeholder] {
font-weight: bold;
}
.btn-default {
font-weight: bold;
margin: 0 0 1em 0;
}
/* /form */
/* Modal */
.modal-header .close {
opacity: 1;
margin-top: -40px;
}
button.close span {
display: block;
background-color: #ccc;
padding: 10px;
color: black;grey
}
.row .modal-body {
height: 500px;
}
.modal-title {
font-size: 3em;
}
#modalFrame {
padding: 10px;
width: 100%;
height: 100%;
}
#tooltip1.hover {
}
/* /modal */
/* Div styles */
#contact div {
margin: auto;
}
#contact ul {
margin-left: 4em;
}
#contact li a {
margin-left: -0.25em;
}
.glyphicon {
margin-right: 0.7em;
vertical-align: text-top;
}
.inner {
padding: 0 5em;
margin: auto;
text-align: center;
}
#about img {
float: right;
}
#about, #skills, #contact {
background-color: #eee;
}
#skills li {
padding-left: 1em;
margin-left: 0.3em;
display: inline-block;
background: url("../img/plus_10.png") 0 40% no-repeat;
}
#intro .col-md-4, #intro .col-xs-12, #about .col-xs-12 {
background: none;
}
/* Social Media icons */
ul.socialicons {
list-style: none;
margin: auto;
text-align: center;
}
ul.socialicons li {
display: inline-block;
padding: 1em;
}
ul.socialicons img {
border: none;
}
/* Projects */
#work .row {
text-align: center;
}
.image {
box-sizing:border-box;
border: 1px solid #ddd;
width: 250px;
height: 250px;
display: inline-block;
position: relative;
margin: 0 1.5em;
}
.image a {
color: pink;
display: block;
width: 250px;
height: 250px;
}
.image a:hover {
color: #fff;
}
.info {
display: inline-block;
color: #fff;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.2em;
line-height: 1.6em;
position: absolute;
top: 15%;
left: 22%;
padding-left: 1em;
background-color: rgba(41, 35, 35, 0.6);
}
.proj-title {
font-weight: 100;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment