🔥FLOTING ACTION BUTTON 💯

💯FLOTING ACTION BUTTON:-


🔥SOURCE CODE:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Floating Action Button</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f4f4f4;
        }
        .fab-container {
            position: fixed;
            bottom: 30px;
            right: 30px;
        }
        .fab {
            width: 60px;
            height: 60px;
            background-color: #FF5722;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 24px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s, box-shadow 0.3s;
            cursor: pointer;
        }
        .fab:hover {
            background-color: #E64A19;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <div class="fab-container">
        <div class="fab">+</div>
    </div>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Image
 FULL FLAGED WEBSITE-1: WEBSITE: HTML-CODE: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title > Document </ title > </ head > < body >     < div id = "nav" >         < img src = "https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/logo-white.svg" alt = "" >         < h4 > TOPTRACER RANGE </ h4 >         < h4 > GOLF LESSONS </ h4 >         < h4 > ADVENTURE GOLF </ h4 >         < h4 > CAFE </ h4 >         < h4 > EVENTS </ h4 >     </ div >     < div id = "cursor" ><...
Read more

SIGMA WEB DEV JAVASCRIPT CLASS NOTES:

  JavaScript Variables, Data Types & Objects | Sigma Web Development Course    - Tutorial  #55   console . log ( "Shivam" ) ; console . log ( "hey this is tutorial 55" ) ; let a = 6 ; // data type number ... let b = 5 ; // data type number ... let c = "Harry" ; // data type "string" = collection of characters ... // console.log(a + b + 8); // // using typeof operator // console.log(typeof a,typeof b,typeof c); let _a = "Shubham" ; // chalega // var 55a = "Rohan"; // nahi chalega // const a1 = 6; redefining const is not allowed // a1 = a1 + 2; // its not allowed {     let a = 66 ;     console . log ( a ) ; } console . log ( a ) ; let x = "Harry bhai" ; let y = 3.33 ; let z = 22 ; const p = true ; let q = undefined ; let r = null ; console . log ( x , y , z , p , q , r ) ; console . log ( typeof x , typeof y , typeof z , typeof p , typeof q , typeof r ) ; // console.log(typ...
Read more

WEB DEV CODE NOTES :

@VIDEO - 63 (#JS , INDEX.JS) let arr = [ 1 , 2 , 3 , 4 , 5 ] index   0 , 1 , 2 , 3 , 4 arr [ 0 ] = 5666 ; console . log ( arr ) console . log ( arr .length) console . log ( arr , typeof arr ) console . log ( arr .length) console . log ( arr [ 0 ]) console . log ( arr [ 2 ]) console . log ( arr [ 4 ]) console . log ( arr . toString ()) console . log ( arr . join (" and ")) console . log ( arr . pop ()) //ye last wale element ko bahar  #nikal leta hai console . log ( arr . push ( 100 )) // ye last me element ko @add kar deta hai Notes : Or ye jo pop , push hai ye array ki length return karta hai ... . Notes : " pop " ye " shift " ka # Bhai or " push " ye " unshift " ka # Bhai hota hai ... . console . log ( arr . shift ())   //ye first wale element ko bahar #nikal leta hai console . log ( arr . unshift ( 12 )) // ye first me element ko @add kar deta hai console . log ( arr ) let a1 = [ 1 , 2 , 3 ] le...
Read more