RocketBear27

Customizing my CodePen profile

RocketBear27's photo
RocketBear27
·

0 min read

I recently signed up for CodePen, an online editor with many web technologies!

"Demo or it didn't happen." - CodePen

For a while, I didn't go on the CodePen website until I read this cool blog post by Ben Szabo. He gives users a good example in the CodePen community, tutorials, and visual GIFs.

I soon wanted to customize my own CodePen profile like Ben!

I started by importing fonts from Google Fonts for making the header a nicer font.

/* Charmonman cursive font for my name */

@import url('https://fonts.googleapis.com/css?family=Charmonman');

/* A bolded Thasadith font for my @rocketbear27 */

@import url('https://fonts.googleapis.com/css?family=Thasadith:700');

I already had a Glitch account, so I made a new random project because Glitch allows users to upload media and get a permanent URL for the media. I uploaded an image from Trianglify a "Low Poly Pattern Generator". I received this URL from Glitch:

https://cdn.glitch.com/a134a2ed-4aeb-4559-9e72-377ad09eab0d%2Ftrianglify.png?1545865586352

Using Google Chrome's Dev Tools, I right-clicked and inspected the elements on my profile I wanted to customize. I got the elements' id in HTML:

<a id="idOfAnElement"></a>

Then I put the following CSS into CodePen with all the elements I customized:

.profile-header {
  background-image: url("https://cdn.glitch.com/a134a2ed-4aeb-4559-9e72-377ad09eab0d%2Ftrianglify.png?1545865586352");
}
#profile-name-header {
  font-family: 'Charmonman', cursive;
}
#profile-username {
  font-family: 'Thasadith', sans-serif;
  font-size: 25px;
  color: black;
}
#profile-link-1:hover {
  text-decoration: underline;
}
#profile-link-2:hover {
  text-decoration: underline;
}
#profile-link-3:hover {
  text-decoration: underline;
}
/* Custom Button Style */ 
#follow-this-user {
  padding: 15px;
  outline: none;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  transition: all 0.3s;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  border-radius: 50px;
  background-color:#f44242;
}

The final code is below:

/* Import Fonts */ 
@import url('https://fonts.googleapis.com/css?family=Charmonman');
@import url('https://fonts.googleapis.com/css?family=Thasadith:700');

/* CSS */ 
.profile-header {
  background-image: url("https://cdn.glitch.com/a134a2ed-4aeb-4559-9e72-377ad09eab0d%2Ftrianglify.png?1545865586352");
}
#profile-name-header {
  font-family: 'Charmonman', cursive;
}
#profile-username {
  font-family: 'Thasadith', sans-serif;
  font-size: 25px;
  color: black;
}
#profile-link-1:hover {
  text-decoration: underline;
}
#profile-link-2:hover {
  text-decoration: underline;
}
#profile-link-3:hover {
  text-decoration: underline;
}
/* Custom Button Style */ 
#follow-this-user {
  padding: 15px;
  outline: none;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  transition: all 0.3s;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  border-radius: 50px;
  background-color:#f44242;
}
CodePen