DEV Community: Subhransu Patra

<input> tag, by default has a white background and a border. Looks decent, na? But sometimes, for me, it looks boring enough, for some reason that I don't know. But, for that instance I thought to edit this 'outdated' (I mustn't say it...) thing. Here I will share that code with you. Enjoy the article 🙃.

I have poem to share,

Design comes from your mind
It is a thing that someone could find
With it creativity is just 'yeah'
Someone said,
Without art, Earth is just 'eh'

Now, let's start the article,

First create an HTML file...

<!DOCTYPE html>
<html lang="en">
<head>
<title>How to make an awesome &lt;input&gt; tag using HTML and CSS
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

</body>
</html>

Then add <input> tag under <body> tag.

<input>

Add placeholder="" attribute in <input> tag to add a text in <input>

<input placeholder="Hello! 😎">

Default HTML <input> tag is ready. But it isn't looking sober. So we have to edit this...

First add some padding,

<input style="padding: 10px;" placeholder="Hello! 😎">

Then a background.

<input style="padding: 10px;background-color: rgba(225, 225, 255);" placeholder="Hello! 😎">

The a good-looking border.

<input style="padding: 10px;background-color: rgba(225, 225, 255);border: 2px solid rgba(155, 155, 255);" placeholder="Hello! 😎">

Border Radius; a must.

<input style="padding: 10px;background-color: rgba(225, 225, 255);border: 2px solid rgba(155, 155, 255);border-radius: 100px;" placeholder="Hello! 😎">

Then Change the font...

I used Poppins font from google as it is my favorite font.

So, to add google font, we must add this link to head tag.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">

<!DOCTYPE html>
<html lang="en">
<head>
<title>How to make an awesome &lt;input&gt; tag using HTML and CSS
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

<input style="padding: 10px;background-color: rgba(225, 225, 255);border: 2px solid rgba(155, 155, 255);border-radius: 100px;" placeholder="Hello! 😎">

</body>
</html>

Then add this font to <input>

<input style="padding: 10px;background-color: rgba(225, 225, 255);border: 2px solid rgba(155, 155, 255);border-radius: 100px;font-family: Poppins" placeholder="Hello! 😎">

And Now it is done!!!!!!!!

Full Code...

<!DOCTYPE html>
<html lang="en">
<head>
<title>How to make an awesome &lt;input&gt; tag using HTML and CSS
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

<input style="padding: 10px;background-color: rgba(225, 225, 255);border: 2px solid rgba(155, 155, 255);border-radius: 100px;font-family: Poppins" placeholder="Hello! 😎">

</body>
</html>

It is not as good but looking good enough than the default one 😂.

I think I should develop a whatsapp web clone but not sure about it. If you think it is a good idea then notify me through comment or like the post...

I will meet you in the next post, till then bye bye 😉.

A sneak peek to my new website design.

Cheer me up if you like it! 😊

I published My new Chapter

Subhransu Patra — Tue, 04 Jan 2022 08:13:02 +0000

I published my new Chapter under Inform Our World
Here is the link...

Chapter 2.4

Inform Our World

New Chapter Published!!

Subhransu Patra — Wed, 29 Dec 2021 04:02:32 +0000

I published my new website...
Link Here
Inform Our World
My Portfolio

Animate on click with Javascript!

Subhransu Patra — Sat, 25 Dec 2021 05:06:17 +0000

<p>Hello</p>
<p>Merry Christmas</p>

Previous Chapter Chapter 2 (Part 2)

Inform Our World Link here

My Portfolio

Animation with js? Not too much tough but if you are new to javascript, like me, then at first it would be a little bit difficult but with time, you would be coping up with it. So, lets start the topic of 'Animate on click with Javascript!'

First create a HTML file...

<!DOCTYPE html>
<html lang="en">
<head>
<title>Animate on click with Javascript!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

</body>
</html>

Then add any tag such as <a> or <p>. It is upto you which tag you will use to animate...

<p>Hello World!</p>

Here I used <p> tag. Then create an id="" for it. Let's name it animate. You can use anything...

<p id="animate">Hello World!</p>

Then we need a button so that if we clicked on it, it would animate as per our needs...

<button>Click to Animate</button>

then in the <button> tag add onclick="". It is very much essential for onclick animation.

<button onclick="beyblade()">Click to Animate</button>

I have put beyblade() in onclick="". () is very much essential...

Then add <script> in the body...

<script>

</script>

and in that add

<script>
function beyblade() {

}
</script>

The text after function will be the one you have written in onclick="" i.e. I have written onclick="beyblade()", the same I will write after function i.e.

function beyblade() {
}

So, let's take the element that we take be x. So to do this, implement..

<script>
function beyblade() {
let x = document.getElementById("animate")
}
</script>

then add the following component...

<script>
function beyblade() {
let x = document.getElementById("animate")
x.style.marginLeft = "300px"
x.style.transition = "1s"
}
</script>

x.style.transition will create transitions and 1s will create timing for it.

You can implement any css component in place of marginLeft such as x.style.color = red it will change the text color to red and x.style.backgroundColor = blue will change the background color to blue.

It helps us to create a hamburger menu also.

So, this is for today. I hope you liked the article and if you, then please notify me.

Full Code..

<!DOCTYPE html>
<html lang="en">
<head>
<title>Animate on click with Javascript!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

<p id="animate">Hello World!</p>

<button onclick="beyblade()">Click to Animate</button>

<script>
function beyblade() {
let x = document.getElementById("animate")
x.style.marginLeft = "300px"
x.style.transition = "1s"
}
</script>

</body>
</html>

Thanks for your time. 😺

I created My new Portfolio

Subhransu Patra — Wed, 22 Dec 2021 04:54:07 +0000

I created a new portfolio of myself.
Here is the link...

Subhransu Patra

Previous Chapter Chapter 2.2

Create a Hamburger Menu using only HTML and CSS!!!

Subhransu Patra — Mon, 20 Dec 2021 06:09:13 +0000

<p>Hello</p>

Previous Chapter Chapter 2 (Part 2)

Inform Our World Link here

Hamburger menu using only HTML and CSS? Ya, it is definitely possible {Not Kidding}. Using JavaScript for creating a Hamburger Menu is a little bit of difficult if you are new to the world of coding. (I literally found out difficult to create a Hamburger Menu using JS). But I have a solution for this...

Many people do not know this amazing tagname <details>

But only using (also <summary>) these two tags, we can make a Hamburger menu.

First create the HTML file...

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

</body>
</html>

then add <details> tag in the body...

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

<details>

</details>

</body>
</html>

then add <summary> tag under <details> tag.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

<details>
<summary>Hello There!</summary>
</details>

</body>
</html>

Then add the content...

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

<details>
<summary>Hello There!</summary>
<a href="https://inform-our-world.github.io/">My Website</a>
<a href="https://inform-our-world.github.io/Saqha/CH 2.2">Latest Chapter</a>
</details>

</body>
</html>

And yeah, your hamburger menu is created. But can you notice a thing. That is the arrow before the text. We can hide it too!!!

Just add...

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
details > summary {
list-style: none;
}
</style>
</head>
<body>

<details>
<summary>Hello There!</summary>
<a href="https://inform-our-world.github.io/">My Website</a>
<a href="https://inform-our-world.github.io/Saqha/CH 2.2">Latest Chapter</a>
</details>

</body>
</html>

To make it more appropriate,

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
details > summary {
list-style: none;
}
details {
cursor: pointer;
}
</style>
</head>
<body>

<details>
<summary>Hello There!</summary>
<a href="https://inform-our-world.github.io/">My Website</a>
<a href="https://inform-our-world.github.io/Saqha/CH 2.2">Latest Chapter</a>
</details>

</body>
</html>

Hamburger Menu is created!!!

To hide the underline in <a> tag, see the previous post...

How to remove underline in <a href=""> tag.

Thank you for your time 😁

New Chapter Published

Subhransu Patra — Sat, 18 Dec 2021 04:03:24 +0000

New Chapter Link :- Saqha, Chapter 2 Part 2
Inform Our World - My Website

How to remove underline in tag.

Subhransu Patra — Tue, 14 Dec 2021 04:41:47 +0000

<p>Hello</p>

Previous Chapter Chapter 2

Inform Our World Link here

<a> tag, an essential tag for web development. This is the only way (as I thought) to add hyperlinks to website. This tag plays a main role to make a NavBar and that in turn plays an important role in web-development. Many of my website or all of my website have a navbar in turn have a <a> tag.

But there is a problem in <a> tag. When you implement it such as

<a href="#">Hello</a>

Then the output text would have an underline. It is useful because we can distinguish between a hyperlink and a text. But when you want to create your own method of distinguishing, it is very much terrible to look with undrline text.

So, to prevent underline hyperlink, implement the following...

<style>
a {
color: /* Choose any */;
text-decoration: none;
}
</style>

<body>
<a href="#">Some Text...</a>
</body>

After implementing, the hyperlink will have no underline.

Thanks for Reading 😇

New Chapter Published

Subhransu Patra — Sun, 12 Dec 2021 04:47:33 +0000

A new chapter Published of my new short story. Link here
My Website Inform Our World