{
"name": "gulp-start",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
<body>
<div class="wrapper">
<main class="page">
<header class="header">
<div class="header__row">
<nav class="header__menu menu">
<div class="header__icon icon__menu">
<span></span>
</div>
<div class="menu__body">
<ul class="menu__list">
<li>
<a href="#" class="menu__link menu__link_first">about us</a>
</li>
<li>
<a href="#" class="menu__link menu__link_1">work</a>
</li>
<li>
<a href="#" class="menu__link menu__link_2">shop</a>
</li>
<li>
<a href="#" class="menu__link menu__link_last">contact</a>
</li>
</ul>
</div>
<div class="header__logo">
<img src="img/header/Logo.png" alt="">
</div>
</nav>
</div>
</header>
<div class="main-screen">
<div class="main-screen__bg ibg">
<img src="img/main-screen/bg-main.jpg" alt="">
</div>
</div>
<div class="content">
</div>
</main>
</div>
<script src="source/js/ibg.js"></script>
<script src="source/js/click.js"></script>
</body>
</html>.header {
position: absolute;
width: 100%;
height: 100%;
z-index: 50;
left: 0; }
.header__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 85px;
position: relative;
top: 35px; }
.header__menu {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0; }
.header__logo {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate(-50%, 0px);
-ms-transform: translate(-50%, 0px);
transform: translate(-50%, 0px); }
@media (max-width: 767px) {
.header {
top: 0; }
.header__row {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.header__logo {
top: 15px;
z-index: 2; }
.header__icon {
float: right;
position: relative;
top: 10px;
right: 7px;
width: 30px;
height: 20px;
z-index: 2; } }
.menu {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.menu__body {
height: inherit; }
.menu__list {
height: inherit;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #4d4959;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2.6px; }
.menu__link {
margin: 37.5px; }
.menu__link_1 {
margin: 0 110px 0 37.5px; }
.menu__link_2 {
margin: 0 37.5px 0 110px; }
.menu__link_first {
margin-left: 0; }
.menu__link_last {
margin-right: 0; }
@media (max-width: 767px) {
.menu__body {
background-color: #4d4959;
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
overflow: auto; }
.menu__body.active {
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0); }
.menu__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
top: 150px;
height: 50%; }
.menu__link,
.menu li {
margin: 0;
color: white;
font-size: 18px; }
.menu li {
margin: 0 0 35px 0; } }
@media (max-width: 767px) {
.icon__menu:before, .icon__menu:after,
.icon__menu span {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: white; }
.icon__menu:before {
top: 0; }
.icon__menu:after {
bottom: 0; }
.icon__menu span {
top: 9px; } }<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="wrapper">
<main class="page">
<div class="main-screen">
<div class="main-screen__bg ibg">
<img src="img/main-screen/bg-main.jpg" alt="">
</div>
</div>
<div class="content">
</div>
</main>
</div>
<script src="#source/js/ibg.js"></script>
</body>
</html>.page {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.main-screen {
-webkit-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
position: relative; }
.main-screen__bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0; }
.ibg {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative; }
.ibg img {
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden; }function ibg () {
let ibg = document.querySelectorAll(".ibg");
for (var i = 0; i < ibg.length; i++) {
if (ibg[i].querySelector('img')) {
ibg[i].style.backgroundImage = 'url(' + ibg[i].querySelector('img').getAttribute('src') + ')';
}
}
}
ibg();