Simple website redesign

airtable.com inspired

by Spencer Smith

HTML

<div class="content">
  <h1>Hello!</h1>
  <p>My name is Spencer. I'm an entrepreneur at heart and I want to make an impact on the world.</p>
  <p>I'm studying Computer Science at the University of Utah.</p>
  <h2 class="web">Web</h2>
  
  <p><b>Taken Taken</b> &ndash; No frills, just a quick and clean domain name search.</p>
  
  <p><b>Review Link Generator</b> &ndash; Happy customers are more than willing to write reviews if they are <i>reminded</i>. This tool creates message-ready links that take you straight to a business' review page.<span id="stars">&starf;&starf;&starf;&starf;&starf;</span></p>
  
  <p><b>Face Quiz</b> &ndash; Proof-of-concept for the gamification of remembering people's names.</p>
  
  <p><b>With Blocks</b> &ndash; Where was the <a href="https://goo.gl/wIAzSd">npm logo</a> designed? I'm pretty sure it was on this site...</p>
  <h2 class="software">Software</h2>
  <h2 class="mobile">Mobile</h2>
</div>

SCSS

body {
  background-color: white;
  font-family: 'GTEestiDisplay-Medium',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
  font-size: 1.2em;
}

.content{
  width: 512px;
  margin: 60px auto;
}
h2{
  margin-top: 60px;
}
p{
  line-height: 1.7em;
}
a{
  color: mediumseagreen;
  text-decoration: none;
  //border-bottom: 2px solid mediumseagreen;
}

$blue: dodgerblue;
$green: mediumseagreen;
$yellow: gold;
$red: indianred;

.web {
  color: $green;
}
.software{
  color: $blue;
}
.mobile{
  color: $yellow;
}
#stars{
  padding: 10px;
  display: none;
}