<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Simon's Split Screen Navigation</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Faustina:400,500,600,700'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<header>
<div class="center">
<div class="logo">
<a href="#">Explore <span>Canada</span></a>
</div>
<div class="menu">
Menu <div class="icon"><i class="fas fa-bars"></i></div>
</div>
</div>
</header>
<div id="slides">
<div class="slide" data-content="1">
<div class="info">
<div class="date"><span>Salı</span> 01.05.18</div>
<h1>Canada was named the top country to travel to in 2017</h1>
<p class="detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime non cumque.</p>
</div>
<div class="more">Full article</div>
<img src="https://image.ibb.co/nnnhPS/banff.jpg" alt="" class="content-image">
</div>
<div class="slide" data-content="2">
<div class="info">
<div class="date"><span>Salı</span> 27.04.18</div>
<h1>The Explore Canada road trip</h1>
<p class="detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime non cumque.</p>
</div>
<div class="more">Full article</div>
<img src="https://image.ibb.co/k99wjS/beach.jpg" alt="" class="content-image">
</div>
<div class="slide" data-content="3">
<div class="info">
<div class="date"><span>Salı</span> 23.04.18</div>
<h1>Exploring the Land of the Living Skies</h1>
<p class="detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime non cumque.</p>
</div>
<div class="more">Full article</div>
<img src="https://image.ibb.co/nvoLdn/giau.jpg" alt="" class="content-image">
</div>
</div>
<div id="contents">
<div class="content" content-id="1"> <!-- width: 1022px -->
<p class="detail"></p>
<img src="" alt="" width="850">
<div class="date"></div>
</div>
<div class="content" content-id="2"> <!-- width: 1022px -->
<p class="detail"></p>
<img src="" alt="" width="850">
<div class="date"></div>
</div>
<div class="content" content-id="3"> <!-- width: 1022px -->
<p class="detail"></p>
<img src="" alt="" width="850">
<div class="date"></div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/ilyasbilgihan/simonandaposs-split-screen-navigation-rvmVgG */
body, h1, p{
margin: 0;
padding: 0;
font-family: 'Faustina', serif;
font-weight: 500;
}
a { text-decoration: none; }
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 66px;
line-height: 62px;
color: #fff;
display: flex;
z-index: 99;
}
header a { color: #fff; }
.center {
width: 1280px;
margin: 0 auto;
}
.logo {
float: left;
height: 0;
}
.menu {
float: right;
height: 0;
}
.logo span { font-weight: bold; text-shadow: 0px 0px 3px currentColor; }
.menu:hover { cursor: pointer; }
.menu .icon {
float: right;
width: 26px;
height: 26px;
border-radius: 50%;
text-align: center;
line-height: 26px;
background: #fff;
font-size: 12px;
margin: 20px 0 0 10px;
}
.menu i { color: #3a3934; }
#slides {
width: 100%;
height: 100vh;
}
.slide {
position: relative;
color: #fff;
overflow: hidden;
float: left;
display: inline-block;
transition: 1s;
width: 33.33%;
overflow: hidden;
}
.slide[data-content="3"] {
right: 0;
position: absolute;
z-index: 98;
}
.slide[data-content="2"] {
width: 48%;
}
.slide[data-content="1"] {
z-index: 98;
}
.slide .info {
position: absolute;
bottom: 120px;
left: 50%;
width: 300px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
transition: 1s;
}
.info:before {
content: "";
position: absolute;
width: 40px;
height: 3px;
background: #e39926;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
margin-top: -20px;
box-shadow: 2px 0px 3px #8e694d;
}
.date span { font-weight: bold; font-size: 15px; }
.date span:after { content: " /" }
.slide .date, .slide .detail { padding: 0 10px; opacity: .9; font-weight: 400; text-align: center; font-size: 14px; }
.slide h1 { font-weight: bold; text-align: center; margin-bottom: 35px;}
.slide .more {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 50%) rotate(-90deg);
transform: translate(-50%, 50%) rotate(-90deg);
bottom: 0;
margin-bottom: -101px;
}
.slide .more:after {
content: "";
width: 35px;
height: 2px;
background: #fff;
position: absolute;
margin: 10px 0 0 20px;
background: #e39926;
box-shadow: 2px 0px 3px #8e694d;
}
.slide img {
height: 100vh;
}
#contents { display: none; }
/*Downloaded from https://www.codeseek.co/ilyasbilgihan/simonandaposs-split-screen-navigation-rvmVgG */
$(document).ready(function(){
$('#slides div[data-content="2"] .info').css("transform","translateX(-82%)");
$(".slide").hover(function(){
Who(this);
});
});
Who = (e) => {
var dataContent = $(e).attr("data-content");
for(var i=1; i<4; i++){
var currentSlide = $('#slides div[data-content="'+i+'"]');
if( (i != dataContent) && ( i!=2 ) ){
currentSlide.css("width","26%");
}else if(i == dataContent) {
currentSlide.css("width","48%");
}
if( dataContent != 2 ){
$('#slides div[data-content="2"] .info').css("transform","translateX(-100%)");
}else {
$('#slides div[data-content="2"] .info').css("transform","translateX(-50%)");
}
}
};
/**
$('#slides div[data-content="'+dataContent+'"] img').css("margin-left","-30%");
$('#slides div[data-content="1"] img').css("margin-left","-80%");
$('#slides div[data-content="3"] img').css("margin-left","-80%");
**/
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Google Font API
jQuery
v3.3.1
