Its Aomi

Posted on Jul 9, 2022 • Updated on Jul 11, 2022

Simple CSS Business Card

#webdev #beginners #tutorial #css

Here's a simple CSS Business card that you can make easily with just CSS.

For more Examples of CSS Business cards visit here.

Create the Basic HTML Structure

First create the basic html structure, just the simple html format.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
  </style>
</head>
<body>
</body>
</html>

Create the html container

Create a html container named card with h1 and h2 inside. Here &nbsp is whitespace and &bull is bullet point.

<div class='card'>
  <h1>BOBBY SHOWALTER</h1><h2>html&nbsp;&bull;&nbsp;css&nbsp;&bull;&nbsp;wordpress&nbsp;&bull;&nbsp;responsive design</h2>
</div>

Enter Basic Styling

Enter the basic styling for body and import the fonts you want to use.

@import url(https://fonts.googleapis.com/css?family=Raleway:400);
@import url(https://fonts.googleapis.com/css?family=Oswald:700);
html {
  background-color: #4a4036;
  font-size: 62.5%;
}

Style the Card

Style the card with the css below -

.card {
  background: url("https://i.imgur.com/94AlaBk.png");
  box-shadow: 0px 4px 6px #181818;
  height: 36rem;
  margin: 10rem auto;
  position: relative;
  width: 72rem;
}
.card:before, .card:after {
  background-color: rgba(242, 88, 22, 0.8);
  box-shadow: 1px 2px 1px #fff, inset 0px 1px 2px #993409, 1px 2px 1px #fff;
  content: "";
  height: 0.5rem;
  position: absolute;
  width: 67rem;
}
.card:before {
  top: 2.5rem;
  left: 2.5rem;
}
.card:after {
  top: 33rem;
  left: 2.5rem;
}

After that Style the H1 and H2 tags.

h1 {
  color: rgba(24, 24, 24, 0.8);
  font-family: "Oswald", "Helvetica", "Arial", sans-serif;
  font-size: 7.2rem;
  font-weight: 700;
  letter-spacing: 0.25rem;
  line-height: 10.8rem;
  padding-top: 10.5rem;
  position: relative;
  text-align: center;
  text-shadow: 1px 2px 3px #fff, 0px 0px 0px #000, 2px 3px 4px #fff;
  text-transform: uppercase;
}

h2 {
  color: rgba(242, 88, 22, 0.8);
  font-family: "Raleway", "Helvetica", "Arial", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: 4.5rem;
  margin-top: -2rem;
  text-align: center;
  text-shadow: 1px 2px 3px #fff, 0px 0px 0px #000, 2px 3px 4px #fff;
  text-transform: lowercase;
}

The Full Code

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400);
@import url(https://fonts.googleapis.com/css?family=Oswald:700);
html {
  background-color: #4a4036;
  font-size: 62.5%;
}

.card {
  background: url("https://i.imgur.com/94AlaBk.png");
  box-shadow: 0px 4px 6px #181818;
  height: 36rem;
  margin: 10rem auto;
  position: relative;
  width: 72rem;
}
.card:before, .card:after {
  background-color: rgba(242, 88, 22, 0.8);
  box-shadow: 1px 2px 1px #fff, inset 0px 1px 2px #993409, 1px 2px 1px #fff;
  content: "";
  height: 0.5rem;
  position: absolute;
  width: 67rem;
}
.card:before {
  top: 2.5rem;
  left: 2.5rem;
}
.card:after {
  top: 33rem;
  left: 2.5rem;
}

h1 {
  color: rgba(24, 24, 24, 0.8);
  font-family: "Oswald", "Helvetica", "Arial", sans-serif;
  font-size: 7.2rem;
  font-weight: 700;
  letter-spacing: 0.25rem;
  line-height: 10.8rem;
  padding-top: 10.5rem;
  position: relative;
  text-align: center;
  text-shadow: 1px 2px 3px #fff, 0px 0px 0px #000, 2px 3px 4px #fff;
  text-transform: uppercase;
}

h2 {
  color: rgba(242, 88, 22, 0.8);
  font-family: "Raleway", "Helvetica", "Arial", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: 4.5rem;
  margin-top: -2rem;
  text-align: center;
  text-shadow: 1px 2px 3px #fff, 0px 0px 0px #000, 2px 3px 4px #fff;
  text-transform: lowercase;
}
</style>
</head>
<body>
  <div class='card'>
  <h1>BOBBY SHOWALTER</h1>
  <h2>html&nbsp;&bull;&nbsp;css&nbsp;&bull;&nbsp;wordpress&nbsp;&bull;&nbsp;responsive design</h2>
</div>
</body>
</html>

That's it, this is the output you will get -

Latest comments (4)

hub • Nov 27 '22

Hello dear Its Aomi

i just found your article and i like it. The way you talk about CSS Bussiness card is interesting.
many thanks for the article it is just great!! It looks very promising and your business-card thoughts are interesting. Many thanks for your inspiring ideas.

i am currently working on some issues - that have to do with the CSS and google fonts.

to begin with the beginning:i have found out that my wordpress-site fetches two google fonts:

one of them is montserrat

i decided to host them locally. so i have to

a. fetch the fonts
b. correct the css code

with the following tool i fetch them

google-webfonts-helper.herokuapp.c...

here i have the option to add the paths - to customize the path in the css-data

/* montserrat-regular - latin / u/font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('../fonts/montserrat-v25-latin-regular.eot'); / IE9 Compat Modes / src: local(''), url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), / IE6-IE8 / url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), / Super Modern Browsers / url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), / Modern Browsers / url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), / Safari, Android, iOS / url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); / Legacy iOS */ } Customize folder prefix (optional):

and now i have to add a path to set the correct path - (that means to customize the path )

../fonts/

some additional thought: what makes me wonder is the fact that some of the examples show full paths as reference - others dont:

see the following examples;

a. wp-ninjas.de/wordpress-google-font...

url("https://wp-ninias.de/fonts/muilti-latin-300.woff2") format ( url("https://wp-ninias.de/fonts/muilti-latin-300.woff") format (

b. pixelgrade.com/docs/advanced-custo...

Copy the URL Path field and paste it before each URL in the Embed Code field. The example code will look like this:

@font-face { font-family: 'Name of the font'; src: url('http://yourwebsite.com/wp-content/uploads/fonts/11148/name-of-the-font-file.woff2') format('woff2'), url('http://yourwebsite.com/wp-content/uploads/fonts/11148/name-of-the-font-file.woff') format('woff'); }

c. themeisle.com/blog/custom-fonts-wo...

Once the file is in place, open up your child theme’s stylesheet. Now you’ll need to call on that font so you can use it, via a snippet that should look like this:

`

@font-face {
font-family: New Font;
src: url(yourwebsite.com/wp-content/themes/...);
font-weight: normal;
}

`

and now compare it with the following example here:

Copy CSS: (default is Best Support) Modern Browsers Choose Best Support if old browsers still need to be supported. Formats in this snippet: [eot,woff,woff2,ttf,svg]

Code: /* montserrat-regular - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('../fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */

see the helper-tool google-webfonts-helper.herokuapp.c...

**the question: **so the question is: how to set the path correct for the CSS... which path should we use here!?

Dear Its Aomi - i look forward to hear from you

greetings