diff --git a/css/style.css b/css/style.css
index 99d69e5..dfad9dc 100644
--- a/css/style.css
+++ b/css/style.css
@@ -17,36 +17,40 @@ body {
display: flex;
align-items: center;
justify-content: center;
- height: 100vh;
- overflow: hidden;
+ min-height: 100vh;
flex-direction: column;
color: #333333;
margin: 0;
opacity: 0;
font-family: ProblematicPiercer;
cursor: default;
+ padding: 20px;
+ box-sizing: border-box;
}
div.row {
display: flex;
flex-direction: row;
- width: 1000px;
+ width: 100%;
+ max-width: 1000px;
align-items: center;
}
div.photo {
- border-radius: 300px;
+ border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
background-image: url(../images/favicon.jpg);
width: 300px;
height: 300px;
- background-size: contain;
+ background-size: cover;
+ background-position: center;
margin-right: 80px;
}
div.info {
display: flex;
- width: 620px;
+ width: 100%;
+ max-width: 620px;
flex-direction: column;
}
@@ -64,10 +68,13 @@ div.bio {
}
div.social {
- display: flex;
- justify-content: space-between;
- margin-top: 100px;
- width: 960px;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr); /* 5 столбцов для десктопа */
+ gap: 20px;
+ justify-items: center;
+ margin-top: 50px;
+ width: 100%;
+ max-width: 960px;
}
.social div {
@@ -93,11 +100,9 @@ div.social {
.github { background-image: url(../images/social/github.png); }
.telegram { background-image: url(../images/social/telegram.png); }
.solus { background-image: url(../images/social/linux.png); }
-.blog { background-image: url(../images/social/blog.png); }
.ftp { background-image: url(../images/social/ftp.png); }
.band { background-image: url(../images/social/band.png); }
.soundcloud { background-image: url(../images/social/soundcloud.png); }
-.email { background-image: url(../images/social/email.png); }
.matrix { background-image: url(../images/social/matrix.png); }
.gallery { background-image: url(../images/social/gallery.png); }
@@ -105,7 +110,7 @@ div.social {
position: relative;
display: inline-block;
}
-
+
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
@@ -126,3 +131,63 @@ div.social {
visibility: visible;
opacity: 1;
}
+
+/* Медиа-запросы для мобильных устройств */
+@media screen and (max-width: 768px) {
+ body {
+ padding: 10px;
+ }
+
+ div.row {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ div.photo {
+ width: 150px;
+ height: 150px;
+ margin-right: 0;
+ margin-bottom: 20px;
+ }
+
+ div.info {
+ max-width: 100%;
+ padding: 0 10px;
+ }
+
+ div.title {
+ font-size: 30px;
+ }
+
+ div.bio {
+ font-size: 18px;
+ }
+
+ div.social {
+ grid-template-columns: repeat(3, 1fr); /* 3 столбца для мобильных */
+ gap: 10px;
+ margin-top: 30px;
+ }
+
+ .social div {
+ width: 40px;
+ height: 40px;
+ background-size: 80px auto;
+ }
+
+ .social div:hover {
+ background-position: -40px 0;
+ }
+
+ .tooltip .tooltiptext {
+ width: 100px;
+ margin-left: -50px;
+ font-size: 14px;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ div.social {
+ grid-template-columns: repeat(2, 1fr); /* 2 столбца для очень маленьких экранов */
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index d5cd6dd..2233360 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
+
Alexander Zhirov
@@ -34,11 +35,9 @@
Git
GitHub
Solus Linux
-
FTP
Band
Soundcloud
-
Gallery