index.html

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,
        initial-scale=1, shrink-to-fit=no">
        <title>Blog Homepage</title>
        <link rel="stylesheet" href="css/style.css">
        <link
        href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap"
        rel="stylesheet">
        <link
        href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap"
        rel="stylesheet">
        <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link
        href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital@1&family=Itim&display=swap"
        rel="stylesheet">
    </head>
    <body>
        <!-- A container for the whole page -->
        <section class="container">
            <!--First tor with blog title and navigation -->
            <article class="title-row">
                <h1>КиевБрэндон</h1>
                <nav>
                    <ul>
                        <li><a href="posts.html">Посты</a></li>
                        <li><a href="we.html">Мы</a></li>
                        <li><a href="photo-galery.html">Фотогалерея</a></li>
                        <li><a href="https://assiniboine.net/">
                            Что нужно знать об АСС</a></li>
                    </ul>
                </nav>
            </article>
            <!-- Container for card and posts-->
            <div class="card-posts">
                <!-- Blog card  -->
                <div class="post-card">
                    <figure>
                        <img src="images/fox.jpg" alt="Andrey"/>
                        <figcaption>Андрей Гапонов</figcaption>
                    </figure>
                    <p><u>Магистр Электроэнерготехники</u></p>
                    <p><u>СиПи Рэил, Специалист</u></p>
                    <!-- Short bio appeard @media 600px-900px-->
                    <article class="post-bio">
                        <h2><u>Краткая биография</u></h2>
                        <p>
                            Я — инженер электрик с опытом работы с оборудованием
                            220/380 и системами учета электроэнергии. Я же
                            специалист по оптимизации работы склада: увеличение
                            производительности труда, внедрение ноу-хау,
                            внедрение систем управления складом, складская
                            экспертиза. Теперь я еще и студент колледжа по
                            специальности – инженер связи (communication
                            engineering technology – wireless).
                        </p>
                    </article>
                </div>
                <!-- Posts -->
                <article class="blog-post" id="blog-post-1">
                    <h2><u>Фото дня</u></h2>
                    <p>Вот подумал показывать что же такое БК, буду каждый
                       день выкладывать по одной фотографии. Не знаю,
                       получится ли делать это месяц, как того хочется, но
                       на пару недель думаю моего запала хватит 🙂</p>
                       <b><a href="posts.html">Читать далее...</a></b>
                </article>
                <article class="blog-post" id="blog-post-2">
                    <h2><u>Каждый кулик свое болото хвалит</u></h2>
                    <p>Привет, вот я чуть более серьезно вернулся к блогу,
                        даже не столько к самому блогу, сколько к ответам на
                        вопросы, что вы мне присылаете по почте и возник у
                        меня один вопрос.</p>
                        <b><a href="posts.html">Читать далее...</a></b>
                </article>
                <!-- Link to all the posts-->
                <article class="blog-post" id="posts-link">
                    <a href="posts.html"><h2>Все посты</h2></a>
                </article>
                <!-- Short bio appears @media min 1200px-->
                <div class="bio">
                    <h2><u>Краткая биография</u></h2>
                    <p>
                        Я — инженер электрик с опытом работы с оборудованием
                        220/380 и системами учета электроэнергии. Я же
                        специалист по оптимизации работы склада: увеличение
                        производительности труда, внедрение ноу-хау, внедрение
                        систем управления складом, складская экспертиза. Теперь
                        я еще и студент колледжа по специальности – инженер
                        связи (communication engineering technology – wireless).
                    </p>
                </div>
                <!-- Large screen posts appear @media min 1200-->
                <article class="large-screen" id="large-screen-1">
                    <h2><u>Стоит почитать</u></h2>
                    <p>Привет, пока я немного сачкую, и пишу в блог
                       довольно редко, советую вам, друзья обратить
                       внимание на блог коллеги по счастью 🙂
                       simferopolbrandon.wordpress.com. Я этот
                       начинающий блог прочитал с большим интересом,
                       да и однозначно, уже о жизни в Брендоне вы
                       сможете больше узнать из блога Эльдара, в то
                       время как мне судьба, уже судя по всему
                       уоготовила участь повествовать о Британской
                       Колумбии.</p>
                       <b><a href="posts.html">Читать далее...</a></b>
                 </article>
                <article class="large-screen" id="large-screen-2">
                    <h2><u>Привет, друзья</u></h2>
                    <p>Привет опять, как не странно, но я таки не
                       забил на блог, и очень хочу продолжать …</p>
                       <pre><b>
                           <q>Утром мажу бутерброд —
                           Сразу мысль: а как народ?
                           И икра не лезет в горло,
                           И компот не льется в рот!</q>
                       </b></pre>
                    <p>Вот и у меня примерно также, помню, помню 🙂
                        Только, вот получается не очень, в силу чисто
                        технических обстоятельств. Так получается, что
                        времени писать дома у меня нет, дома жена —
                        красавица и карапуз растет стремительно).</p>
                        <b><a href="posts.html">Читать далее...</a></b>
                </article>
            </div>
            <!-- Some pics for 600px and more screen-->
            <div class="posts tablet">
                <div class="post">
                    <img src="images/Valter.jpg" alt="Dog">
                    <a href="photo-galery.html">Собака охраняка</a>
                </div>
                <div class="post">
                    <img src="images/fair.jpg" alt="fair">
                    <a href="photo-galery.html">Брендонская ярмарка 2013</a>
                </div>
                <div class="post">
                    <img src="images/summer-fair.jpg" alt="summer fair">
                    <a href="photo-galery.html">Брэндон, ярмарка 2013</a>
                </div>
                <div class="post">
                    <img src="images/tree.jpg" alt="tree">
                    <a href="photo-galery.html"><br>Не знаю что, но красиво🙂
                    </a>
                </div>
            </div>
            <!-- Footer with subscribtion and social media links-->
            <footer lang="en">
                <div class="subscribtion">
                    <!-- subscribtion -->
                    <h3>Subscribe to our new posts!</h3>
                    <form>
                        <label for="name">Full Name</label><br>
                        <input type="text" id="name" value=""><br>
                        <label for="email">E-Mail</label><br>
                        <input type="text" id="email" name="email" value="">
                        <br><br>
                        <input type="reset" value="Subscrite">
                    </form>
                     <br>
                </div>
                <br>
                <!--Social media links -->
                <div class="icon-bar">
                    <a href="https://www.facebook.com/maryna.korzhyk"
                        class="facebook"><i class="fa fa-facebook"></i></a>
                    <a href="mailto:cavilosa33@gmail.com" class="google">
                        <i class="fa fa-google"></i></a>
                    <a href="http://tiny.cc/q6j1tz"
                        class="linkedin"><i class="fa fa-linkedin"></i></a>
                    <a href="https://github.com/cavilosa"
                        class="github"><i class="fa fa-github"></i></a>
                 </div>
            </footer>
        </section>
    </body>
</html>