When the user clicks on one of playing cards in this memory game, it fires off a flipCard function that transforms the card along the Y axis by 180deg, essentially showing the rotating the image that is hidden on the back and making it visible in the front. My eventListener and the flipCard function is working but there's a problem with the CSS because the back image won't appear. Despite it only supposed to rotate 180deg, the image on the front rotates and still appears on the front after flipCard is invoked. Can someone take a look at my CSS and suggest how to make the back image appear?
const cards = document.querySelectorAll('.card');
function flipCard(){
this.classList.toggle('flip');
}
cards.forEach(card => card.addEventListener('click', flipCard));
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Bungee Shade', cursive;
background-color: cornflowerblue;
}
body{
height: 100vh;
text-align: center;
font-size: 40px;
overflow: hidden;
}
h1{
color: black
}
h1:hover{
color:blue;
}
.card{
display: inline-block;
position: relative;
transform: scale(1);
transition: transform .5s;
width: 130px;
height: 130px;
background-color: black;
border: 5px double #000000;
border-radius: 10px;
cursor: pointer;
margin: auto;
perspective: 500px;
transition: transform 500ms ease-in-out;
}
.card.flip {
transform: rotateY(-180deg);
}
.card-back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
background-color: black;
transform: rotateY(180deg);
}
/*
.card .card-back,
.card .card-front{
transition: transform 300ms ease-in;
}
.card-front, .card-back{
position: absolute;
justify-content: center;
align-items: center;
display: flex;
backface-visibility: hidden;
}
*/
.overlay{
font-size: 20px;
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<h1>Memory Game</h1>
<section class="gameboard">
<div class="row">
<div class="card" id = "monster1">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="1" img src="monster1.png">
</div>
<div class="card" id = "monster8">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="2" img src="monster8.png">
</div>
<div class="card" id = "monster3">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="3" img src="monster3.png">
</div>
<div class="card" id = "monster5">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="5" img src="monster5.jpg">
</div>
</div>
<div class="row">
<div class="card" id = "monster6" >
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="6" img src="monster6.png">
</div>
<div class="card" id = "monster4">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id = "monster8">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="2" img src="monster8.png">
</div>
<div class="card" id = "monster1">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="1" img src="monster1.png">
</div>
</div>
<div class="row">
<div class="card" id = "monster3">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="3" img src="monster3.png">
</div>
<div class="card" id = "monster5">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="5" img src="monster5.jpg">
</div>
<div class="card" id = "monster4">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id = "monster6">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="6" img src="monster6.png">
</div>
</div>
</section>
<div class="overlay">
<h1>Great job! 🥳 </h1>
</div>
<script src="index.js"></script>
</body>
</html>
Related
I have the following code:
function seeMore() {
window.location("https://inderatech.com/index.html")
}
.see-more {
display: table;
margin-right: auto;
margin-left: auto;
}
.avatar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 10%;
overflow: hidden;
/* Subtle inner border */
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}
.avatar img {
height: 70%;
width: 70%;
z-index: 2;
/* Optionally add a drop shadow to the main image */
/* to make it feel "lifted" */
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}
.avatar .background {
position: absolute;
z-index: 1;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(2);
filter: blur(13px) opacity(0.2);
}
/* Irrelevant styling */
.Mycontainer {
/* width: 200px; */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
place-items: center;
width: 50%;
margin: 0 auto;
}
<div class="container">
<div class="section-title text-center">
<h2>Recent Clients</h2>
</div>
</div>
<div class="Mycontainer">
<a href="https://www.6ixangels.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./6ixangels-logo.png" class="background" />
<img alt="Avatar" src="./6ixangels-logo.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./exproducts-treansparne.png" class="background" />
<img alt="Avatar" src="./exproducts-treansparne.png" width="100" height="100" />
</div>
<a href="https://www.marcosbackyardswimming.ca" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./mss-transparent.png" class="background" />
<img alt="Avatar" src="./mss-transparent.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./6ixfoods-transparent.png" class="background" />
<img alt="Avatar" src="./6ixfoods-transparent.png" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" class="background" />
<img alt="Avatar" src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" class="background" />
<img alt="Avatar" src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" width="100" height="100" />
</div>
<a href="https://app.cleaningassistant.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" class="background" />
<img alt="Avatar" src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" width="100" height="100" />
</div>
</a>
<a href="https://www.beaniesforbaxter.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./beaniesforbaxter-transparent.png" class="background" />
<img alt="Avatar" src="./beaniesforbaxter-transparent.png" width="100" height="100" />
</div>
</a>
<a href="https://6ixhottub.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./transparent-6ixhottub.png" class="background" />
<img alt="Avatar" src="./transparent-6ixhottub.png" width="100" height="100" />
</div>
</a>
</div>
<br>
<br>
<div class="see-more">
<input type="submit" class="btn btn-defeault btn-send" value="See More">
</div>
On the desktop version, it looks okay, but if it is rendered on narrower screen, then you can see it is not horizontally centered on the page properly. What should I change in my CSS to center the div on the page?
Using flexbox allows you to automatically wrap the items. (See CSS under your “Irrelevant styling” comment.)
Using grid could seem to be good idea, because it is “modern”, but using grid usually makes sense when you want to create layout with multiple item types. Flexboxes are typically useful when you want to lay out something into columns or rows automatically without setting fixed column count.
.see-more {
display: table;
margin-right: auto;
margin-left: auto;
}
.avatar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 10%;
overflow: hidden;
/* Subtle inner border */
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}
.avatar img {
height: 70%;
width: 70%;
z-index: 2;
/* Optionally add a drop shadow to the main image */
/* to make it feel "lifted" */
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}
.avatar .background {
position: absolute;
z-index: 1;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(2);
filter: blur(13px) opacity(0.2);
}
/* Irrelevant styling */
.Mycontainer {
/* width: 200px; */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 50%;
margin: 0 auto;
}
<div class="container">
<div class="section-title text-center">
<h2>Recent Clients</h2>
</div>
</div>
<div class="Mycontainer">
<a href="https://www.6ixangels.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./6ixangels-logo.png" class="background" />
<img alt="Avatar" src="./6ixangels-logo.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./exproducts-treansparne.png" class="background" />
<img alt="Avatar" src="./exproducts-treansparne.png" width="100" height="100" />
</div>
<a href="https://www.marcosbackyardswimming.ca" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./mss-transparent.png" class="background" />
<img alt="Avatar" src="./mss-transparent.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./6ixfoods-transparent.png" class="background" />
<img alt="Avatar" src="./6ixfoods-transparent.png" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" class="background" />
<img alt="Avatar" src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" class="background" />
<img alt="Avatar" src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" width="100" height="100" />
</div>
<a href="https://app.cleaningassistant.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" class="background" />
<img alt="Avatar" src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" width="100" height="100" />
</div>
</a>
<a href="https://www.beaniesforbaxter.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./beaniesforbaxter-transparent.png" class="background" />
<img alt="Avatar" src="./beaniesforbaxter-transparent.png" width="100" height="100" />
</div>
</a>
<a href="https://6ixhottub.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./transparent-6ixhottub.png" class="background" />
<img alt="Avatar" src="./transparent-6ixhottub.png" width="100" height="100" />
</div>
</a>
</div>
<br>
<br>
<div class="see-more">
<input type="submit" class="btn btn-defeault btn-send" value="See More">
</div>
<script>
function seeMore() {
window.location("https://inderatech.com/index.html")
}
</script>
I have this carousel, and I want to make the pics on the side smaller and side pics to be a bit in the back of the front pic, like in the the photo below.
For it to be like that, shall I give different class to each picture, and modify it in the css file, or is there any other method?
$(document).ready(function() {
$('.carousel').carousel();
});
.carousel-item{
position: absolute;
background-color:green;
}
img {
width: 150px;
position: relative;
border-radius: 10px;
}
<html lang="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="{% static 'functionality/imageslider.js' %}"></script>
<link rel="stylesheet" type='text/css' href="{% static 'blog/imageslider.css' %}">
<title></title>
</head>
<body>
<div class="carousel">
<div class="carousel-item"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt="">
</div>
<div class="carousel-item"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt="" />
</div>
<div class="carousel-item"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt=""/>
</div>
<div class="carousel-item"
><img
src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg"
alt=""/>
</div>
</div>
</body>
</html>
Try by adding perspective: 1000px; to the parent element
$(document).ready(function() {
$('.carousel').carousel();
});
.carousel {
position: relative;
height: 300px;
perspective: 1000px; /* Add perspective */
}
.carousel-item {
position: absolute;
width: 150px;
background-color: green;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
}
.carousel img {
width: 100%;
display: block;
position: relative;
}
<div class="carousel">
<div class="carousel-item">
<img src="//placehold.it/250x500/f00/000?text=box+1" alt="">
</div>
<div class="carousel-item">
<img src="//placehold.it/250x500/fff/000?text=box+2" alt="">
</div>
<div class="carousel-item">
<img src="//placehold.it/250x500/fff/000?text=box+3" alt="">
</div>
<div class="carousel-item">
<img src="//placehold.it/250x500/fff/000?text=box+4" alt="">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
I'm working on the palette project and trying to appear icon when selecting an image.
Icon is now placed next to beige, but I'm struggling to make it disappear when not selecting an image.
Below images describe how I imagine for this project.
Please help.
* {
box-sizing:border-box;
}
body {
margin:0;
color: #FFF;
}
.board {
letter-spacing: 1px;
}
.board-nav-indicator {
position:absolute;
top:0;
left:0;
width:75px;
height:75px;
/*background-color:red;*/
background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: linear-gradient(bottom right, #FF512F, #DD2476);
transition:all 0.3s;
transform:translateX(0);
z-index:1;
}
[data-page='0'] .board-nav-indicator {
transform:translateX(0);
}
[data-page='1'] .board-nav-indicator {
transform:translateX(100%);
}
[data-page='2'] .board-nav-indicator {
transform:translateX(200%);
}
.board-nav-buttons {
display: flex;
align-items: center;
position:relative;
z-index:2;
}
.board-pages {
position:absolute;
top:75px;
left:0;
width:100%;
height:calc(100% - 75px);
overflow:hidden;
}
.board-page {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transition:all 0.4s;
transform:translateX(0);
overflow:auto;
background-color: #262931;
}
.grid-row-theme .grid-item-theme {
max-width: 130px;
}
#align-left {
float: left;
color: #747474;
}
#align-right {
float: right;
color: #9CC8E3;
}
.grid-item {
flex:0 1 25%;
padding:6px;
}
.grid-item-theme {
flex:0 1 25%;
padding:6px;
}
.grid-row {
overflow-x:auto;
white-space:nowrap;
}
.grid-row .grid-item {
display:inline-block;
max-width:110px;
}
.grid-item-content {
text-align:left;
font-family: "mr-eaves-modern";
font-size:0.3rem;
text-transform:uppercase;
}
.pick-palette img{
border: 3px solid #FFF;
}
#dropdown-menu {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 2% 0 6% 0;
font-size: 0.9rem;
letter-spacing: 1px;
}
.grid-item-content {
height: 26px;
line-height: 26px;
position: relative;
}
.grid-item-content i {
position: absolute;
right: 0;
top: 0;
}
.grid-item-content {
height: 26px;
line-height: 26px;
position: relative;
}
.grid-item-content i {
position: absolute;
right: 0;
top: 0;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Omnibag Project</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="board-pages">
<div class="board-page">
<div class="grid-item-theme" id="dropdown-menu">Warm<i class="material-icons">keyboard_arrow_down</i></div>
<div class="trending-above-palette">
<div class="grid-item-theme" id="align-left">Trending</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-beige">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Beige
<i class="material-icons more-icon">more_horiz</i>
</div>
</div>
<div class="grid-item grid-camel">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Camel
</div>
</div>
<div class="grid-item grid-salmon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Salmon Pink
</div>
</div>
<div class="grid-item grid-navajo">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Navajo White
</div>
</div>
<div class="grid-item grid-niagara">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Niagara
</div>
</div>
<div class="grid-item grid-primrose">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Primrose
</div>
</div>
<div class="grid-item grid-lapis">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lapis Blue
</div>
</div>
</div>
<div class="after-first-palette">
<div class="grid-item-theme" id="align-left">Newly added</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-pale">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Pale Blue
</div>
</div>
<div class="grid-item grid-moss">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Moss Green
</div>
</div>
<div class="grid-item grid-melon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Melon
</div>
</div>
<div class="grid-item grid-chiffon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Chiffon
</div>
</div>
<div class="grid-item grid-island">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Island
</div>
</div>
<div class="grid-item grid-dogwood">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Dogwood
</div>
</div>
<div class="grid-item grid-greenery">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Greenery
</div>
</div>
</div>
<div class="after-first-palette">
<div class="grid-item-theme" id="align-left">All Warm Colors</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-ivory">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Ivory
</div>
</div>
<div class="grid-item grid-honeydew">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Honeydew
</div>
</div>
<div class="grid-item grid-lavender">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lavender
</div>
</div>
<div class="grid-item grid-canary">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Canary
</div>
</div>
<div class="grid-item grid-hazelnut">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Hazelnut
</div>
</div>
<div class="grid-item grid-kale">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Kale
</div>
</div>
<div class="grid-item grid-sharkskin">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content sharkskin">
Sharkskin
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://use.typekit.net/hoc0zbs.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script>
$(".board-pages .grid-item").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass( "pick-palette" );
});
$(".board-pages .grid-item-pattern-board").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass( "pick-palette" );
});
</script>
1st you can add same event to different selector like this:
$(".board-pages .grid-item-pattern-board, .board-pages .grid-item") seperate by ,
2nd I check if the clicked one already has class means it is active already, then I deactive all. If not active yet, deactive all then active this one.
$(".board-pages .grid-item-pattern-board, .board-pages .grid-item").on("click", function() {
if ($(this).hasClass("pick-palette")) {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
} else {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass("pick-palette");
}
});
* {
box-sizing: border-box;
}
body {
margin: 0;
color: #FFF;
}
.board {
letter-spacing: 1px;
}
.board-nav-indicator {
position: absolute;
top: 0;
left: 0;
width: 75px;
height: 75px;
/*background-color:red;*/
background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: linear-gradient(bottom right, #FF512F, #DD2476);
transition: all 0.3s;
transform: translateX(0);
z-index: 1;
}
[data-page='0'] .board-nav-indicator {
transform: translateX(0);
}
[data-page='1'] .board-nav-indicator {
transform: translateX(100%);
}
[data-page='2'] .board-nav-indicator {
transform: translateX(200%);
}
.board-nav-buttons {
display: flex;
align-items: center;
position: relative;
z-index: 2;
}
.board-pages {
position: absolute;
top: 75px;
left: 0;
width: 100%;
height: calc(100% - 75px);
overflow: hidden;
}
.board-page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.4s;
transform: translateX(0);
overflow: auto;
background-color: #262931;
}
.grid-row-theme .grid-item-theme {
max-width: 130px;
}
#align-left {
float: left;
color: #747474;
}
#align-right {
float: right;
color: #9CC8E3;
}
.grid-item {
flex: 0 1 25%;
padding: 6px;
}
.grid-item-theme {
flex: 0 1 25%;
padding: 6px;
}
.grid-row {
overflow-x: auto;
white-space: nowrap;
}
.grid-row .grid-item {
display: inline-block;
max-width: 110px;
}
.grid-item-content {
text-align: left;
font-family: "mr-eaves-modern";
font-size: 0.3rem;
text-transform: uppercase;
}
.pick-palette img {
border: 3px solid #FFF;
}
#dropdown-menu {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 2% 0 6% 0;
font-size: 0.9rem;
letter-spacing: 1px;
}
.grid-item-content {
height: 26px;
line-height: 26px;
position: relative;
}
.grid-item-content i {
position: absolute;
right: 0;
top: 0;
}
.grid-item-content {
height: 26px;
line-height: 26px;
position: relative;
}
.grid-item-content i {
position: absolute;
right: 0;
top: 0;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Omnibag Project</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="board-pages">
<div class="board-page">
<div class="grid-item-theme" id="dropdown-menu">Warm<i class="material-icons">keyboard_arrow_down</i></div>
<div class="trending-above-palette">
<div class="grid-item-theme" id="align-left">Trending</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-beige">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Beige
<i class="material-icons more-icon">more_horiz</i>
</div>
</div>
<div class="grid-item grid-camel">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Camel
</div>
</div>
<div class="grid-item grid-salmon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Salmon Pink
</div>
</div>
<div class="grid-item grid-navajo">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Navajo White
</div>
</div>
<div class="grid-item grid-niagara">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Niagara
</div>
</div>
<div class="grid-item grid-primrose">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Primrose
</div>
</div>
<div class="grid-item grid-lapis">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lapis Blue
</div>
</div>
</div>
<div class="after-first-palette">
<div class="grid-item-theme" id="align-left">Newly added</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-pale">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Pale Blue
</div>
</div>
<div class="grid-item grid-moss">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Moss Green
</div>
</div>
<div class="grid-item grid-melon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Melon
</div>
</div>
<div class="grid-item grid-chiffon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Chiffon
</div>
</div>
<div class="grid-item grid-island">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Island
</div>
</div>
<div class="grid-item grid-dogwood">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Dogwood
</div>
</div>
<div class="grid-item grid-greenery">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Greenery
</div>
</div>
</div>
<div class="after-first-palette">
<div class="grid-item-theme" id="align-left">All Warm Colors</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-ivory">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Ivory
</div>
</div>
<div class="grid-item grid-honeydew">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Honeydew
</div>
</div>
<div class="grid-item grid-lavender">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lavender
</div>
</div>
<div class="grid-item grid-canary">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Canary
</div>
</div>
<div class="grid-item grid-hazelnut">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Hazelnut
</div>
</div>
<div class="grid-item grid-kale">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Kale
</div>
</div>
<div class="grid-item grid-sharkskin">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content sharkskin">
Sharkskin
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://use.typekit.net/hoc0zbs.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<script>
$(".board-pages .grid-item-pattern-board, .board-pages .grid-item").on("click", function() {
if ($(this).hasClass("pick-palette")) {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
} else {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass("pick-palette");
}
});
</script>
I'm working on palette board project and struggling when changing to the different theme.
Initial page will have a warm color palette, but I want to change this after clicking All theme.
You will have the option to choose differently if you tab warm drop-down menu.
Below you will find images that I imagine.
* {
box-sizing:border-box;
}
body {
margin:0;
color: #FFF;
}
.board {
letter-spacing: 1px;
}
.board-nav-indicator {
position:absolute;
top:0;
left:0;
width:75px;
height:75px;
/*background-color:red;*/
background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: linear-gradient(bottom right, #FF512F, #DD2476);
transition:all 0.3s;
transform:translateX(0);
z-index:1;
}
[data-page='0'] .board-nav-indicator {
transform:translateX(0);
}
[data-page='1'] .board-nav-indicator {
transform:translateX(100%);
}
[data-page='2'] .board-nav-indicator {
transform:translateX(200%);
}
.board-nav-buttons {
display: flex;
align-items: center;
position:relative;
z-index:2;
}
.board-pages {
position:absolute;
top:75px;
left:0;
width:100%;
height:calc(100% - 75px);
overflow:hidden;
}
.board-page {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transition:all 0.4s;
transform:translateX(0);
overflow:auto;
background-color: #262931;
}
.grid-row-theme .grid-item-theme {
max-width: 130px;
}
#align-left {
float: left;
color: #747474;
}
#align-right {
float: right;
color: #9CC8E3;
}
.grid-item {
flex:0 1 25%;
padding:6px;
}
.grid-item-theme {
flex:0 1 25%;
padding:6px;
}
.grid-row {
overflow-x:auto;
white-space:nowrap;
}
.grid-row .grid-item {
display:inline-block;
max-width:110px;
}
.grid-item-content {
text-align:left;
font-family: "mr-eaves-modern";
font-size:0.3rem;
text-transform:uppercase;
}
.pick-palette img{
border: 3px solid #FFF;
}
#dropdown-menu {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 2% 0 6% 0;
font-size: 0.9rem;
letter-spacing: 1px;
}
/* The Modal (background) */
.modal-inside {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content-theme {
background-color: #fff;
margin: 10% auto; /* 15% from the top and centered */
padding: 20px;
border-radius:4px 4px 4px 4px;
width: 70%;
height: 430px;
}
/* The Close Button */
.close-theme {
color: #000000;
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
font-size: 28px;
font-weight: bold;
}
.close-theme:hover,
.close-theme:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.theme-list-dropdown {
color: #BDBEC1;
text-transform: uppercase;
font-family: "mr-eaves-modern";
font-size: 0.9rem;
text-align: center;
}
.theme-list-name {
padding: 20.5px;
}
#all-theme-list-name {
margin-top: -5px;
}
#warm-theme-list-name {
color: #262931;
/* background-color: #EEEEEF;*/
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Omnibag Project</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="board-pages">
<div class="board-page">
<div class="grid-item-theme" id="dropdown-menu"><div id="themeBtn" class="theme-warm">Warm</div><i class="material-icons">keyboard_arrow_down</i></div>
<!-- The Modal -->
<div id="myModal" class="modal-inside">
<span class="close-theme">Ă—</span>
<div class="modal-content-theme">
<div class="theme-list-dropdown">
<div class="theme-list-name" id="all-theme-list-name">All</div>
<div class="theme-list-name">Bright</div>
<div class="theme-list-name">Dark</div>
<div class="theme-list-name" id="warm-theme-list-name">Warm</div>
<div class="theme-list-name">Cool</div>
<div class="theme-list-name">Pastel</div>
<div class="theme-list-name">Neon</div>
</div>
</div>
</div>
<!-- End: The Modal -->
<div class="trending-above-palette">
<div class="grid-item-theme" id="align-left">Trending</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-beige">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Beige
<!-- <i class="material-icons more-icon">more_horiz</i> -->
</div>
</div>
<div class="grid-item grid-camel">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Camel
</div>
</div>
<div class="grid-item grid-salmon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Salmon Pink
</div>
</div>
<div class="grid-item grid-navajo">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Navajo White
</div>
</div>
<div class="grid-item grid-niagara">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Niagara
</div>
</div>
<div class="grid-item grid-primrose">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Primrose
</div>
</div>
<div class="grid-item grid-lapis">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lapis Blue
</div>
</div>
</div>
<div class="after-first-palette">
<div class="grid-item-theme" id="align-left">Newly added</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-pale">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Pale Blue
</div>
</div>
<div class="grid-item grid-moss">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Moss Green
</div>
</div>
<div class="grid-item grid-melon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Melon
</div>
</div>
<div class="grid-item grid-chiffon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Chiffon
</div>
</div>
<div class="grid-item grid-island">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Island
</div>
</div>
<div class="grid-item grid-dogwood">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Dogwood
</div>
</div>
<div class="grid-item grid-greenery">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Greenery
</div>
</div>
</div>
<div class="after-first-palette">
<div class="grid-item-theme" id="align-left">All Warm Colors</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-ivory">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Ivory
</div>
</div>
<div class="grid-item grid-honeydew">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Honeydew
</div>
</div>
<div class="grid-item grid-lavender">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lavender
</div>
</div>
<div class="grid-item grid-canary">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Canary
</div>
</div>
<div class="grid-item grid-hazelnut">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Hazelnut
</div>
</div>
<div class="grid-item grid-kale">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Kale
</div>
</div>
<div class="grid-item grid-sharkskin">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content sharkskin">
Sharkskin
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://use.typekit.net/hoc0zbs.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script>
$(".board-pages .grid-item").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass( "pick-palette" );
});
$(".board-pages .grid-item-pattern-board").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass( "pick-palette" );
});
</script>
<!-- Dropdown Theme -->
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
// var btn = document.getElementById("themeBtn");
var btn = document.getElementById("themeBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-theme")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
I have this slider that i'm using, whenever i click the next or previous buttons it shifts in a way covering some elements of my website. I believe the problem in the #mask and i tried to change a bit in it but without any difference, any idea on if it's causing the problem or something else? and any solution?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Gallery</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="">
<style>
body {
margin: 0;
}
#wrapper {
width: 100%;
height: 350px;
/*position: absolute;*/
top: 0;
left: 0;
background-color: white;
overflow: hidden;
}
#nav p {
position: absolute;
top: 100px;
cursor:pointer;
color:grey;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
#mask {
width: 50000px;
height: 100%;
background-color: white;
}
.item {
width: 1200px;
height: 100%;
float: left;
background-color: white;
}
.content img {
height: 100px;
width: 17%;
float:left;
margin-right: 10px;
margin-bottom: 10px;
}
.content {
width: 50%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<h1><p id="prev"><</p></h1>
<h1><p id="next">></p></h1>
</div>
<div id="mask">
<div id="item1" class="item"> <a name="item1"></a>
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot1" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item2" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot2" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item3" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot2" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var newItem = 0;
var itemCount = $('.item').length;
function shift(direction) {
var $mask = $('#mask'),
$items = $('.item'),
currentItem = $mask.data('currentItem');
if (currentItem === undefined) {
currentItem = 0;
}
$mask.data('currentItem', newItem).animate({
marginLeft: -newItem * $items.eq(0).width()
});
}
$('#prev').click(function () {
if (newItem === 0) {
newItem = itemCount - 1;
} else {
newItem--;
}
return shift();
});
$('#next').click(function () {
if (newItem === itemCount - 1) {
newItem = 0;
} else {
newItem++;
}
return shift();
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
$('#wrapper, .item').css({
width: width,
height: height
});
}
$(window).resize(function () {
resizePanel();
});
resizePanel();
});
</script>
</body>
</html>
JSFIDDLE: https://jsfiddle.net/ew98y5fv/
I have modified you html:
<body>
<div id="wrapper">
<div id="slider-container">
<div id="nav">
<p id="prev"><</p>
<p id="next">></p>
</div>
<div class="slider-view-area">
<div id="mask">
<div id="item1" class="item"> <a name="item1"></a>
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot1" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item2" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot2" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item3" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" alt="slot2" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Here is the css:
body {
margin: 0;
}
#wrapper {
background-color: blue;
padding: 20px 0;
}
#slider-container {
padding: 20px 50px;
height: 350px;
background-color: white;
overflow: hidden;
position: relative;
}
.slider-view-area {
overflow: hidden;
}
#nav p {
position: absolute;
top: 100px;
cursor:pointer;
color:grey;
}
#prev {
left: 20px;
font-size: 30px;
}
#next {
right: 20px;
font-size: 30px;
}
#mask {
width: 50000px;
height: 100%;
background-color: white;
}
.item {
width: 1200px;
height: 100%;
float: left;
background-color: white;
}
.content img {
height: 100px;
width: 17%;
float:left;
margin-right: 10px;
margin-bottom: 10px;
}
.content {
width: 50%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
I removed h1 tags around your navigation elements because you should not use header tags for display changes like making the icons look bigger. For that you should use css. h1 tags will be semantically incorrect in this case, because a navigation element is not a primary header.
I have just gone for a quick fix. But its the direction you should take if you want to make the slider into an independent component in your page.
Here is the jsfiddle: https://jsfiddle.net/ew98y5fv/3/