alexander
/
web-page
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

тестирую

This commit is contained in:
Alexander 2025-04-20 02:17:27 +03:00
parent 09efa92792
commit 576eaa9ed5
2 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css/style.css
View File

@ -17,7 +17,7 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 100vh; /* min-height: 140vh; */
flex-direction: column; flex-direction: column;
color: #333333; color: #333333;
margin: 0; margin: 0;
@ -67,14 +67,18 @@ div.bio {
text-align: justify; text-align: justify;
} }
div.icons {
min-height: 400px;
}
div.social { div.social {
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); /* 5 столбцов для десктопа */ grid-template-columns: repeat(6, 1fr); /* 5 столбцов для десктопа */
gap: 20px; gap: 60px;
justify-items: center; justify-items: center;
margin-top: 50px; margin-top: 50px;
width: 100%; width: 100%;
max-width: 960px; max-width: 600px;
} }
.social div { .social div {
@ -121,7 +125,7 @@ div.social {
padding: 5px 0; padding: 5px 0;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 110%; top: 100%;
opacity: 0; opacity: 0;
transition: opacity 1s; transition: opacity 1s;
font-family: Whypo-rrey; font-family: Whypo-rrey;
@ -136,6 +140,7 @@ div.social {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
body { body {
padding: 10px; padding: 10px;
/* min-height: 170vh; */
} }
div.row { div.row {
@ -163,9 +168,13 @@ div.social {
font-size: 18px; font-size: 18px;
} }
div.icons {
min-height: 150%;
}
div.social { div.social {
grid-template-columns: repeat(3, 1fr); /* 3 столбца для мобильных */ grid-template-columns: repeat(3, 1fr); /* 3 столбца для мобильных */
gap: 10px; gap: 60px;
margin-top: 30px; margin-top: 30px;
} }

32
index.html
View File

@ -24,21 +24,23 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row social"> <div class="icons">
<div class="tooltip mastodon"><span class="tooltiptext">Mastodon</span></div> <div class="row social">
<div class="tooltip twitter"><span class="tooltiptext">Twitter</span></div> <div class="tooltip mastodon"><span class="tooltiptext">Mastodon</span></div>
<div class="tooltip linkedin"><span class="tooltiptext">LinkedIn</span></div> <div class="tooltip twitter"><span class="tooltiptext">Twitter</span></div>
<div class="tooltip facebook"><span class="tooltiptext">Facebook</span></div> <div class="tooltip linkedin"><span class="tooltiptext">LinkedIn</span></div>
<div class="tooltip instagram"><span class="tooltiptext">Instagram</span></div> <div class="tooltip facebook"><span class="tooltiptext">Facebook</span></div>
<div class="tooltip matrix"><span class="tooltiptext">Matrix</span></div> <div class="tooltip instagram"><span class="tooltiptext">Instagram</span></div>
<div class="tooltip telegram"><span class="tooltiptext">Telegram</span></div> <div class="tooltip matrix"><span class="tooltiptext">Matrix</span></div>
<div class="tooltip git"><span class="tooltiptext">Git</span></div> <div class="tooltip telegram"><span class="tooltiptext">Telegram</span></div>
<div class="tooltip github"><span class="tooltiptext">GitHub</span></div> <div class="tooltip git"><span class="tooltiptext">Git</span></div>
<div class="tooltip solus"><span class="tooltiptext">Solus Linux</span></div> <div class="tooltip github"><span class="tooltiptext">GitHub</span></div>
<div class="tooltip ftp"><span class="tooltiptext">FTP</span></div> <div class="tooltip solus"><span class="tooltiptext">Solus Linux</span></div>
<div class="tooltip band"><span class="tooltiptext">Band</span></div> <div class="tooltip ftp"><span class="tooltiptext">FTP</span></div>
<div class="tooltip soundcloud"><span class="tooltiptext">Soundcloud</span></div> <div class="tooltip band"><span class="tooltiptext">Band</span></div>
<div class="tooltip gallery"><span class="tooltiptext">Gallery</span></div> <div class="tooltip soundcloud"><span class="tooltiptext">Soundcloud</span></div>
<div class="tooltip gallery"><span class="tooltiptext">Gallery</span></div>
</div>
</div> </div>
</body> </body>
</html> </html>