PopUp

Css

body {
    font-family:'Roboto';
}

.popup-trigger {
    display: block;
    width: 170px;
    right: 2rem;
    margin: 3em auto;
    text-align: center;
    color: #FFF;
    font-size: 18px;
    padding:1rem 2rem;
    text-decoration:none;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 50em;
    background: #35a785;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
    transition:300ms all;
}

.popup-trigger:hover {
    opacity:.8;
}

.popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1000;
    width: 100%;
    background-color: rgba(94, 110, 141, 0.9);
    opacity: 0;
    visibility: hidden;
    transition:500ms all;

}

.popup.is-visible {
    opacity: 1;
    visibility: visible;
    transition:1s all;
}

.popup-container {
    transform:translateY(-50%);
    transition:500ms all;
    position: relative;
    width: 40%;
    margin: 2em auto;
    top: 5%;
    padding:5rem;
    background: #FFF;
    border-radius: .25em .25em .4em .4em;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.is-visible .popup-container {
    transform:translateY(0);
    transition:500ms all;
}

.popup-container .popup-close {
    position: absolute;
    top: 8px;
    font-size:0;
    right: 8px;
    width: 30px;
    height: 30px;
}


.popup-container .popup-close::before,
.popup-container .popup-close::after {
    content: '';
    position: absolute;
    top: 12px;
    width: 14px;
    height: 3px;
    background-color: #8f9cb5;
}

.popup-container .popup-close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 8px;
}

.popup-container .popup-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 8px;
}


.popup-container .popup-close:hover:before,
.popup-container .popup-close:hover:after {
    background-color:#35a785;
    transition:300ms all;
}


Component

function Popup() {
    return <>

        <div className="popup is-visible" role="alert">
            <div className="popup-container">
                <a href="#0" className="popup-close img-replace">Close</a>
                <p>Responsive Popup Responsive Popup Responsive Popup Responsive Popup Responsive Popup Responsive
                    Popup</p>
            </div>
        </div>

    </>
}




Comments

Post a Comment

Popular posts from this blog

MERN Stack Day 1

Image
Setup Node Js   Download and install node https://nodejs.org/en/download/prebuilt-installer Open CMD and type node -v and npm -v Create Sample React Js  Project open CMD or Vs Code and run following Command npx create-react-app app-name Run Project -> open cmd and run npm start Create Componant  install bootstrap Lib npm install bootstrap npm install bootstrap-icons import bootstrap and  bootstrap-icons import 'bootstrap/dist/css/bootstrap.min.css' ; import 'bootstrap-icons/font/bootstrap-icons.css' ; 1 Home Display all Book UI function Home () { return <> <> <div className =" p-4" > <div className ="row g-4" > <ProductCard/> <ProductCard/> <ProductCard/> <ProductCard/> </div> </div> </> </> } function ProductCard () { ...
Read more

My Sql Connection in Node Js CRUD Operation

 Install Lib npm install mysql2 Connect My Sql Database const mysql = require ( 'mysql2' ) ; // Create a MySQL connection const db = mysql. createConnection ({ host : 'localhost' , // Your MySQL host user : 'root' , // Your MySQL username password : '' , // Your MySQL password database : 'mydatabase' // Your MySQL database name }) ; // Connect to the database db . connect ((err) => { if (err) { console . error ( 'Error connecting to MySQL:' , err) ; return; } console . log ( 'Connected to MySQL database.' ) ; }) ; //Promise function allow const dbPromise = db. promise () ; Insert Data async function InsertRecord (name) { const query = 'INSERT INTO reg (Name) VALUES (?)' ; try { const [result] = await dbPromise. query (query , [name]) ; // Execute the query console . log ( `Record inserted with roll: ${result. insertId } ` ) ; } catch (e...
Read more

Sample Project

  1. Contact Manager Description : A web application where users can manage their personal or professional contacts. Users can create, view, edit, and delete contact details such as name, phone number, email, and address. Use Case : Ideal for individuals or small businesses to keep track of client or personal contact details. CRUD Operations : Create : Add a new contact. Read : Display a list of saved contacts. Update : Edit details of an existing contact. Delete : Remove a contact from the list. 2. Task Tracker Description : A simple task management tool where users can track their to-dos, categorize tasks, and mark them as complete or incomplete. Use Case : Helps users organize their daily activities or project tasks. CRUD Operations : Create : Add a new task with a title, description, and deadline. Read : View all tasks or filter by status (completed/incomplete). Update : Edit task details or update its status. Delete : Remove tasks that are no longer relevant. 3. Notes App Desc...
Read more