Skip to content
Snippets Groups Projects
Unverified Commit 4165cf5e authored by maria-moroz's avatar maria-moroz Committed by GitHub
Browse files

Merge branch 'main' into feature/general-container

parents 54ac94dd 3a9b74cc
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
package.json
+ 1
− 1
View file @ 4165cf5e
......@@ -5,7 +5,7 @@
"main": "index.js",
"homepage": "https://maria-moroz.github.io/goit-filmoteka",
"scripts": {
"dev": "parcel src/*.html",
"dev": "parcel src/*.html --open",
"build": "parcel build src/*.html --public-url /goit-filmoteka/"
},
"repository": {
......
src/images/header-background.jpg 0 → 100644
+ 0
− 0
View file @ 4165cf5e
src/images/header-background.jpg

114 KiB

src/images/sprite.svg
+ 14
− 0
View file @ 4165cf5e
......@@ -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
+ 1
− 0
View file @ 4165cf5e
......@@ -18,6 +18,7 @@
/>
</head>
<body>
<include src="./partials/header.html"></include>
<include src="./partials/one-card-preview.html"></include>
<include src="./partials/footer.html"></include>
......
src/partials/header.html 0 → 100644
+ 28
− 0
View file @ 4165cf5e
<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/_footer.scss
+ 1
− 0
View file @ 4165cf5e
footer {
background-color: $secondary-white-color;
min-width: 320px;
}
.footer_container {
......
src/sass/_header.scss 0 → 100644
+ 142
− 0
View file @ 4165cf5e
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
url(../images/header-background.jpg);
height: 230px;
width: 100%;
min-width: 320px;
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 {
display: flex;
align-items: center;
justify-content: center;
margin-top: 37px;
}
.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;
}
src/sass/_utility-classes.scss
+ 42
− 39
View file @ 4165cf5e
......@@ -28,13 +28,12 @@ a {
@media screen and (min-width: 768px) {
width: 768px;
padding: 0 32px;
padding: 0 76px;
}
@media screen and (min-width: 1024px) {
width: 1024px;
padding: 0 32px;
padding: 0 71px;
}
}
......@@ -44,6 +43,10 @@ a {
padding: 0;
}
.link {
text-decoration: none;
}
img {
display: block;
width: 100%;
......
src/sass/main.scss
+ 2
− 1
View file @ 4165cf5e
......@@ -7,4 +7,5 @@
@import './variables';
@import './utility-classes';
@import './footer';
@import './components/one-card-preview';
@import './header';
@import './components/one-card-preview'
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment