Hello Guys Today i am going to show you a contact page template which you might like and can use for your project.
This tutorial is straightforward and i am assuming you are already familiar with React
Lets get started...
Here is the working Demo , Open the Webpage and Click on "Contact" button.
https://knowledge-earth2k99.netlify.app/
First run this npm command in your terminal -
npm i react-icons tailwindcss
npx tailwindcss init
Add this cdn in your html file
<script src="https://cdn.tailwindcss.com"></script>
Structure of the page
import React, { useState } from "react";
import { AiOutlineWhatsApp } from "react-icons/ai";
import { MdOutgoingMail } from "react-icons/md";
import { AiFillLinkedin } from "react-icons/ai";
import { BsInstagram } from "react-icons/bs";
import "./Contact.css";
const Contact = () => {
const [display, setDiplay] = useState(false);
return (
<div>
<div className="bg-image"></div>
<div className="bg-text">
<h2 className="text-2xl py-3">I am Shubham Tiwari</h2>
<h1 className="text-4xl py-3 postTitle">WEB DEVELOPER at DevRonnins</h1>
<div
style={{ display: display ? "flex" : "none" }}
className="flex justify-center align-middle my-4 p-2"
>
<p className="flex justify-center align-middle my-2 p-2 space-x-5">
<a className="text-xl linkText" href="https://wa.me/YOUR_PHONE_NUMBER_WITH_COUNTRY_CODE">
<AiOutlineWhatsApp color="#ffcec5" className="contactIcons" />
</a>
</p>
<p className="flex justify-center align-middle my-2 p-2 space-x-5">
<a
className="text-xl linkText"
href="mailto:shubhmtiwri00@gmail.com"
>
<MdOutgoingMail color="#ffcec5" className="contactIcons" />
</a>
</p>
<p className="flex justify-center align-middle my-2 p-2 space-x-5">
<a
className="text-xl linkText"
href="https://www.linkedin.com/in/shubham-tiwari-b7544b193/"
target="_blank"
rel="noreferrer"
>
<AiFillLinkedin color="#ffcec5" className="contactIcons" />
</a>
</p>
<p className="flex justify-center align-middle my-2 p-2 space-x-5">
<a
className="text-xl linkText"
href="https://www.instagram.com/s_h.u_b.h_a.m_2k99/"
target="_blank"
rel="noreferrer"
>
<BsInstagram color="#ffcec5" className="contactIcons" />
</a>
</p>
</div>
<button
onClick={() => setDiplay(!display)}
className="ring-2 ring-red-200 bg-none text-slate-200 rounded-md px-4 py-2 my-4"
>
Contacts
</button>
</div>
</div>
);
};
export default Contact;
Exaplaination
First We have imported the required modules, Icons from "react-icon" and our CSS file named "Contact.css".
Then we created a state named display to create a button which will show and hide the contact icons.
Then we created a div with class ".bg-image" , it will have the image as background which we are going to give blur effect (The image link is provided in the CSS code below).
Then we created a div with class ".bg-text" , it will have the text part and icons and button part.
Then we created the text inside , icons and a button to toggle icons ( show and hide ).
In the button , we have used the onClick method to toggle the state of "display" and we have placed all the icons inside a div and that div has a style attribute inside which we have used the ternary operator which sets the display property of that div, if the "display" state is set to false the div will be hidden and if the "display" stats is set to true the div will be shown as flexbox.
Inside all the "anchor" tags , we have passed the links related to icons,for whatsapp icon , we have used the whatsApp link with your phone number and when the user click the icon , it will redirect to your whatsapp chat and same for other icons linkedin, instagram and gmail, you can add icons according to your need like github or any other thing which you want your users to redirect to.
We have given some elements additional class names to use that class name to style the element in CSS file ( Tailwindcss is best but has some limitations which can be solved by pure css ).
NOTE - The classes used for styling here is tailwindcss classes.
CSS File -
{
box-sizing: border-box;
}
.bg-image{
/ background properties /
background-image: url("https://wallpaperaccess.com/full/1163661.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/ display properties */
height: 100vh;
filter: blur(8px);
}
.bg-text{
width: 70%;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 2;
text-align: center;
color: aliceblue;
font-weight:600;
box-shadow: 10px 10px 30px black;
padding: 3rem;
border: 2px solid white;
border-radius: 10px;
text-shadow: 1px 1px 3px black;
}
.contactIcons{
font-size: 2.5rem;
}
@media screen and (min-width:100px) and (max-width:500px){
.bg-text{
width: 90%;
top: 80%;
}
.postTitle{
font-size: 1.8rem;
}
.linkText{
font-size: 0.7rem;
}
.contactIcons{
font-size: 1.5rem;
}
}
Explaination -
- First we have set the background image and other background properties of "bg-image" class, then we have blurred the element using filter property.
- Then we have styled the "bg-text" class , The properties position,top,left,transform is used to put the element inside the element with class "bg-image" and z-index:2 means it will be in upper layer and the blurred element will be in lower layer and rest of the styling is normal css.
- Then we have set the size of icons using the class name "contactIcons" and we have given this classname to all the icons elements.
- Then we have used the media queries to adjust the elements size according to screen breakpoint.
Output - PC View
Output - Phone View
Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--
Also check these posts as well
https://dev.to/shubhamtiwari909/waadu-css-a-mini-framework-4bfi
https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk
https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj
Top comments (4)
You can do quite a nice glass look with the backdrop-filter blur effect. Currently only firefox is holding out on the feature but they have it behind a flag so they'll catch up soon.
Sure i would try it
Nice article, I found one thing you could probably change.
It's better if you setup tailwind as a package rather than access from the cdn. Their documentation states this and it gives you a lot of configurability and also its better off using a
tailwind.config.jsto just purge the unused css.I provide the cdn for the beginners so they can use it easily
I installed TailwindCss as a package manager with its config.js file