редизайн

eng/index.html

@@ -32,16 +32,16 @@
                 <h3>Telegram: <a href="//t.me/xelframe" target="_blank">xelframe</a></h3>
                 <h3>Github: <a href="//github.com/xelframe" target="_blank">xelframe</a></h3>
                 <h3>Steam: <a href="//steamcommunity.com/id/xelframe" target="_blank">xelframe</a></h3>
-                <h3>YouTube: <a href="//www.youtube.com/@wol_xd" target="_blank">@wol_xd</a></h3>
+                <h3>YouTube: <a href="//www.youtube.com/@xelframe" target="_blank">@xelframe</a></h3>
             <br>
             <h2>My friends:</h2>
                 <h3>HonakAC: <a href="//honakac.github.io" target="_blank">honakac.github.io</a></h3>
                 <h3>Cat.: <a href="//patrickstar8753.github.io" target="_blank">patrickstar8753.github.io</a></h3>
                 <h3>Gamma63: <a href="//delta-gamma.org" target="_blank">delta-gamma.org</a></h3>
             <br>
-            <h3><a href="/">Russian</a>/English</h3>
+            <h3><a href="/">Русский</a>/English</h3>
         </main>
-
+        <br>
         <div id="webring">
             <a href="https://otomir23.me/webring/34/prev">~prev</a>
             <a href="https://otomir23.me/webring" target="_blank">webring</a>

index.html

@@ -12,7 +12,6 @@
         <br>
         <main>
             <h1>Добро пожаловать на страницу xelframe</h1>
-
             <div id="buttons">
 
                 <a href="games/"><img width="64" src="images/flashpla.svg"
@@ -32,20 +31,20 @@
                 <h3>Telegram: <a href="//t.me/xelframe" target="_blank">xelframe</a></h3>
                 <h3>Github: <a href="//github.com/xelframe" target="_blank">xelframe</a></h3>
                 <h3>Steam: <a href="//steamcommunity.com/id/xelframe" target="_blank">xelframe</a></h3>
-                <h3>YouTube: <a href="//www.youtube.com/@wol_xd" target="_blank">@wol_xd</a></h3>
+                <h3>YouTube: <a href="//www.youtube.com/@xelframe" target="_blank">@xelframe</a></h3>
             <br>
             <h2>Мои друзья:</h2>
                 <h3>HonakAC: <a href="//honakac.github.io" target="_blank">honakac.github.io</a></h3>
                 <h3>Cat.: <a href="//patrickstar8753.github.io" target="_blank">patrickstar8753.github.io</a></h3>
                 <h3>Gamma63: <a href="//delta-gamma.org" target="_blank">delta-gamma.org</a></h3>
             <br>
-            <h3>Russian/<a href="/eng/">English</a></h3>
+            <h3>Русский/<a href="/eng/">English</a></h3>
         </main>
-
+        <br>
         <div id="webring">
-            <a href="https://otomir23.me/webring/34/prev">~prev</a>
+            <a href="https://otomir23.me/webring/34/prev">~предыдущий</a>
-            <a href="https://otomir23.me/webring" target="_blank">webring</a>
+            <a href="https://otomir23.me/webring" target="_blank">вебринг</a>
-            <a href="https://otomir23.me/webring/34/next">next~</a>
+            <a href="https://otomir23.me/webring/34/next">следующий~</a>
         </div>
     </body>
 </html>

styles.css

@@ -1,34 +1,60 @@
-@font-face {
-    font-family: 'JetBrains Mono';
-    src: url('font/JetBrainsMono-Bold.ttf') format('truetype');
-    font-weight: bold;
-    font-display: swap;
-}
-
 body {
     margin: 0;
     min-height: 100svh;
     font: 14px 'JetBrains Mono', monospace;
     color: #fff;
     text-align: center;
-    background: black url(images/bg.jpg) center/cover fixed;
+    background: #222222;
+    /* background: black url(images/bg.jpg) center/cover fixed; */
+    /* background: #333333; */
+    /* background: #292929; */
     flex-direction: column;
     
 }
 
-main {
+main,
-    max-width: 800px;
+#webring,
+#hello {
+    max-width: 1000px;
     width: calc(100% - 20px); 
     margin: 0 auto;
     padding: 20px;
-    border-radius: 15px;
+    /* border-radius: 15px; */
     box-sizing: border-box;
+    border: 4px double rgb(180, 180, 180);
 }
 
-#webring,
+#buttons {
-main {
+    padding: 15px;
-    background-color: rgba(34, 34, 34, 0.3);
+    margin: 0 auto;
+    border: 4px double rgb(180, 180, 180);
+    width: 300px; 
+}
+
+
+a {
+    text-decoration: none;
+}
+
+iframe {
+  border: 2px solid rgb(180, 180, 180);
+}
+
+/* <-----------------------> */
+
+#webring {
+    max-width: 1000px;
+    width: calc(100% - 20px); 
+    margin: 0 auto;
+    padding: 20px;
+    /* border-radius: 15px; */
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    background-color: rgba(34, 34, 34, 0.7);
     backdrop-filter: blur(10px);
+    border: 4px double rgb(180, 180, 180);
 }
 
 body,
@@ -38,19 +64,6 @@ body,
     display: flex;
 }
 
-#webring {
-    justify-content: center;
-    gap: 15px;
-    align-items: center;
-    width: 100%;
-    margin-top: auto;
-    text-decoration: underline;
-}
-
-a {
-    text-decoration: none;
-}
-
 a,
 #webring {
     color: rgb(66, 131, 252);
@@ -59,7 +72,7 @@ a,
 #buttons {
     justify-content: center;
     gap: 20px;
-    margin: 20px 0;
+    
 }
 
 #buttons img {
@@ -78,10 +91,6 @@ a,
     margin-left: 100px;
 }
 
-iframe {
-  border: 2px solid rgb(66, 131, 252);
-}
-
 #gamesicon {
     border-radius: 50%; 
     height: 64px; 
@@ -89,6 +98,8 @@ iframe {
     box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.45);
 }
 
+/* <-----------------------> */
+
 @media (max-width: 600px) {
     body {
         gap: 15px;
@@ -113,6 +124,13 @@ iframe {
         margin: 10px auto 0;
         padding: 8px 12px;
         box-sizing: border-box;
-        border-radius: 15px;
+        /* border-radius: 15px; */
     }
 }
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    src: url('font/JetBrainsMono-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-display: swap;
+}