Web_Designs2/design26.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!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>CSS CardS </title>
    <style>
    body
    {
        margin:0;
        padding:0;
        display:flex;
        justify-content:center;
        align-items: center;
        min-height:100vh;
        font-family:sans-serif;
        background:linear-gradient(45deg,#24006b,#f42f8c);
    }
    .container{
        width:1200px;
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
        grid-gap:15px;
        margin:0 auto;
    }
    .container .card{
        position: relative;
        width:300px;
        height:400px;
        margin:0 auto ;
        background:#fff;
        box-shadow: 0 15px 60px rgba(0,0,0,0.5);
    }
    .container .card .face{
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:100%;
        display:flex;
        justify-content: center;
        align-items: center;
    }
    .container .card .face.face1{
        box-sizing: border-box;
        padding:20px;
    }
    .container .card .face.face1 h2{
        margin:0;
        padding:0;
    }
    .container .card .face.face2{
        background:#111;
        transition:0.5s;
    }
    .container .card:nth-child(1) .face.face2{
        background:linear-gradient(45deg,#3503ad,#f73086);
    }
    .container .card:nth-child(2) .face.face2{
        background:linear-gradient(45deg,#ccff00,#09afff);
    }
    .container .card:nth-child(3) .face.face2{
        background:linear-gradient(45deg,#e91e63,#ffeb3b);
    }
    .container .card:hover .face.face2{
        height:60px;
    }
     .container .card .face.face2:before{
         content:"";
         position:absolute;
         top:0;
         left:0;
         width:50%;
         height:100%;
         background:rgba(255,255,255,.1);
     }
    .container .card .face.face2 h2{
        margin:0;
        padding:0;
        font-size:10em;
        color:#fff;
        transition:0.5s;
        text-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    .container .card:hover .face.face2 h2{
        font-size:2em;
    }

    </style>
    </head>
    <body>
    <div class="container">
        <div class="card">
            <div class="face face1">
                <div class="content">
                    <h2>Lorem ipsum dolor sit amet</h2>
                    <p>Lorem ipsum dolor sit amet consectetur hgber  gbrhgb ewhgb gefygy yegfygf hntejh  adiphil, quia ratione quibusdam nisi cumque.</p>
                </div>
            </div>
            <div class="face face2">
                <h2>01</h2>
            </div>

        </div>

        <div class="card">
            <div class="face face1">
                <div class="content">
                    <h2>Lorem ipsum dolor sit amet</h2>
   <p> hbvejdav cfadebjn wdADA fbrjgwh grbhgbh hgrbgb hrgwb GERSGR WDEG fefquibusdam  rgheugh eygfy wtfedt uthgueh nisi cumque.</p>
                </div>
            </div>
            <div class="face face2">
                <h2>02</h2>
            </div>

        </div>

        <div class="card">
            <div class="face face1">
                <div class="content">
                    <h2>Lorem ipsum dolor sit amet</h2>
                    <p>Lorem ipsum dolor ghn gbrhgb hegbwhrgbhw gfvgwhe kjuhki efwhgg khjek5j fgdh fjvnj iwjdi gjehg rghu sit amet consectetur adipisuibusdam nisi cumque.</p>
                </div>
            </div>
            <div class="face face2">
                <h2>03</h2>
            </div>

        </div>
    </div>

    </body>
    </html>