I'm having a problem. More precisely, I'm just learning javascript. There is something I cannot do. I'm just summarizing.
There is a list item 7 of them. These are in the ul li structure.
Below are 7 swiper slide elements.
I'm trying to make it go to the swiper slide items below when I click on the top "ul li" structure, but I couldn't.
For example, when I click on the 6th of the " ul li " above, I want it to go to the 6th of the swiper slide below, and I also want it to work the same way when I click on the arrows.
My Code Example is below. Can anyone help?
https://embed.plnkr.co/plunk/OOTXtXkbd33K1Svt
var init = false;
function swiperCard() {
if (window.innerWidth >= 768) {
if (!init) {
init = true;
swiper2 = new Swiper(".main-slider", {
loop: false,
spaceBetween: 0,
speed:1500,
slidesPerView: 1,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
mousewheel: {
sensitivity: 1,
releaseOnEdges: true,
},
});
}
} else if (init) {
swiper2.destroy();
init = false;
}
}
swiperCard();
window.addEventListener("resize", swiperCard);
.anchor-nav {
width: 100%;
position: relative;
height: 60px;
padding-left: 10px;
}
.anchor-nav .anchor {
font-size: 16px;
position: relative;
text-align: left;
font-family: var(--bs-site-main-font-bold);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--bs-site-red-color);
}
.anchor-nav .anchor .title {
padding-bottom: 10px;
position: relative;
width: 100%;
text-align: left;
position: relative;
}
.anchor-nav ul li.active .anchor {
color: var(--bs-site-red-color);
}
.anchor-nav .anchor .title .circle {
width: 28px;
height: 20px;
display: block;
position: absolute;
background: var(--bs-white);
color: #d1d1d1;
bottom: -8px;
}
.anchor-nav .anchor .title .circle:after {
content: "";
position: absolute;
left: 50%;
right: auto;
top: 50%;
width: 8px;
height: 8px;
background: aliceblue;
border-radius: 100%;
transform:
translate(-50%, -50%);
}
.anchor-nav .anchor.active .circle:after {
background: var(--bs-site-red-color);
}
#previous,
#next {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
width: 40px;
height: 40px;
background: var(--bs-white);
border-radius: var(--bs-site-radius);
transition: var(--bs-site-transition);
flex: 0 0 40px;
max-width: 40px;
}
#previous:hover svg path,
#next:hover svg path {
stroke: var(--bs-white);
}
#previous:hover,
#next:hover {
background: var(--bs-site-red-color);
}
#previous svg path,
#next svg path {
transition: var(--bs-site-transition);
}
.anchor-nav ul::-webkit-scrollbar {
display: none;
}
.anchor-nav ul li {
flex-shrink: 0;
width: 40%;
}
.progress-bar .swiper-pagination.swiper-pagination-progressbar {
background: rgb(25 26 25 / 20%);
height: 2.5px;
}
.progress-bar .swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--bs-site-red-color);
top: 0px;
}
.main-slider .swiper-button-next,
.main-slider .swiper-button-prev {
height: auto;
margin: 0;
width: auto;
transform: translate(0, -50%);
}
.main-slider .swiper-button-next:after,
.main-slider .swiper-button-prev:after {
display: none;
}
.anchor-nav .anchor-list {
justify-content: space-between;
overflow-x: auto;
overflow-y: hidden;
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
.anchor-nav ul li.active .anchor .title .circle:after {
background: var(--bs-site-red-color);
}
.queries-block.part-area {
height: calc(100% - 60px);
overflow-y: auto;
padding: 0;
margin: 0;
flex-flow: inherit;
flex-direction: column;
vertical-align: top;
justify-content: start;
}
.main-slider .swiper-wrapper {
display: block;
}
.anchor-nav .anchor.active .title {
border-color: var(--bs-site-red-color);
}
.anchor-nav .anchor .title em {
padding-right: 10px;
width: 100%;
display: block;
position: relative;
}
.anchor-nav .anchor .title em strong {
max-height: 30px;
overflow: hidden;
display: block;
}
.anchor-nav ul li.active .anchor .title .circle:after,
.anchor-nav .swiper-initialized .swiper-slide.active .anchor .title .circle:after {
background: url(../i/play-1.svg) no-repeat !important;
width: 18px;
height: 20px;
}
#media (min-width: 768px) {
.wrapper .section-part:last-child {
min-width: auto;
flex-shrink: 0;
width: 682px;
}
.main-slider .swiper-wrapper {
display: block;
}
.wrapper .section-part {
height: calc(100vh - 134px);
position: relative;
min-width: 100vw;
flex-shrink: 0;
overflow: hidden;
}
.wrapper .section-part>.container,.wrapper .section-part>.container-fluid, .wrapper .section-part>.container>.row,.wrapper .section-part>.container-fluid>.row, .wrapper .section-part>.container>.row>div,.wrapper .section-part>.container-fluid>.row>div {
height: 100%;
}
.p-container {
max-height: 100%;
}
.main-slider .swiper-wrapper {
display: flex;
}
.anchor-nav ul li {
flex-shrink: 1;
width: 100%;
list-style-type: none;
}
.anchor-nav .anchor .title {
text-align: center;
/* border-bottom: 2px solid var(--bs-site-red-color); */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.anchor-nav .anchor .title .circle {
transform: inherit;
left: 50%;
transform: translate(-50%, 0);
}
.anchor-nav .anchor {
font-size: 12px;
}
.anchor-nav {
padding: 0;
}
.part-head {
padding-top: 0;
}
.anchor-nav ul li.active~li .anchor {
color: rgb(25 26 25 / 30%);
}
.anchor-nav ul li.active~li .anchor .title:before {
background: #d1d1d1;
width: 0;
}
.anchor-nav .anchor .title:before {
content: "";
position: absolute;
bottom: 15px;
left: 0;
height: 2px;
width: 100%;
transition: all 0.25s ease;
background: var(--bs-site-red-color);
}
.anchor-nav .anchor .title:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 15px;
height: 2px;
background: #d1d1d1;
z-index: -1;
}
.anchor-nav ul li:first-child .anchor .title:after {
left: 40%;
}
.anchor-nav ul li:first-child .anchor .title:before {
left: 40%;
width: 60%;
}
.anchor-nav ul li.active .anchor em:before {
content: "";
position: absolute;
left: 45%;
bottom: -5px;
height: 2px;
background: #d1d1d1 !important;
width: 55%;
}
.anchor-nav ul li .anchor .title .circle:after {
background: var(--bs-site-red-color);
}
.anchor-nav ul li.active~li .anchor .circle:after {
background: #d1d1d1;
}
.anchor-nav .anchor .title em {
height: 40px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
line-height: 15px;
}
.anchor-nav .anchor .title .circle {
bottom: 6px;
}
.anchor-nav ul li.nonelist:last-child .anchor .title:after,
.anchor-nav ul li.nonelist:last-child .anchor .title:before {
width: 50%;
background: #d1d1d1 !important;
}
.anchor-nav ul li:last-child .anchor .title em:before {
display: none;
}
.anchor-nav ul li.nonelist:last-child .anchor .title:after {
left: calc(-50% + 10px);
}
.anchor-nav ul li.anchor.nonelist .title {
color: #5a5a5a;
}
.nonelist.active:last-child .anchor .title:before,
.anchor-nav .nonelist.active .anchor .title:after {
background: #5a5a5a !important;
}
.anchor-nav ul li.nonelist.title .circle:after {
background: #5a5a5a !important;
width: 8px;
height: 8px;
}
.anchor-nav ul li.active~li.nonelist:last-child .anchor .title:after {
left: calc(-50% + 10px);
}
.anchor-nav ul li.nonelist .anchor {
color: #757675;
}
.anchor-nav .nonelist.active:last-child .anchor .title:before,
.anchor-nav .nonelist.active:last-child .anchor .title:after {
background: #757675 !important;
}
.anchor-nav ul li.nonelist .title .circle:after {
background: #757675 !important;
width: 8px;
height: 8px;
}
.anchor-nav ul li.active.nonelist .title .circle:after {
background: #757675 !important;
}
.anchor-nav ul li.active~li.nonelist .anchor {
color: rgb(0 0 0 / 43%);
}
.anchor-nav ul li.active~li.nonelist .anchor .title .circle:after {
background: #d1d1d1 !important;
}
}
<!DOCTYPE HTML>
<html lang="tr">
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css"
/>
</head>
<body>
<header class="header">
<div class="anchor-nav">
<ul class="anchor-list">
<li class="active item">
<a href="#section1" class="anchor">
<h3 class="title">
<em>
<strong> Uzun Süren </strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section2" class="anchor">
<h3 class="title">
<em>
<strong> Sultan Melikşah</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section3" class="anchor">
<h3 class="title">
<em>
<strong>Oğlu Mahmud Hayat Felsefesi</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section4" class="anchor">
<h3 class="title">
<em>
<strong>Bunun Üzerine</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section5" class="anchor">
<h3 class="title">
<em>
<strong>Adalet</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="nonelist item">
<a href="#section6" class="anchor">
<h3 class="title">
<em>
<strong>Test</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="nonelist item">
<a href="#section7" class="anchor">
<h3 class="title">
<em>
<strong>Öneri </strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
</ul>
</div>
</header>
<main class="mainContent">
<div class="swiper main-slider wrapper">
<div class="swiper-wrapper">
<section class="swiper-slide section-part" id="slide1">
slide 1
</section>
<section class="swiper-slide section-part" id="slide2">
slide 2
</section>
<section class="swiper-slide section-part" id="slide3">
slide 3
</section>
<section class="swiper-slide section-part" id="slide4">
slide 4
</section>
<section class="swiper-slide section-part" id="slide5">
slide 5
</section>
<section class="swiper-slide section-part" id="slide6">
slide 6
</section>
<section class="swiper-slide section-part" id="slide7">
slide 7
</section>
</div>
<div class="swiper-button-prev d-none d-md-flex">
<button class="d-flex align-items-center justify-content-center" id="previous">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_94_1561)">
<path d="M20.25 12L3.75 12" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 18.75L3.75 12L10.5 5.25" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_94_1561">
<rect width="24" height="24" fill="white" transform="translate(24 24) rotate(-180)"/>
</clipPath>
</defs>
</svg>
</button>
</div>
<div class="swiper-button-next d-none d-md-flex">
<button class="d-flex align-items-center justify-content-center" id="next">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_103_2624)">
<path d="M3.75 12H20.25" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.5 5.25L20.25 12L13.5 18.75" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_103_2624">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
</div>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
</body>
</html>
You need to add a click eventListener for these anchor links calling the
swiper.slideTo(index, speed, runCallbacks) method as described in the swiper API docs
//add event listeners navigation
let anchors = document.querySelectorAll('.anchor');
anchors.forEach(function(anchor, i){
anchor.addEventListener('click', function(e){
//go to slide
swiper2.slideTo(i)
})
})
Keep in mind: In JavaScript, indices always start with 0.
So you first slide would be opened via:
swiper2.slideTo(0)
var init = false;
function swiperCard() {
if (!init) {
init = true;
swiper2 = new Swiper(".main-slider", {
loop: false,
spaceBetween: 0,
speed: 1500,
slidesPerView: 1,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
mousewheel: {
sensitivity: 1,
releaseOnEdges: true
}
});
//add event listeners navigation
let anchors = document.querySelectorAll(".anchor");
anchors.forEach(function (anchor, i) {
anchor.addEventListener("click", function (e) {
//go to slide
swiper2.slideTo(i);
});
});
}
}
swiperCard();
window.addEventListener("resize", swiperCard);
.anchor-nav {
width: 100%;
position: relative;
height: 60px;
padding-left: 10px;
}
.anchor-nav .anchor {
font-size: 16px;
position: relative;
text-align: left;
font-family: var(--bs-site-main-font-bold);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--bs-site-red-color);
}
.anchor-nav .anchor .title {
padding-bottom: 10px;
position: relative;
width: 100%;
text-align: left;
position: relative;
}
.anchor-nav ul li.active .anchor {
color: var(--bs-site-red-color);
}
.anchor-nav .anchor .title .circle {
width: 28px;
height: 20px;
display: block;
position: absolute;
background: var(--bs-white);
color: #d1d1d1;
bottom: -8px;
}
.anchor-nav .anchor .title .circle:after {
content: "";
position: absolute;
left: 50%;
right: auto;
top: 50%;
width: 8px;
height: 8px;
background: aliceblue;
border-radius: 100%;
transform: translate(-50%, -50%);
}
.anchor-nav .anchor.active .circle:after {
background: var(--bs-site-red-color);
}
#previous,
#next {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
width: 40px;
height: 40px;
background: var(--bs-white);
border-radius: var(--bs-site-radius);
transition: var(--bs-site-transition);
flex: 0 0 40px;
max-width: 40px;
}
#previous:hover svg path,
#next:hover svg path {
stroke: var(--bs-white);
}
#previous:hover,
#next:hover {
background: var(--bs-site-red-color);
}
#previous svg path,
#next svg path {
transition: var(--bs-site-transition);
}
.anchor-nav ul::-webkit-scrollbar {
display: none;
}
.anchor-nav ul li {
flex-shrink: 0;
width: 40%;
}
.progress-bar .swiper-pagination.swiper-pagination-progressbar {
background: rgb(25 26 25 / 20%);
height: 2.5px;
}
.progress-bar .swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--bs-site-red-color);
top: 0px;
}
.main-slider .swiper-button-next,
.main-slider .swiper-button-prev {
height: auto;
margin: 0;
width: auto;
transform: translate(0, -50%);
}
.main-slider .swiper-button-next:after,
.main-slider .swiper-button-prev:after {
display: none;
}
.anchor-nav .anchor-list {
justify-content: space-between;
overflow-x: auto;
overflow-y: hidden;
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
.anchor-nav ul li.active .anchor .title .circle:after {
background: var(--bs-site-red-color);
}
.queries-block.part-area {
height: calc(100% - 60px);
overflow-y: auto;
padding: 0;
margin: 0;
flex-flow: inherit;
flex-direction: column;
vertical-align: top;
justify-content: start;
}
.main-slider .swiper-wrapper {
display: block;
}
.anchor-nav .anchor.active .title {
border-color: var(--bs-site-red-color);
}
.anchor-nav .anchor .title em {
padding-right: 10px;
width: 100%;
display: block;
position: relative;
}
.anchor-nav .anchor .title em strong {
max-height: 30px;
overflow: hidden;
display: block;
}
.anchor-nav ul li.active .anchor .title .circle:after,
.anchor-nav .swiper-initialized .swiper-slide.active .anchor .title .circle:after {
background: url(../i/play-1.svg) no-repeat !important;
width: 18px;
height: 20px;
}
#media (min-width: 768px) {
.wrapper .section-part:last-child {
min-width: auto;
flex-shrink: 0;
width: 682px;
}
.main-slider .swiper-wrapper {
display: block;
}
.wrapper .section-part {
height: calc(100vh - 134px);
position: relative;
min-width: 100vw;
flex-shrink: 0;
overflow: hidden;
}
.wrapper .section-part>.container,
.wrapper .section-part>.container-fluid,
.wrapper .section-part>.container>.row,
.wrapper .section-part>.container-fluid>.row,
.wrapper .section-part>.container>.row>div,
.wrapper .section-part>.container-fluid>.row>div {
height: 100%;
}
.p-container {
max-height: 100%;
}
.main-slider .swiper-wrapper {
display: flex;
}
.anchor-nav ul li {
flex-shrink: 1;
width: 100%;
list-style-type: none;
}
.anchor-nav .anchor .title {
text-align: center;
/* border-bottom: 2px solid var(--bs-site-red-color); */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.anchor-nav .anchor .title .circle {
transform: inherit;
left: 50%;
transform: translate(-50%, 0);
}
.anchor-nav .anchor {
font-size: 12px;
}
.anchor-nav {
padding: 0;
}
.part-head {
padding-top: 0;
}
.anchor-nav ul li.active~li .anchor {
color: rgb(25 26 25 / 30%);
}
.anchor-nav ul li.active~li .anchor .title:before {
background: #d1d1d1;
width: 0;
}
.anchor-nav .anchor .title:before {
content: "";
position: absolute;
bottom: 15px;
left: 0;
height: 2px;
width: 100%;
transition: all 0.25s ease;
background: var(--bs-site-red-color);
}
.anchor-nav .anchor .title:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 15px;
height: 2px;
background: #d1d1d1;
z-index: -1;
}
.anchor-nav ul li:first-child .anchor .title:after {
left: 40%;
}
.anchor-nav ul li:first-child .anchor .title:before {
left: 40%;
width: 60%;
}
.anchor-nav ul li.active .anchor em:before {
content: "";
position: absolute;
left: 45%;
bottom: -5px;
height: 2px;
background: #d1d1d1 !important;
width: 55%;
}
.anchor-nav ul li .anchor .title .circle:after {
background: var(--bs-site-red-color);
}
.anchor-nav ul li.active~li .anchor .circle:after {
background: #d1d1d1;
}
.anchor-nav .anchor .title em {
height: 40px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
line-height: 15px;
}
.anchor-nav .anchor .title .circle {
bottom: 6px;
}
.anchor-nav ul li.nonelist:last-child .anchor .title:after,
.anchor-nav ul li.nonelist:last-child .anchor .title:before {
width: 50%;
background: #d1d1d1 !important;
}
.anchor-nav ul li:last-child .anchor .title em:before {
display: none;
}
.anchor-nav ul li.nonelist:last-child .anchor .title:after {
left: calc(-50% + 10px);
}
.anchor-nav ul li.anchor.nonelist .title {
color: #5a5a5a;
}
.nonelist.active:last-child .anchor .title:before,
.anchor-nav .nonelist.active .anchor .title:after {
background: #5a5a5a !important;
}
.anchor-nav ul li.nonelist.title .circle:after {
background: #5a5a5a !important;
width: 8px;
height: 8px;
}
.anchor-nav ul li.active~li.nonelist:last-child .anchor .title:after {
left: calc(-50% + 10px);
}
.anchor-nav ul li.nonelist .anchor {
color: #757675;
}
.anchor-nav .nonelist.active:last-child .anchor .title:before,
.anchor-nav .nonelist.active:last-child .anchor .title:after {
background: #757675 !important;
}
.anchor-nav ul li.nonelist .title .circle:after {
background: #757675 !important;
width: 8px;
height: 8px;
}
.anchor-nav ul li.active.nonelist .title .circle:after {
background: #757675 !important;
}
.anchor-nav ul li.active~li.nonelist .anchor {
color: rgb(0 0 0 / 43%);
}
.anchor-nav ul li.active~li.nonelist .anchor .title .circle:after {
background: #d1d1d1 !important;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css" />
<header class="header">
<div class="anchor-nav">
<ul class="anchor-list">
<li class="active item">
<a href="#section1" class="anchor">
<h3 class="title">
<em>
<strong> Uzun Süren </strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section2" class="anchor">
<h3 class="title">
<em>
<strong> Sultan Melikşah</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section3" class="anchor">
<h3 class="title">
<em>
<strong>Oğlu Mahmud Hayat Felsefesi</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section4" class="anchor">
<h3 class="title">
<em>
<strong>Bunun Üzerine</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section5" class="anchor">
<h3 class="title">
<em>
<strong>Adalet</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="nonelist item">
<a href="#section6" class="anchor">
<h3 class="title">
<em>
<strong>Test</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="nonelist item">
<a href="#section7" class="anchor">
<h3 class="title">
<em>
<strong>Öneri </strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
</ul>
</div>
</header>
<main class="mainContent">
<div class="swiper main-slider wrapper">
<div class="swiper-wrapper">
<section class="swiper-slide section-part" id="slide1">
slide 1
</section>
<section class="swiper-slide section-part" id="slide2">
slide 2
</section>
<section class="swiper-slide section-part" id="slide3">
slide 3
</section>
<section class="swiper-slide section-part" id="slide4">
slide 4
</section>
<section class="swiper-slide section-part" id="slide5">
slide 5
</section>
<section class="swiper-slide section-part" id="slide6">
slide 6
</section>
<section class="swiper-slide section-part" id="slide7">
slide 7
</section>
</div>
<div class="swiper-button-prev d-none d-md-flex">
<button class="d-flex align-items-center justify-content-center" id="previous">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_94_1561)">
<path d="M20.25 12L3.75 12" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10.5 18.75L3.75 12L10.5 5.25" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_94_1561">
<rect width="24" height="24" fill="white" transform="translate(24 24) rotate(-180)" />
</clipPath>
</defs>
</svg>
</button>
</div>
<div class="swiper-button-next d-none d-md-flex">
<button class="d-flex align-items-center justify-content-center" id="next">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_103_2624)">
<path d="M3.75 12H20.25" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.5 5.25L20.25 12L13.5 18.75" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_103_2624">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</button>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
Related
My dropdown menu is not clickable. Like if I want to go to a different page, it wont let me click it. Can someone please help me on what to do here?
This is my htm and css
`<h2>Laura Deleon</h2>
</div>
<ul class="nav-links">
<li>Photography</li>
<li>Films</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
<div class="carousel-container">
<figure class="carousel-slide snaps-inline">
<img src="images/IMG_7068.jpg">
<img src="images/IMG_7067.jpg">
<img src="images/IMG_7069.jpg">
<img src="images/IMG_7070.jpg">
<img src="images/IMG_7072.jpg">
<img src="images/IMG_3123 (1).jpg">
<img src="images/IMG_3124.jpg">
<img src="images/IMG_3125 (1).jpg">
<img src="images/IMG_3572.jpg">
<img src="images/IMG_3128.jpg">
<img src="images/IMG_3126 (1).jpg">
<img src="images/IMG_2650 (1).jpg">
<img src="images/img5.jpg">
<img src="images/img3.jpg.jpg">
<img src="images/img13.jpg.jpg">
<img src="images/img18.jpg.jpg">
<img src="images/img9.jpg">
<img src="images/img1.jpg">
<img src="images/IMG_1382.jpg">
<img src="images/img19.jpg">
</figure>
`
I made put the dropdown to go over the pictures to see if that worked but nothing.The dropdown is for when the page is shrinked and for mobile. I tried it on my phone and I cant click on the other pages
`/*start navbar*/
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 10vh;
}
.nav-links {
display: flex;
width: 40%;
justify-content: space-around;
}
.nav-links li{
list-style: none;
background-color: rgba(255, 255, 255, 0.5);
}
.nav-links a{
list-style: none;
text-transform: none;
letter-spacing: 3px;
line-height: 25pt;
}
/*end navbar*/
/*start burger*/
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 1px;
background-color: black;
margin: 5px;
transition: 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 55%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 95vh;
top: 8vh;
display: inline-block;
flex-direction: column;
justify-content: center;
width: 20%;
transform: translateX(0px);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0
}
.burger {
display: block;
}
#fas1,
#fas2 {
display: none;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade{
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*end burger*/
/*start picture carousel home*/
img {
width: 700px;
height: 700px;
object-fit: contain;
margin: 10px;
z-index: -1;
}
.carousel-slide {
display: grid;
gap: var(--size-3);
grid-auto-flow: column;
overflow-x: auto;
overscroll-behavior-inline: contain;
position: relative;
}`
I have a styled file input. It works fine, but after the file selection, I would like to show the selected filename instead of No files selected. How can I do this in Vue?
.fileContainer {
overflow: hidden;
position: relative;
background-color: #8181fe;
color: #fff;
padding: 6px 18px;
border-radius: 7px;
line-height: 21px;
}
form input, textarea {
background-color: #fff;
padding: 10px;
border: 1px solid #d9dadc;
border-radius: 7px;
font-size: 16px;
color: #393645;
resize: none;
}
.fileContainer [type=file] {
cursor: pointer;
display: block;
font-size: 13px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
left: 0;
text-align: right;
top: -8px;
}
.file-info {
font-size: 13px;
color: #a9a7a9;
line-height: 53px;
padding-left: 10px;
}
<div id="contact-form" class="contact-form">
<form class="form">
<div class="section-file">
<label class="fileContainer">
Select files
<input type="file" class="file-upload" id="file" name="file" accept="jpg/image/jpeg/image/png">
</label>
<span class="file-info">No files selected</span>
</div>
</form>
</div>
Note the change event's target is the associated <input>, and the selected files are indicated in <input>.files, which has a length property for the number of files. We could then track the non-zero length as a Boolean to determine whether to display No files selected:
Add a files data property to track the selected files:
data() {
return {
files: null
}
},
Use v-if to conditionally render No files selected based on files above. In the v-else branch, we display the list of selected files:
<span v-if="!files || !files.length">No files selected</span>
<ul v-else>
<li v-for="file in files" :key="file.name">{{file.name}}</li>
</ul>
Add a change-event handler to the <input> in the component's template:
<input #change="filesSelected">
Define the handler method in the component's methods:
methods: {
fileSelected(e) {
this.files = e.target.files
}
}
new Vue({
el: '#contact-form',
data() {
return {
files: null
}
},
methods: {
fileSelected(e) {
this.files = e.target.files
}
}
})
.fileContainer {
overflow: hidden;
position: relative;
background-color: #8181fe;
color: #fff;
padding: 6px 18px;
border-radius: 7px;
line-height: 21px;
}
form input, textarea {
background-color: #fff;
padding: 10px;
border: 1px solid #d9dadc;
border-radius: 7px;
font-size: 16px;
color: #393645;
resize: none;
}
.fileContainer [type=file] {
cursor: pointer;
display: block;
font-size: 13px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
left: 0;
text-align: right;
top: -8px;
}
.file-info {
font-size: 13px;
color: #a9a7a9;
line-height: 53px;
padding-left: 10px;
}
<script src="https://unpkg.com/vue#2.6.10/dist/vue.min.js"></script>
<div id="contact-form" class="contact-form">
<form class="form">
<div class="section-file">
<label class="fileContainer">
Select files
<input type="file" class="file-upload" id="file" name="file" #change="fileSelected" multiple accept="image/jpg,image/jpeg,/image/png">
</label>
<span class="file-info" v-if="!files || !files.length">No files selected</span>
<ul v-else>
<li v-for="file in files" :key="file.name">{{file.name}}</li>
</ul>
</div>
</form>
</div>
I'm developing a website where I have to put a bootstrap carousel and different texts over this carousel (absolute element).
Once I put the carousel on the website, all the texts become blurry and difficult to read.
I've read the could a problem between z-index of the text and z-index of the carousel but I'm not getting how I can solve it because I have to keep this text over the carousel.
Here the image of what I'm developing:
Here my code:
HTML
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 top-header-container">
<ul>
<li>UK 33333</li>
<li>IRELAND 333333</li>
<li>CANADA 333333</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 background-img-slide" style="z-index: -10px;">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800">
</div>
<div class="carousel-item">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800">
</div>
<div class="carousel-item">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<div class="logo-wrap">
<div class="logo-container">
<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="logo-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/deane-logo.png"></a>
</div>
</div>
<nav class="main_menu_container">
<ul class="main_menu_class">
<li>About us</li>
<li>Services</li>
<li>Projects</li>
<li>Policies</li>
<li>Contact us</li>
</ul>
</nav>
<div class="slide-title-blue-wrap">
<div class="slide-title-blue-container">
<span class="slide-title-blue">tefdjsafkljdasfkljkjfdlskalòs</span>
</div>
</div>
<div class="slide-title-red-wrap">
<div class="slide-title-red-container">
<span class="slide-title-red">tefdjsafkljdasfkljkjfdlskalòs</span>
</div>
</div>
<div class="slide-title-green-wrap">
<div class="slide-title-green-container">
<span class="slide-title">tefdjsafkljdasfkljkjfdlskalòs</span>
</div>
</div>
</div>
CSS
.top-header-container {
text-align: right;
position: relative;
z-index: 2;
}
.top-header-container > ul {
margin: 0;
padding: 0;
}
.top-header-container > ul > li {
display: inline-block;
list-style: none;
padding: 15px;
font-size: 13px;
}
.main_menu_container {
text-align: right;
position: absolute;
width: 58%;
right: -110px;
top: 55px;
}
.main_menu_container > ul {
margin: 0;
padding: 0;
padding-right: 150px;
background: #76bd21;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
}
.main_menu_container > ul > li {
display: inline-block;
list-style: none;
padding: 15px;
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
}
.main_menu_container > ul > li > a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
}
.main_menu_container > ul > li > a:hover {
text-decoration: none;
}
.logo-wrap {
position: relative;
margin-top: -835px;
margin-left: -35px;
}
.logo-container {
position: absolute;
left: -450px;
background: rgba(255, 255, 255, 0.82);
height: 800px;
width: 50%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
}
.navbar-brand {
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
}
.logo-img {
position: absolute;
left: 110px;
top: 40px;
}
.background-img-slide {
position: relative;
margin-top: -100px;
background-image: url(assets/img/image-home-main.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 850px;
}
.slide-title-blue-wrap {
position: relative;
}
.slide-title-blue-container {
position: absolute;
left: -689px;
top: -7px;
background: rgba(5, 34, 162, 0.85);
height: 700px;
width: 60%;
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
z-index: 15;
}
.slide-title-blue {
position: absolute;
top: 70%;
left: 65%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
color: #fff;
}
.slide-title-green-wrap {
position: relative;
}
.slide-title-green-container {
position: absolute;
left: -881px;
top: 835px;
background: rgba(118, 189, 33, 0.85);
height: 800px;
width: 60%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
z-index: 10;
}
.slide-title-red-wrap {
position: relative;
}
.slide-title-red-container {
position: absolute;
left: -410px;
top: 693px;
background: rgba(5, 34, 162, 0.85);
height: 142px;
width: 60%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
z-index: 15;
}
.slide-title-red {
position: absolute;
top: 40%;
left: 50%;
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
color: #fff;
}
Blurry text (with carousel)
Clear text (without carousel)
Here link of my test website:
http://www.matrix-test.com/roofing/
Any Idea to solve this problem?
I've been able to resolve this issue in Bootstrap 4 by setting the backface-visibility attribute of the carousel-item to unset.
Here's the code.
.carousel-item {
-webkit-backface-visibility: unset!important;
backface-visibility: unset!important;
}
I created a vertical carousel with Slick. I made some changes in design and everything is working as I wanted except when the first element is in the view of the carousel. At a time there are 4 items to be visible in my carousel but when the first element is at the first of the four items then something wrong happens in the layout of the carousel.
My url is -
http://www.w3karigar.com/mobile/game2/
You can see the code on my website. But I have included a few below -
$('#games-carousel').slick({
dots: false,
arrows: false,
infinite: true,
speed: 200,
slidesToShow: 4,
vertical: true,
verticalSwiping: true,
swipeToSlide: true
});
$('#games-carousel').slick('setPosition');
#games-carousel .item {
display: block;
width: 100%;
height: 70px;
opacity: 0.2;
padding: 1px 0;
transition: all 0.2s ease-in;
transform: translate3d(0,0,0);
}
#games-carousel .item .cover, #games-carousel .item .info {
width: 50%;
float: left;
height: 100%;
max-height: 100%;
overflow: hidden;
}
#games-carousel .item .cover {
padding: 0 7px 0px 5px;
overflow: visible;
}
#games-carousel .item .cover img {
max-height: 100%;
width: auto;
float: right;
box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
#games-carousel .item .info {
padding-left: 7px;
font-size: 11px;
color: #C5ED34;
text-transform: uppercase;
}
#games-carousel .item .info span {
font-size: 14px;
display: block;
line-height: 16px;
color: #ffffff;
}
#games-carousel .item.slick-current + .slick-active {
height: 150px;
opacity: 1;
padding: 5px 0;
}
#games-carousel .item.slick-current + .slick-active .info {
font-size: 17px;
}
#games-carousel .item.slick-current + .slick-active .info span {
font-size: 25px;
line-height: 30px;
}
#games-carousel .item.slick-current + .slick-active .cover img {
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
}
#games-carousel .item.slick-active.slick-current, #games-carousel .item.slick-current + .slick-active + .slick-active {
height: 100px;
opacity: 0.4;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .info, #games-carousel .item.slick-current .info {
font-size: 14px;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .info span, #games-carousel .item.slick-current .info span {
font-size: 18px;
line-height: 22px;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .cover img, #games-carousel .item.slick-current .cover img {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
#games-carousel .item {
display: block;
width: 100%;
height: 70px;
opacity: 0.2;
padding: 1px 0;
transition: all 0.2s ease-in;
transform: translate3d(0,0,0);
}
#games-carousel .item .cover, #games-carousel .item .info {
width: 50%;
float: left;
height: 100%;
max-height: 100%;
overflow: hidden;
}
#games-carousel .item .cover {
padding: 0 7px 0px 5px;
overflow: visible;
}
#games-carousel .item .cover img {
max-height: 100%;
width: auto;
float: right;
box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
#games-carousel .item .info {
padding-left: 7px;
font-size: 11px;
color: #C5ED34;
text-transform: uppercase;
}
#games-carousel .item .info span {
font-size: 14px;
display: block;
line-height: 16px;
color: #ffffff;
}
#games-carousel .item.slick-current + .slick-active {
height: 150px;
opacity: 1;
padding: 5px 0;
}
#games-carousel .item.slick-current + .slick-active .info {
font-size: 17px;
}
#games-carousel .item.slick-current + .slick-active .info span {
font-size: 25px;
line-height: 30px;
}
#games-carousel .item.slick-current + .slick-active .cover img {
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
}
#games-carousel .item.slick-active.slick-current, #games-carousel .item.slick-current + .slick-active + .slick-active {
height: 100px;
opacity: 0.4;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .info, #games-carousel .item.slick-current .info {
font-size: 14px;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .info span, #games-carousel .item.slick-current .info span {
font-size: 18px;
line-height: 22px;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .cover img, #games-carousel .item.slick-current .cover img {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
<div id="games-carousel">
<div class="item adventure">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
<div class="item adventure">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
<div class="item adventure">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
<div class="item adventure">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
<div class="item lorem">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
<div class="item lorem">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
<div class="item lorem">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
<div class="item lorem">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
</div>
My Solution focuses on the fact that you are infinitely scrolling. I think that Slide.js is incorrectly computing the hight of the LAST slide [the one before the first] as 70px when it should be 100px, causing your FIRST slide to move 30px up.
It looks like you are resizing the height of previous and next slides with the following css:
#games-carousel .item.slick-active.slick-current,
#games-carousel .item.slick-current + .slick-active + .slick-active {
height: 100px;
opacity: 0.4;
}
It also looks like you need to adjust the .slick-active vs .slick-current to make sure you have the right one selected.
Options:
1. Removing the height increase in both of the surrounding blocks causes the flow to work perfectly. The effect is different, but its not jumpy.
#games-carousel .item.slick-active.slick-current,
#games-carousel .item.slick-current + .slick-active + .slick-active {
opacity: 0.4;
}
2. Removing the height increase in the previous blocks causes the flow to work perfectly. The effect is different, but its not jumpy.
#games-carousel .item.slick-active.slick-current{
opacity: 0.4;
}
#games-carousel .item.slick-current + .slick-active + .slick-active {
height: 100px;
opacity: 0.4;
}
I'm having an issue with my jumbotron not scaling properly when i'm trying to test my website. My height changes every time I adjust the size of the browser, which cause it to show the white space. Is there a way to set the height for the jumbotron without showing the white space?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Mobile Specific Metas
================================================== -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>The Portfolio of Jason Murray</title>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font awesome css file-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Default Theme css file -->
<link id="orginal" href="css/default-theme.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Google fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--=========== HEADER SECTION ================-->
<header id="header">
<!-- BEGIN MENU -->
<div class="menu_area">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<a class="navbar-brand" href="index.html">Jason<span>Murray</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main_nav">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div><!-- END MENU -->
</header>
<!--=========== END HEADER SECTION ================-->
<!--=========== MAIN CONTENT SECTION ================-->
<div class="jumbotron">
<div class="container">
<div class="image_opacity"></div>
<div class="caption">
<h2>Front-End</h2>
<h2>Web Developer</h2>
<p>Hi, I'm Jason Murray and I have a passion for building simplistic websites.</p>
Recent Work
</div>
</div>
</div>
<!--=========== END MAIN CONTENT SECTION ================-->
<!--=========== FOOTER SECTION================-->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="footer_left">
<p>© 2015 Jason Murray Web Design. All Rights Reserved</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="footer_right">
<ul class="social_nav">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!--=========== END FOOTER SECTION================-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
body,html{
overflow-x:hidden;
}
html{
height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
overflow-x: hidden !important;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
a{
text-decoration: none;
color: #2f2f2f;
}
a:focus{
outline: none;
text-decoration: none;
}
h1,h2{
font-family: 'Montserrat', sans-serif;
}
h3,h4,h5,h6{
font-family: 'Varela', sans-serif;
}
h2 {
color: #313338;
font-size: 72px;
font-weight: 700;
line-height: 57px;
margin: 0;
padding-bottom: 10px;
text-transform: uppercase;
}
img{
border:none;
}
/*--------------------*/
/* HEADER */
/*--------------------*/
#header{
float: left;
display: inline;
width: 100%;
position: relative;
}
/*--------.menu_area-------- */
.menu_area{
position: absolute;
left:0;
right: 0;
top: 0;
}
.navbar-default {
background-color: #000000;
border-color: transparent;
padding: 12px 0px;
}
.past-main {
background-color: rgba(0,0,0,0.8);
margin-top: 0px;
padding:6px 0px;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
#navbar{overflow-x: hidden;}
.navbar-brand {
color: #fff !important;
font-size: 20px;
font-weight: bolder;
font-family: 'Varela', sans-serif;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.navbar-default .navbar-nav > li > a:hover{
text-transform: uppercase;
color: #2da2c8;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: transparent;
color: #2da2c8;
}
.navbar-brand > span {
color: #2da2c8;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #2da2c8;
}
/*---------------------*/
/* MAIN CONTENT - HOME */
/*---------------------*/
.jumbotron {
background: url("../img/lucho-49.jpg") no-repeat center center;
-webkit-background-size: 100% 100%
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
margin-top: 75px;
height: 305px;
}
.image_opacity{
background: none repeat scroll 0 0 #242434;
margin-top: 75px;
opacity: 0.8;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 305px;
z-index: 9;
}
.caption {
margin-top: 17%;
padding: 5px 0;
position: relative;
text-align: center;
z-index: 999;
}
.caption > h2 {
color: #ffffff;
font-size: 18px;
font-weight: 700;
line-height: 12px;
margin: 0 auto 10px;
padding-bottom: 8px;
text-align: center;
text-transform: uppercase;
width: 90%;
}
.caption>p{
color: #ffffff;
font-size: 12px;
}
.caption_btn{
padding: 10px 15px;
border: 2px solid #fff;
color: #fff;
font-size: 12px;
display: inline-block;
text-transform: uppercase;
}
.caption_btn:hover,.caption_btn:focus{
border-color:#2da2c8;
color: #2da2c8;
text-decoration: none;
}
/*----------------------*/
/* MAIN CONTENT - ABOUT */
/*----------------------*/
#about {
display: inline;
float: left;
width: 100%;
padding: 80px 0px;
}
.about_area{
float: left;
display: inline;
margin-bottom: 140px;
width: 100%;
min-height: 200px;
}
.heading{
float: left;
display: inline;
width: 100%;
}
.heading h2 {
display: inline-block;
margin-bottom: 35px;
margin-top: 65px;
padding-bottom: 15px;
padding-right: 50px;
font-size: 40px;
line-height: 40px;
}
.heading p{
font-size: 16px;
line-height: 28px;
font-weight: 300;
}
.about_content{
float: left;
display: inline;
width: 100%;
padding: 50px 0px;
}
.about_featured{
float: left;
display: inline;
width: 100%;
}
.panel-group .panel {
border-radius: 0;
margin-bottom: 0px;
box-shadow: none;
}
.panel-group .panel + .panel {
margin-top: 0;
}
.panel-default {
border-color: transparent;
}
.panel-default > .panel-heading {
background-color: transparent;
color: #333;
border: 0 none !important;
padding: 5px 15px;
}
.panel-title {
border-bottom: 1px solid #ccc;
color: #222;
font-family: 'Varela', sans-serif;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.panel-title a {
display: block;
text-decoration: none;
padding-bottom: 10px;
}
.panel-default .in{
padding-left:10px;
margin-left: 20px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.panel-title a span{
margin-right: 5px;
}
.panel-body {
border-top-color: transparent !important;
padding: 0px 15px;
margin: 10px 0px;
}
.about_slider{
float: left;
display: inline;
width: 100%;
height: 350px;
}
.single_iteam{
float: left;
display: inline;
width: 100%;
height:100%;
}
.single_iteam img {
max-width: 100%;
}
.about_slider .slick-dots li button:before {
content: "•";
font-size: 28px;
}
.about_slider .slick-dots li.slick-active button:before {
opacity: 0.75;
}
.skills_area{
background-color: #fff
float: left;
display: inline;
width: 100%;
min-height: 350px;
padding: 85px 0px;
position: relative;
}
.skills{
position: relative;
z-index: 999;
}
.heading h3 {
color: #000;
display: inline-block;
float: left;
font-size: 40px;
margin: 0 0 40px;
padding-bottom: 10px;
text-transform: uppercase;
font-weight: bold;
line-height: 40px;
}
div[data-dimension] {
float: none;
margin: 0 auto;
}
.circle-text{
color: #000;
}
.single_skill{
float: left;
display: block;
width: 100%;
text-align: center;
}
.single_skill > h4 {
color: #000000;
font-size: 20px;
font-weight: bold;
}
/*--------------------------*/
/* MAIN CONTENT - PORTFOLIO */
/*--------------------------*/
/*------------------------*/
/* MAIN CONTENT - CONTACT */
/*------------------------*/
/*--------------------*/
/* FOOTER */
/*--------------------*/
#footer{
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: #000;
}
.footer_left{
float: left;
display: inline;
width: 100%;
}
.footer_left > p {
font-size: 12px;
text-align: center;
color: #ffffff;
margin-bottom: 5px;
margin-top: 5px;
}
.footer_left > p a {
font-weight: bold;
}
.footer_right{
float: left;
display: inline;
width: 100%;
}
.social_nav{
text-align: center;
}
.social_nav li{
display: inline-block;
}
.social_nav li a {
border: 1px solid #fff;
color: #ffffff;
display: inline-block;
font-size: 18px;
height: 30px;
margin-left: 5px;
text-align: center;
width: 35px;
line-height: 28px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.social_nav li a:hover{
color: #2da2c8;
border-color: #2da2c8;
}
/*----------------------------------*/
/* RESPONSIVE STYLE - MEDIA QUERIES */
/*----------------------------------*/
/* Landscape phones and portrait tablets */
#media(min-width: 481px) and (max-width: 767px) {
.navbar-brand {color: #fff !important;font-size: 26px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.navbar-default .navbar-nav > li > a {font-size: 12px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 592px;}
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 592px;opacity: 0.8;width: 100%;}
.caption {margin-top: 40%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 25px;font-weight: 700;line-height: 20px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption> p {color: #ffffff;font-size: 14px;}
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 14px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 24px;}
#footer > .container > .row {margin-right: auto;}
.footer_left > p {font-size: 12px;text-align: center;}
.social_nav{text-align: center;}
}
/* Portrait tablets and small desktops */
#media(min-width: 768px) and (max-width: 991px) {
.navbar-brand {color: #fff !important;font-size: 30px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.navbar-default .navbar-nav > li > a {font-size: 13px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 816px;}
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 816px;opacity: 0.8;width: 100%;}
.caption {margin-top: 28%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 45px;font-weight: 700;line-height: 56px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption> p {color: #ffffff;font-size: 18px;}
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 18px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 35px;}
#footer > .container {margin-left:-15px;margin-right:-15px;}
.footer_left > p {font-size: 13px;text-align: left;}
#footer .row {margin-left: -26px;}
.social_nav{text-align: right;margin-right: 12px;}
}
/* Landscape tablets and medium desktops */
#media (min-width: 992px) and (max-width: 1199px) {
.navbar-brand {color: #fff !important;font-size: 33px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.container > .navbar-header {margin-left:8px;}
.navbar-default .navbar-nav > li > a {font-size: 14px;}
.navbar-right {margin-right:0px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 1024px;}
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 1024px;opacity: 0.8;width: 100%;}
.caption {margin-top: 32%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 55px;font-weight: 700;line-height: 66px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption> p {color: #ffffff;font-size: 19px;}
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 18px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 35px;}
#footer > .container {margin-left:-15px;margin-right:-15px;}
.footer_left > p {font-size: 14px;text-align: left;}
.social_nav{text-align: right;margin-right: 18px;}
}
/* Large desktops and laptops */
#media(min-width: 1200px) {
.navbar-brand {color: #fff !important;font-size: 35px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.navbar-default .navbar-nav > li > a {font-size: 15px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 740px;}
.image_opacity {background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 740px;opacity: 0.8;width: 100%;}
.caption {margin-top: 10%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 65px;font-weight: 700;line-height: 76px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption > p {color: #ffffff;font-size: 20px;}
.caption_btn {padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 20px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 35px;}
.footer_left > p {font-size: 15px;text-align: left;}
.social_nav{text-align: right;}
}
I'd go for a different approach. The problem is, you've got fixed heights on your jumbotron and your image_opacity. A far more easy approach is putting a faux-gradient on the jumbotron, like this:
.jumbotron {
background-image:
linear-gradient(rgba(249, 249, 249, 0.9), rgba(249, 249, 249, 0.9)),
url("../img/lucho-49.jpg") no-repeat center center;
background-size: 100% auto;
margin-top: 75px;
height: 400px;
position: relative;
}
And then you don't need the image_opacity. Oh and I didn't check this thoroughly, but -webkit-, -moz-, and -o-background-size are imho non-existent.
Edit 2: set the parent div and the jumbotron to a height of 100% (in this case, that's body):
html, body {
height: 100%;
}
.jumbotron {
background-image:
linear-gradient(rgba(249, 249, 249, 0.9), rgba(249, 249, 249, 0.9)),
url("../img/lucho-49.jpg") no-repeat center center;
background-size: 100% 100%;
margin-bottom: 0px;
height: 100%;
}
Bootply (in this example the page is wrapped in a #wrap element, so this has to be height:100%;, too.)
This should do the trick. Try to put !important after the properties if it's not working immediately.