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

2023-04-30 02:32:22 +03:00 · 2023-04-30 02:32:22 +03:00 · c286a55f8f
parent 1bb0efc749
commit c286a55f8f
4 changed files with 48 additions and 3 deletions
--- a/css/Caveat-Regular.ttf
+++ b/css/Caveat-Regular.ttf
--- a/css/style.css
+++ b/css/style.css
@ -3,6 +3,11 @@
    src: url(../css/ProblematicPiercer.ttf);
 }

+@font-face {
+    font-family: Caveat;
+    src: url(../css/Caveat-Regular.ttf);
+}
+
 body {
    display: flex;
    align-items: center;
@ -16,6 +21,37 @@ body {
    font-family: ProblematicPiercer;
 }

-div.test {
-    font-size: 100px;
+div.row {
+    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;
 }
--- a/index.html
+++ b/index.html
@ -11,6 +11,14 @@
        <script src="js/script.js"></script>
    </head>
    <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>
 </html>
--- a/js/script.js
+++ b/js/script.js
@ -1,3 +1,4 @@
 $(document).ready(function(){
+    $(this).on("contextmenu", e => e.preventDefault());
    $('body').delay(500).fadeTo(500, 1);
 });