Add "about me" page
This commit is contained in:
parent
3217d282cc
commit
b7eeee4085
@ -5,9 +5,10 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Serif&subset=cyrillic" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="/styles/app.css?v={{ date().timestamp }}">
|
||||
<link rel="stylesheet" type="text/css" href="/styles/about-me.css?v={{ date().timestamp }}">
|
||||
<title>
|
||||
{% if page.title is defined %}
|
||||
{{ page.title }} - {{ page.title }}
|
||||
{{ page.title }} - {{ site.title }}
|
||||
{% else %}
|
||||
{{ site.title }}
|
||||
{% endif %}
|
||||
@ -15,7 +16,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<main class="content">
|
||||
{% block content %}{% endblock %}
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
{% include 'counters.twig' %}
|
||||
</body>
|
||||
|
45
source/about/me.html.twig
Normal file
45
source/about/me.html.twig
Normal file
@ -0,0 +1,45 @@
|
||||
---
|
||||
layout: default
|
||||
title: Обо мне
|
||||
---
|
||||
|
||||
{% block content %}
|
||||
|
||||
<section class="about-me">
|
||||
<div class="about-me__content">
|
||||
|
||||
<div class="about-me__note" id="about-me-note">Я люблю шоколад.</div>
|
||||
|
||||
<ul class="about-me__links">
|
||||
<li class="about-me__link">
|
||||
<a href="">Узнать чуть лучше</a>
|
||||
</li>
|
||||
<li class="about-me__link">
|
||||
<a href="/">На главную</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript">
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
var notes = [
|
||||
'Люблю шоколад.',
|
||||
'Сделал этот сайт.',
|
||||
'Работаю программистом.',
|
||||
'Люблю кататься на велосипеде.',
|
||||
'Проехал на велосипеде 200 километров за день.',
|
||||
'Мой любимый фильм "Три идиота".',
|
||||
'Люблю читать фантастические книги.',
|
||||
'Предпочитаю ходить в кино на 2D-сеансы.',
|
||||
'Не люблю пьяных людей.',
|
||||
'Хотел бы побывать в горах.',
|
||||
'На день рождения ко мне можно прийти без подарка.',
|
||||
];
|
||||
var note = notes[Math.floor(Math.random() * notes.length)];
|
||||
document.getElementById('about-me-note').innerHTML = note;
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
@ -34,6 +34,9 @@ layout: default
|
||||
<li>
|
||||
<a href="https://anwinged.blogspot.ru" target="_blank">заброшенный блог</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about/me">немного фактов обо мне</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="heading">Похвалить</h2>
|
||||
|
28
source/styles/about-me.css
Normal file
28
source/styles/about-me.css
Normal file
@ -0,0 +1,28 @@
|
||||
.about-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.about-me__note {
|
||||
text-align: center;
|
||||
font-size: 120%;
|
||||
max-width: 400px;
|
||||
min-height: 3em;
|
||||
}
|
||||
|
||||
.about-me__links {
|
||||
padding: 0;
|
||||
margin-top: 4em;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-me__link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.about-me__link + .about-me__link {
|
||||
margin-left: 1em;
|
||||
}
|
Loading…
Reference in New Issue
Block a user