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

Compare commits

base: alexander:dev
Branches Tags
alexander:master
alexander:dev
alexander:v0.1.0
..
compare: alexander:master
Branches Tags
alexander:dev
alexander:master
alexander:v0.1.0

No commits in common. "dev" and "master" have entirely different histories.
dev ... master

2 changed files with 31 additions and 106 deletions
Show Stats Expand all files Collapse all files

102
css/style.css
View File

@ -17,40 +17,36 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* min-height: 140vh; */ height: 100vh;
overflow: hidden;
flex-direction: column; flex-direction: column;
color: #333333; color: #333333;
margin: 0; margin: 0;
opacity: 0; opacity: 0;
font-family: ProblematicPiercer; font-family: ProblematicPiercer;
cursor: default; cursor: default;
padding: 20px;
box-sizing: border-box;
} }
div.row { div.row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 1000px;
max-width: 1000px;
align-items: center; align-items: center;
} }
div.photo { div.photo {
border-radius: 50%; border-radius: 300px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; 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); background-image: url(../images/favicon.jpg);
width: 300px; width: 300px;
height: 300px; height: 300px;
background-size: cover; background-size: contain;
background-position: center;
margin-right: 80px; margin-right: 80px;
} }
div.info { div.info {
display: flex; display: flex;
width: 100%; width: 620px;
max-width: 620px;
flex-direction: column; flex-direction: column;
} }
@ -67,18 +63,11 @@ div.bio {
text-align: justify; text-align: justify;
} }
div.icons {
min-height: 400px;
}
div.social { div.social {
display: grid; display: flex;
grid-template-columns: repeat(6, 1fr); /* 5 столбцов для десктопа */ justify-content: space-between;
gap: 60px; margin-top: 100px;
justify-items: center; width: 960px;
margin-top: 50px;
width: 100%;
max-width: 600px;
} }
.social div { .social div {
@ -104,9 +93,11 @@ div.social {
.github { background-image: url(../images/social/github.png); } .github { background-image: url(../images/social/github.png); }
.telegram { background-image: url(../images/social/telegram.png); } .telegram { background-image: url(../images/social/telegram.png); }
.solus { background-image: url(../images/social/linux.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); } .ftp { background-image: url(../images/social/ftp.png); }
.band { background-image: url(../images/social/band.png); } .band { background-image: url(../images/social/band.png); }
.soundcloud { background-image: url(../images/social/soundcloud.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); } .matrix { background-image: url(../images/social/matrix.png); }
.gallery { background-image: url(../images/social/gallery.png); } .gallery { background-image: url(../images/social/gallery.png); }
@ -114,7 +105,7 @@ div.social {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.tooltip .tooltiptext { .tooltip .tooltiptext {
visibility: hidden; visibility: hidden;
width: 120px; width: 120px;
@ -125,7 +116,7 @@ div.social {
padding: 5px 0; padding: 5px 0;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 100%; top: 110%;
opacity: 0; opacity: 0;
transition: opacity 1s; transition: opacity 1s;
font-family: Whypo-rrey; font-family: Whypo-rrey;
@ -135,68 +126,3 @@ div.social {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
/* Медиа-запросы для мобильных устройств */
@media screen and (max-width: 768px) {
body {
padding: 10px;
/* min-height: 170vh; */
}
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.icons {
min-height: 150%;
}
div.social {
grid-template-columns: repeat(3, 1fr); /* 3 столбца для мобильных */
gap: 60px;
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 столбца для очень маленьких экранов */
}
}

35
index.html
View File

@ -2,7 +2,6 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alexander Zhirov</title> <title>Alexander Zhirov</title>
<link href="css/style.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet">
<link href="css/jquery-ui.css" rel="stylesheet"> <link href="css/jquery-ui.css" rel="stylesheet">
@ -24,23 +23,23 @@
</div> </div>
</div> </div>
</div> </div>
<div class="icons"> <div class="row social">
<div class="row social"> <div class="tooltip mastodon"><span class="tooltiptext">Mastodon</span></div>
<div class="tooltip mastodon"><span class="tooltiptext">Mastodon</span></div> <div class="tooltip twitter"><span class="tooltiptext">Twitter</span></div>
<div class="tooltip twitter"><span class="tooltiptext">Twitter</span></div> <div class="tooltip linkedin"><span class="tooltiptext">LinkedIn</span></div>
<div class="tooltip linkedin"><span class="tooltiptext">LinkedIn</span></div> <div class="tooltip facebook"><span class="tooltiptext">Facebook</span></div>
<div class="tooltip facebook"><span class="tooltiptext">Facebook</span></div> <div class="tooltip instagram"><span class="tooltiptext">Instagram</span></div>
<div class="tooltip instagram"><span class="tooltiptext">Instagram</span></div> <div class="tooltip matrix"><span class="tooltiptext">Matrix</span></div>
<div class="tooltip matrix"><span class="tooltiptext">Matrix</span></div> <div class="tooltip telegram"><span class="tooltiptext">Telegram</span></div>
<div class="tooltip telegram"><span class="tooltiptext">Telegram</span></div> <div class="tooltip git"><span class="tooltiptext">Git</span></div>
<div class="tooltip git"><span class="tooltiptext">Git</span></div> <div class="tooltip github"><span class="tooltiptext">GitHub</span></div>
<div class="tooltip github"><span class="tooltiptext">GitHub</span></div> <div class="tooltip solus"><span class="tooltiptext">Solus Linux</span></div>
<div class="tooltip solus"><span class="tooltiptext">Solus Linux</span></div> <!-- <div class="tooltip blog"><span class="tooltiptext">Blog</span></div> -->
<div class="tooltip ftp"><span class="tooltiptext">FTP</span></div> <div class="tooltip ftp"><span class="tooltiptext">FTP</span></div>
<div class="tooltip band"><span class="tooltiptext">Band</span></div> <div class="tooltip band"><span class="tooltiptext">Band</span></div>
<div class="tooltip soundcloud"><span class="tooltiptext">Soundcloud</span></div> <div class="tooltip soundcloud"><span class="tooltiptext">Soundcloud</span></div>
<div class="tooltip gallery"><span class="tooltiptext">Gallery</span></div> <!-- <div class="tooltip email"><span class="tooltiptext">Email</span></div> -->
</div> <div class="tooltip gallery"><span class="tooltiptext">Gallery</span></div>
</div> </div>
</body> </body>
</html> </html>