How to create a GameStop logo

GameStop

GameStop got a lot of attention in the last few days. It was all over the news because of a sudden rise in stock price, but here we are not discussing any of the financial jargons. We will create the GameStop logo using HTML and CSS. We will use codepen to code this. Codepen is an online code editor and very useful as one can see the results instantaneously. Let's start coding.

When you open Codepen it will look something like this

First, let's write the text for the logo. On the HTML side write

<h1>GameStop</h1>

Now you should see something like this.

As we can see some text on the screen. Let's code some CSS and make the text look like the actual logo. On the CSS section start writing as you follow the article and we will see the changes as we code along.

We will write all the CSS under h1 tag.

h1{
font-family:Impact;
}

The above line will set the font type of the text

h1{
font-family:Impact;
font-size:100px;
}

above addition will set the font size.

h1{
font-family:Impact;
font-size:100px;
height:100vh;
}

This will set the height of the text to be the whole page irrespective of the screen. At this point, the text should look something like this

Now we will do the most interesting part 😉, centering the text. I will use flexbox to do it.

h1{
font-family:Impact;
font-size:100px;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
}

At this moment it looks like this.

Now the last part to make the Stop in red color. For that will put Stop text inside a <span> tag. Now the HTML looks like

<h1>Game<span>Stop</span></h1>

You will see no change in the text. Now the end part to make it red.

h1 > span {
color:red
}

The above CSS is a selector query. You can read more about it here. The final text looks like this.

For your reference here is the link to my codepen.

Conclusion

In this post, we learned about codepen (a great place to prototype things) basic flexbox, and css selectors. Keep experimenting, keep coding. Happy learning.

--

--

--

#IBMER #JS-Advocate #SoftwareEngineer #TechnologyLover #Learner #intermediatetennisplayer #lifebetweenthebraces{}

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Week 10: BSides Augusta Twitter Challenge Writeup

Ever since I was a little boy, I have only ever wanted to be a Doctor.

🚀Artifest.io is bringing the first-ever phygital #NFT marketplace on @OxPolygon!

Getting Started with IBM Watson Personality Insights

Looking into C# Property Patterns Performance

Deploying AEMaaCS

Sprint retrospective ideas

Team participating in a sprint retrospective

How to Create a Twitch Command Script for Streamlabs Chatbot — Part 2: Basic Structure

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Akshay Mattoo

Akshay Mattoo

#IBMER #JS-Advocate #SoftwareEngineer #TechnologyLover #Learner #intermediatetennisplayer #lifebetweenthebraces{}

More from Medium

Chrome Extension:Alarmed Bookmark

Write your first HTML program

I’m Learning Software: HTML Tags

Crisp Chat — Contact Form Integration in under 5 Minutes