Web_Designs2/design31.html at master · TanuSharma2511/Web_Designs2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Glowing Border</title>
    <style>
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
        font-family:sans-serif;
    }
    body{
        display:flex;
        justify-content:center;
        align-items:center;
        min-height:100vh;
        flex-wrap:wrap;
        background:#010615;
    }
    .box{
        position:relative;
        width:300px;
        height:400px;
        display:flex;
         justify-content:center;
        align-items:center;

        background:#060c21;
        margin:40px;

    }
    .box:before{
        content:"";
        position:absolute;
        top:-2px;
        left:-2px;
        right:-2px;
        bottom:-2px;
        background:#fff;
        z-index:-1;
    }
    .box:after{
        content:"";
        position:absolute;
        top:-2px;
        left:-2px;
        right:-2px;
        bottom:-2px;
        background:#fff;
        z-index:-2;
        filter:blur(40px);
    }
    .box:nth-child(1):before,
    .box:nth-child(1):after{
        background:linear-gradient(235deg,#89ff00,#010615,#00bcd4);
    }
    .box:nth-child(2):before,
    .box:nth-child(2):after{
        background:linear-gradient(235deg,#ff005e,#010615,#fbff00);
    }
    .box:nth-child(3):before,
    .box:nth-child(3):after{
        background:linear-gradient(235deg,#772aff,#010615,#2196f3);
    }
    .box .glass{
        position:absolute;
        top:0;
        left:0;
        width:50%;
        height:100%;
        display:block;
        background:rgba(255,255,255,.1);
        pointer-events:none;
    }
    .box .content{
        padding:20px;
        color:#fff;
    }
    .box .content h2{
        text-align:center;
        padding:20px;
        font-size:30px;
    }
    </style>
    </head>
    <body>
    <div class="box">
    <div class="glass"></div>
    <div class="content">
    <h2>Glowing Border</h2>
    <p>lorem hfbvhsfb dsvjhvb dsbvhj dshbjvb jfr th fthbtdf frbsfdb thndhbnthe fsgsfbg rfbgdfrbhdefh grehgth svg sdg bhfrbhet hbhbre fbfsgvsd rbgbfsgrhfb hb hegwbjheh hrgbvhg hfgbweh hwgbhbw lorem hfbvhsfb dsvjhvb dslorem hfbvhsfb dsvjhvb dslorem hfbvhsfb dsvjhvb ds</p>

    </div>


    </div>
    <div class="box">
    <div class="glass"></div>
    <div class="content">
    <h2>Glowing Border</h2>
    <p>lorem hfbvhsfb dsvjhvb dsbvhj dshbjvb jfr th fthbtdf frbsfdb thndhbnthe fsgsfbg rfbgdfrbhdefh grehgth svg sdg bhfrbhet hbhbre fbfsgvsd rbgbfsgrhfb hb hegwbjheh hrgbvhg hfgbweh hwgbhbwlorem hfbvhsfb dsvjhvb ds lorem hfbvhsfb dsvjhvb ds lorem hfbvhsfb dsvjhvb ds</p>

    </div>


    </div>
    <div class="box">
    <div class="glass"></div>
    <div class="content">
    <h2>Glowing Border</h2>
    <p>lorem hfbvhsfb dsvjhvb dsbvhj dshbjvb jfr th fthbtdf frbsfdb thndhbnthe fsgsfbg rfbgdfrbhdefh grehgth svg sdg bhfrbhet hbhbre fbfsgvsd rbgbfsgrhfb hb hegwbjheh hrgbvhg hfgbweh hwgbhbw  lorem hfbvhsfb dsvjhvb ds lorem hfbvhsfb dsvjhvb ds lorem hfbvhsfb dsvjhvb ds</p>

    </div>


    </div>
    </body>
    </html>