DEV Community: Its Aomi

Discord style stickers in Wordpress Comments

Its Aomi — Fri, 30 May 2025 10:52:00 +0000

A while back, I built a fun little WordPress plugin that I think a lot of people will love — especially if you're into lively comment sections and community engagement.

🔹 What it does:
It lets users add stickers directly inline in WordPress comments — both animated and static stickers, just like you’d see in Discord or messaging apps.

💬 Imagine your comment section with expressive reactions, funny animations, and visual energy — it's a game changer for engagement.

🖼️ Image preview

👉 Check it out here:

https://wpcommentstickers.com/get/demo/

After you check it out, you’ll see how this plugin transforms the tone of your community. It’s perfect for:

✅ Blogs with active comment threads
✅ Communities and niche forums
✅ Fan sites and fandom spaces
✅ ANY site where comments feel a little too...text-only

The best part? It's super easy to set up — just install, activate, and start sticking 🎨

Let me know what you think — feedback and sticker requests are welcome!

Let me know if you'd like a version tailored your site’s landing page

ii

Its Aomi — Thu, 22 Dec 2022 04:00:25 +0000

Simple CSS Carousel

Its Aomi — Thu, 01 Sep 2022 03:52:08 +0000

A simple CSS Carousel. For more CSS Carousels visit - xcattx.com

The Html Part

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body>
  <figure>
<div class="carousel dissolve">
  <div class="items">
      <img class="item" src="https://farm8.staticflickr.com/7020/6767599565_e0ffee2813_d.jpg" alt="">
      <img class="item" src="https://farm8.staticflickr.com/7016/6767598507_21720ed21f_d.jpg" alt="Seven to ten at Leeds &amp; Holbeck">
      <img class="item" src="https://farm8.staticflickr.com/7163/6767596393_8f8b9609ec_d.jpg" alt="Banksy">
      <img class="item" src="https://farm8.staticflickr.com/7004/6767593255_ae68f10fac_d.jpg" alt="Bristol autumn">
   </div>
</div>
</figure>
</body>
</html>

The CSS Part

.dissolve {
  width: 287px;
  height: 430px;
  position: relative;
  overflow: hidden;
}
.dissolve .item {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  animation: dissolve 8s linear infinite;
}
.dissolve .item:nth-child(2) {
  animation-delay: 2s;
}
.dissolve .item:nth-child(3) {
  animation-delay: 4s;
}
.dissolve .item:nth-child(4) {
  animation-delay: 6s;
}
@-webkit-keyframes dissolve {
  0%,
  30%,
  100% {
    opacity: 0;
  }
  5%,
  25% {
    opacity: 1;
  }
}
@-moz-keyframes dissolve {
  0%,
  30%,
  100% {
    opacity: 0;
  }
  5%,
  25% {
    opacity: 1;
  }
}
@-ms-keyframes dissolve {
  0%,
  30%,
  100% {
    opacity: 0;
  }
  5%,
  25% {
    opacity: 1;
  }
}
@keyframes dissolve {
  0%,
  30%,
  100% {
    opacity: 0;
  }
  5%,
  25% {
    opacity: 1;
  }
}
/* Just a decoration */
@font-face {
  font-family: 'Trykker';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/trykker/v21/KtktALyWZJXudUPztN7iPQ.ttf) format('truetype');
}
img {
  max-width: 100%;
  display: block;
}
body {
  font-family: 'Trykker', serif;
  padding: 1em;
  background-color:#000000;
}
figure {
  width: 287px;
  margin: 10px auto 0;
}
figure .carousel {
  width: 287px;
  box-shadow: 0 0 0 10px #fff, 0 0.3em 0.8em 10px black;
}
figure figcaption {
  text-transform: uppercase;
  margin-top: 10px;
  padding-top: 0.5em;
  font-size: 1.2em;
  text-align: center;
  color: #999;
  text-shadow: 0 -0.1em 0 rgba(0, 0, 0, 0.6);
}
figure figcaption:before,
figure figcaption:after {
  content: "\2014";
  font-family: "Times New Roman", serif;
  text-shadow: none;
  color: rgba(255, 255, 255, 0.2);
}
figure figcaption:before {
  margin-right: 0.3em;
}
figure figcaption:after {
  margin-left: 0.3em;
}
figure p {
  color: #999;
  text-align: center;
}
figure p a {
  color: #06afd8;
}

The Output

CSS 3D Button with Hover Effect

Its Aomi — Mon, 08 Aug 2022 02:29:56 +0000

A basic 3D css button with simple hover effect.

For More Code Examples Visit here - link

To create the 3d button first start with the basic html format -

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

Inside body create a new div with class "table_center", this container will be used to center the button to the middle of the screen.

<div class="table_center"></div>

Inside the div create an "a" tag. This will be the button.

  <div class="table_center">
       <a href="#">click</a>
  </div>

Now Comes the styling part, first remove the default styling and import the google font.

@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

html{
   height:100%;
   width:100%;
}

html, body{
  padding: 0;
  margin: 0;
  font-family: 'Raleway', sans-serif;
}

Style the body.

body{
   background-color: #ededed;
   height:100%;
   display:table;
   width:100%;
   text-align:center;
}

Style the Div container.

.table_center{
  display:table-cell;
  vertical-align: middle;
}

Now style the regular button.

 a{
  text-decoration:none;
  color:#000;
  margin:auto;
  width:150px;
  display:inline-block;
  line-height:40px;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  background-color: #fff;
   border:5px solid #000;
   box-shadow:1px 1px 0, 2px 2px 0, 3px 3px 0, 4px 4px 0,5px 5px 0;
  position: relative;
}

Giving a click effect to the button after it gets clicked.

 a:after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width:100%;
   z-index: -1;
  background-color: #fff;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
}

Giving it a simple hover effect.

a:hover{
  background-color: transparent;
}
 a:hover:after{
  background-color: #f6d51e;
}

Finish with Active Selector.

 a:active{
   top:5px;
   left:5px;
   box-shadow:0 0 0 0;
}

That's it, the CSS 3D Button with Click effect and Hover Effect is ready.

Copy the full code and run it for the output.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

html{
   height:100%;
   width:100%;
}

html, body{
  padding: 0;
  margin: 0;
  font-family: 'Raleway', sans-serif;
}

body{
   background-color: #ededed;
   height:100%;
   display:table;
   width:100%;
   text-align:center;
}

.table_center{
  display:table-cell;
  vertical-align: middle;
}
 a{
  text-decoration:none;
  color:#000;
  margin:auto;
  width:150px;
  display:inline-block;
  line-height:40px;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  background-color: #fff;
   border:5px solid #000;
   box-shadow:1px 1px 0, 2px 2px 0, 3px 3px 0, 4px 4px 0,5px 5px 0;
  position: relative;
}

 a:after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width:100%;
   z-index: -1;
  background-color: #fff;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
}
a:hover{
  background-color: transparent;
}
 a:hover:after{
  background-color: #f6d51e;
}

 a:active{
   top:5px;
   left:5px;
   box-shadow:0 0 0 0;
}
</style>
</head>
<body>
  <div class="table_center">
       <a href="#">
         click
       </a>
</div>
</body>
</html>

The output -

Basic Java Cube Root Program

Its Aomi — Fri, 29 Jul 2022 03:37:00 +0000

Here is a very basic cube root finder program made using java.

Get more Code examples here.

So, this is a very basic program, it just takes a input number and prints out its cube root using Math cbrt().

First it uses the Java Util Scanner Class to get the user input, then it converts the input to cube root using math.cbrt and prints the output.

import java.util.Scanner;
public class Program
{
    public static void main(String[] args) {
        // Creates Integer num
        int num = new Scanner(System.in).nextInt();
        // Converts the Int to Cube Root using Math.cbrt
        double cbrt = Math.cbrt(num);
        // Prints the Output
        System.out.println("Input Number: " + num + " Output: " + cbrt);
    }
}

Output:

Input Number: 10 
Output: 2.154434690031884

Simple Play/Pause Button using CSS

Its Aomi — Sun, 24 Jul 2022 06:35:06 +0000

Making a Simple Play Button with hover effect using CSS.

For more Play/Pause Buttons visit - https://xcattx.com/css-play-pause-buttons/

First create the Index.html file in a code editor.

Enter the basic html format.

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

Create the main Div Container.

  <div class="box"></div>

Create the Play / Pause button using label and a checkbox.

Now the html part is done, moving to styling. First enter the basic styling.

*, *:before, *:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background: #eff6d3;
  background-image: linear-gradient(-90deg, #255F3A, #26255F);
}

Now styling the box container.

.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 80px;
  margin: auto;
}

Styling the Play/Pause button.

.play-button {
  display: block;
  position: relative;
  width: 80px;
  height: 80px;
  margin: auto;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.play-button input[type=checkbox] {
  display: none;
}

Giving the Button click effect, so the button changes from pause to play icon on clicking.

.play-button input[type=checkbox]:checked ~ span::before, .play-button input[type=checkbox]:checked ~ span::after {
  border: 20px solid transparent;
  border-left: 40px solid #fff;
  border-right: 0;
}
.play-button input[type=checkbox]:checked ~ span::after {
  transform: translateY(-50%) scaleY(0.5);
}
.play-button span {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
}
.play-button span::before, .play-button span::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  border: 0 solid transparent;
  border-left: 16px solid #fff;
  transition: all 0.4s ease;
}
.play-button span::before {
  left: 0;
}
.play-button span::after {
  right: 0;
}

That's it, the output will be the following.

Full Code -

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
/* Variables
   ================================ */
/* Base
   ================================ */
*, *:before, *:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background: #eff6d3;
  background-image: linear-gradient(-90deg, #255F3A, #26255F);
}

/* Main
   ================================ */
.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 80px;
  margin: auto;
}

.play-button {
  display: block;
  position: relative;
  width: 80px;
  height: 80px;
  margin: auto;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.play-button input[type=checkbox] {
  display: none;
}
.play-button input[type=checkbox]:checked ~ span::before, .play-button input[type=checkbox]:checked ~ span::after {
  border: 20px solid transparent;
  border-left: 40px solid #fff;
  border-right: 0;
}
.play-button input[type=checkbox]:checked ~ span::after {
  transform: translateY(-50%) scaleY(0.5);
}
.play-button span {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
}
.play-button span::before, .play-button span::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  border: 0 solid transparent;
  border-left: 16px solid #fff;
  transition: all 0.4s ease;
}
.play-button span::before {
  left: 0;
}
.play-button span::after {
  right: 0;
}
</style>
</head>
<body>
  <div class="box">
  <label class="play-button"><input type="checkbox"><span></span></label>
</div>
</body>
</html>

Simple Bootstrap Card

Its Aomi — Sun, 17 Jul 2022 04:08:54 +0000

Here is how you can make a simple bootstrap card.

For more Bootstrap Card Examples visit here - Bootstrap Card Examples

First create the basic html format in a new index.html file and link the bootstrap stylesheet.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Cat Bootstrap Card</title>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
</head>
<body>
</body>
</html>

Create the Container for the Card

Now create the html container that will contain all the elements of the card. The container will have a top image, Heading, Description and a Read More button.

  <div class="container">
      <div class="row mt-5 justify-content-center">
        <div class="col">
          <div class="card custom-card border-0" style="width: 20rem;">
            <img
              src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
              class="card-img-top"
              alt="cat-image"
            />
            <div class="card-body">
              <h5 class="card-title font-weight-bold">
                Thinking of getting cat ?
              </h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn my-btn">Read more</a>
            </div>
          </div>
        </div>
      </div>
    </div>

After creating the container its time to style it.

Styling the Overall Card

.custom-card {
  margin: 0px auto;
  box-shadow: 0px 0px 50px rgba(165, 165, 165, 0.4);
  cursor: pointer;
}

Styling the Title & Description

.custom-card .card-title {
  font-size: 1.4rem;
}
.custom-card .card-text {
  color: #696969;
}

Styling the Button and Adding a Simple Hover effect to it

.custom-card .my-btn {
  background: #ba7b43;
  color: white;
}
.custom-card .my-btn:hover {
  color: white;
  background: #885427;
}

That's it for styling, Now combine all the css and html.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
<style>
.custom-card {
  margin: 0px auto;
  box-shadow: 0px 0px 50px rgba(165, 165, 165, 0.4);
  cursor: pointer;
}
.custom-card .card-title {
  font-size: 1.4rem;
}
.custom-card .card-text {
  color: #696969;
}
.custom-card .my-btn {
  background: #ba7b43;
  color: white;
}
.custom-card .my-btn:hover {
  color: white;
  background: #885427;
}
</style>
</head>
<body>
  <div class="container">
      <div class="row mt-5 justify-content-center">
        <div class="col">
          <div class="card custom-card border-0" style="width: 20rem;">
            <img
              src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
              class="card-img-top"
              alt="cat-image"
            />
            <div class="card-body">
              <h5 class="card-title font-weight-bold">
                Some text here?
              </h5>
              <p class="card-text">
                You can enter a simple description here.
              </p>
              <a href="#" class="btn my-btn">Read more</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

Here is the Output.

Simplistic CSS Blog Card

Its Aomi — Tue, 12 Jul 2022 04:37:39 +0000

Here's how to make a simple blog card with pure css.

For more CSS Blog Card Examples visit here.

Okay so now lets see the steps to create the Blog card.

Create index.html & Basic Html Format

First create a index.html file using any code editor and after that enter the basic html format in it.

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

We will not use any external stylesheet and just include the style in the head.

Create the Card Container

  <main>
    <div id="container">
      <a class="card-link" href="#">
        <article class="blog-card">
          <img class="post-image" src="https://images.unsplash.com/photo-1526925539332-aa3b66e35444?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" />
          <div class="article-details">
            <h4 class="post-category">Learning</h4>
            <h3 class="post-title">How to become a badass programmer</h3>
            <p class="post-description">Do you dream of becoming a computer programmer, but think you're not (and never will be) cut out for the job? Turns out you're probably...</p>
            <p class="post-author">By Codelex</p>
          </div>
        </article>
      </a>
    </div>
    </main>

The html container has first the main container, after that the article container which contains the things like the title, image and description.

Style the basic Things

First we'll style the main container and import the required fonts.

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

main {
  display: flex;
  font-family: 'Roboto', sans-serif;
  color: #777;
  background: #eedfcc;
  font-size: 16px;
  min-height: 100vh;
  line-height: 1.6;
  align-items: center;
  justify-content: center;
}

#container {
  width: 650px;
}

Style the Link and the Blog Card

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.blog-card {
  display: flex;
  flex-direction: row;
  background: #fff;
  box-shadow: 0 3px 24px rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  overflow: hidden;
  /* for rounded corners */
}

.card-link:hover .post-title {
  color: #e04f62;
}

.card-link:hover .post-image {
  opacity: 0.9;
}

Style the Image

.post-image {
  transition: opacity 0.3s ease;
  width: 40%;
  height: 280px;
  object-fit: cover;
}

Style the Article title, details and author

.article-details {
  padding: 24px;
}

.post-category {
  display: inline-block;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 3px;
  margin: 0 0 12px 0;
  padding: 0 0 4px 0;
  border-bottom: 2px solid #ebebeb;
}

.post-title {
  transition: color 0.3s ease;
  font-size: 17;
  line-height: 1.4;
  color: #121212;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.post-author {
  font-size: 14px;
  line-height: 1;
  margin: 17px 0 0 0;
  padding: 17px 0 0 0;
  border-top: 1px solid #ebebeb;
}

Use Media Query to Keep the Design Responsive

@media (max-width: 700px) {
  #container {
    width: 330px;
  }

  .post-image {
    width: 100%;
  }

  .blog-card {
    flex-wrap: wrap;
  }
}

That's it, now arrange everything in order and you will get a working css blog card.

Full Code

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

main {
  display: flex;
  font-family: 'Roboto', sans-serif;
  color: #777;
  background: #eedfcc;
  font-size: 16px;
  min-height: 100vh;
  line-height: 1.6;
  align-items: center;
  justify-content: center;
}

#container {
  width: 650px;
}

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.blog-card {
  display: flex;
  flex-direction: row;
  background: #fff;
  box-shadow: 0 3px 24px rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  overflow: hidden;
  /* for rounded corners */
}

.card-link:hover .post-title {
  color: #e04f62;
}

.card-link:hover .post-image {
  opacity: 0.9;
}

.post-image {
  transition: opacity 0.3s ease;
  width: 40%;
  height: 280px;
  object-fit: cover;
}

.article-details {
  padding: 24px;
}

.post-category {
  display: inline-block;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 3px;
  margin: 0 0 12px 0;
  padding: 0 0 4px 0;
  border-bottom: 2px solid #ebebeb;
}

.post-title {
  transition: color 0.3s ease;
  font-size: 17;
  line-height: 1.4;
  color: #121212;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.post-author {
  font-size: 14px;
  line-height: 1;
  margin: 17px 0 0 0;
  padding: 17px 0 0 0;
  border-top: 1px solid #ebebeb;
}

@media (max-width: 700px) {
  #container {
    width: 330px;
  }

  .post-image {
    width: 100%;
  }

  .blog-card {
    flex-wrap: wrap;
  }
}
</style>
</head>
<body>
  <body>
  <main>
    <div id="container">
      <a class="card-link" href="#">
        <article class="blog-card">
          <img class="post-image" src="https://images.unsplash.com/photo-1526925539332-aa3b66e35444?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" />
          <div class="article-details">
            <h4 class="post-category">Learning</h4>
            <h3 class="post-title">How to become a badass programmer</h3>
            <p class="post-description">Do you dream of becoming a computer programmer, but think you're not (and never will be) cut out for the job? Turns out you're probably...</p>
            <p class="post-author">By Codelex</p>
          </div>
        </article>
      </a>
    </div>
</main>
</body>
</html>

The Output

Here is the output of the above code -

Simple CSS Business Card

Its Aomi — Sat, 09 Jul 2022 18:58:56 +0000

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 -

A Simple C++ Odd or Even Checker

Its Aomi — Thu, 07 Jul 2022 04:37:03 +0000

Making a simple C++ Odd or Even Checker.

For more Source Codes visit here.

Create the basic c++ program format using header file iostream and namespace std.

#include <iostream>
using namespace std;

int main() 
{
   return 0;
}

After this create a integer variable n, and output a message and let the user enter a number.

   int n;
   cout<<"Enter number: ";
   cin>>n;

Now using if and else we will see whether the entered number is divisible by two, if it is then its a even number otherwise an odd number.

   if(n%2==0)
     cout<<n<<" It is an Even Number";
   else
     cout<<n<<" It is an Odd Number";

You can now complete the program and run it in any compiler to check its working.

#include <iostream>
using namespace std;

int main() 
{
   int n;
   cout<<"Enter number: ";
   cin>>n;
   if(n%2==0)
     cout <<n<< "\nIt is an Even Number";
   else
     cout <<n<< "\nIt is an Odd Number";
   return 0;
}

Making a Basic C Calculator

Its Aomi — Sat, 02 Jul 2022 03:53:56 +0000

Here's how you can make a Basic C Calculator.

Get more C Calculator Examples here.

Ill first give you the code then ill explain how it works.

#include <stdio.h>
#include <stdlib.h>

int main()

{
  double number1, number2; // Creates two variables

  printf("Enter First Number: "); // Takes First Number
  scanf("%lf", &number1); // Stores first number in number1

  printf("Enter Second Number: "); // Takes Second Number
  scanf("%lf", &number2); // Stores second number in number2

  printf("The Addition of the two is: %f", number1 + number2); // Prints out the addition of the two numbers
  return 0;

}

Okay so here's how the program works.

The program first makes two variables number1 and number2. Where we will be able to store our first and second number.

The program then asks the user for an input of the first number and second second number which are then stored in variable number1 and number2.

After the program got both the first number and second number it will add them together using operator '+' and print out the answer.

The program is using double instead of int so that it can calculate decimal numbers also.

You can change the '+' operator to anything else also like -, x etc.

Free CDN for Images.

Its Aomi — Tue, 21 Jun 2022 17:18:33 +0000

Who wouldn't like a free CDN for their website images. Well here's how you can get it.

Just take your website image URL for example - https://abc.com/mycat.png

Now before the URL use the CDN URL "cdn.statically.io/img/", like - https://cdn.statically.io/img/abc.com/mycat.png

Your image will be now served through Statically.io CDN.

Limitations - Currently no Limitations on Bandwidth or anything else, use it as much as you want.

Cache Duration - The images are cached for a period of 1 year.

Image Format Supported - Almost all common image formats like png, jpeg, svg, jpg.

Follow for more Interesting Posts 🥴