cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <p class="home">Hello! My name is</p>
<h1>Ty Strong</h1>

<div class="home-circle"></div>

<!-- 

<div class="nav">
  <a href="index.html"><div>Home</div></a>
  <a href="portfolio.html"><div>Portfolio</div></a>
  <a href="blog.html"><div>Blog</div></a>
  <a href="contact.html"><div>Contact</div></a>
</div>

-->

<h2 class="hidden">Web Developer</h2>
<span class="hidden">&amp</span>
<h2 class="hidden">Graphic Designer</h2>

<p>I'm a web developer from <dfn title="Born in Indiana, Currently in Monroe, OH.">Ohio</dfn> with a passion for perfection. I am a tireless seeker of knowledge  and love the logic and structure of coding. I always strive to write elegant and efficient code, whether it be HTML, CSS or Javascript. My eye for design not only allows me to build beautiful responsive websites, but also allows me to be flexible and adaptable. When I'm not pushing pixels, I'm attending classes at <dfn title="Currently a PSEO student at Miami, I plan to attend OSU.">Miami University</dfn> or kicking a hackysack.</p>

<p>Specialties: HTML5; CSS3; CSS (Cascading Style Sheets); Apache Server, PHP, MySQL, FTP, SSH - Custom Themes / Templates for Drupal, Wordpress; Adobe Dreamweaver, Fireworks, Illustrator; Web Applications; Graphic Media; Logo Design; SEO (Search Engine Optimization); Web Development; Programming in JavaScript, AJAX; Dynamic Database Driven Websites; Web Hosting; XML; XHTML, Web 2.0, Web 3.0; Joomla, Drupal, and WordPress.</p>

<!-- 

<p>Find some of my experiments on <a href="http://codepen.com/spikeyty">CodePen</a>, find my personal nerdy stuff on <a href="https://twitter.com/TyBpa">Twitter</a>, or contact me directly at <a href="mailto:TyStrong@gmail.com">TyStrong@gmail.com</a>. Download my rèsumè at <a href="#">this link</a>.</p> 

-->


<!-- 

<div class="links">
  <a href="#"><span>Dev Questions</span><i class="fa fa-file-text"></i></a>
  <a href="#"><span>Social Media</span><i class="fa fa-comments"></i></a>
  <a href="#"><span>My Experiments</span><i class="fa fa-code"></i></a>
  <a href="#"><span>Contact Me</span><i class="fa fa-envelope"></i></a> 
</div>

-->

<div class="links">
  <a href="#"><i class="fa fa-file-text"></i><span>Dev Questions</span></a>
  <a href="#"><i class="fa fa-briefcase"></i><span>Previous Work</span></a>
  <a href="#"><i class="fa fa-code"></i><span>My Experiments</span></a>
  <a href="#"><i class="fa fa-envelope"></i><span>Contact Me</span></a> 
</div>

<footer>&copy;2014 Ty Strong <a href="mailto:tystrong25@gmail.com">| Tystrong25@gmail.com</a></footer>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Open+Sans:700,400,300);

::-moz-selection { background: rgba(0,0,0,0.2); }
::selection { background: rgba(0,0,0,0.2); }

body {
  background: #07a;
  background: -webkit-linear-gradient(left,#07a, #0aa, #07a);
  background: -o-linear-gradient(right,#07a, #0aa, #07a);
  background: -moz-linear-gradient(right,#07a, #0aa, #07a);
  background: linear-gradient(to right,#07a, #0aa, #07a);
  background-size: 200%;
  background-position: 0%;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  margin: 1.5em 4em 0;
  color: #f5f5f5;
  animation: bg-move 10s linear infinite;
  -webkit-animation: bg-move 10s linear infinite;
}

h1 {
  font-size: 3.5em;
  text-align: center;
  margin: -.1em 0 1em;
  font-weight: 700;
}
h2 {
  font-size: 3em;
  text-align: center;
  margin: -.1em 0 1em;
}
.circle, .home-circle {
  position: relative;
  margin: 0 auto 3em;
  height: 9em;
  width: 9em;
  border-radius: 50%;
  background: #999 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/profile/profile-512_5.jpg) 80% 0%;
  background-size: 10em 10em;
  box-shadow: 0 0 0 0.8em rgba(255,255,255,0.3);
}
.circle {
  margin: -2.5em auto 0;
  height: 4em;
  width: 4em;
  background: #999 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/profile/profile-512_5.jpg) 70% 0%;
  background-size: 4.5em 4.5em;
  box-shadow: 0 0 0 0.4em rgba(255,255,255,0.3);
}
.home-circle:before, .home-circle:after, .circle:before, .circle:after {
  position: absolute;
  content: 'Web Developer';
  width: 8.5em;
  font-size: 1.7em;
  top: 2em;
  right: 6em;
  font-weight: 700;
}
.circle:before, .circle:after {
  font-size: 1.2em;
  top: 1em;
  right: 4em;
}
.circle:after, .home-circle:after {
  content: 'Graphic Designer';
  left: 7.25em;
}
.circle:after {
  left: 5em;
}

.nav {
  margin: -10px auto;
  height: 3em;
  width: 30.3em;
}

.nav div {
  text-align: center;
  text-shadow: 0 0 7px rgba(0,0,0,0.3);
  font-size: 1.2em;
  line-height: 2em;
  height: 2em;
  padding: 0 1em;
  margin: 0 10px;
  background: rgba(0,0,0,0.3);
  border:solid 3px transparent;
  border-radius: 4px;
  opacity: 1;
  transition: all 500ms;
  float: left;
}
.nav div:hover {
  border:solid 3px #fff;
}
p.home {
  max-width: 9999em;
  text-align: center;
  margin: 3em 0 0;
  -webkit-animation: none;
  animation: none;
}
p.home:before {
  display: none;
}
p:before {
  content: '';
  display: block;
  max-width: 49em;
  width: 80%;
  height: 1px;
  background: rgba(0,0,0,0.3);
  border-bottom: solid 1px rgba(255,255,255,0.3);
  margin: 2.5em auto 10px;
}
p {
  background: transparent;
  line-height: 1.5;
  margin: 1.4em auto;
  max-width: 49em;
  font-size: 1.3em;
  font-weight: 300;
  animation: slide-in 1s ease-out;
  -webkit-animation: slide-in 1s ease-out;
}
dfn {
  border-bottom: dotted 1px rgba(0,0,0,0.4);
  cursor: help;
  font-style: normal;
}
/** a {
  color: #fff;
  border-bottom: solid 1px rgba(0,0,0,0.4);
  text-decoration: none;
} **/

h2.hidden {
  display: none;
  font-weight: 400;
  font-size: 1.8em;
  text-align: center;
}
span.hidden {
  display: none;
  font-size: 1em;
  margin: -1.75em auto 0;
  text-align: center;
}
.links {
  max-width: 50em;
  height: 10em;
  margin: 30px auto;
  /** margin-top: -3em; **/
}
a {text-decoration: none;}
.links a {
  width: 10em;
  float: left;
  margin: 0 1.58em;
  color: #fff;
  text-align: center;
}
.links a span {
  line-height: 3em;
  font-size: 1.2em;
  display: block;
  font-weight: 700;
}
a:nth-child(1) {margin-left: 0;}
a:nth-child(4) {margin-right: 0;}
a i {
  display: block;
  padding: 0.7em;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  min-width: 1em;
  text-align: center;
  font-size: 3em;
  transition: box-shadow 300ms, font-size 200ms;
}
a:hover i {box-shadow: inset 0 0 3em rgba(0,0,0,0.6);}
footer, footer a {
  color: rgba(255,255,255,0.3);
}
footer {
  width: 100%;
  height: 1em;
  font-size: 0.8em;
  text-align: center;
  margin: 0;
  padding: 0;
}
.question {
  width: 80%;
  max-width: 49em;
  margin: 2em auto 0;
}
.question:last-child span{
  margin: 2em auto 200em;
}
.question span {
  display: block;
  padding: 0 1em 0.1em;
  background: rgba(0,0,0,0.4);
  width: calc(100% - 2.5em);
  transition: all 200ms;
  font-size: 2em;
  font-weight: 400;
  color: #fff;
  	cursor: pointer;
}
  
.question span:hover {background: rgba(0,0,0,0.6);}
.question:nth-child(9n+1) span {border-left: solid 0.5em #F6BB42;}
.question:nth-child(9n+2) span {border-left: solid 0.5em #3BAFDA;}
.question:nth-child(9n+3) span {border-left: solid 0.5em #4A89DC;}
.question:nth-child(9n+4) span {border-left: solid 0.5em #37BC9B;}
.question:nth-child(9n+5) span {border-left: solid 0.5em #D770AD;}
.question:nth-child(9n+6) span {border-left: solid 0.5em #8CC152;}
.question:nth-child(9n+7) span {border-left: solid 0.5em #DA4453;}
.question:nth-child(9n+8) span {border-left: solid 0.5em #E9573F;}
.question:nth-child(9n+9) span {border-left: solid 0.5em #967ADC;}

.question li {
  width: calc(100% - 2em);
  background: rgba(0,0,0,0.3);
  padding: 1em;
  margin: 0;
  transition: all 200ms;
  	list-style-type: none;
}
.question ul {
  width: 100%;
  padding: 0;
  margin: 0;
}
.question ul {display:none;}
.question.active ul {display: block;}

img.left {
  float: left;
  margin: 0 1em 1em 0;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

img.right {
  float: right;
  margin: 0 0 1em 1em;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
p a {
  color: #fff;
  border-bottom: dotted 1px #000;
}
label {
  font-size: 32px;
  line-height: 70px;
  padding: 50px 0 0;
  vertical-align: middle;
}
input[type="text"], textarea {
  font-family: "open sans","Rockwell",Helvetica,Serif;
  font-size: 20px;
  width: 592px;
  height: 36px;
  margin-left: 0px;
  vertical-align: middle;
  border: none;
  border-radius: 5px;
  padding: 0 10px;
  border: dashed 3px transparent;
  outline: 0;
  transition: border 200ms;
  background: rgba(0,0,0,0.4);
  color: #fff;
}
input[type="text"]:nth-child(2) {
  margin-left: 53px;
}
input[type="text"]:nth-child(4) {
  margin-left: 61px;
}
textarea {
  margin: 20px 0 0 10px;
  height: 300px;
  padding: 14px;
  width: 586px;
  max-width: 592px;
  max-height: 500px;
}
label:nth-child(5) {
  vertical-align: top;
}
input[type="submit"] {
  font-family: "open sans","Rockwell",Helvetica,Serif;
  position: absolute;
  bottom: 20px;
  left: 0;
  margin: auto auto;
  font-size: 20px;
  width: 120px;
  height: 120px;
  background: rgba(0,0,0,0.1);
	  padding: 10px;
	  border: 0;
	  outline: 0;
	  border-radius: 50%;
  color: #fff;
  transition: all 200ms;
}
input[type="submit"]:hover {
  background: rgba(0,0,0,0.2);
}
input[type="submit"]:focus {
  background: transparent;
  color: transparent;
  border: none;
  transform: translateZ(0);
  border-top: solid 3px rgba(0,0,0,0);
  border-left: solid 3px rgba(0,0,0,0.4);
  box-shadow: none;
  -webkit-animation: spin 700ms linear infinite;
  animation: spin 700ms linear infinite;
}
form {
  width: 770px;
  position: relative;
  margin: -30px auto 0;
  padding: 0 10px 20px;
}
input:focus, textarea:focus {
    border: solid 3px rgba(0,0,0,0.2);
}
input:active, textarea:active {
    border: dashed 3px rgba(0,0,0,0.5);
}
.dev-head {
  margin-top: 1em;
}
@media (max-width: 1200px) {
    p {
    font-size: 1.1em;
    animation: fade-in 1s ease-out;
    -webkit-animation: fade-in 1s ease-out;
  }
}
@media (max-width: 950px) {
  .links a {font-size: 0.8em;}
  .links {max-width: 40.1em;}
  textarea {margin-left: 0;}
  form {width: 600px;}
  input[type="text"]:nth-child(2) {margin-left: 0;}
  input[type="text"]:nth-child(4) {margin-left: 0;}  
  input[type="submit"] {
    width: 620px;
    border-radius: 3px;
    height: 50px;
    left: 10px;
  }
  input[type="submit"]:focus {
    -webkit-animation: load 1s;
    animation: load 1s;
    border-top: 0;
    border-left: 0;
    background: rgba(100,255,120,1);
  }
}
@media (max-width: 800px) {
  h2.hidden, span.hidden {display: block;}
  .home-circle {
    margin: -2em auto 2em;
    height: 7em;
    width: 7em;
    border-radius: 50%;
    background: #999 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/profile/profile-512_5.jpg) 70% 0%;
    background-size: 8.2em 8.2em;
    box-shadow: 0 0 0 0.6em rgba(255,255,255,0.3);
  }
  .home-circle:before, .home-circle:after {content: '';}
  .links a {margin: 0;}
  .links a:nth-child(1) {float: left;}
  .links a:nth-child(2) {float: right;}
  .links a:nth-child(3) {float: left;}
  .links a:nth-child(4) {float: right;}
  .links {
    max-width: 20em;
    height: 16em;
  }
  footer a {display: none;}
  .question span {font-size: 1.5em;}
  input[type="text"], textarea {width: 100%;}
  input[type="submit"] {width: calc(100% + 14px);}
  form {width: 90%;}
}
@media (max-width: 500px) {
  .circle {display: none;}
  .question span {font-size: 1em;}
}

@keyframes bg-move
{
to {
  background-position: 200%;
  }
}
@-webkit-keyframes bg-move
{
to {
  background-position: 200%;
  }
}
@keyframes slide-in {
  from {
    padding-right: 120px;
    opacity: 0;
  }
}
@-webkit-keyframes slide-in {
  from {
    padding-right: 120px;
    opacity: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes spin
{
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
  }
}
@-webkit-keyframes spin
{
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}
@keyframes load
{
from {width: 0;}
to {width: 100%;}
}
@-webkit-keyframes load
{
from {width: 0;}
to {width: 100%;}
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console