index.html
<!
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>
<Script>$ ( '. Nav-toggle'). On (
'click', function () { $ ( '# Menu'). ToggleClass (
'active');});</Script>
<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>
<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>
<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>
<Script>
$ ( '.
Nav-toggle'). On ( 'click', function () {
$ ( '#
Menu'). ToggleClass ( 'active');
});
</Script>
</Body>
</Html>
1.css
*, *: After, *:
before {
box-sizing:
border-box;
padding: 0;
margin: 0;
transition: .5s
ease-in-out; / * Додамо плавність переходів для всіх елементів сторінки * /
}
ul {
list-style: none;
}
a {
text-decoration:
none;
outline: none;
}
img {
display: block;
width: 100%;
}
h1, h2, h3, h4,
h5, h6 {
font-family:
'Playfair Display';
font-weight:
normal;
letter-spacing:
1px;
}
body {
font-family:
'Open Sans', arial, sans-serif;
font-size: 14px;
line-height: 1;
color: # 373737;
background: #
f7f7f7;
}
/ * Додамо
очищення потоку для всіх контейнерів, усередині яких задано обтікання дочірніх
елементів * /
header: after,
.container: after, footer: after, .widget-posts-list li: after, #subscribe:
after {
content:
"";
display: table;
clear: both;
}
/ * Стильовий
клас, який управляє шириною контейнера сітки * /
.container {
margin: 0 auto;
width: 100%;
max-width: 960px;
padding: 0 15px;
}
/ * Лівий
контейнер * /
.posts-list {
margin-bottom:
30px;
width: 64%;
float: left;
}
/ * Блок для
статті * /
.post {
margin-bottom:
35px;
}
.post-content p {
line-height: 1.5;
padding-bottom:
1em;
}
.post-image {
margin-bottom:
30px;
}
.category {
margin-bottom:
15px;
}
.category a {
color: # F8B763;
text-transform:
uppercase;
}
.post-title {
margin-bottom:
12px;
font-size: 26px;
}
/ * Блок з
кнопкою "продовжити читання" і кнопками соціальних мереж * /
.post-footer {
border-top: 1px
solid # EBEBE3;
border-bottom:
1px solid # EBEBE3;
position:
relative;
margin-top: 15px;
}
.more-link {
position:
relative;
display: inline-block;
font-size: 10px;
text-transform:
uppercase;
color: white;
line-height:
44px;
padding: 0 22px;
background: #
3C3D41;
letter-spacing:
0.1em;
white-space:
nowrap;
}
.more-link: after
{
content: '';
display: block;
position:
absolute;
width: 0;
height: 0;
top: 0;
right: 0;
border: solid
transparent;
border-width:
22px 18px;
border-left-color:
# 3C3D41;
transform:
translateX (100%);
}
.post-social {
position:
absolute;
left: auto;
top: 50%;
right: 0;
text-align:
right;
transform:
translateY (-50%);
padding: 0;
font-size: 12px;
}
.post-social a {
display:
inline-block;
margin-left: 8px;
color: # F8B763;
width: 25px;
height: 25px;
line-height:
23px;
text-align:
center;
border-radius:
50%;
border: 1px
solid;
}
/ * Правий
контейнер * /
aside {
width: 33%;
float: right;
}
/ * Блок для
віджетів * /
.widget {
padding: 20px
15px;
background:
white;
font-size: 13px;
margin-bottom:
30px;
box-shadow: 3px
3px 1px rgba (0,0,0, .05);
}
.widget-title {
font-size: 18px;
padding: 10px;
margin-bottom:
20px;
text-align:
center;
border: 2px solid
# F8B763;
box-shadow: 3px
3px 0 0 # F8B763;
}
.widget-category-list
li {
border-bottom:
1px solid # EBEBE3;
padding: 10px 0;
color: # c6c6c6;
font-style:
italic;
}
.widget-category-list
li: last-child {
border-bottom:
none;
}
.widget-category-list
li a {
color: # 626262;
margin-right:
6px;
font-style:
normal;
}
.widget-category-list
li a: before {
content: "\
f105";
display:
inline-block;
font-family:
'FontAwesome';
margin-right:
10px;
color: # c6c6c6;
}
.widget-posts-list
li {
border-top: 1px
solid # EBEBE3;
padding: 15px 0;
}
.widget-posts-list
li: nth-child (1) {
border-top: none;
}
.post-image-small
{
width: 30%;
float: left;
margin-right:
15px;
}
.widget-post-title
{
float: left;
}
/ * Форма
підписки * /
#subscribe {
position:
relative;
width: 100%;
padding: 15px 0;
}
#subscribe input
{
width: 100%;
display: block;
float: left;
border: 2px solid
# EBEBE3;
padding: 0 0 0
10px;
height: 40px;
position:
relative;
outline: none;
color: # 9E9C9C;
font-style:
italic;
}
#subscribe button
{
padding: 0 15px;
background:
transparent;
height: 40px;
border: none;
position:
absolute;
right: 0;
color: # EF5A42;
cursor: pointer;
font-size: 18px;
}
#subscribe input:
focus + button {
background: #
EF5A42;
color: white;
}
footer {
padding: 30px 0;
background: #
3C3D41;
color: white;
}
.footer-col {
width:
33.3333333333%;
float: left;
}
.footer-col a {
color: white;
}
.footer-col:
last-child {
text-align:
right;
}
.social-bar-wrap
{
text-align:
center;
}
.social-bar-wrap
a {
padding: 0 7px;
font-size: 18px;
}
@media
(max-width: 768px) {
/ * Показуємо
кнопку для перемикання верхньої навігації * /
.nav-toggle {
display: block;
}
header {
padding: 10px 0;
}
/ * Приховуємо
верхнє меню, скасовуємо обтікання, позиціонуємо його, змістивши на висоту шапки
сайту * /
#menu {
max-height: 0;
background:
white;
float: none;
position:
absolute;
overflow: hidden;
top: 63px;
right: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 3;
}
/ * Робимо
елементи списку блоковими, щоб вони розташовувалися один під одним * /
#menu li {
display: block;
padding-left:
15px;
border-bottom:
1px solid # EBEBE3;
margin-right: 0;
}
/ * Скасовуємо
обтікання лівій і правій колонок, встановлюємо їм ширину 100% * /
.posts-list,
aside {
width: 100%;
float: none;
}
.widget-post-title
{
font-size: 1.5em;
}
}
@media
(max-width: 480px) {
/ * Вирівнюванням
логотип по центру * /
nav {
text-align:
center;
}
/ * Скасовуємо
обтікання для логотипу * /
.logo {
float: none;
margin-bottom:
15px;
}
/ * Позиціонуємо
меню на збільшену висоту шапки * /
#menu {
top: 118px;
}
/ * Позиціонуємо
форму пошуку по лівому краю * /
#searchform {
float: left;
margin-left: 0;
}
/ * Прибираємо
верхню і нижню межі і вирівнюємо кнопку по центру * /
.post-footer {
border-top: none;
border-bottom:
none;
text-align:
center;
}
/ * Скасовуємо
позиціонування кнопок соцмереж * /
.post-social {
position: static;
text-align:
center;
transform: none;
margin-top: 20px;
}
.widget-post-title
{
font-size: 1.2em;
}
/ * Скасовуємо
обтікання для стовпців підвалу сторінки * /
.footer-col {
float: none;
margin-bottom:
20px;
width: 100%;
text-align:
center;
}
.footer-col:
last-child {
text-align:
center;
margin-bottom: 0;
}
}
Немає коментарів:
Дописати коментар
Примітка: лише член цього блогу може опублікувати коментар.