ЛПР №22 Додавання до HTML-документів зображення.
Адаптивна вестка практичну робимо в Tryit Editor www.w3schools.com/html/tryit.asp?filename=tryhtml_default
<!DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title> Адаптивна верстка сайту </title>
<Link rel = "stylesheet" type = "text / css" href = "https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic|Playfair+Display:400,700&subset = latin, cyrillic ">
<Link rel = "stylesheet" type = "text / css" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<Link rel = "stylesheet" type = "text / css" href = "1.css">
<Script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"> </script>
<Script src = "https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"> </script>
</Head>
<Body>
<Header>
<Nav class = "container">
<a class="logo" href="">
<Span> L </span>
<Span> O </span>
<Span> G </span>
<Span> O </span>
</a>
<Div class = "nav-toggle"> <span> </span> </div>
<Form action = "" method = "get" id = "searchform">
<Input type = "text" placeholder = "Шукати на сайті ...">
<Button type = "submit"> <i class = "fa fa-search"> </i> </button>
</Form>
<Ul id = "menu">
<Li> <a href=""> Блог </a> </li>
<Li> <a href=""> Портфоліо </a> </li>
<Li> <a href=""> Про автора </a> </li>
</Ul>
</Nav>
</Header>
крок 3 Блок з коротким змістом статті
Анонс статей задамо елементом <article id="post-1" class="post">:
<Div class = "container">
<Div class = "posts-list">
<Article id = "post-1" class = "post">
<Div class = "post-image"> <a href=""> <img src = "https://allatravesti.com/assets/uploads/images/materials/a0e04-%5Ea07e48e72af174e259a5b65efad143def1dbe3b804c1d7dc59%5Epimgpsh_fullsize_distr.jpg"> </a> </div>
<Div class = "post-content">
<Div class = "category"> <a href=""> Дизайн </a> </div>
<H2 class = "post-title"> Зима </h2>
<P> Мій перший сайт</p>
<Div class = "post-footer">
<a class="more-link" href=""> Продовжити читання </a>
<Div class = "post-social">
<a href="" target="_blank"> <i class = "fa fa-facebook"> </i> </a>
<a href="" target="_blank"> <i class = "fa fa-twitter"> </i> </a>
<a href="" target="_blank"> <i class = "fa fa-pinterest"> </i> </a>
</Div>
</Div>
</Div>
</Article>
<Article id = "post-2" class = "post">
...
</Article>
</Div>
У бічну колонку <aside> додамо список категорій, останні записи і форму підписки на розсилку:
<Aside>
<Div class = "widget">
<H3 class = "widget-title"> Категорії </h3>
<Ul class = "widget-category-list">
<Li> <a href=""> Дизайн </a> (2) </li>
<Li> <a href=""> Верстка </a> (5) </li>
<Li> <a href=""> Відео </a> (1) </li>
</Ul>
</Div>
<Div class = "widget">
<H3 class = "widget-title"> Останні записи </h3>
<Ul class = "widget-posts-list">
<Li>
<Div class = "post-image-small">
<a href=""> <img src = "https://www.segodnya.ua/img/article/11759/82_main_new.1538482973.jpg"> </a>
</Div>
<H4 class = "widget-post-title"> Весна </h4>
</ Li>
<Li>
<Div class = "post-image-small">
<a href=""> <img src = "https://ubr.ua/img/article/38670/84_main.jpeg"> </a>
</Div>
<H4 class = "widget-post-title"> Літо </h4>
</Li>
<Li>
<Div class = "post-image-small">
<a href=""> <img src = "http://ogo.ua/images/articles/1/1464776760.jpeg">
</a>
</Div>
<H4 class = "widget-post-title"> Осінь </h4>
</Li>
<Div class = "post-image-small">
<a href=""> <img src = "http://novadoba.com.ua/uploads/posts/2014-08/1409213719_osin.jpg">
</a>
</Div>
</Ul>
</Div>
<Div class = "widget">
<H3 class = "widget-title"> Підписка на розсилку </h3>
<Form action = "" method = "post" id = "subscribe">
<Input type = "email" name = "email" placeholder = "Ваш email" required>
<Button type = "submit"> <i class = "fa fa-paper-plane-o"> </i> </button>
</Form>
</Div>
</Aside>
</Div>
У підвалі сторінки розмістимо інформацію про копірайт, кнопки соціальних мереж і посилання на електронну пошту:
<Footer>
<Div class = "container">
<Div class = "footer-col"> <span> Мій сайт 2018 </span> </div>
<Div class = "footer-col">
<Div class = "social-bar-wrap">
<a title="Facebook" href="" target="_blank"> <i class = "fa fa-facebook"> </i></a>
<a title="Twitter" href="" target="_blank"> <i class = "fa fa-twitter"> </i> </a>
<a title="Pinterest" href="" target="_blank"> <i class = "fa fa-pinterest"> </i> </a>
<a title="Instagram" href="" target="_blank"> <i class = "fa fa-instagram"> </i> </a>
</Div>
</Div>
<Div class = "footer-col">
<a href="mailto:admin@yoursite.ru"> Написати листа </a>
</Div>
</Div>
</Footer>
</Body>
</Html>