calc() not working in css for setting width?

calc() not working in css for setting width? - html

I'm making a text editor with a sidd nav-var. When the mouse hovers on the nav-bar its width increases and the editor width decreases. But the width of the editor doesn't change even when the width variable created by me is changing.
Here is my program:
#import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght#200&display=swap');
:root {
--nav-btn-width: 40px;
--nav-width: calc(100% - 60px);
}
* {
z-index: 1;
}
body {
padding: 0;
margin: 0;
background-color: #c73737;
}
#navbar {
position: absolute;
height: 100%;
width: 50px;
max-width: 200px;
background-color: #0068ad;
display: flex;
flex-direction: column;
transition: 0.35s ease-in-out;
padding-top: 10px;
box-sizing: border-box;
z-index: 2;
}
#navbar:hover {
width: 200px;
border-radius: 0 10px 10px 0;
--nav-btn-width: 190px;
--nav-width: calc(100% - 210px);
}
.nav-btn {
width: var(--nav-btn-width);
height: 40px;
background-color: rgb(0, 184, 70);
margin: 5px;
cursor: pointer;
border-radius: 50px;
transition: 0.35s ease-in-out;
box-sizing: border-box;
display: flex;
flex-direction: row;
padding-left: 7.5px;
overflow: hidden;
user-select: none;
z-index: 10;
}
.nav-btn:hover {
background-color: rgb(0, 255, 98);
}
#signout {
position: absolute;
bottom: 10px;
}
.nav-text {
position: relative;
top: 10px;
font-size: 12pt;
font-family: 'JetBrains Mono', monospace;
font-weight: bold;
text-align: center;
padding-left: 10px;
}
#editor {
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: var(--nav-width);
background-color: rgb(78, 78, 78);
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="body-container" style="width: 100vh;height:100vh">
<div id="navbar">
<div id="create" class="nav-btn">
<img src="add_black_24dp.svg" alt="" id="create-icon" class="nav-icons">
<div id="create-text" class="nav-text">Create</div>
</div>
<div id="files" class="nav-btn">
<img src="description_black_24dp.svg" alt="" id="files-icon" class="nav-icons">
<div id="files-text" class="nav-text">My Files</div>
</div>
<div id="feed" class="nav-btn">
<img src="article_black_24dp.svg" alt="" id="feed-icon" class="nav-icons">
<div id="feed-text" class="nav-text">Feed</div>
</div>
<div id="challenges" class="nav-btn">
<img src="task_black_24dp.svg" alt="" id="challenges-icon" class="nav-icons">
<div id="challenges-text" class="nav-text">Challenges</div>
</div>
<div id="leaderboard" class="nav-btn">
<img src="leaderboard_black_24dp.svg" alt="" id="leaderboard-icon" class="nav-icons">
<div id="leaderboard-text" class="nav-text">Leaderboard</div>
</div>
<div id="notification" class="nav-btn">
<img src="notifications_black_24dp.svg" alt="" id="notification-icon" class="nav-icons">
<div id="notification-text" class="nav-text">Notifications</div>
</div>
<div id="chat" class="nav-btn">
<img src="message_black_24dp.svg" alt="" id="chat-icon" class="nav-icons">
<div id="chat-text" class="nav-text">Dev Chat</div>
</div>
<div id="settings" class="nav-btn">
<img src="settings_black_24dp.svg" alt="" id="settings-icon" class="nav-icons">
<div id="settings-text" class="nav-text">Settings</div>
</div>
<div id="signout" class="nav-btn">
<img src="logout_black_24dp.svg" alt="" id="signout-icon" class="nav-icons">
<div id="signout-text" class="nav-text">Sign out</div>
</div>
</div>
<div id="editor"></div>
</div>
<!-- include script.js and styler.js -->
<script src="script.js"></script>
<script src="styler.js"></script>
<script>
</script>
</body>
</html>
As you can see there is a 10px gap b/w the nav-bar and the editor and I have also updated the values when it is hovered. But when the nav-bar is hovered the width of the editor doesn't change.
Similar question: link
I have also tried what is mentioned in the Similar question but still it doesn't work...
The variable --nav-btn-width works as intended but the variable --nav-width doesn't work even though both are literally the same usages.

On the hover you are defining a variable that only has scope within the navbar element.
To define a variable for the editor element select on navbar hover plus editor, this will select for the editor element which comes immediately after the navbar.
#import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght#200&display=swap');
:root {
--nav-btn-width: 40px;
--nav-width: calc(100% - 60px);
}
* {
z-index: 1;
}
body {
padding: 0;
margin: 0;
background-color: #c73737;
}
#navbar {
position: absolute;
height: 100%;
width: 50px;
max-width: 200px;
background-color: #0068ad;
display: flex;
flex-direction: column;
transition: 0.35s ease-in-out;
padding-top: 10px;
box-sizing: border-box;
z-index: 2;
}
#navbar:hover {
width: 200px;
border-radius: 0 10px 10px 0;
--nav-btn-width: 190px;
}
#navbar:hover + #editor {
--nav-width: calc(100% - 210px);
}
.nav-btn {
width: var(--nav-btn-width);
height: 40px;
background-color: rgb(0, 184, 70);
margin: 5px;
cursor: pointer;
border-radius: 50px;
transition: 0.35s ease-in-out;
box-sizing: border-box;
display: flex;
flex-direction: row;
padding-left: 7.5px;
overflow: hidden;
user-select: none;
z-index: 10;
}
.nav-btn:hover {
background-color: rgb(0, 255, 98);
}
#signout {
position: absolute;
bottom: 10px;
}
.nav-text {
position: relative;
top: 10px;
font-size: 12pt;
font-family: 'JetBrains Mono', monospace;
font-weight: bold;
text-align: center;
padding-left: 10px;
}
#editor {
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: var(--nav-width);
background-color: rgb(78, 78, 78);
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="body-container" style="width: 100vh;height:100vh">
<div id="navbar">
<div id="create" class="nav-btn">
<img src="add_black_24dp.svg" alt="" id="create-icon" class="nav-icons">
<div id="create-text" class="nav-text">Create</div>
</div>
<div id="files" class="nav-btn">
<img src="description_black_24dp.svg" alt="" id="files-icon" class="nav-icons">
<div id="files-text" class="nav-text">My Files</div>
</div>
<div id="feed" class="nav-btn">
<img src="article_black_24dp.svg" alt="" id="feed-icon" class="nav-icons">
<div id="feed-text" class="nav-text">Feed</div>
</div>
<div id="challenges" class="nav-btn">
<img src="task_black_24dp.svg" alt="" id="challenges-icon" class="nav-icons">
<div id="challenges-text" class="nav-text">Challenges</div>
</div>
<div id="leaderboard" class="nav-btn">
<img src="leaderboard_black_24dp.svg" alt="" id="leaderboard-icon" class="nav-icons">
<div id="leaderboard-text" class="nav-text">Leaderboard</div>
</div>
<div id="notification" class="nav-btn">
<img src="notifications_black_24dp.svg" alt="" id="notification-icon" class="nav-icons">
<div id="notification-text" class="nav-text">Notifications</div>
</div>
<div id="chat" class="nav-btn">
<img src="message_black_24dp.svg" alt="" id="chat-icon" class="nav-icons">
<div id="chat-text" class="nav-text">Dev Chat</div>
</div>
<div id="settings" class="nav-btn">
<img src="settings_black_24dp.svg" alt="" id="settings-icon" class="nav-icons">
<div id="settings-text" class="nav-text">Settings</div>
</div>
<div id="signout" class="nav-btn">
<img src="logout_black_24dp.svg" alt="" id="signout-icon" class="nav-icons">
<div id="signout-text" class="nav-text">Sign out</div>
</div>
</div>
<div id="editor"></div>
</div>
<!-- include script.js and styler.js -->
<script src="script.js"></script>
<script src="styler.js"></script>
<script>
</script>
</body>
</html>

Related

I am trying to use overflow property but it isnt work as expected

I am trying to use overflow, but its not allowing me to scroll but it works as I need that popup on hover, is there any way so I can use overflow visible as well as scroll.
I tried position fixed too, for the span element inside server__list but it doesn't seems to work as well, rest of the elements going underneath, Is there any other property or a better way for doing this?
Here is my code
:root{
--blurple-color: #7289DA;
--lighter-color: #32363a;
--light-color: #2C2F33;
--white-color: #ffffff;
--dark-color: #23272A;
}
#import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');
body, html{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
*{
font-family: 'Balsamiq Sans', cursive;
}
body{
background-color: var(--lighter-color);
}
.server__list{
position: fixed;
top: 0;
bottom: 0;
background-color: var(--dark-color);
width: 50px;
overflow-x: visible;
}
.server__list::-webkit-scrollbar {
display: none;
}
.channel__list{
position: fixed;
left: 50px;
width: 150px;
height: 100%;
background-color: var(--light-color);
}
.user__container{
position: fixed;
bottom: 0;
left: 50px;
width: 150px;
height: 40px;
background-color: #26292c;
}
.user__container .profile{
display: flex;
margin: 10px;
}
.user__container .profile img{
width: 25px;
border-radius: 50%;
}
.user .user__name{
color: var(--white-color);
font-size: 10px;
padding: 0px 5px;
}
.user .user__discrim{
color: grey;
font-size: 8px;
padding: 0px 5px;
}
.profile #logout{
background: none;
outline: none;
border: none;
color: rgb(187, 55, 3);
margin-left: 40px;
transition: color;
transition-duration: 0.5s;
}
.profile #logout:hover{
cursor: pointer;
color: darkred;
}
/* Showing Servers */
.server__list .server{
margin: 10px;
}
.server__list .server img{
width: 32px;
border-radius: 50%;
}
.server:hover{
cursor: pointer;
}
.server span{
display: none;
background-color: #0f1011;
color: white;
border-radius: 4px;
font-size: 12px;
padding: 4px;
text-align: center;
}
.server:hover > span{
display: inline-block;
position: absolute;
margin-top: -40px;
width: 100px;
margin-left: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web</title>
<link rel="icon" href="./static/assets/icon.png" id="header__icon">
<link rel="stylesheet" href="./static/css/style.css">
<script src="https://kit.fontawesome.com/1144a6771a.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="server__list">
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
</div>
<div class="channel__list">
</div>
<div class="user__container">
<div class="profile">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<div class="user">
<div class="user__name">
WiperR
</div>
<div class="user__discrim">
#3131
</div>
</div>
<button id="logout"><i class="fa fa-sign-out" aria-hidden="true"></i></button>
</div>
</div>
<script src="./static/js/index.js"></script>
</body>
</html>

Try this css :
.server__list {
overflow-x: auto;
max-height: 100%;
}

I am not sure if this is what you want, but if you want to allow overflow as well as hide the scrollbar, you can use:-
#my-element::-webkit-scrollbar {display: none;}
and
#my-element {overflow: scroll;}

boot strap overriding customized nav-bar

With out bootstrap the nav bar works perfectly fine, but when I activate bootstrap the nav bar gets buggy.
Here is how it should look:
Here is how it looks with bootstrap:
I think there is something that needs an !important added to it, but I'm not sure what so please can someone with experience tell me which one?
I tried inline-flex as well but still no hope
I tried !important with the width but still doesn't work
I tried height: 0%!important; and still nothing work
I need to use bootstrap to have the table with bootstrap design so removing bootstrap is no option.
ok so I'm not sure if there's another problem like this but can't seem to find an answer so here is my code:
html {
scroll-behavior: smooth;
}
#extra space {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
position: sticky;
top: 0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: #0c0c0c;
overflow: auto;
}
.logo {
color: whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 22px;
}
.nav-links {
display: flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li {
list-style: none;
}
.burger div {
width: 25px;
height: 5px;
background-color: whitesmoke;
margin: 3px;
}
.burger {
display: none;
cursor: pointer;
}
.nav-links a {
color: whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px) {
.nav-links {
display: inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav {
position: fixed;
top: 0;
}
.nav-links {
font-size: 1px;
position: fixed;
right: 0px;
height: 92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {}
.burger {
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active {
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color: black;
}
#section2 {
background-image: url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
<ul class="nav-links">
<li>home</li>
<li>NextEvent </li>
<li>Music </li>
<li>About </li>
<li>Boooking </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</nav>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script>
<!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile">
<img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" />
</div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
edit:
the answer is you need to do a bootstrap nav_bar
the good thing if you search in the answers bellow you find my accepted answer as a good navbar

The issue is with your structure as bootstrap have its own nav structure so you need to follow that.
I just change the nav with the bootstrap nav and added you links
html{
scroll-behavior: smooth;
}
#extra space{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.navbar-nav {
justify-content: space-around;
width: 100%;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
position:sticky;
top:0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: #0c0c0c;
overflow: auto;
}
.logo{
color:whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size:22px;
}
.nav-links{
display:flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li{
list-style: none;
}
.burger div{
width: 25px;
height: 5px;
background-color:whitesmoke;
margin:3px;
}
.burger{
display:none;
cursor: pointer;
}
.nav-links a{
color:whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px){
.nav-links{
display:inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x:hidden;
}
.nav{
position: fixed;
top: 0;
}
.nav-links{
font-size: 1px;
position:fixed;
right:0px;
height:92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
}
.burger{
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active{
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color:black;
}
#section2 {
background-image:url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#"><div class="logo">
<h4>thomas<br> venutu</h4>
</div></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">NextEvent</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">Music</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">Boooking</a>
</li>
</ul>
</div>
</nav>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script> <!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" /></div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>

Try this
html{
scroll-behavior: smooth;
}
#extra space{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.header {
position:sticky;
top:0;
min-height: 12vh;
background-color: #0c0c0c;
}
.logo{
color:whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size:22px;
}
.nav-links{
display:flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li{
list-style: none;
}
.burger div{
width: 25px;
height: 5px;
background-color:whitesmoke;
margin:3px;
}
.burger{
display:none;
cursor: pointer;
}
.nav-links a{
color:whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px){
.nav-links{
display:inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x:hidden;
}
.nav{
position: fixed;
top: 0;
}
.nav-links{
font-size: 1px;
position:fixed;
right:0px;
height:92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
}
.burger{
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active{
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color:black;
}
#section2 {
background-image:url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="header d-flex align-items-center container-fluid">
<div class="row align-items-center flex-grow-1">
<div class="col-auto">
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
</div>
<div class="col">
<nav>
<ul class="nav-links">
<li>home</li>
<li>NextEvent </li>
<li>Music </li>
<li>About </li>
<li>Boooking </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</div>
</header>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script> <!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" /></div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>

How to make two columns layout HTML

I'm creating online shop.
I want to create two column layout.
On the left side will be the tab gallery. On the right side i want to display the options for purchase like size,quantity,color,button for buy and etc.
I'm using bootstrap.
I want to doing something like this:
online shop
This is my codepen: https://codepen.io/anon/pen/KYeWPj
I have this code:
/*google analytics js */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
position: relative;
}
img {
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #e8e8e8;
font-family: 'helvetive neue', sans-serif;
font-weight: 700;
}
.container {
width: 600px;
position: relative;
margin-top: 30px;
margin-left: 0px;
}
.thumbnails {
list-style: none;
font-size: 0;
margin-left: -2%;
}
.thumbnails li {
display: inline-block;
width: 23%;
margin-left: 2%;
text-align: center;
vertical-align: middle;
}
.thumbnails li:hover .item-hugger {
background: white;
}
.thumbnails li:hover .item-hugger .title {
color: #000;
}
.thumbnails input[name="select"] {
display: none;
}
.thumbnails .item-hugger {
position: relative;
height: 140px;
margin: 20px 0;
background: #f2f2f2;
transition: all 150ms ease-in-out;
}
.thumbnails label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
.thumbnails .title {
padding: 20px 0 0;
font-size: 18px;
color: #555;
transition: all 150ms linear;
}
.thumbnails .thumb-image {
height: 100px;
padding: 20px 0;
}
.thumbnails .content {
position: absolute;
bottom: 0;
left: 0;
width: 600px;
height: 500px;
padding: 50px;
opacity: 0;
transition: all 150ms linear;
display: flex;
flex-direction: column;
justify-content: center;
}
.thumbnails .content .title {
font-size: 60px;
font-weight: 400;
display: inline-block;
color: #555;
border-bottom: 6px solid #fe7701;
padding: 50px 10px 0;
text-transform: uppercase;
}
.thumbnails input[name="select"]:checked+.item-hugger {
height: 180px;
margin: 0;
background: white;
}
.thumbnails input[name="select"]:checked~.content {
opacity: 1;
}
.white-box {
background: white;
height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title style="margin-bottom: 10px;">Item</title>
</head>-->
<body>
<div class="container">
<h1 style="margin-top:40px; text-align:center">Item</h1>
<ul class="thumbnails">
<li>
<input type="radio" name="select" id="image1">
<div class="item-hugger">
<div class="title">Image 1</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=882" />
<label for="image1"></label>
</div>
<div class="content">
<div class="item-wrapper"> <img src="https://unsplash.it/1024/612?image=882" />
<div class="title">Image 1</div>
</div>
</div>
</li>
<li class="is-active">
<input type="radio" name="select" id="image2" checked>
<div class="item-hugger">
<div class="title">Image 2</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=782" />
<label for="image2"></label>
</div>
<div class="content">
<div class="item-wrapper">
<img src="https://unsplash.it/1024/612?image=782" />
<div class="title">Image 2</div>
</div>
</div>
</li>
<li>
<input type="radio" name="select" id="image3">
<div class="item-hugger">
<div class="title">Image 3</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=682" />
<label for="image3"></label>
</div>
<div class="content">
<div class="item-wrapper">
<img src="https://unsplash.it/1024/612?image=682" />
<div class="title">Image 3</div>
</div>
</div>
</li>
<li>
<input type="radio" name="select" id="image4">
<div class="item-hugger">
<div class="title">Image 4</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=582" />
<label for="image4"></label>
</div>
<div class="content">
<div class="item-wrapper">
<img src="https://unsplash.it/1024/612?image=582" />
<div class="title">Image 4</div>
</div>
</div>
</li>
</ul>
<div class="white-box"></div>
</div>
</body>

A really easy way of doing this would be to use a table. It doesn't require any CSS, just a simple table that doesn't have a visible border.
The way you do this is putting a <tr> tag around the content you want to align by each other and a <table> tag surrounding the <tr> tags. It should look like this:
<table><tr>YOUR ELEMENTS</tr></table>.
Now, take each of your elements that you'd like to be aligned side-by-side and put them in their own <td> tags. This is what it should look like now:
<td>Left</td>
<td>Center</td>
<td>Right</td>
</tr></table>
This should fix your problem. If you, for whatever reason, see borders around your elements you can to <table style="border: none;"> instead of just saying <table>. Hope this helped!

Gallery (picture shower)

I'm making a Gallery page on my web site (project) and I've put <a target="_blank"but I don't like It :P. So I've remembered on some sites there is like pop-up window with picture and when you click on left or right side of the picture it slides to the next or previous picture. Best way to explain it is showing you LINK. Thanks in advance.
EDIT Click on those pictures under the Skins!!!!
body {
background-image: url("https://s-media-cache-ak0.pinimg.com/originals/e4/98/1a/e4981a3dd4aa2fa6f0bc84cde9087c7a.jpg");
background-attachment: fixed;
box-sizing: border-box;
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 0px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-right: solid rgb(200, 101, 103);
border-left: solid rgb(200, 101, 103);
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
#header {
height: 50px;
box-sizing: border-box;
width: auto;
}
#navigacija {
right: 20px;
left: 20px;
height: 50px;
overflow: hidden;
text-align: right;
background-color: #089DE3;
z-index: 9999;
box-sizing: border-box;
border-radius: 25px;
position: fixed;
border-top: solid rgb(200, 101, 103);
border-bottom: solid rgb(200, 101, 103);
}
.navitem {
background: #089DE3;
color: white;
line-height: 50px;
font-size: 30px;
font-family: "Fjalla One";
display: inline-block;
padding-left: 50px;
padding-right: 50px;
box-sizing: border-box;
}
.home:hover {
background: #00C5CD;
box-sizing: border-box;
}
.gallery:hover {
background: #00C5CD;
box-sizing: border-box;
}
.contact:hover {
box-sizing: border-box;
background: #00C5CD;
}
.info:hover {
box-sizing: border-box;
background: #00C5CD;
}
.active {
background-color: #00C5CD;
box-sizing: border-box;
}
h1 {
text-align: center;
font-family: "Jockey One";
font-size: 100px;
color: white;
}
div.galerija {
margin-left: 10px;
margin-right:32px;
margin-bottom:10px;
border: 1px solid rgb(200, 101, 103);
float: left;
width: 300px;
}
div.galerija:hover {
border: 1px solid white;
}
div.desc {
padding: 10px;
text-align: center;
color: black;
background-color: white;
font-size: 20px;
font-family:"Jockey One";
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GALLERY</title>
<link rel="stylesheet" href="Gallery.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Jockey+One" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="navigacija">
<a href="Home.html">
<div class="navitem home"><strong>HOME</strong></div>
</a>
<a href="Gallery.html">
<div class="navitem gallery active"><strong>GALLERY</strong></div></a>
<div class="navitem contact"><strong>CONTACT</strong></div>
<div class="navitem info"><strong>INFO</strong></div>
</div>
</div>
<h1><strong>GALLERY</strong></h1>
<div class="galerija">
<a target="_blank" href="http://www.downvids.net/video/bestimages/img-aatrox-the-darkin-blade-196.jpg">
<img src="http://www.downvids.net/video/bestimages/img-aatrox-the-darkin-blade-196.jpg" alt="Aatrox" width="300" height="200">
</a>
<div class="desc">Aatrox, the Darkin Blade</div>
</div>
<div class="galerija">
<a target="_blank" href="https://i.ytimg.com/vi/xE4e_cLMgjU/maxresdefault.jpg">
<img src="https://i.ytimg.com/vi/xE4e_cLMgjU/maxresdefault.jpg" alt="Ahri" width="300" height="200"></a>
<div class="desc">Ahri, the Nine-Tailed Fox</div>
</div>
<div class="galerija">
<a target="_blank" href= "https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Akali_0.jpg ">
<img src="https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Akali_0.jpg " alt="Akali" width="300" height="200"></a>
<div class="desc">Akali, the Fist of Shadow</div>
</div>
<div class="galerija">
<a target="_blank" href="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Alistar_0.jpg">
<img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Alistar_0.jpg" alt="Alistar" width="300" height="200"></a>
<div class="desc">Alistar, the Minotaur</div>
</div>
<div class="galerija">
<a target="_blank" href="https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Amumu_0.jpg">
<img src="https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Amumu_0.jpg" alt="Amumu" width="300" height="200"></a>
<div class="desc">Amumu, the Sad Mummy</div>
</div>
<div class="galerija">
<a target="_blank" href="http://static.lolskill.net/img/skins/1215/anivia_0.jpg">
<img src="http://static.lolskill.net/img/skins/1215/anivia_0.jpg " alt="Anivia" width="300" height="200"></a>
<div class="desc">Anivia, the Cryophoenix</div>
</div>
<div class="galerija">
<a target="_blank" href="http://media-titanium.cursecdn.com/loldiffs/AirClientDiff_1_28_2013_2_28_PM/images/Annie_Splash_0.jpg">
<img src="http://media-titanium.cursecdn.com/loldiffs/AirClientDiff_1_28_2013_2_28_PM/images/Annie_Splash_0.jpg" alt="Annie" width="300" height="200"></a>
<div class="desc">Annie, the Dark Child</div>
</div>
<div class="galerija">
<a target="_blank" href="http://images2.wikia.nocookie.net/__cb20101005190542/leagueoflegends/images/c/c0/Ashe_OriginalSkin.jpg">
<img src="http://images2.wikia.nocookie.net/__cb20101005190542/leagueoflegends/images/c/c0/Ashe_OriginalSkin.jpg" alt="Ashe" width="300" height="200"></a>
<div class="desc">Ashe, the Frost Archer</div>
</div>
<div class="galerija">
<a target="_blank" href="http://s.lolstatic.com/site/mount-targon/079694fdf251b5e7de788d9ab439d401d31ae160/img/champions/aurelion-sol/aurelion-sol-splash-fallback.jpg">
<img src="http://s.lolstatic.com/site/mount-targon/079694fdf251b5e7de788d9ab439d401d31ae160/img/champions/aurelion-sol/aurelion-sol-splash-fallback.jpg" alt="Aurelion Sol" width="300" height="200"></a>
<div class="desc">Aurelion Sol, the Star Forger</div>
</div>
<div class="galerija">
<a target="_blank" href="https://assets.vg247.com/current//2015/09/league_of_legnds_azir.jpg">
<img src="https://assets.vg247.com/current//2015/09/league_of_legnds_azir.jpg" alt="Azir" width="300" height="200"></a>
<div class="desc">Azir, the Emperor of the Sands</div>
</div>
<div class="galerija">
<a target="_blank" href="http://news.cdn.leagueoflegends.com/public/images/pages/2015/breveal/img/Bard_Splash_WP.jpg">
<img src="http://news.cdn.leagueoflegends.com/public/images/pages/2015/breveal/img/Bard_Splash_WP.jpg" alt="Bard" width="300" height="200"></a>
<div class="desc">Bard, the Wandering Caretaker</div>
</div>
<div class="galerija">
<a target="_blank" href="http://static.lolskill.net/img/skins/1215/blitzcrank_0.jpg">
<img src="http://static.lolskill.net/img/skins/1215/blitzcrank_0.jpg" alt="Blitzcrank" width="300" height="200"></a>
<div class="desc">Blitzcrank, the Great Steam Golem</div>
</div>
<div class="galerija">
<a target="_blank" href="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Brand_0.jpg">
<img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Brand_0.jpg" alt="Brand" width="300" height="200"></a>
<div class="desc">Brand, the Burning Vengeance</div>
</div>
<div class="galerija">
<a target="_blank" href="http://na.leagueoflegends.com/sites/default/files/styles/scale_xlarge/public/upload/b-splash.jpg?itok=vJzNVWjn">
<img src="http://na.leagueoflegends.com/sites/default/files/styles/scale_xlarge/public/upload/b-splash.jpg?itok=vJzNVWjn" alt="Braum" width="300" height="200"></a>
<div class="desc">Braum, the Heart of the Freljord</div>
</div>
<div class="galerija">
<a target="_blank" href="https://img.clipartfox.com/5633c6d56bed03beb9292dd8c7f26199_-league-of-legends-and-caitlyn-league-of-legends-clipart_1215-717.jpeg">
<img src="https://img.clipartfox.com/5633c6d56bed03beb9292dd8c7f26199_-league-of-legends-and-caitlyn-league-of-legends-clipart_1215-717.jpeg" alt="Caitlyn" width="300" height="200"></a>
<div class="desc">Caitlyn, the Sheriff of Piltover</div>
</div>
<div class="galerija">
<a target="_blank" href="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Camille_0.jpg">
<img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Camille_0.jpg" alt="Camille" width="300" height="200"></a>
<div class="desc">Camille, the Steel Shadow</div>
</div>
</body>
</html>

You need to search for a lightbox gallery JavaScript plugin.There's a lot of them out there.
The one used on the example you gave is named Colorbox. Here you'll find more information about it: http://www.jacklmoore.com/colorbox/
Colorbox is based on jQuery library, so you'll need to use booth.
If you only need the gallery and you dont want to use jQuery you can give a try to jsLightbox http://jslightbox.felixhagspiel.de/ which is a pure JavaScript based gallery.

Here is a crude looking but functional example of a image gallery that pops up in a modal:
var images = $('.slideshow img');
var numImages = $('.slideshow img').length - 1;
var modalButton = $('.modal-button');
var prev = $('.prev');
var next = $('.next');
var num = 0;
modalButton.on('click', function() {
$('.slideshow').toggleClass('active');
})
prev.on('click', function() {
images.removeClass('active');
num--;
if (num < 0) {
num = numImages;
}
images.eq(num).addClass('active');
});
next.on('click', function() {
images.removeClass('active');
num++;
if (num > numImages) {
num = 0;
}
images.eq(num).addClass('active');
});
* {
box-sizing: border-box;
}
.content {
width: 100%;
max-width: 1024px;
min-height: 100vh;
margin: 0 auto;
position: relative;
text-align: center;
background-color: gray;
}
.modal-button {
padding: 10px;
position: relative;
border: 2px solid green;
background-color: #fff;
z-index: 3;
}
.modal-button:hover {
cursor: pointer;
}
.slideshow {
display: none;
flex-direction: column;
justify-content: center;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 2;
}
.slideshow.active {
display: flex;
}
.image-container {
margin: 0 auto;
}
.image-container img {
display: none;
}
.image-container img.active {
display: inline;
}
.slideshow-controls {
width: 350px;
margin: 0 auto;
padding: 20px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
background-color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content">
<a class="modal-button">Click here to toggle slideshow</a>
<section class="slideshow">
<div class="image-container">
<img class="active" src="http://placehold.it/350x350/000/bae">
<img src="http://placehold.it/250x150/fff/58b">
<img src="http://placehold.it/350x200/333/aeb">
<img src="http://placehold.it/400x150/666/33c">
</div>
<div class="slideshow-controls">
<button class="prev">Prev</button>
<button class="next">Next</button>
</div>
</section>
</section>

Can not fixed in footer css and image also

I face some problem in my html and css.
My requirement like this image:-
My code below:-
#font-face {
font-family: "OpenSans-CondLight";
src: url('fonts/OpenSans-CondLight.woff') format('woff');
}
#font-face {
font-family: "Rubik-BoldItalic";
src: url('fonts/Rubik-BoldItalic.woff') format('woff');
}
#font-face {
font-family: "RobotoSlab-Regular";
src: url('fonts/RobotoSlab-Regular.woff') format('woff');
}
/*header area */
header{
height: 350px;
background: #050000;
overflow: hidden;
display: block;
}
.container{
background: #050000;
}
.top-area{
float: left;
width: 20%;
font-family: "Rubik-BoldItalic";
font-size: 60px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
}
.logo-area {
width: 60%;
overflow: hidden;
display: block;
position: relative;
z-index: 9999;
}
.logo-area img {
width: 500px;
height: auto;
z-index: 9999;
margin-left: 35px;
}
.search-box {
width: 25%;
float: right;
margin: -300px 73px 0 0;
}
.all-events {
overflow: hidden;
background: #FF9D34;
height: 100px;
width: 80%;
margin: auto;
display: block;
position: absolute;
top: 178px;
border-radius: 10px;
z-index: 0;
}
.all-events .left-side span{
float: left;
color: #000000;
text-transform: uppercase;
font-size: 25px;
padding-left: 20px;
padding-top: 40px;
}
.all-events .left-side .glyphicon {
font-size: 45px;
color: #000;
}
.all-events .right-side span{
float: right;
color: #000000;
text-transform: uppercase;
font-size: 25px;
}
.main-content {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
background: #FF931D;
margin: auto;
}
.main-content .left-content .top-content{
float: left;
overflow: hidden;
display: block;
width: 55%;
height: 340px;
margin-top: 22px;
}
.main-content .left-content .top-content img {
width: 600px;
height: 300px;
}
.main-content .left-content .bottom-content{
float: left;
overflow: hidden;
display: block;
width: 75%;
height: 340px;
margin-top: 10px;
}
.main-content .left-content .bottom-content img {
width: 600px;
height: 300px;
}
.main-content .right-content {
float: right;
overflow: hidden;
display: block;
width: 40%;
margin: -688px 52px 0 0;
}
.main-content .right-content img {
width: 522px;
height: 648px;
}
footer{
overflow: hidden;
display: block;
height: 410px;
width: 90%;
margin: auto;
background-color: #FF931D;
}
footer .left-footer {
float: left;
width: 350px;
overflow: hidden;
display: block;
}
footer .middle-footer {
width: 350px;
overflow: hidden;
display: block;
}
.about {
height: 400px;
width: 400px;
border-radius: 50%;
background: #fff;
float: right;
position: relative;
top: -79px;
}
.about p {
position: absolute;
font-family: "OpenSans-CondLight";
font-size: 25px;
text-align: center;
top: 62px;
}
.about img {
width: 80px;
height: auto;
position: relative;
top: 240px;
left: 98px;
margin-left: 31px;
}
.button {
font-size: 15px;
color: blue;
cursor: pointer;
}
.button:active{
color: #000;
}
.caption {
background: #fff;
width: 599px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge">
<title>Spotlight</title>
<!-- style -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!-- js -->
<link rel="stylesheet" type="text/css" href="js/modernizr.js" media="all" />
</head>
<body>
<header>
<div class="container">
<div class="top-area">
<h2>24 hour event</h2>
</div>
<div class="logo-area">
<img src="images/logo.gif" alt="Logo">
</div>
<div class="search-box">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
<div class="all-events">
<div class="left-side">
<span>donate here</span>
<div class="donate_img">
<img src="images/07.tif" alt="">
</div>
</div>
<div class="right-side">
<span>all events faq</span>
</div>
</div>
</div>
</header>
<section class="main-content">
<div class="container">
<div class="left-content">
<div class="top-content">
<img src="images/damien-rice-tour-italia.jpg" alt="">
<div class="caption">
<span>Damien Rice, Kildare Culture Centre at 8pm. Ref: DMK</span>
<div class="button">
Book now
</div>
</div>
</div>
<div class="bottom-content">
<img src="images/glenhansard_100x445.jpg" alt="">
<div class="caption">
<span>Glen Hansard, Olympia Theatre Dublin at 7pm. Ref: GHO </span>
<div class="button">Book now
</div>
</div>
</div>
</div>
<div class="right-content">
<img src="images/tommytiernan.jpg" alt="">
<div class="caption">
<span>Tommy Tiernan, Cork Comedy Club at 7pm. Ref: GHO</span>
<div class="button">Book now
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="left-footer">
<span>Click on the blue <div class="button">Book now</div> now link on any
event enter your email and you will recive your
ticket via email.
Alternativly or if you have any questions not
listed on the faq tab you can book your tocket
dierectly with us qouting the event refrence
number.
</span>
</div>
<div class="middle-footer">
<span>phone:0741237451
email:24hourevent#spotlight.ie
get involved
Would you like to volunteer even one
hour of your time. Make a diffrence
contact us at:
volunteer#spotlight.ie
</span>
</div>
<div class="about">
<p>ABOUT <br>
Focas Ireland works with
people who are homeless or
who are at risk of losing there
homes across ireland.
<br> Focas Ireland website click </p>
<img src="images/d2c4efe596a6d313c1005ff33ff627ff.jpeg" alt="focus">
<img src="images/here_fixed_wm.jpg" alt="download">
</div>
<div class="social-icons">
<img src="images/youtube heart shaped free social media icon .png" alt="you tube">
<img src="images/Facebook heart shaped free social media icon.png" alt="facebook">
<img src="images/twitter heart shaped free social media icon.png" alt="twitter">
</div>
</div>
</footer>
</body>
</html>
My main problem is in my footer I can't change the color. Image bottom side. Can anyone help me?

You can try adding this line of CSS:
footer:after {
content: "";
display: table;
clear: both;
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

calc() not working in css for setting width? - html

Related

I am trying to use overflow property but it isnt work as expected

boot strap overriding customized nav-bar

How to make two columns layout HTML

Gallery (picture shower)

Can not fixed in footer css and image also

Categories

Resources