I have a problem with my website, I mean when I zoom in, the logo image and the vision image moves, even the container which contains the description moves and the date also moves to the left as shown in the figure below:
I don't want the elements to move when I zoom in or out. I want the elements to be in the same position how can I do that?
here my HTML code:
body
{
background-color:#F6F2F2;
font-family: Calibri;
background-size:cover;
}
hr
{
opacity: 25%;
}
.navbar {
background-color: #ffffff !important;
border-color: #ffffff;
}
.square
{
height: 100px;
width: 120px;
background-color: white;
border: 1px solid #bdbdbd;
margin-right: 900px;
}
.square_section
{
height: 100px;
width: 130px;
background-color: white;
border: 1px solid #bdbdbd;
margin-left: 140px;
margin-top: -98px;
}
.square_events
{
height: 100px;
width: 120px;
background-color: white;
border: 1px solid #bdbdbd;
margin-left: 140px;
margin-top: -98px;
}
.square_adv
{
height: 100px;
width: 120px;
background-color: white;
border: 1px solid #bdbdbd;
margin-left: 280px;
margin-top: -98px;
}
.square_user
{
height: 100px;
width: 130px;
background-color: white;
border: 1px solid #bdbdbd;
margin-left: 290px;
margin-top: -98px;
}
.square_vision
{
border-color: white;
height: 100px;
width: 130px;
background-color: white;
margin-left: -398px;
margin-top: -100px;
}
.vl {
border-left: 1px solid #c2c2c2;
height: 100px;
margin-left: 25px;
margin-top: -100px;
opacity: 10px;
}
#media (min-width: 992px){
.dropdown-menu .dropdown-toggle:after{
border-top: .3em solid transparent;
border-right: .3em solid;
border-bottom: .3em solid transparent;
}
.dropdown-menu .dropdown-menu{
margin-left:0; margin-right: 0;
direction: rtl;
}
.nav-link
{
margin-top: -22px;
direction: rtl;
}
.dropdown-menu li{
position: relative;
direction: rtl;
}
.nav-item .submenu{
display: none;
position: absolute;
right:100%; top:-7px;
}
.nav-item .submenu-left{
right:100%; left:auto;
}
.dropdown-menu > li:hover{ background-color: #f1f1f1;
}
.dropdown-menu > li:hover > .submenu{
display: block;
direction: rtl;
}
}
.btn
{
direction: rtl;
margin-left: -95px !important;
margin-right: -80px;
margin-bottom: -80px;
margin-top: -11px;
width: 120px;
background-color: white;
border-color: white;
color: black;
}
#logout
{
margin-left: 50px;
margin-top: 14px;
}
#sections
{
margin-left: 44px;
margin-top: 10px;
}
#mes_logout
{
margin-left: 20px;
margin-top: 10px;
}
#user_welcome
{
margin-left: 35px;
margin-top: 14px;
}
#mes_welcome
{
margin-left: 60px;
margin-top: 5px;
}
#vision_img
{
height: 100px;
width: 130px;
margin-top: 3px;
margin-left: 25px;
}
#logo_img
{
height: 100px;
width: 110px;
margin-left: -10px;
margin-right: 10px;
margin-top: -100px;
}
#events
{
margin-left: 30px;
margin-top: 15px;
}
#description_img
{
margin-left: -150px;
margin-top: 25px;
height: 180px;
width: 860px !important;
}
#section_img_list
{
margin-left: 790px;
margin-top: 10px;
}
#text_sections
{
text-align: right;
font-weight: bold;
margin-top: -30px;
margin-right: 70px;
}
#calnder_img
{
margin-left: 160px;
margin-top: 10px;
}
#date_message
{
margin-left: 110px;
margin-top: -20px;
}
.container {
position: relative;
text-align: center;
color:black;
width: 100%;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.quotes {
display: none;
text-align: center;
margin-left: -150px;
color: black;
}
.rectangle {
height: 190px;
width: 850px;
background-color: rgb(255, 255, 255);
margin-left: 190px;
margin-top: 20px;
}
.rectangle_second
{
height: 190px;
width: 850px;
background-color: rgb(255, 255, 255);
margin-left: 190px;
margin-top: 30px;
}
.footer {
position: absolute;
left: 0;
bottom: 20%;
width: 100%;
background-color:#002060;
color: white;
text-align: center;
font-weight: bold;
margin-bottom: -375px;
padding: 6px;
}
.date_time
{
height: 220px;
width: 200px;
background-color: rgb(255, 255, 255);
margin-left: 1100px;
margin-top: -600px;
color: white;
font-weight: bold;
}
.date
{
height: 60px;
width: 200px;
background-color: #002060;
}
.movie-img {
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 35px;
margin-top: -2px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
#quaality_img
{
height:110px;width: 110px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 20px;
}
#relations_img
{
height:110px;width: 110px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 25px;
}
#quaality_msg
{
margin-right: 15px;
font-size: 12px;
}
#user_adv
{
margin-left: 30px;
margin-top: 5px;
}
#mes_adv
{
margin-left: 30px;
margin-top: 10px;
}
.carousel-control-prev-icon
{
background-color: #1F419E;
color: #1F419E;
transform: translateX(33.333%);
}
.carousel-control-next-icon
{
background-color: #1F419E;
color: #1F419E;
margin-left:38px;
}
.movie-img1
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 155px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img2
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 280px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img3
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 400px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img4
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 530px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img5
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 660px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img6
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 35px;
margin-top: 2px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img7
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 155px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img8
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 280px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img9
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 400px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img10
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 530px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img11
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 660px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
#book_img
{
margin-right: 25px;
}
#day
{
color: #002060;
font-size: 30px;
text-align: right;
margin-right: 80px;
margin-top: 25px;
}
#months
{
color: #002060;
font-size: 30px;
text-align: right;
margin-right: 75px;
margin-top: -15px !important;
}
#year
{
color: #002060;
font-size: 30px;
text-align: right;
margin-right: 75px;
margin-top: -15px !important;
}
.time
{
height: 40px;
width: 200px;
background-color: #002060;
margin-left: 1100px;
margin-top: 20px;
color: white;
}
#clock
{
text-align: center;
margin-left: 45px;
margin-top: 5px;
font-weight: bold;
font-size:112%;
letter-spacing: 2px;
position: absolute;
}
#library_img
{
margin-right: 20px;
}
#library_msg
{
margin-right: 10px;
font-size: 12px;
}
#trainee_img
{
margin-right: 25px;
position:absolute;
margin-top: 5px !important;
}
#trainee_msg
{
margin-right: 20px;
margin-top: 64px;
font-size: 12px;
}
#it_img
{
margin-right: 25px;
position:absolute;
margin-top: 5px !important;
}
#it_msg
{
margin-right: 20px;
margin-top: 60px;
font-size: 12px;
}
.position
{
margin-left: 300px;
margin-top: -90px;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="Style.css" type="text/css">
<link rel="icon" href="img/logo.png">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> -->
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script> -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<title>home</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(1090)
.delay(1090)
.fadeOut(1090, showNextQuote);
}
showNextQuote();
})();
</script>
<script type="text/javascript">
$(document).ready(function() {
// jQuery code
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
if ($(window).width() < 992) {
$('.dropdown-menu a').click(function(e){
e.preventDefault();
if($(this).next('.submenu').length){
$(this).next('.submenu').toggle();
}
$('.dropdown').on('hide.bs.dropdown', function () {
$(this).find('.submenu').hide();
})
});
}
}); // jquery end
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-light bg-light"> <!-- start navbar -->
<div class="container-fluid"> <!-- start div container-fluid-->
<img id="img" src="img/image.png" alt="img">
<div class="position">
<div class="square">
<img id="logout" src="img/logout.png" alt="logout">
<p id="mes_logout"> </p>
</div>
<div class="square_section"> <!-- start div square section-->
<img id="sections" src="img/sections.png" alt="sections">
<div class="btn-group">
<li class="nav-item dropdown">
<a class="btn btn-secondary btn-sm dropdown-toggle" href="#" data-toggle="dropdown"> </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
</ul>
</li>
</div>
</div>
<div class="square_user">
<img id="user_welcome" src="img/user (1).png" alt="logout">
<p id="mes_welcome"></p>
</div>
</div>
<div class="square_vision">
<img id="vision_img" src="img/Saudi_Vision_2030_logo.svg.png" alt="logout">
</div>
<div class="vl"></div>
<img id="logo_img" src="img/logo.png" alt="logo">
</div>
</nav>
<div class="container">
<img id="description_img" src="img/Capture.png" alt="Snow" style="width:80%;">
<div class="centered">
<h5 class="quotes">
</h5>
<h5 class="quotes">
</h5>
<h5 class="quotes">
</h5>
</div>
</div>
<div class="rectangle">
<img id ="section_img_list" src="img/section.png" alt="section">
<p id="text_sections"></p>
<hr>
<div dir="rtl" class="row mx-auto my-auto"> <!-- start div carousel -->
<div dir="rtl" id="recipeCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-touch="false" data-bs-interval="false"> <!-- start div carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-lg-2 col-sm-4">
<div class="movie-card m-1">
<div class="movie-img">
<a id="quaality_img" href="#"><img src="img/quality-assurance.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img1">
<a id="relations_img" href="#"><img src="img/relations.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img2">
<a id="quaality_img" href="#"><img src="img/customer-service.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img3">
<a id="book_img" href="#"><img src="img/books-stack-of-three.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img4">
<a id="it_img" href="#"><img src="img/data.png" class="img-fluid"></a>
<p id="it_msg"> </p>
</div>
<div class="movie-img5">
<a id="book_img" href="#"><img src="img/briefcase.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-lg-2 col-sm-4">
<div class="movie-card m-1">
<div class="movie-img">
<a id="quaality_img" href="#"><img src="img/quality-assurance.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img1">
<a id="relations_img" href="#"><img src="img/relations.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img2">
<a id="relations_img" href="#"><img src="img/call-center-agent.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img3">
<a id="relations_img" href="#"><img src="img/student-in-the-library.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img4">
<a id="relations_img" href="#"><img src="img/boss.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img5">
<a id="relations_img" href="#"><img src="img/debt.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="movie-img6">
<a id="book_img" href="#"><img src="img/briefcase.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img7">
<a id="book_img" href="#"><img src="img/gift.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img8">
<a id="book_img" href="#"><img src="img/homework.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img9">
<a id="book_img" href="#"><img src="img/parchment.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img10">
<a id="library_img" href="#"><img src="img/library.png" class="img-fluid"></a>
<p id="library_msg"> </p>
</div>
<div class="movie-img11">
<a id="trainee_img" href="#"><img src="img/presentation.png" class="img-fluid"></a>
<p id="trainee_msg"> </p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#recipeCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next " type="button" data-bs-target="#recipeCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
</div>
<div class="rectangle_second">
<img id ="section_img_list" src="img/advertising.png" alt="section">
<p id="text_sections"></p>
<hr>
<div dir="rtl" class="row mx-auto my-auto">
<div dir="rtl" id="recipeCarousel1" class="carousel slide" data-bs-ride="carousel" data-bs-touch="false" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-lg-2 col-sm-4">
<div class="movie-card m-1">
<div class="movie-img">
<a id="book_img" href="#"><img src="img/data.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="movie-card m-1">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#recipeCarousel1" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next " type="button" data-bs-target="#recipeCarousel1" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
</div>
<div class="footer">
</div>
<div class="date_time">
<div class="date">
<img id="calnder_img" src="img/calenda.png" alt="calnder">
<p id="date_message"></p>
<p id="day"></p>
<p id="months"></p>
<p id="year"></p>
</div>
</div>
<div class="time">
<p id="clock"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
I just put it inside a wrap, and it worked:
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="Style.css" type="text/css">
<link rel="icon" href="img/logo.png">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> -->
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script> -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<title>home</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(1090)
.delay(1090)
.fadeOut(1090, showNextQuote);
}
showNextQuote();
})();
</script>
<script type="text/javascript">
$(document).ready(function() {
// jQuery code
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
if ($(window).width() < 992) {
$('.dropdown-menu a').click(function(e){
e.preventDefault();
if($(this).next('.submenu').length){
$(this).next('.submenu').toggle();
}
$('.dropdown').on('hide.bs.dropdown', function () {
$(this).find('.submenu').hide();
})
});
}
}); // jquery end
</script>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-light bg-light"> <!-- start navbar -->
<div class="container-fluid"> <!-- start div container-fluid-->
<img id="img" src="img/image.png" alt="img">
<div class="position">
<div class="square">
<img id="logout" src="img/logout.png" alt="logout">
<p id="mes_logout"> </p>
</div>
<div class="square_section"> <!-- start div square section-->
<img id="sections" src="img/sections.png" alt="sections">
<div class="btn-group">
<li class="nav-item dropdown">
<a class="btn btn-secondary btn-sm dropdown-toggle" href="#" data-toggle="dropdown"> </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
</ul>
</li>
</div>
</div>
<div class="square_user">
<img id="user_welcome" src="img/user (1).png" alt="logout">
<p id="mes_welcome"></p>
</div>
</div>
<div class="square_vision">
<img id="vision_img" src="img/Saudi_Vision_2030_logo.svg.png" alt="logout">
</div>
<div class="vl"></div>
<img id="logo_img" src="img/logo.png" alt="logo">
</div>
</nav>
</header>
<div id="wrap">
<div class="container">
<img id="description_img" src="img/Capture.png" alt="Snow" style="width:80%;">
<div class="centered">
<h5 class="quotes">
</h5>
<h5 class="quotes">
</h5>
<h5 class="quotes">
</h5>
</div>
</div>
<div class="rectangle">
<img id ="section_img_list" src="img/section.png" alt="section">
<p id="text_sections"></p>
<hr>
<div dir="rtl" class="row mx-auto my-auto"> <!-- start div carousel -->
<div dir="rtl" id="recipeCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-touch="false" data-bs-interval="false"> <!-- start div carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-lg-2 col-sm-4">
<div class="movie-card m-1">
<div class="movie-img">
<a id="quaality_img" href="#"><img src="img/quality-assurance.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img1">
<a id="relations_img" href="#"><img src="img/relations.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img2">
<a id="quaality_img" href="#"><img src="img/customer-service.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img3">
<a id="book_img" href="#"><img src="img/books-stack-of-three.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img4">
<a id="it_img" href="#"><img src="img/data.png" class="img-fluid"></a>
<p id="it_msg"> </p>
</div>
<div class="movie-img5">
<a id="book_img" href="#"><img src="img/briefcase.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-lg-2 col-sm-4">
<div class="movie-card m-1">
<div class="movie-img">
<a id="quaality_img" href="#"><img src="img/quality-assurance.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img1">
<a id="relations_img" href="#"><img src="img/relations.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img2">
<a id="relations_img" href="#"><img src="img/call-center-agent.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img3">
<a id="relations_img" href="#"><img src="img/student-in-the-library.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img4">
<a id="relations_img" href="#"><img src="img/boss.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img5">
<a id="relations_img" href="#"><img src="img/debt.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="movie-img6">
<a id="book_img" href="#"><img src="img/briefcase.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img7">
<a id="book_img" href="#"><img src="img/gift.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img8">
<a id="book_img" href="#"><img src="img/homework.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img9">
<a id="book_img" href="#"><img src="img/parchment.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img10">
<a id="library_img" href="#"><img src="img/library.png" class="img-fluid"></a>
<p id="library_msg"> </p>
</div>
<div class="movie-img11">
<a id="trainee_img" href="#"><img src="img/presentation.png" class="img-fluid"></a>
<p id="trainee_msg"> </p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#recipeCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next " type="button" data-bs-target="#recipeCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
</div>
<div class="rectangle_second">
<img id ="section_img_list" src="img/advertising.png" alt="section">
<p id="text_sections"></p>
<hr>
<div dir="rtl" class="row mx-auto my-auto">
<div dir="rtl" id="recipeCarousel1" class="carousel slide" data-bs-ride="carousel" data-bs-touch="false" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-lg-2 col-sm-4">
<div class="movie-card m-1">
<div class="movie-img">
<a id="book_img" href="#"><img src="img/data.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="movie-card m-1">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#recipeCarousel1" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next " type="button" data-bs-target="#recipeCarousel1" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
</div>
<div class="footer">
</div>
<div class="date_time">
<div class="date">
<img id="calnder_img" src="img/calenda.png" alt="calnder">
<p id="date_message"></p>
<p id="day"></p>
<p id="months"></p>
<p id="year"></p>
</div>
</div>
<div class="time">
<p id="clock"></p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
CSS:
#wrap{
width:1325px;
}
Related
I am trying to get my carousel to work however after I changed the size of it all it breaks the carousel itself and I am not exactly sure. Any help would be great as I am very new to responsive designs. I'm not really sure how this all works but my placeholder images do scale to the size of the device well. So I am just not sure why the carousel is no longer working.
Thanks in advance all!
/*Main*/
html, body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
background-color: lightgreen;
}
/*NavBar*/
#logo-space{
width: auto;
height: auto;
background-color: #0f2471;
}
#logo-space img{
width: auto;
height: auto;
position: relative;
left: 2rem;
}
.nav-bar{
background-color: #16377e;
position: relative;
}
#navbar-space .nav-link{
position: relative;
left: 4rem;
}
/*Carousel*/
.home .carousel-item{
min-height: 100vh;
background-position: center;
background-size: cover;
position: relative;
z-index: 1;
}
.home .carousel-item:before{
content: '';
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: -1;
}
.home .carousel-item.active h2{
animation: fadeInLeft 0.5s ease forwards;
}
.home .carousel-item.active p{
animation: fadeInRight 0.5s ease forwards;
}
/*responsive*/
#media(max-width: 767px){
.home .carousel-control-next,
.home .carousel-control-prev{
display: none;
}
.home .carousel-indicators li{
height: 60px;
width: 60px;
}
.home .carousel-item h2{
font-size: 45px;
}
.home .carousel-item p{
font-size: 22px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
<!--Index Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
</style>
</head>
<body>
<!--Logo Space-->
<div id="logo-space">
<div class="row">
<div class="col">
<img src="img/logo.png" class="image-fluid" alt="">
</div>
</div>
</div>
<!--Nav Bar-->
<div id="home">
<nav id="navbar-space" class="navbar navbar-expand-lg nav-bar">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active text-white" aria-current="page" href="#home">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#about">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link text-white " href="#divisions">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white " href="#appeals">APPEALS</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!--Carousel-->
<section id="carouselSection" class="home carousel slide position-absolute" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/1920x700" class="d-block w-100 img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x700" class="d-block w-100 img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x700" class="d-block w-100 img-fluid" alt="...">
</div>
</div>
</section>
</body>
</html>
I having some inconveniences to make a font-awesome icon appear when the input is checked.
It is for a portfolio gallery section, and I've added the icon inside the label, so the goal is that when I select the category menu, that shows a border-bottom and the icon pointing down.
So far, I just could make the border work, but I can't get this icon showing up.
I've already try with the opacity but I'am not sure if I am using the input selector as I should.
It should work to all the categories in the same way.
Could someone tell me if this can be done?
I appreciate any help on this.
body {
margin: auto;
background: #F2F5E9;
width: 100%;
font-family: "Arial"
}
.containergallery {
text-align: center;
margin-top: 30px;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0 8% 2% 5%;
flex-wrap: wrap;
}
ul.gallery li {
list-style-type: none;
margin-top: 40px;
opacity: 1;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
label {
position: relative;
text-align: center;
font-family: 'robotoregular', sans-serif;
cursor: pointer;
color: #fff;
background: #cccccc;
padding: 0.5%;
overflow: hidden;
}
input[type="radio"]:checked+label {
background: #22b0b4;
border-bottom: 4px solid #000;
}
.fa-caret-down {
position: absolute;
left: 45%;
top: 75%;
color: #000;
font-size: 26px;
opacity: 0;
}
/*menu rounded corners*/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="containergallery">
<input type="radio" id="select-all" name="button" onclick="myFunction()">
<label for="select-all" class="label-all">
<i class="fas fa-caret-down"></i>
All works
</label>
<input type="radio" id="select-creative" name="button">
<label for="select-creative" class="label-creative">
Creative
</label>
<input type="radio" id="select-corporate" name="button">
<label for="select-corporate" class="label-corporate">
Corporate
</label>
<input type="radio" id="select-portfolio" name="button">
<label for="select-portfolio" class="label-portfolio">
Portfolio
</label>
<ul class="gallery">
<li class="creative-item">
<img src="01.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="02.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="03.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="04.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="05.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="06.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="07.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="08.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
</ul>
</div>
</body>
</html>
You need to add this css code :
input[type="radio"]:checked+label i {
opacity: 1;
}
This will set the opacity of the icon to 1 when the corresponding radio button is checked
body {
margin: auto;
background: #F2F5E9;
width: 100%;
font-family: "Arial"
}
.containergallery {
text-align: center;
margin-top: 30px;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0 8% 2% 5%;
flex-wrap: wrap;
}
ul.gallery li {
list-style-type: none;
margin-top: 40px;
opacity: 1;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
label {
position: relative;
text-align: center;
font-family: 'robotoregular', sans-serif;
cursor: pointer;
color: #fff;
background: #cccccc;
padding: 0.5%;
overflow: hidden;
}
input[type="radio"]:checked+label {
background: #22b0b4;
border-bottom: 4px solid #000;
}
.fa-caret-down {
position: absolute;
left: 45%;
top: 75%;
color: #000;
font-size: 26px;
opacity: 0;
}
input[type="radio"]:checked+label i {
opacity: 1;
}
/*menu rounded corners*/
.label-all {
border-radius: 3px 0 0 3px;
}
.label-portfolio {
border-radius: 0 3px 3px 0;
}
input {
display: none;
}
img {
display: block;
width: 300px;
height: auto;
}
li {
position: relative;
width: 300px;
}
/*Overlay effect for photos*/
li:hover .overlay,
.container:hover .fa-eye {
opacity: 1;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
width: 100%;
transition: .5s ease;
opacity: 0;
height: 35%;
}
.text {
color: #f1f1f1;
font-size: 14px;
text-align: left;
padding: 0 5px 5px 10px;
line-height: 1.6;
}
.fa-eye {
position: absolute;
right: 5px;
top: -26px;
color: #fff;
border: 2px solid #fff;
border-radius: 100%;
background-color: #22b0b4;
padding: 15px;
overflow: visible;
}
/*Select Categorie*/
input#select-creative:checked~.gallery li:not(.creative-item),
input#select-corporate:checked~.gallery li:not(.corporate-item),
input#select-portfolio:checked~.gallery li:not(.portfolio-item) {
opacity: 0.1;
}
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<div class="containergallery">
<input type="radio" id="select-all" name="button" onclick="myFunction()">
<label for="select-all" class="label-all">
<i class="fas fa-caret-down"></i>
All works
</label>
<input type="radio" id="select-creative" name="button">
<label for="select-creative" class="label-creative">
<i class="fas fa-caret-down"></i>
Creative
</label>
<input type="radio" id="select-corporate" name="button">
<label for="select-corporate" class="label-corporate">
<i class="fas fa-caret-down"></i>
Corporate
</label>
<input type="radio" id="select-portfolio" name="button">
<label for="select-portfolio" class="label-portfolio">
<i class="fas fa-caret-down"></i>
Portfolio
</label>
<ul class="gallery">
<li class="creative-item">
<img src="01.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="02.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="03.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="04.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="05.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="06.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="07.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="08.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
</ul>
</div>
I want to show only the icons as default and on hover slide the sidemenu to the current state you see in the jsfiddle
Thanks in advance
https://jsfiddle.net/aq9Laaew/228/
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
<span>Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
<span>Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
<span>Messages</span>
</a>
</div>
</div>
</div>
</div>
You can do it by changing navbars values on hover like this:
#sidebar {
letter-spacing: 0.1em;
font-weight: 500;
border-right: 1px solid #797979;
padding-top: 50px;
position: fixed;
z-index: 1000;
width: 65px;
height: 100vh;
background: #2c2c2c;
transition:1s;
}
#sidebar:hover{
width: 259px;
}
#sidebar:hover .sidebar-item span{
opacity:1;
}
.sidebar-item {
padding: 10px 20px;
border-left: 5px solid transparent;
}
.sidebar-item span{
opacity:0;
transition:1s;
}
.sidebar-active {
border-left: 5px solid #b1a0ff;
color: #b1a0ff;
background: #474747;
}
.sidebar-item a {
align-items: center;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
<span>Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
<span>Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
<span>Messages</span>
</a>
</div>
</div>
</div>
</div>
So from the comments this wasn't exactly what you were after but I put this together and might as well share it here anyway.
It animates the label in on hover using relative position and CSS transition. It does involve some changes to the HTML.
https://jsfiddle.net/Chipmo/111dd0sj/1/
#sidebar {
letter-spacing: 0.1em;
font-weight: 500;
border-right: 1px solid #797979;
padding-top: 50px;
position: fixed;
z-index: 1000;
width: 259px;
height: 100vh;
background: #2c2c2c;
}
.sidebar-item {
padding-top: 20px;
}
.sidebar-item a {
align-items: center;
}
.sidebar-item i {}
.sidebar-left-cover {
background: #2c2c2c;
width: 40px;
height: 100%;
z-index: 2;
padding-left: 20px;
}
.sidebar-item .sidebar-label {
position: relative;
right: 100px;
transition: right 0.5s;
z-index: 1;
}
.sidebar-item:hover .sidebar-label {
right: -5px;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i></div>
<span class="sidebar-label">Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
</div>
<span class="sidebar-label">Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i></div>
<span class="sidebar-label">Messages</span>
</a>
</div>
</div>
</div>
</div>
I'm trying to develop my first website with bootstrap, so I'm quite new to it.
I used the inverse navbar and I noticed that when I get my browser's window smaller the right side of the navbar compiles on a dropdown menu that isn't working. It doesn't drop down the menu.
This is how the window is normally
This is the dropdown menu that doesn't work properly on the navbar. PS- Its red bordered.
Here's my HTML:
body {
margin: 0;
}
.jumbotron{
align-items:center;
display:flex;
background-image:url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
background-size:cover;
height:450px;
color:white;
height: 50vh;
}
* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.price .header {
background-color: #2D2727;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
<!DOCKTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>WebHosting</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<!--NavBar-->
<div class="row">
<div class="col-lg-8">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">WebHosting</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Contactos</li>
<li>Preços</li>
</ul>
</div>
</div>
</nav>
</div>
</div><!--NavBar END-->
<section class="jumbotron">
<div class="container">
<div class="row text-center">
<h1>WebHosting</h1>
<p>Host your WebSite now!!</p>
<p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p>
</div>
</div>
</section>
<div class="columns">
<ul class="price">
<li class="header">Host</li>
<li class="grey">Free</li>
<li>Sem criação de WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite</li>
<li class="grey">€ 9.99</li>
<li>Criação do WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite + Dominio</li>
<li class="grey">€ 9.99 / year</li>
<li>Criação do WebSite</li>
<li>Dominio incluido</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
</body>
</html>
Use in head section in given order.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
body {
margin: 0;
}
.jumbotron {
align-items: center;
display: flex;
background-image: url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
background-size: cover;
height: 450px;
color: white;
height: 50vh;
}
* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}
.price .header {
background-color: #2D2727;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="row">
<div class="col-lg-8">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">WebHosting</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Contactos</li>
<li>Preços</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!--NavBar END-->
<section class="jumbotron">
<div class="container">
<div class="row text-center">
<h1>WebHosting</h1>
<p>Host your WebSite now!!</p>
<p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p>
</div>
</div>
</section>
<div class="columns">
<ul class="price">
<li class="header">Host</li>
<li class="grey">Free</li>
<li>Sem criação de WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite</li>
<li class="grey">€ 9.99</li>
<li>Criação do WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite + Dominio</li>
<li class="grey">€ 9.99 / year</li>
<li>Criação do WebSite</li>
<li>Dominio incluido</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
I'm building a website with C9 and whenever I try and run the webpage and visit it, it simply freezes and stops loading. It loads in the bootstrap and I don't think it's loading in the ../css/hub.css
$(function() {
var rightVal = -350; // base value
$(".five-column").click(function() {
event.stopPropagation();
rightVal = (rightVal * -1) - 350; // calculate new value
$(".drop-details").animate({
right: rightVal + 'px'
}, {
queue: false,
duration: 500
});
});
});
$(function() {
var closeRightVal = -350;
$(".close-details").click(function() {
event.stopPropagation();
$(".drop-details").animate({
right: closeRightVal + 'px'
}, {
queue: false,
duration: 500
});
});
})
$(function() {
$(".nav-custom").on('touchmove', function(e) {
e.preventDefault();
});
});
$(function() {
$(".content").on('touchmove', function(e) {
e.preventDefault();
});
});
$(function() {
$(".inner-nav").on('touchmove', function(e) {
e.preventDefault();
});
});
$(function() {
$(window).resize(function() {
var dropWidth = $(".five-column").width();
$(".drop").css("height", dropWidth + 'px');
$(".five-column").css("min-height", dropWidth + 20 + 'px');
});
});
* {
overflow: hidden;
}
html {
height: 100%;
margin: 0;
max-width: 100%;
}
body {
font-family: 'Ubuntu', sans-serif;
background-color: #F9F9F9;
margin: 0;
height: 100%;
max-width: 100%;
-webkit-font-smoothing: antialiased;
position: fixed;
}
/* Page Components */
.content {
min-width: 100%;
float: right;
height: 100%;
overflow-y: scroll;
overflow-x: none;
margin-left: 250px;
}
.content::-webkit-scrollbar {
display: none;
}
.page-content {
min-width: calc(100% - 250px);
max-width: calc(100% - 250px);
min-height: 100%;
margin-top: 0;
overflow-y: scroll;
float: right;
overflow-x: hidden;
}
.drop-details {
height: 100%;
width: 350px;
z-index: 1000;
color: #FFF;
position: absolute;
right: -350px;
background-color: #FFF000;
}
/* Hub Top */
.hub-jumbo {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('hub-bg.png');
background-size: cover;
background-position: center;
padding-top: 36px;
padding-bottom: 36px;
margin-bottom: 18px;
}
.hub-header {
text-align: center;
}
h2 {
margin-bottom: 0;
}
.hub-btns {
display: block;
margin-bottom: 15px;
width: 100%;
text-align: center;
}
.hub-btns .copy-link {
border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
background-color: #03a9f4;
border-bottom-color: #0398db;
}
.hub-btns a {
margin: 0 10px;
}
/* End of top */
.container-fluid {
padding: 0;
margin: 0;
height: 10%;
min-width: 100%;
max-width: 100%;
margin-left: 4px;
overflow-y: auto;
margin-right: 0;
}
.ad-box {
width: 20%;
height: 250px;
display: inline-block;
margin: 0;
overflow: hidden;
padding: 0;
margin-right: -14px;
top: 50%;
transform: translateY(-50%);
background-color: #000000;
vertical-align: middle;
}
.ad-text {
text-align: center;
color: #FFFFFF;
}
.push-div {
height: 50px;
}
.five-column {
min-width: calc(20% - 20px);
padding: 0;
max-height: 194px;
display: inline-block;
margin: 0;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 14px;
}
.row {
display: inline-block;
max-width: calc(80% - 14px);
margin: 0;
margin-left: 0;
}
/* Drop Styles */
.drop {
width: 100%;
height: 180px;
background-color: #FFF;
border-bottom: 3px solid #EBEBEB;
display: block;
margin: 0 auto;
border-radius: 5px;
}
.drop-image {
background-image: url('http://protiumdesign.com/wp-content/uploads/2015/03/Flat-Space-Wallpaper-1024.jpg');
background-size: cover;
background-position: center;
}
.drop .name {
height: 36px;
line-height: 36px;
text-align: center;
color: #FFF;
background-color: #03a9f4;
font-size: 1em;
}
.drop .icon {
height: 80px;
vertical-align: middle;
display: block;
margin: 0 auto;
margin-top: 32px;
}
/* SCALING */
#media only screen and (max-width: 1400px) {
.five-column {
min-width: calc(25% - 20px);
}
.drop .name {
font-size: 1.10em;
}
}
#media only screen and (max-width: 1200px) {
.ad-box {
display: none;
}
.row {
max-width: calc(100% - 14px);
}
.five-column {
min-width: calc(33% - 20px);
}
.drop .name {
font-size: 1.20em;
}
}
#media only screen and (max-width: 1000px) {
.five-column {
min-width: calc(50% - 20px);
}
.drop .name {
font-size: 1.30em;
}
.user-name {
left: 7%;
}
.more-dropup {
left: 5%;
}
.user-image {
left: 2%;
}
}
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<title>Hub</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- Mobile Optimization -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<!-- Custom styling -->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet" />
<link rel="stylesheet" href="../css/hub.css" type="text/css" />
<link rel="stylesheet" href="../partials/nav.css" type="text/css" />
<link rel="stylesheet" href="../css/components.css" type="text/css" />
<!-- Imported Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
</head>
<body>
<div class="nav-custom">
<a class="venos_logo" href="hubs.html">
<img src="venos_logo.png">
</a>
<div class="inner-nav">
<ul class="upper-items smooth">
<li class="label">NAVIGATE</li>
<li class="link"><i class="material-icons nav-icon">home</i> Dashboard
</li>
<li class="link"><i class="material-icons nav-icon">notifications</i> Notifications
</li>
<li class="link"><i class="material-icons nav-icon">cloud</i> Synced Files
</li>
<li class="link"><i class="material-icons nav-icon">create</i> Create Hub
</li>
</ul>
<ul class="lower-items">
<li class="label">HUBS</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Jason's Vacation 2016
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> San Haven Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Bismarck Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Fargo Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Velva Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Dank Memes
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Squad
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Summer 2017
</li>
</ul>
<div class="show-hubs btn btn-lg txt-white bg-blue no-border" href="" role="button">Show More</div>
</div>
<div class="nav-push-div"></div>
<div class="more-menu">
<ul>
<li><a class="more-menu-link nonactive txt-blue" href="settings.html">Settings</a>
</li>
<li><a class="more-menu-link nonactive txt-blue" href="signout.html">Signout</a>
</li>
</ul>
</div>
<div class="nav-user">
<div class="user-image"></div>
<span class="user-name">Jason Procka</span>
<button type="button" class="more-dropup">
<i class="material-icons nav-more-btn">more_horiz</i>
</button>
</div>
</div>
<div class="content">
<div class="page-content">
<div class="jumbotron hub-jumbo">
<div class="hub-header">
<div class="container">
<h2 class="txt-white">Jason's Summer Vacation</h2>
<p class="txt-white">There doesn't seem to be a description here!</p>
</div>
</div>
<div class="hub-btns">
<a class="copy-link btn btn-lg btn-wide bg-white txt-blue" href="" role="button">Copy Link</a>
<a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-dark-blue" href="" role="button">Create Drop</a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="five-column">
<div class="drop">
<div class="name">1.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop drop-image">
<div class="name">2.png</div>
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">3.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">4.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">5.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">6.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">7.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">8.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">9.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">10.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
</div>
<div class="ad-box">
<span class="ad-text">Your ad here.</span>
</div>
</div>
<div class="push-div"></div>
</div>
<div class="drop-details">
<button class="close-details">
<i class="material-icons">close</i>
</button>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
<script type="text/javascript" src="../js/hub.js"></script>
</body>
</html>
Here's the link to the webpage to see if it does the same thing for you:
https://venos-git-jasonprocka1.c9users.io/www/html/hub.html
I've already worked on clearing cookies and nothing seems to work. Something has to be wrong with my code.
Any help is greatly appreciated! Thanks!
On the page linked, you have not included the required tether.js library.
Also, the page is requesting a wallpaper image over http (but the page itself is hosted on https, usually you get a warning on the browser's console about this)
And, it's making references to a nav.css file but it cannot find it.
As a side note, you do not need to have each event handler declared in its own function() declaration. You could combined them all in one as below:
$(function() {
// five-column click
var rightVal = -350; // base value
$(".five-column").click(function() {
event.stopPropagation();
rightVal = (rightVal * -1) - 350; // calculate new value
$(".drop-details").animate({
right: rightVal + 'px'
}, {
queue: false,
duration: 500
});
});
// close-detail click
var closeRightVal = -350;
$(".close-details").click(function() {
event.stopPropagation();
$(".drop-details").animate({
right: closeRightVal + 'px'
}, {
queue: false,
duration: 500
});
});
// nav-custom touchmove
$(".nav-custom").on('touchmove', function(e) {
e.preventDefault();
});
// content touchmove
$(".content").on('touchmove', function(e) {
e.preventDefault();
});
// inner-nav touchmove
$(".inner-nav").on('touchmove', function(e) {
e.preventDefault();
});
// window resize
$(window).resize(function() {
var dropWidth = $(".five-column").width();
$(".drop").css("height", dropWidth + 'px');
$(".five-column").css("min-height", dropWidth + 20 + 'px');
});
});
* {
overflow: hidden;
}
html {
height: 100%;
margin: 0;
max-width: 100%;
}
body {
font-family: 'Ubuntu', sans-serif;
background-color: #F9F9F9;
margin: 0;
height: 100%;
max-width: 100%;
-webkit-font-smoothing: antialiased;
position: fixed;
}
/* Page Components */
.content {
min-width: 100%;
float: right;
height: 100%;
overflow-y: scroll;
overflow-x: none;
margin-left: 250px;
}
.content::-webkit-scrollbar {
display: none;
}
.page-content {
min-width: calc(100% - 250px);
max-width: calc(100% - 250px);
min-height: 100%;
margin-top: 0;
overflow-y: scroll;
float: right;
overflow-x: hidden;
}
.drop-details {
height: 100%;
width: 350px;
z-index: 1000;
color: #FFF;
position: absolute;
right: -350px;
background-color: #FFF000;
}
/* Hub Top */
.hub-jumbo {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('hub-bg.png');
background-size: cover;
background-position: center;
padding-top: 36px;
padding-bottom: 36px;
margin-bottom: 18px;
}
.hub-header {
text-align: center;
}
h2 {
margin-bottom: 0;
}
.hub-btns {
display: block;
margin-bottom: 15px;
width: 100%;
text-align: center;
}
.hub-btns .copy-link {
border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
background-color: #03a9f4;
border-bottom-color: #0398db;
}
.hub-btns a {
margin: 0 10px;
}
/* End of top */
.container-fluid {
padding: 0;
margin: 0;
height: 10%;
min-width: 100%;
max-width: 100%;
margin-left: 4px;
overflow-y: auto;
margin-right: 0;
}
.ad-box {
width: 20%;
height: 250px;
display: inline-block;
margin: 0;
overflow: hidden;
padding: 0;
margin-right: -14px;
top: 50%;
transform: translateY(-50%);
background-color: #000000;
vertical-align: middle;
}
.ad-text {
text-align: center;
color: #FFFFFF;
}
.push-div {
height: 50px;
}
.five-column {
min-width: calc(20% - 20px);
padding: 0;
max-height: 194px;
display: inline-block;
margin: 0;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 14px;
}
.row {
display: inline-block;
max-width: calc(80% - 14px);
margin: 0;
margin-left: 0;
}
/* Drop Styles */
.drop {
width: 100%;
height: 180px;
background-color: #FFF;
border-bottom: 3px solid #EBEBEB;
display: block;
margin: 0 auto;
border-radius: 5px;
}
.drop-image {
background-image: url('http://protiumdesign.com/wp-content/uploads/2015/03/Flat-Space-Wallpaper-1024.jpg');
background-size: cover;
background-position: center;
}
.drop .name {
height: 36px;
line-height: 36px;
text-align: center;
color: #FFF;
background-color: #03a9f4;
font-size: 1em;
}
.drop .icon {
height: 80px;
vertical-align: middle;
display: block;
margin: 0 auto;
margin-top: 32px;
}
/* SCALING */
#media only screen and (max-width: 1400px) {
.five-column {
min-width: calc(25% - 20px);
}
.drop .name {
font-size: 1.10em;
}
}
#media only screen and (max-width: 1200px) {
.ad-box {
display: none;
}
.row {
max-width: calc(100% - 14px);
}
.five-column {
min-width: calc(33% - 20px);
}
.drop .name {
font-size: 1.20em;
}
}
#media only screen and (max-width: 1000px) {
.five-column {
min-width: calc(50% - 20px);
}
.drop .name {
font-size: 1.30em;
}
.user-name {
left: 7%;
}
.more-dropup {
left: 5%;
}
.user-image {
left: 2%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
<div class="nav-custom">
<a class="venos_logo" href="hubs.html">
<img src="http://lorempixel.com/50/50">
</a>
<div class="inner-nav">
<ul class="upper-items smooth">
<li class="label">NAVIGATE</li>
<li class="link"><i class="material-icons nav-icon">home</i> Dashboard
</li>
<li class="link"><i class="material-icons nav-icon">notifications</i> Notifications
</li>
<li class="link"><i class="material-icons nav-icon">cloud</i> Synced Files
</li>
<li class="link"><i class="material-icons nav-icon">create</i> Create Hub
</li>
</ul>
<ul class="lower-items">
<li class="label">HUBS</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Jason's Vacation 2016
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> San Haven Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Bismarck Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Fargo Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Velva Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Dank Memes
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Squad
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Summer 2017
</li>
</ul>
<div class="show-hubs btn btn-lg txt-white bg-blue no-border" href="" role="button">Show More</div>
</div>
<div class="nav-push-div"></div>
<div class="more-menu">
<ul>
<li><a class="more-menu-link nonactive txt-blue" href="settings.html">Settings</a>
</li>
<li><a class="more-menu-link nonactive txt-blue" href="signout.html">Signout</a>
</li>
</ul>
</div>
<div class="nav-user">
<div class="user-image"></div>
<span class="user-name">Jason Procka</span>
<button type="button" class="more-dropup">
<i class="material-icons nav-more-btn">more_horiz</i>
</button>
</div>
</div>
<div class="content">
<div class="page-content">
<div class="jumbotron hub-jumbo">
<div class="hub-header">
<div class="container">
<h2 class="txt-white">Jason's Summer Vacation</h2>
<p class="txt-white">There doesn't seem to be a description here!</p>
</div>
</div>
<div class="hub-btns">
<a class="copy-link btn btn-lg btn-wide bg-white txt-blue" href="" role="button">Copy Link</a>
<a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-dark-blue" href="" role="button">Create Drop</a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="five-column">
<div class="drop">
<div class="name">1.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop drop-image">
<div class="name">2.png</div>
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">3.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">4.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">5.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">6.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">7.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">8.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">9.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">10.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
</div>
<div class="ad-box">
<span class="ad-text">Your ad here.</span>
</div>
</div>
<div class="push-div"></div>
</div>
<div class="drop-details">
<button class="close-details">
<i class="material-icons">close</i>
</button>
</div>
</div>