dev 1
This commit is contained in:
Alexander
parent
1e4751f487
commit
09efa92792
|
|
@ -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 столбца для очень маленьких экранов */
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Alexander Zhirov</title>
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<link href="css/jquery-ui.css" rel="stylesheet">
|
||||
|
|
@ -34,11 +35,9 @@
|
|||
<div class="tooltip git"><span class="tooltiptext">Git</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 blog"><span class="tooltiptext">Blog</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 soundcloud"><span class="tooltiptext">Soundcloud</span></div>
|
||||
<!-- <div class="tooltip email"><span class="tooltiptext">Email</span></div> -->
|
||||
<div class="tooltip gallery"><span class="tooltiptext">Gallery</span></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue