Блок "Обо мне"

This commit is contained in:
Alexander Zhirov 2023-04-30 02:32:22 +03:00
parent 1bb0efc749
commit c286a55f8f
4 changed files with 48 additions and 3 deletions

BIN
css/Caveat-Regular.ttf Normal file

Binary file not shown.

View File

@ -3,6 +3,11 @@
src: url(../css/ProblematicPiercer.ttf); src: url(../css/ProblematicPiercer.ttf);
} }
@font-face {
font-family: Caveat;
src: url(../css/Caveat-Regular.ttf);
}
body { body {
display: flex; display: flex;
align-items: center; align-items: center;
@ -16,6 +21,37 @@ body {
font-family: ProblematicPiercer; font-family: ProblematicPiercer;
} }
div.test { div.row {
font-size: 100px; display: flex;
flex-direction: row;
width: 900px;
}
div.photo {
border-radius: 300px;
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;
margin-right: 20px;
}
div.info {
display: flex;
width: 600px;
flex-direction: column;
}
div.title {
font-size: 50px;
display: flex;
align-items: center;
justify-content: center;
}
div.bio {
font-family: Caveat;
font-size: 25px;
text-align: justify;
} }

View File

@ -11,6 +11,14 @@
<script src="js/script.js"></script> <script src="js/script.js"></script>
</head> </head>
<body> <body>
<div class="test">Page in development</div> <div class="row">
<div class="photo"></div>
<div class="info">
<div class="title">About me</div>
<div class="bio">
<p>Спасибо за поддержку Thunderbird, которая финансируется такими же пользователями, как вы! Для создания Thunderbird требуются инженеры-программисты, дизайнеры, системные администраторы и серверная инфраструктура. Поэтому, если вам нравится Thunderbird, лучший способ обеспечить доступность Thunderbird — сделать пожертвование.</p>
</div>
</div>
</div>
</body> </body>
</html> </html>

View File

@ -1,3 +1,4 @@
$(document).ready(function(){ $(document).ready(function(){
$(this).on("contextmenu", e => e.preventDefault());
$('body').delay(500).fadeTo(500, 1); $('body').delay(500).fadeTo(500, 1);
}); });