Skip to content

Commit

Permalink
added drag scroll
Browse files Browse the repository at this point in the history
  • Loading branch information
Alex committed Aug 26, 2019
1 parent 964aa6b commit afc2f34
Show file tree
Hide file tree
Showing 8 changed files with 406 additions and 0 deletions.
165 changes: 165 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
@import url('https://fonts.googleapis.com/css?family=Exo+2&display=swap');

body {
margin: 0;
}

h1,
h2,
p,
span,
ul {
font-family: 'Exo 2', sans-serif;
}

.gray {
background-color: #2b2b2b;
}

.lightGray {
background-color: #6F787A;
}

.mountains {
background-image: url(../img/MountCookChangingOfTheGuard.jpg);
}

main {
position: absolute;
}

.fullpage {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
transition: background 1000ms linear;
}

header {
position: absolute;
display: flex;
justify-content: space-around;
align-items: baseline;
z-index: 1;
width: 100%;
height: 108px;
transition: color 1000ms linear;
color: white;
}

header hr {
margin: 0;
max-width: 990px;
height: 2px;
}

.slides_counter {
display: flex;
align-items: center;
}

.slides_counter ul {
line-height: 43px;
list-style: none;
width: 50px;
padding: 0 100px 0 74px;
font-size: 24px;
color: rgba(255, 255, 255, 0.2);
}

.slideName {
width: 150px;
}

.slides_counter li {
transition: font-size 0.6s ease;
}

.active_slide {
font-size: 36px;
color: white;
}

.mainSlide {
font-family: 'Exo2', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-content: space-around;
}

.mainSlide p {
font-size: 18px;
color: #E2F27D;
}

.mainSlide h2 {
color: #FFFFFF;
font-size: 75px;
}

.fadeOut {
animation-name: fadeOut;
animation-duration: 1s;
}

@keyframes fadeOut {
100% {
opacity: 0;
display: none;
}
}

.portfolio {
max-width: 100%;
overflow-x: auto;
height: 500px;
}

.portfolioWrapper {
display: flex;
overflow-x: auto;
height: 500px;
max-width: 100%;
}

.portfolioBox {
min-width: 600px;
margin: 0 20px;
max-height: calc(100% - 145px);
margin-bottom: 40px;
font-size: 35px;
color: white;
padding: 92px 10px 10px 40px;
background-image: url('../img/4c8f7eddcd05c8762cd544eb82cb71f517d954c7bf6e7b985d76cf76db604e7e.png');
background-size: cover;
}

.portfolioWrapper {
cursor: pointer;
}

.portfolioWrapper .active {
cursor: grabbing;
}

.portfolioBox h2 {
margin-top: 0;
}

.portfolioWrapper:-webkit-scrollbar-track
{
height: 2px;
background-color: #F5F5F5;
}
.portfolioWrapper::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
.portfolioWrapper::-webkit-scrollbar-thumb
{
height: 2px;
background-color: #000000;
}
Binary file added fonts/Gilroy-LightItalic.ttf
View file
Binary file not shown.
Binary file added img/4c8f7eddcd05c8762cd544eb82cb71f517d954c7bf6e7b985d76cf76db604e7e.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/MountCookChangingOfTheGuard.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions img/menu.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/rockies09.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
83 changes: 83 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="ru">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header>
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.14286 25.7143C2.30721 25.7143 0 28.0215 0 30.8572C0 33.6928 2.30721 36 5.14286 36C7.9785 36 10.2857 33.6928 10.2857 30.8572C10.2857 28.0215 7.9785 25.7143 5.14286 25.7143Z"
fill="white" />
<path d="M18.0003 25.7143C15.1646 25.7143 12.8574 28.0215 12.8574 30.8572C12.8574 33.6928 15.1646 36 18.0003 36C20.8359 36 23.1431 33.6928 23.1431 30.8572C23.1431 28.0215 20.8359 25.7143 18.0003 25.7143Z"
fill="white" />
<path d="M30.8567 25.7143C28.0211 25.7143 25.7139 28.0215 25.7139 30.8572C25.7139 33.6928 28.0211 36 30.8567 36C33.6924 36 35.9996 33.6928 35.9996 30.8572C35.9996 28.0215 33.6924 25.7143 30.8567 25.7143Z"
fill="white" />
<path d="M5.14286 12.8571C2.30721 12.8571 0 15.1644 0 18C0 20.8356 2.30721 23.1429 5.14286 23.1429C7.9785 23.1429 10.2857 20.8356 10.2857 18C10.2857 15.1644 7.9785 12.8571 5.14286 12.8571Z"
fill="white" />
<path d="M18.0003 12.8571C15.1646 12.8571 12.8574 15.1644 12.8574 18C12.8574 20.8356 15.1646 23.1429 18.0003 23.1429C20.8359 23.1429 23.1431 20.8356 23.1431 18C23.1431 15.1644 20.8359 12.8571 18.0003 12.8571Z"
fill="white" />
<path d="M30.8567 12.8571C28.0211 12.8571 25.7139 15.1644 25.7139 18C25.7139 20.8356 28.0211 23.1429 30.8567 23.1429C33.6924 23.1429 35.9996 20.8356 35.9996 18C35.9996 15.1644 33.6924 12.8571 30.8567 12.8571Z"
fill="white" />
<path d="M5.14286 0C2.30721 0 0 2.30721 0 5.14286C0 7.9785 2.30721 10.2857 5.14286 10.2857C7.9785 10.2857 10.2857 7.9785 10.2857 5.14286C10.2857 2.30721 7.9785 0 5.14286 0Z"
fill="white" />
<path d="M18.0003 0C15.1646 0 12.8574 2.30721 12.8574 5.14286C12.8574 7.9785 15.1646 10.2857 18.0003 10.2857C20.8359 10.2857 23.1431 7.9785 23.1431 5.14286C23.1431 2.30721 20.8359 0 18.0003 0Z"
fill="white" />
<path d="M30.8567 10.2857C33.6924 10.2857 35.9996 7.9785 35.9996 5.14286C35.9996 2.30721 33.6924 0 30.8567 0C28.0211 0 25.7139 2.30721 25.7139 5.14286C25.7139 7.9785 28.0211 10.2857 30.8567 10.2857Z"
fill="white" />
</svg>
<h1>Boncreabel</h1>
<hr>
<span class="slideName">Услуги</span>
<span class="lang">Ru</span>
</header>
<main>
<div id="0" class="fullpage gray">
<div class="slides_counter">
<ul>
<li class="slide_0 active_slide">01</li>
<li class="slide_1">02</li>
<li class="slide_2">03</li>
<li class="slide_3">04</li>
<li class="slide_4">05</li>
</ul>
</div>
<!-- <div class="mainSlide">
<p>Давайте работать вместе</p>
<h2>Ваша идея.<br>Наше превосходное исполнение.</h2>
</div> -->
<div class="portfolio">
<div class="portfolioWrapper">
<div class="portfolioBox">
<h2>KamerGO</h2>
<p>Аренда экшен камер</p>
</div>
<div class="portfolioBox">
<h2>KamerGO</h2>
<p>Аренда экшен камер</p>
</div>
<div class="portfolioBox">
<h2>KamerGO</h2>
<p>Аренда экшен камер</p>
</div>
<div class="portfolioBox">
<h2>KamerGO</h2>
<p>Аренда экшен камер</p>
</div>
<div class="portfolioBox">
<h2>KamerGO</h2>
<p>Аренда экшен камер</p>
</div>
</div>
</div>
</div>
</main>
<script src="./js/app.js"></script>
</body>

</html>
Loading

0 comments on commit afc2f34

Please sign in to comment.