Стилизация карточки
добавил ахуенный дизайн карточки теперь выглядит круто и можно наводиться
This commit is contained in:
parent
5f569ff556
commit
ee88dfa11f
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
.vscode/settings.json
|
||||
BIN
public/Images/Campfire.png
Normal file
BIN
public/Images/Campfire.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
@ -3,23 +3,27 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>CampfireID</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./styles/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="profileblock">
|
||||
<img src="Images/Screenshot 2023-09-01 135601.png" alt="" class="profileimage">
|
||||
<p class="profilename">shelby</p>
|
||||
</div>
|
||||
<div class="statsblock">
|
||||
<p class="profilestats1">Роль: <span>Campfire</span>
|
||||
</p>
|
||||
<p class="profilestats2">Дата регистрации:</p>
|
||||
<p class="profilestats3">VPN доступ:</p>
|
||||
<p class="profilestats4">Minecraft доступ:</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containerloader">
|
||||
<div class="block">
|
||||
<span class="loader"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="userprofile">
|
||||
<div class="userprofile_left">
|
||||
<img src="Images/Screenshot 2023-09-01 135601.png" alt="Picture" class="userprofile_left_image">
|
||||
<p class="userprofile_left_name">Profilename</p>
|
||||
</div>
|
||||
<div class="userprofile_right">
|
||||
<p class="userprofile_right_info" id="info1">Роль:<br><span class="form">Campfire</span> </p>
|
||||
<p class="userprofile_right_info" id="info2">Дата регистрации:<br><span class="form">24.05.1941</span></p>
|
||||
<p class="userprofile_right_info" id="info3">Доступ к VPN:<br><span class="form">NO</span></p>
|
||||
<p class="userprofile_right_info" id="info4">Доступ к Minecraft:<br><span class="form">YES</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -20,101 +20,188 @@
|
||||
--black: #171717;
|
||||
--white: white;
|
||||
--orange: #ff5e00;
|
||||
--oragne-emission: #702900;
|
||||
--oragne-emission: #ff5e00;
|
||||
--grey: #858585;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--black);
|
||||
color: var(--white);
|
||||
font-family: PetrovSans;
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
header {
|
||||
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
column-gap: 10%px;
|
||||
padding: 10px 10%;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
list-style: none;
|
||||
border-radius: 30px;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.profileimage {
|
||||
max-width: 100px;
|
||||
border-radius: 10rem;
|
||||
}
|
||||
.profilename {
|
||||
body {
|
||||
background-image: url(../Images/Campfire.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
color: black;
|
||||
font-family: PetrovSans;
|
||||
font-weight: 700;
|
||||
}
|
||||
/* * {
|
||||
border: 1px solid white;
|
||||
} */
|
||||
.userprofile {
|
||||
margin:10% 20%;
|
||||
padding: 2% 8%;
|
||||
|
||||
|
||||
background-color: var(--white);
|
||||
box-shadow: 0 0 15px var(--black);
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
column-gap: 10%;
|
||||
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.userprofile_left {
|
||||
max-width: 40%;
|
||||
max-height: 100%;
|
||||
animation: leftanimation 1s 1 normal;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
}
|
||||
.userprofile_left_image {
|
||||
max-width: 100%;
|
||||
max-height: auto;
|
||||
border-radius: 10rem;
|
||||
object-fit: cover;
|
||||
outline: 5px solid var(--orange);
|
||||
outline-offset: -3px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
box-shadow: 0 0 20px var(--oragne-emission);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
}
|
||||
.userprofile_left_image:hover{
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 25px 10px var(--oragne-emission);
|
||||
}
|
||||
.userprofile_left_name {
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.profileblock {
|
||||
animation: profileanimation 2s 0.5 normal;
|
||||
animation-fill-mode: forwards;
|
||||
font-size: clamp(6px, 3vw, 24px);
|
||||
font-weight: 400;
|
||||
background-color: var(--orange);
|
||||
color: var(--white);
|
||||
border-radius: 5px;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
@keyframes profileanimation {
|
||||
|
||||
.userprofile_right_info {
|
||||
text-align: center;
|
||||
font-size: clamp(6px, 2vw, 24px);
|
||||
opacity: 0%;
|
||||
|
||||
}
|
||||
.form {
|
||||
background-color: var(--black);
|
||||
color: transparent;
|
||||
padding: 1% 10%;
|
||||
border-radius: 5px;
|
||||
font-weight: 400;
|
||||
background: linear-gradient(90deg,#ff3c00, #ff8800);
|
||||
background-clip: text;
|
||||
text-shadow: 0 0 20px var(--oragne-emission);
|
||||
}
|
||||
|
||||
#info1 {
|
||||
animation: rightanimation 1s 1 0s normal forwards;
|
||||
}
|
||||
#info2 {
|
||||
animation: rightanimation 1s 1 0.2s normal forwards;
|
||||
}
|
||||
#info3 {
|
||||
animation: rightanimation 1s 1 0.4s normal forwards;
|
||||
}
|
||||
#info4 {
|
||||
animation: rightanimation 1s 1 0.8s normal forwards;
|
||||
}
|
||||
|
||||
@keyframes rightanimation{
|
||||
0% {
|
||||
transform: translate(0%, 0%);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-63%, 0%);
|
||||
}
|
||||
}
|
||||
|
||||
.statsblock {
|
||||
line-height: 100%;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.profilestats1 {
|
||||
animation: profilestatsanimation 1s 1 normal;
|
||||
animation-fill-mode: forwards;
|
||||
transition: all 3s ease-in;
|
||||
animation-delay: 0s;
|
||||
opacity: 0%;
|
||||
}
|
||||
.profilestats2 {
|
||||
animation: profilestatsanimation 1s 1 normal;
|
||||
animation-fill-mode: forwards;
|
||||
transition: all 3s ease-in;
|
||||
animation-delay: 0.2s;
|
||||
opacity: 0%;
|
||||
}
|
||||
.profilestats3 {
|
||||
animation: profilestatsanimation 1s 1 normal;
|
||||
animation-fill-mode: forwards;
|
||||
transition: all 3s ease-in;
|
||||
animation-delay: 0.4s;
|
||||
opacity: 0%;
|
||||
}
|
||||
.profilestats4 {
|
||||
animation: profilestatsanimation 1s 1 normal;
|
||||
animation-fill-mode: forwards;
|
||||
transition: all 3s ease-in;
|
||||
animation-delay: 0.8s;
|
||||
opacity: 0%;
|
||||
}
|
||||
@keyframes profilestatsanimation {
|
||||
0% {
|
||||
transform: translate(300%, 0);
|
||||
transform: translate(200%, 0);
|
||||
opacity: 0%;
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes leftanimation {
|
||||
0% {
|
||||
overflow: hidden;
|
||||
transform: translate(-200%, 0);
|
||||
}
|
||||
100% {
|
||||
display: block;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.containerloader {
|
||||
background-color: var(--black);
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 120%;
|
||||
height: 120%;
|
||||
opacity: 100%;
|
||||
transform: translate(-8%, -21%);
|
||||
padding: 35%;
|
||||
animation: loadscreen 1s 1 normal forwards;
|
||||
|
||||
}
|
||||
.block {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
.loader::after {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
background: #FF3D00;
|
||||
width: 3px;
|
||||
height: 24px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadscreen {
|
||||
0% {
|
||||
z-index: 1;
|
||||
opacity: 100%;
|
||||
}
|
||||
80% {
|
||||
z-index: 1;
|
||||
opacity: 100%;
|
||||
}
|
||||
100% {
|
||||
opacity: 0%;
|
||||
z-index: -1
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user