Skip to content
Snippets Groups Projects
Commit 1c9a2e14 authored by kirillbodnar's avatar kirillbodnar
Browse files

header 

made adaptive header
parent b4e3e1aa
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/images/header-background.jpg 0 → 100644
+ 0
− 0
View file @ 1c9a2e14
src/images/header-background.jpg

114 KiB

src/images/sprite.svg
+ 14
− 0
View file @ 1c9a2e14
......@@ -28,4 +28,18 @@
<path d="M5.5 9.5C7.70914 9.5 9.5 7.70914 9.5 5.5C9.5 3.29086 7.70914 1.5 5.5 1.5C3.29086 1.5 1.5 3.29086 1.5 5.5C1.5 7.70914 3.29086 9.5 5.5 9.5Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.5 10.5002L8.32495 8.3252" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
</symbol>
<symbol id="search" viewBox="0 0 32 32" width="12px" height="12px">
<path fill="none" stroke="#fff" style="stroke: var(--color1, #fff)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M14.667 25.333c5.891 0 10.667-4.776 10.667-10.667s-4.776-10.667-10.667-10.667c-5.891 0-10.667 4.776-10.667 10.667s4.776 10.667 10.667 10.667z"></path>
<path fill="none" stroke="#fff" style="stroke: var(--color1, #fff)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M28 28.001l-5.8-5.8"></path>
</symbol>
<symbol id="logo" viewBox="0 0 32 32">
<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M26.427 2.667h-20.853c-1.605 0-2.907 1.301-2.907 2.907v20.853c0 1.605 1.301 2.907 2.907 2.907h20.853c1.605 0 2.907-1.301 2.907-2.907v-20.853c0-1.605-1.301-2.907-2.907-2.907z"></path>
<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M9.333 2.667v26.667"></path>
<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M22.667 2.667v26.667"></path>
<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M2.667 16h26.667"></path>
<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M2.667 9.333h6.667"></path>
<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M2.667 22.667h6.667"></path>
<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M22.667 22.667h6.667"></path>
<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M22.667 9.333h6.667"></path>
</symbol>
</svg>
\ No newline at end of file
src/index.html
+ 2
− 1
View file @ 1c9a2e14
......@@ -18,7 +18,8 @@
/>
</head>
<body>
<include src = "./partials/footer.html"></include>
<include src="./partials/header.html"></include>
<include src="./partials/footer.html"></include>
<!-- Так добавляются фрагменты в главные HTML-файлы страниц. -->
<!-- <include src="./partials/example.html"></include> -->
......
src/partials/header.html 0 → 100644
+ 28
− 0
View file @ 1c9a2e14
<header>
<div class="container">
<nav>
<div class="nav__wrap">
<div class="logo">
<svg width="24px" height="24px" class="logo__icon">
<use href="/images/sprite.svg#logo"></use>
</svg>
<a href="index.html" class="logo__text link">Filmoteka</a>
</div>
<ul class="nav__list list">
<li class="nav__item nav__item--current">Home</li>
<li class="nav__item">My library</li>
</ul>
</div>
<div class="search-field">
<span class="search-field__wrap">
<input class="search-field__input" placeholder="Поиск фильмов" />
<div class="search-field__icon--wrap">
<svg width="12px" height="12px" class="search-field__icon">
<use href="/images/sprite.svg#search"></use>
</svg>
</div>
</span>
</div>
</nav>
</div>
</header>
src/sass/_header.scss 0 → 100644
+ 141
− 0
View file @ 1c9a2e14
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
url(../images/header-background.jpg);
height: 216px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.logo {
margin-top: 40px;
display: flex;
align-items: center;
}
.logo__icon {
justify-self: middle;
margin-right: 10px;
}
.logo__text {
display: none;
font-family: Roboto;
font-size: 30px;
font-weight: 500;
line-height: 35px;
letter-spacing: 0em;
text-align: center;
color: white;
@media screen and (min-width: 768px) {
display: inline-block;
}
}
.nav__list {
display: flex;
margin-left: auto;
margin-top: 39px;
align-items: center;
color: white;
}
.nav__wrap {
display: flex;
flex-direction: row;
}
.nav__item {
font-family: Roboto;
font-size: 12px;
font-weight: 500;
line-height: 14px;
letter-spacing: 0em;
text-align: center;
text-transform: uppercase;
padding: 10px 0;
position: relative;
&:not(:last-child) {
margin-right: 39px;
}
}
.nav__item--current::after {
content: '';
display: block;
width: 100%;
height: 3px;
position: absolute;
background-color: #ff6b08;
}
.search-field__input {
font-family: Roboto;
font-size: 14px;
font-weight: 400;
line-height: 16px;
letter-spacing: 0em;
text-align: left;
color: white;
height: 20px;
width: 280px;
background-color: transparent;
border: 0;
border-bottom: 0.5px solid #ffffff;
@media screen and (min-width: 768px) {
width: 336px;
}
&:focus {
outline: none;
border: 0;
border-bottom: 0.5px solid #ffffff;
}
&::placeholder {
font-family: Roboto;
font-size: 14px;
font-weight: 400;
line-height: 16px;
letter-spacing: 0em;
text-align: left;
color: white;
}
}
.search-field__wrap {
position: relative;
}
.search-field__icon {
align-items: center;
text-align: center;
}
.search-field__icon--wrap {
width: 20px;
height: 20px;
display: flex;
position: absolute;
right: 0;
top: 0;
align-items: center;
justify-content: center;
}
.search-field {
display: flex;
align-items: center;
justify-content: center;
margin-top: 41px;
}
src/sass/_utility-classes.scss
+ 44
− 41
View file @ 1c9a2e14
body {
background-color: $primary-white-color;
color: $primary-text-color;
font-family: Roboto, sans-serif;
font-weight: 500;
background-color: $primary-white-color;
color: $primary-text-color;
font-family: Roboto, sans-serif;
font-weight: 500;
}
button {
font-family: inherit;
font-family: inherit;
}
a {
color: inherit;
color: inherit;
}
.container {
padding: 0 20px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
min-width: 320px;
width: 100%;
padding: 0 20px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
min-width: 320px;
width: 100%;
@media screen and (min-width: 480px) {
width: 480px;
}
@media screen and (min-width: 480px) {
width: 480px;
}
@media screen and (min-width: 768px) {
width: 768px;
padding: 0 76px;
}
@media screen and (min-width: 768px) {
width: 768px;
padding: 0 76px;
}
@media screen and (min-width: 1024px) {
width: 1024px;
padding: 0 71px;
}
@media screen and (min-width: 1024px) {
width: 1024px;
padding: 0 71px;
}
}
.list {
list-style-type: none;
margin: 0;
padding: 0;
list-style-type: none;
margin: 0;
padding: 0;
}
.link {
text-decoration: none;
}
.img {
display: block;
width: 100%;
display: block;
width: 100%;
}
.visually-hidden {
position: absolute;
white-space: nowrap;
width: 1px;
height: 1px;
overflow: hidden;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
margin: -1px;
}
\ No newline at end of file
position: absolute;
white-space: nowrap;
width: 1px;
height: 1px;
overflow: hidden;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
margin: -1px;
}
src/sass/main.scss
+ 2
− 1
View file @ 1c9a2e14
......@@ -6,4 +6,5 @@
// Стили для файла с примером HTML-фрагмента
@import './variables';
@import './utility-classes';
@import "./footer";
@import './footer';
@import './header';
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment