24-01-25/classutility.css at main · najiba93/24-01-25 · 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
.b-red {
    border: 1px solid red;
}


.carre {


    background-color: rgb(135, 135, 132);
}


.relative {
    position: relative;
}

.absolute {
    position: absolute;
}


.box-img {
    height: 20rem;

}.red{
    background: rgb(34,193,195);
    background: linear-gradient(0deg, rgb(83, 136, 137) 0%, rgba(253,187,45,1) 100%);
}
h3{
    background-image: linear-gradient(red,blue);
    color: transparent;
    background-clip: text;
}
.flex{
    display: flex;
}
.circle{
    background-color: black;
    height: 20px;
    width: 20px;
    border-radius: 50%;
}
.zoom {

    transition: transform .2s; /* Animation */

  }

  .zoom:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }

.box {
    width: 60vmin;
    height: 50vmin;
    display: grid;
    place-content: center;
    color: white;
    text-shadow: 0 1px 0 #000;


    --border-angle: 0turn;
    --main-bg: conic-gradient(
      from var(--border-angle),
      #213,
      #112 5%,
      #112 60%,
      #213 95%
    );


  border: solid 5px transparent;
  border-radius: 2em;
  --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);

    background:

      var(--main-bg) padding-box,

      var(--gradient-border) border-box,

      var(--main-bg) border-box;

    background-position: center center;

    animation: bg-spin 3s linear infinite;

}

.box:hover {
    animation-play-state: paused;
  }
button::after{
    transition: transform 0.3s ease-in-out;
    display: inline-block;
    content:"\f061";
    font-family: "font awesone 6 free";
    font-weight: 900;
    margin-left: 3px;

}