BHARATBHRMAN/culture.css at main · AnushkaTiwari2/BHARATBHRMAN · 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
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&family=Tiro+Bangla:ital@1&display=swap');
* {
                    padding: 0;
                    margin: 0;
                    font-family: 'IBM Plex Sans', sans-serif;
                  }
                  body {
                    background-image: linear-gradient(to bottom right, #F9E7FE, #DAFCFC);
                    overflow: hidden;

                  }
                  .container {
                    width: 100%;
                    max-width: 1260px;
                    margin: auto;
                  }
                  h2.heading {
                     /* margin-top: 20px; */
                     padding-top: 10px;
                     margin-top: 40px;
                     margin-bottom: 90px;
                      text-align: center;
                      color: black;
                      font-size: 50px;
                      font-family: 'Tiro Bangla', serif;
                  }
                  .profile-card {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      /* height: 100vh; */
                  }
                  .card-grid {
                      /* display: grid;
                      grid-template-columns: 1fr 1fr 1fr 1fr;
                      grid-gap: 20px; */
                      display: flex;
                      align-items: center;
                      justify-items: space-between;
                      margin-top: 0px;
                  }
                  .card {
                      width: 50%;
                      height: 400px;
                      display: block;
                      border-radius: 10px;
                      margin-right: 50px;
                      padding: 2px;
                      background: #fff;
                      overflow: hidden;
                      position: relative;
                      filter: blur(3px);
                      transition: background 0.8s linear;
                  }
                  /* .card0 {
                      background: url(https://i.ibb.co/JcMGzxT/01.jpg) center center no-repeat;
                      background-size: 400px;
                  } */
                  .card1 {
                      background: url(https://i.ibb.co/ZY4Dybj/02.jpg) center center no-repeat;
                      background-size: 900px;
                  }
                  .card2 {
                      background: url(https://i.ibb.co/c2n1k9v/03.jpg) center center no-repeat;
                      background-size: 900px;
                  }
                  /* .card3 {
                      background: url(https://i.ibb.co/ftVKH2p/04.jpg) center center no-repeat;
                      background-size: 400px;
                  } */
                  .card:hover {
                    background-size: 900px;
                    background-position: left center;
                    filter: unset;
                  }
                  .overlay {
                      opacity: 1;
                      height: 100%;
                      padding: 20px;
                      background: rgba(0 0 0 / .4);
                      transition: opacity 0.8s linear;
                  }
                  h2, p {
                      color: #fff;
                  }
                  .content > h2 {
                      margin-bottom: 10px;
                  }

                  .content {
                      height: 90%;
                      position: relative;
                      right: -1000px;
                      transition:right 0.8s linear;
                  }
                  .icons {
                      position: absolute;
                      left: 10px;
                      bottom: 10px;
                      color: #fff;
                      height: 160px;
                      display: flex;
                      flex-direction: column;
                      justify-content: space-around;
                      align-items: center;
                      opacity: 0;
                      transition:opacity 0.8s linear;

                  }
                  .icons > a {
                    color: #fff;
                  }
                  .card:hover .content {
                      right: 0;
                  }
                  .card:hover .icons {
                    opacity: 1;
                  }