Simple CSS Business Card

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.

<!DOCTY…


This content originally appeared on DEV Community and was authored by Its Aomi

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>Hello World!</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>Hello World!</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 -

Image description


This content originally appeared on DEV Community and was authored by Its Aomi


Print Share Comment Cite Upload Translate Updates
APA

Its Aomi | Sciencx (2022-07-09T18:58:56+00:00) Simple CSS Business Card. Retrieved from https://www.scien.cx/2022/07/09/simple-css-business-card/

MLA
" » Simple CSS Business Card." Its Aomi | Sciencx - Saturday July 9, 2022, https://www.scien.cx/2022/07/09/simple-css-business-card/
HARVARD
Its Aomi | Sciencx Saturday July 9, 2022 » Simple CSS Business Card., viewed ,<https://www.scien.cx/2022/07/09/simple-css-business-card/>
VANCOUVER
Its Aomi | Sciencx - » Simple CSS Business Card. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/09/simple-css-business-card/
CHICAGO
" » Simple CSS Business Card." Its Aomi | Sciencx - Accessed . https://www.scien.cx/2022/07/09/simple-css-business-card/
IEEE
" » Simple CSS Business Card." Its Aomi | Sciencx [Online]. Available: https://www.scien.cx/2022/07/09/simple-css-business-card/. [Accessed: ]
rf:citation
» Simple CSS Business Card | Its Aomi | Sciencx | https://www.scien.cx/2022/07/09/simple-css-business-card/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts