DEV Community: Pinky Lalwani

How to Create an Email Link in HTML

Pinky Lalwani — Wed, 21 Sep 2022 07:54:19 +0000

Hey everyone! In this article you'll learn how to create an email link.

Before we get into creating an email link, we'll look at <a> Tag and its attribute.

Let's dive into this article 😃

`<a>` Tag

The <a> tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the <a>element is the href attribute, which indicates the link's destination.

`<a>` Attributes

download
hreflang

rel
type

IANA Media Types

target

To create an email link, you need to use the `<a>` tag with its href attribute, and insert a "mailto:" parameter after it.

The following fields can be filledout beforehand

subject

bcc

body

Note: you can add multiple values to CC and BCC by comma separating them.

🚀 Conclusion

Thanks for reading this out. Please feel free to leave your comments and follow for more interesting and educative posts.

Happy coding!

Learn about Specificity in CSS

Pinky Lalwani — Sat, 17 Sep 2022 13:58:54 +0000

In this article we're going to learn about the specificity in CSS.

What is Specificity?

If there are two or more css rules that point to the same element, the selector with the highest specificity value will win and its style declaration will be applied to that HTML element.

Let's checkout specificity example on codepen 👇

How to calculate specificity?

Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-class or attribute selector), add 1 for each element selector or pseudo-element.

Conclusion

Thanks for reading this out. Please feel free to leave your comments and follow for more interesting and educative posts.

If you liked this post then you can buy Me, My first coffee ever. Thanks in advance.🙂

Happy coding!

How to Create a Pricing Table of Equal Height

Pinky Lalwani — Fri, 11 Sep 2020 17:38:22 +0000

Hi👋
In this post we will see how we can create a Pricing Table of equal height using Flexbox.

Create a div with the class of container

 <div class="container">

We will now create 3 div with the same class pricing-grid inside the container

<div class="pricing-grid">
      <ul>
        <li class="header">Basic</li>
        <li>10Gb Storage</li>
        <li>10 Emails</li>
        <li>10 Domains</li>
        <li>Endless Support</li>
      </ul>
      <p class="price">$ 10</p>
      <p class="month">per month</p>
      <button>Sign Up</button>
    </div>
     <div class="pricing-grid">
      <ul>
        <li class="header">Pro</li>
        <li>10Gb Storage</li>
        <li>10 Emails</li>
        <li>10 Domains</li>
        <li>Endless Support</li>
        <li>Free Hosting</li>
      </ul>
      <p class="price">$ 10</p>
      <p class="month">per month</p>
      <button>Sign Up</button>
    </div>
     <div class="pricing-grid">
      <ul>
        <li class="header">Premium</li>
        <li>10Gb Storage</li>
        <li>10 Emails</li>
        <li>10 Domains</li>
        <li>Endless Support</li>
      </ul>
      <p class="price">$ 10</p>
      <p class="month">per month</p>
      <button>Sign Up</button>
    </div>

CSS

.container{
  max-width:1024px;
  margin:0 auto;
  display:flex;
}
li{
  list-style-type:none;
  padding:30px;
  border-bottom:1px solid rgba(0, 0, 0, 0.3);
}
li:last-child{
  border-bottom:0;
}
li.header{
  border-bottom:0;
  background-color:black;
  color:#fff;
  padding:20px;
}
ul{
  margin:0;
  padding:0;
}
button{
  padding:12px 20px;
  border:none;
  background-color:#000;
  color:#fff;
  align-items:flex-end;
}

So far we have created the basic structure of Pricing Table 😲

This will provide the Proper Spacing and Background color

.pricing-grid{
  flex-grow:1;
  background-color:rgba(0, 0, 0, 0.1);
  margin:20px;
  text-align:center;
  border-radius:4px;
}

Expectation 😀

Reality 🤷‍♀️

This can be achieve by using Nested Flexbox

.pricing-grid{
  display:flex;
  flex-wrap:wrap;
}
.pricing-grid > *{
  flex:1 1 100%;
}

At last align items to the Center

.container{
  align-items:center;
}

I hope this tutorial helped you. 🎉

How to create a Flip Card with CSS

Pinky Lalwani — Thu, 03 Sep 2020 20:03:21 +0000

Hello People🙋,

In this post, We will see how we can create Flip Card with CSS.

HTML:

    <div class="card-container">
     <div class="card">
       <div class="side">
         <h3>Front</h3>
       </div>
       <div class="side back">
         <h3>Back</h3>
       </div>
     </div>
    </div>

CSS:

/*card container with the height and width of 150px and used perspective for 3d*/
.card-container{
  cursor:pointer;
  height:150px;
  width:150px;
  perspective:600;
  position:relative;
}
/*card to fit the size of the card container by giving the width and height of 100% and position of absolute which is relative to the card container*/
.card{
  height:100%;
  width:100%;
  transform-style:preserve-3d;
  position:absolute;
  transition:all 1s ease-in-out;
}
/*card rotate from y axis on hover*/
.card:hover{
  transform:rotatey(180deg);
}
/*Front side of the card with the property of backface visibility to make the other side of card hidden*/
.side{
  backface-visibility:hidden;
  height:100%;
  width:100%;
  position:absolute;
  border-radius:6px;
  background-color:limegreen;
}
/*back side of the card*/
.back{
  transform:rotatey(180deg);
  background-color:hotpink;
}

Happy Coding! 🙌

How to achieve smooth box-shadow in CSS

Pinky Lalwani — Mon, 24 Aug 2020 17:05:45 +0000

In this post we are going to look at how we can achieve Smooth and Dreamy box-shadow.

box-shadow syntax (x-offset y-offset blur color)

By Layering multiple shadows, we can create Smooth box-shadow.

/* Default box-shadow */
  box-shadow:0px 6px 6px rgba(0, 0, 0, 0.11);

/* Multiple layering for smoother box-shadow */
  box-shadow:0px 2px 2px rgba(0, 0, 0, 0.15),
    0px 3px 3px rgba(0, 0, 0, 0.15),
    0px 6px 6px rgba(0, 0, 0, 0.15),
    0px 8px 8px rgba(0, 0, 0, 0.15);
}

In this example, We have used 4 shadows with 15% alpha.

Sharp Shadows with Decreasing alpha.
Diffuse Shadows with Increasing alpha.

The blur radius if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

Tool: https://brumm.af/shadows

Happy Coding!😀

How to create a hero image

Pinky Lalwani — Fri, 21 Aug 2020 11:40:45 +0000

Here's what we'll be creating

Hey!👋

I hope you enjoyed my previous post where we build the Navigation using Flexbox.

In this post, we are going to code the Hero Section.

HTML:

<main>
        <div class="hero-img">
            <div class="container">
                <div class="inside-container">
                    <div class="hero-content">
                        <h2>Start something that matters</h2>
                        <p>Stop wasting valuable time with projects that just isn't you.</p>
                        <a href="#">Learn more start today</a>
                    </div>
                    <div class="icons">
                        <li><i class="fab fa-facebook-square"></i></li>
                        <li><i class="fab fa-instagram"></i></li>
                        <li><i class="fab fa-twitter"></i></li>
                    </div>
                </div>
            </div>
        </div>
    </main>

CSS:

.hero-img{
    background-image: url(images/Macbook.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    width:100%;
    position: relative;
}
.inside-container{
    display: flex;
    height: 100vh;
    justify-content:flex-start;
    align-items: center;
}
.hero-content{
    color:#fff;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}
h2{
    font-weight: 400;
    font-size: 3.25rem;
    letter-spacing: 1px;
}
p{
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: 1px;
    margin-bottom: 2.25rem;
}
.hero-content a{
    text-decoration: none;
    color:#000;
    font-weight: 400;
    border: 1px solid transparent;
    background-color: #CCCCCC;
    padding:15px 25px;
    font-size: 1rem;
    margin: 0;
    display:inline-block;
    letter-spacing: 1px;
    text-transform: initial;
}
.hero-content a:hover{
    background-color: #fff;
}
.hero-img::after{
    content: "";
    background-color: rgba(0, 0, 0, 0.342);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}
li{
    list-style-type:none;
}
.icons{
    display: flex;
    color: #fff;
    font-size:25px;
    position: absolute;
    z-index: 2;
    color: #CCCCCC;
    bottom: 0;
    padding:25px 0px;
}

If you have any questions feel free to ask.

Happy Coding!🙌

How to create a navigation using Flexbox

Pinky Lalwani — Thu, 20 Aug 2020 20:26:58 +0000

Here’s what we’ll be creating:

Hey!👋

In this post, we are going to create a navigation using Flexbox property.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/41adfddec4.js" crossorigin="anonymous"></script>

</head>
<body>
    <div class="container">
        <header>
            <div class="logo">logo</div>
            <nav>
                <a href="#">about</a>
                <a href="#"><i class="fas fa-user"></i>team</a>
                <a href="#"><i class="fas fa-th"></i>work</a>
                <a href="#"><i class="fas fa-dollar-sign"></i>pricing</a>
                <a href="#"><i class="fas fa-envelope"></i>contact</a>
            </nav>
        </header>
    </div>

CSS:

*{
    box-sizing: border-box;
}
body{
    margin:0;
    padding:0;
    font-family: 'Montserrat', sans-serif;
    font-size:1.125rem;
}
.container{
    max-width:1366px;
    margin:0 auto;
}
header{
    display:flex;
    align-items: center;
    padding:15px 0;
}
.logo{
    margin-right:auto;
    text-transform: uppercase;
    font-weight: 300;
    font-size:1.5rem;
}
a{
    text-decoration: none;
    color:#000000;
    text-transform:uppercase;
    font-weight: 400;
    font-size: 1rem;
    margin-left: 1rem;
}
i{
    padding-right: 5px;
}

If you have any questions feel free to ask.

Happy Coding!🙌😉

DEV Community: Pinky Lalwani

How to Create an Email Link in HTML

<a> Tag

<a> Attributes

To create an email link, you need to use the <a> tag with its href attribute, and insert a "mailto:" parameter after it.

🚀 Conclusion

Learn about Specificity in CSS

What is Specificity?

How to calculate specificity?

Conclusion

How to Create a Pricing Table of Equal Height

CSS

Expectation 😀

Reality 🤷‍♀️

How to create a Flip Card with CSS

HTML:

CSS:

How to achieve smooth box-shadow in CSS

Tool: https://brumm.af/shadows

How to create a hero image

Here's what we'll be creating

HTML:

CSS:

How to create a navigation using Flexbox

Here’s what we’ll be creating:

HTML:

CSS:

`<a>` Tag

`<a>` Attributes

To create an email link, you need to use the `<a>` tag with its href attribute, and insert a "mailto:" parameter after it.