diff --git a/public/Fonts/PetrovSans-Trial-Bold.otf b/public/Fonts/PetrovSans-Trial-Bold.otf
new file mode 100644
index 0000000..39665fa
Binary files /dev/null and b/public/Fonts/PetrovSans-Trial-Bold.otf differ
diff --git a/public/Fonts/PetrovSans-Trial-Light.otf b/public/Fonts/PetrovSans-Trial-Light.otf
new file mode 100644
index 0000000..eaf03e9
Binary files /dev/null and b/public/Fonts/PetrovSans-Trial-Light.otf differ
diff --git a/public/Fonts/PetrovSans-Trial-Regular.otf b/public/Fonts/PetrovSans-Trial-Regular.otf
new file mode 100644
index 0000000..a738b1a
Binary files /dev/null and b/public/Fonts/PetrovSans-Trial-Regular.otf differ
diff --git a/public/Images/Screenshot 2023-09-01 135601.png b/public/Images/Screenshot 2023-09-01 135601.png
new file mode 100644
index 0000000..be7b21b
Binary files /dev/null and b/public/Images/Screenshot 2023-09-01 135601.png differ
diff --git a/public/index.html b/public/index.html
index 27b8535..8086f14 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1 +1,25 @@
-
\ No newline at end of file
+
+
+
+
+
+
+ CampfireID
+
+
+
+
+
+

+
shelby
+
+
+
Роль: Campfire
+
+
Дата регистрации:
+
VPN доступ:
+
Minecraft доступ:
+
+
+
+
\ No newline at end of file
diff --git a/public/styles/main.css b/public/styles/main.css
index e69de29..a27226b 100644
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -0,0 +1,120 @@
+@font-face {
+ font-family: PetrovSans;
+ src: url(../Fonts/PetrovSans-Trial-Light.otf) format('opentype');
+ font-weight: 100;
+}
+@font-face {
+ font-family: PetrovSans;
+ src: url(../Fonts/PetrovSans-Trial-Regular.otf) format('opentype');
+ font-weight: 400;
+}
+@font-face {
+ font-family: PetrovSans;
+ src: url(../Fonts/PetrovSans-Trial-Bold.otf) format('opentype');
+ font-weight: 700;
+}
+
+
+
+:root {
+ --black: #171717;
+ --white: white;
+ --orange: #ff5e00;
+ --oragne-emission: #702900;
+}
+
+ul {
+ list-style: none;
+}
+
+body {
+ background-color: var(--black);
+ color: var(--white);
+ font-family: PetrovSans;
+ 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 {
+ font-family: PetrovSans;
+ font-weight: 700;
+ text-align: center;
+ font-size: 0.8em;
+}
+.profileblock {
+ animation: profileanimation 2s 0.5 normal;
+ animation-fill-mode: forwards;
+}
+
+@keyframes profileanimation {
+ 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);
+ opacity: 0%;
+ }
+ 100% {
+ transform: translate(0, 0);
+ opacity: 100%;
+ }
+}
\ No newline at end of file