Skip to content

Commit

Permalink
temp
Browse files Browse the repository at this point in the history
  • Loading branch information
@cyber-leaf
cyber-leaf committed Mar 22, 2016
1 parent 3318210 commit 505aaec
Show file tree
Hide file tree
Showing 5 changed files with 230 additions and 74 deletions.
11 changes: 6 additions & 5 deletions src/css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ body {
background: #111;
color: white;
font: 14px/1.5em 'Bender', Arial, sans-serif;
overflow: hidden;
/*overflow: hidden;*/
}
body::-webkit-scrollbar {
height: 0;
width: 0;
/*height: 0;*/
/*width: 0;*/
}
.wrapper {}
/*.modal-holder::-webkit-scrollbar-corner,*/
Expand Down Expand Up @@ -650,6 +650,7 @@ button:focus,
overflow: hidden;
opacity: 0;
position: fixed;
position: absolute;
left: 0;
right: 0;
top: 120px;
Expand Down Expand Up @@ -710,8 +711,8 @@ button:focus,
.modal-holder .modal-content .container::-webkit-scrollbar {
background-color: rgba(255,255,255,.3);
border: none;
height: 6px;
width: 6px;
height: 10px;
width: 10px;
}
.modal-holder .modal-content .container::-webkit-scrollbar-thumb {
background-color: #EE2151;
Expand Down
58 changes: 47 additions & 11 deletions src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,15 +80,10 @@
#application-holder {
overflow: hidden;
height: 100%;
/*min-height: 1000px;*/
width: 100%;
}
#horizontal-viewport {
/*overflow: hidden;*/
/* position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;*/
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
Expand All @@ -109,6 +104,19 @@
display: none;
}

.socials-holder {
position: fixed;
bottom: 0;
right: 0;
z-index: 3;
}
.socials-holder li {
display: inline-block;
}
.socials-holder a {
color: #fff;
}

.portrait-orientation {
background-color: #000000;
color: #ffffff;
Expand Down Expand Up @@ -593,8 +601,9 @@ section.screen-3 .container .col-right p:nth-of-type(even) {
}
.modal-container .container img {
padding: 40px 0;
height: 400px;
width: 400px;
/*height: 400px;*/
width: auto;
/*max-height: 200px;*/
}
.modal-container .container h1,
.modal-container .container h2,
Expand All @@ -617,14 +626,17 @@ section.screen-3 .container .col-right p:nth-of-type(even) {
padding-bottom: 40px;
text-align: left;
line-height: 1.6em;
min-height: 100%;
/*min-height: 100%;*/
}
.modal-holder .modal-content {
position: relative;
}
.modal-holder .modal-content .container {
width: 1060px;
width: 86%;
-webkit-column-count: 3;
/* -webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
column-count: 3;*/
}
.modal-holder .modal-content .container * {
-webkit-touch-callout: initial;
Expand All @@ -634,6 +646,30 @@ section.screen-3 .container .col-right p:nth-of-type(even) {
-ms-user-select: initial;
user-select: initial;
}
.modal-image {
transform-origin: 50% 50%;
-webkit-transform: scale(1);
transform: scale(1);
/*opacity: 0;*/
-webkit-transition: all .6s;
transition: all .6s;
}
.tint {
background: rgba(0,0,0,0);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 19;
-webkit-transition: background .6s;
transition: background .6s;
}
.tint.active {
background: rgba(0,0,0,.6);
-webkit-transition: background .6s;
transition: background .6s;
}
.mobile {}
.mobile #presentation {
-webkit-filter: blur(0px) !important;
Expand Down
64 changes: 56 additions & 8 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,8 @@
<!-- <link rel="stylesheet" href="../libs/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css"> -->

<!--<link rel="stylesheet" href="css/normalize.css">-->
<!--<link rel="stylesheet" href="css/font-awesome.min.css">-->
<!-- <link rel="stylesheet" href="../libs/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css"> -->

<link rel="stylesheet" href="../libs/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/fonts.css">
Expand Down Expand Up @@ -120,13 +119,40 @@

</div>

<div class="socials-holder deactive">
<ul>

<li>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>

<li>
<a href="#">
<i class="fa fa-instagram"></i>
</a>
</li>

<li>
<a href="#">
<i class="fa fa-vk"></i>
</a>
</li>

<li>
<a href="#">
<i class="fa fa-pinterest"></i>
</a>
</li>

</ul>
</div>

<section id="vertical-viewport" class="full-height">

<section id="start" class="empty full-height" data-before="state1" data-leave="state2" data-after="hideControls" ></section>

<!-- <section id="blur" class="empty full-height" data-before="state2">
</section> -->

<section id="screen-1" class="screen-3 full-height" data-before="state3">

<div class="container">
Expand Down Expand Up @@ -187,97 +213,119 @@
<section id="series" class="presentation full-height">
<div class="gallery-slider" id="gallery-slider">
<div class="slider-viewport">

<div class="slider-holder">

<div class="slide">
<div class="image-holder" data-modal="#slide-1">
<img src="https://unsplash.it/600/600/?image=975" alt="">
</div>
</div>

<div class="slide" data-modal="#slide-2">
<div class="image-holder">
<img src="https://unsplash.it/600/600/?image=971" alt="">
</div>
</div>

<div class="slide" data-modal="#slide-3">
<div class="image-holder">
<img src="https://unsplash.it/600/600/?image=964" alt="">
</div>
</div>

<div class="slide" data-modal="#slide-4">
<div class="image-holder">
<img src="https://unsplash.it/600/600/?image=953" alt="">
</div>
</div>

<div class="slide" data-modal="#slide-5">
<div class="image-holder">
<img src="https://unsplash.it/600/600/?image=952" alt="">
</div>
</div>

<div class="slide">
<div class="image-holder" data-modal="#slide-6">
<img src="https://unsplash.it/600/600/?image=934" alt="">
</div>
</div>

<div class="slide">
<div class="image-holder">
<img src="https://unsplash.it/600/600/?image=928" alt="">
</div>
</div>

<div class="slide">
<div class="image-holder">
<img src="https://unsplash.it/600/600/?image=929" alt="">
</div>
</div>

</div>

</div>
</div>
</section>

<section id="blog" class="presentation full-height">
<div class="gallery-slider" id="blog-slider">
<div class="slider-viewport">

<div class="slider-holder">

<div class="slide">
<div class="image-holder">
<img src="https://unsplash.it/600/600/?image=1042" alt="">
</div>
</div>

<div class="slide">
<div class="image-holder">
<img src="https://unsplash.it/600/600/?image=1033" alt="">
</div>
</div>

<div class="slide">
<div class="image-holder">
<img src="https://unsplash.it/600/600/?image=1032" alt="">
</div>
</div>

<div class="slide">
<div class="image-holder">
<img src="https://unsplash.it/600/600/?image=1031" alt="">
</div>
</div>

<div class="slide">
<div class="image-holder">
<img src="https://unsplash.it/600/600/?image=1021" alt="">
</div>
</div>

<div class="slide">
<div class="image-holder">
<img src="https://unsplash.it/600/600/?image=1019" alt="">
</div>
</div>

<div class="slide">
<div class="image-holder">
<img src="https://unsplash.it/600/600/?image=999" alt="">
</div>
</div>

<div class="slide">
<div class="image-holder">
<img src="https://unsplash.it/600/600/?image=990" alt="">
</div>
</div>

</div>

</div>
</div>
</section>
Expand Down Expand Up @@ -359,18 +407,18 @@ <h3>AATSU pop-up 1</h3>
<h3 class="type-1">AATSU pop-up 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam velit nihil quis enim alias molestias facilis quisquam, illo fuga sunt deserunt, rem mollitia ab inventore cupiditate illum doloribus temporibus ex.</p>
<p><img src="https://unsplash.it/400/400?image=76"></p>
<p><img src="https://unsplash.it/800/600?image=76"></p>
<p>Delectus voluptatum iure ullam itaque, at alias, numquam autem dolorem magni possimus ipsum eaque commodi eos, quam pariatur! Ut, esse placeat sint officiis velit at quisquam non, harum dolorem dolorum.</p>
<p>Dignissimos ducimus quos, aut iste saepe, consectetur sapiente itaque? Laboriosam et optio doloremque deserunt quaerat libero totam facere, perspiciatis est rerum blanditiis ad earum, beatae alias, ipsam accusamus. Fugit, magnam.</p>
<p>Id deleniti optio asperiores saepe enim, minus dolor impedit quae facilis dicta amet tempore. Quibusdam ratione ea enim voluptatibus itaque culpa, doloribus. Inventore dolorem ad dolor mollitia non cupiditate tenetur.</p>
<p><img src="https://unsplash.it/400/400?image=243"></p>
<p><img src="https://unsplash.it/800/600?image=243"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><img src="https://unsplash.it/400/400?image=156"></p>
<p><img src="https://unsplash.it/800/600?image=156"></p>

</div>
</div>
Expand Down
Loading

0 comments on commit 505aaec

Please sign in to comment.