I am styling a slick slider, all works fine excluding the hidden divs.
When I refresh the page it was loading all hidden divs and then hidden, so I set overflow:hidden; and it stopped loading hidden divs outside of the slider-holder. But still, keep loading hidden divs in the slider-holder div.
I also need css correction
I have tried variations of this code with and without not:(:nth-child(1));
.slider-holder {
display:none!important
}
.slider-holder.slick-initialized {
display:block!important
}
Still loads hidden divs in slider holder when I refresh the page.
My codes:
$('#slider-holder').slick({
autoplay: true,
autoplaySpeed: 4900,
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
adaptiveHeight: true,
speed: 200,
swipeToSlide: true,
cssEase: 'linear',
lazyLoad: 'progressive',
});
.featured-slider{
width:50%;
min-height:400px;
position:relative;
display:block;
float:left;
overflow:hidden!important;
}
.slider-holder {
width: 100%;
max-width: 100vw;
display: block;
position: relative;
overflow:hidden!important;
}
.slider {
background-color: lightgray;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-width: 100vw;
min-height: 400px;
display: block;
overflow:hidden!important;
}
.slider .slider-nav {
position: absolute;
height: 48px;
width: 100%;
max-width: 100%;
top: 0;
bottom: 0;
margin: auto;
pointer-events: none;
}
.slider-nav .prev {
font-size: 32px;
color: #fff;
float: left;
height: 48px;
width: 48px;
line-height: 48px;
text-align: center;
position: relative;
left: 10px;
opacity: 10;
z-index: 2;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0;
pointer-events: auto;
text-align: left;
}
.slider-nav .next {
font-size: 32px;
color: #fff;
float: right;
height: 48px;
width: 48px;
line-height: 48px;
position: relative;
right: 10px;
text-align: center;
opacity: 10;
z-index: 2;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0;
pointer-events: auto;
text-align: right;
background-color: #f8f8f8;
}
.slider-nav > i {
position: relative;
vertical-align: middle;
display: inline-block;
width: 48px;
height: 48px;
}
.slider .slider:hover .slider-nav.prev,
.slider:hover .slider-nav.next {
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
opacity: 0.8;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
padding: 15px 20px 15px 20px;
pointer-events: none
}
.caption h3 {
margin-bottom: 0
}
.caption .title {
font-size: 15px;
color: #fff !important;
line-height: 21px;
font-weight: 500;
overflow-wrap: break-word
}
.caption a {
pointer-events: auto
}
.slider .caption .title {
color: #fff;
font-size: 22px;
font-weight: 500;
line-height: 28px;
margin-top: 10px;
position: relative
}
.slider .caption .title a {
color: #fff
}
.category-label {
background-color: #0a0a0a;
color: #fff;
display: inline-block;
font-size: 11px;
font-weight: 400;
position: relative;
height: 1.8em;
line-height: 1.8;
padding: 0 .7em;
cursor: pointer;
z-index: 100;
pointer-events: auto;
white-space: nowrap
}
.slider .category-label,
.featured-news .news-card .category-label {
position: absolute;
top: 20px;
left: 20px
}
.slider .post-meta {
margin-bottom: 0;
position: relative;
z-index: 14
}
.slider .post-meta a {
color: #b0b0b0;
pointer-events: auto;
}
.slider .caption .category-link {
pointer-events: auto
}
.post-meta {
display: block;
width: 100%;
float: left
}
.post-meta span {
list-style: none;
float: left;
margin-right: 8px;
color: #999;
font-size: 11px;
display: block
}
.post-meta a {
list-style: none;
float: left;
margin-right: 8px;
color: #999;
font-size: 11px;
display: block;
font-weight: 600
}
.post-meta span i {
margin-right: 5px
}
.overlay {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.46) 50%, rgba(0, 0, 0, 0.80) 100%);
bottom: 0;
content: "";
height: 50%;
opacity: .9;
position: absolute;
transition: all .3s ease-in 0s;
width: 100%;
will-change: opacity
}
.slick-slide{
outline:none!important
}
.slider-holder {
display:none!important
}
.slider-holder.slick-initialized {
display:block!important
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<div class="featured-slider">
<div class="slider-holder" id="slider-holder">
<div class="slider" style="background-image: url('https://static.depositphotos.com/storage/file_upload/file_7492ab772ab5492d96018940debac479.jpg?1628180370')">
<span class="category-label" style="background-color: #222222">Children</span>
<div class="overlay"></div>
<div class="caption">
<a href="/what-is-gta-online-and-how-to-play-it">
<h3 class="title">Use Trello Codes to Get the Most Out of Slayers Un... 1</h3>
</a>
<p class="post-meta">
User
<span>Jan 18, 2023</span>
<span><i class="fa-regular fa-comment"></i>0</span>
<span class="mr-0"><i class="fa-solid fa-eye"></i>16</span>
</p>
</div>
</div>
<div class="slider" style="background-image: url('https://static.depositphotos.com/storage/file_upload/file_e285ad0d98faecc0ef4cbee582b77700.jpg?1628180400')">
<span class="category-label" style="background-color: #222222">Children</span>
<div class="overlay"></div>
<div class="caption">
<a href="/what-is-gta-online-and-how-to-play-it">
<h3 class="title">Use Trello Codes to Get the Most Out of Slayers Un... 2</h3>
</a>
<p class="post-meta">
User
<span>Jan 18, 2023</span>
<span><i class="fa-regular fa-comment"></i>0</span>
<span class="mr-0"><i class="fa-solid fa-eye"></i>16</span>
</p>
</div>
</div>
</div>
<div id="slider-nav" class="slider-nav">
<button class="prev">
<span class="notext">Back</span>
<i class="fa-solid fa-chevron-left"></i>
</button>
<button class="next">
<i class="fa-solid fa-chevron-right"></i>
<span class="notext">Next</span>
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
Related
I adjusted it based on my screen size, and I've tried using both relative and absolute positions for .navbar, but when I open it on my laptop the navbar content overflows the parent image, setting overflow to hidden doesn't fix the issue since i want it to stay over the bottom of the image at all times regardless of screen size. Here's the jsfiddle https://jsfiddle.net/Montinyek/4dbf5p9e/1/
body, html {
height: 100%;
margin: 0;
padding:0;
font-family: Times, Times New Roman, serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url(./hero.jpg);
height: 80%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f2f2f2;
}
h1 {
padding: 80px 60px;
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.nav-container {
display: inline-block;
position: relative;
top: 87%;
}
.navbar {
overflow: hidden;
height: 100px;
display: inline-flex;
gap: 70px;
align-items: center;
justify-content: center;
width: 99vw;
}
.navbar a.main {
color: #f2f2f2;
padding-left: 47px;
padding-right: 47px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #f2f2f2;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
margin: 0px;
transition: all 0.3s;
display: block;
}
.navbar a.main:hover {
background-color: #ddd;
transform: scale(1.3);
color: black;
}
.dropdown-content {
visibility: none;
opacity: 0;
pointer-events: none;
position: absolute;
left: 64.6%;
top: 80%;
border-radius: 5px;
background-color: black;
min-width: 160px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
z-index: 1;
transition: all 0.5s;
}
.dropdown-content a {
float: none;
color: #ddd;
padding: 12px;
text-decoration: none;
display: block;
text-align: center;
transition: all 0.5s;
font-size: 1.5rem;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
</style>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Welcome</h1></div>
<div class="nav-container">
<div class="navbar">
<a class="main" href="#home">Home</a>
<a class="main" href="#mission">Mission</a>
<a class="main" href="#news">Contact</a>
<div class="dropdown">
<a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
Travel
</div>
</div>
</div></div>
</div>
</body>
</html>```
I don't know if I understood well your issue, but I made some minor changes and got this result demo
HTML:
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Welcome </h1>
</div>
<div class="navbar">
<a class="main" href="#home">Home</a>
<a class="main" href="#mission">Mission</a>
<a class="main" href="#news">Contact</a>
<div class="dropdown">
<a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
Travel
</div>
</div>
</div>
</div>
CSS:
body,
html {
height: 100vh;
margin: 0;
padding: 0;
font-family: Times, Times New Roman, serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
url("https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.technistone.com%2Fen%2Fcolor%2Fstarlight-black&psig=AOvVaw3Ekck4Ncbtpa2vQdYYlN_V&ust=1646455838525000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCID6_o3Uq_YCFQAAAAAdAAAAABAD");
height: 80vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;
}
.hero-text {
display: flex;
justify-content: center;
text-align: center;
width: 100%;
color: #f2f2f2;
}
.hero-text h1 {
padding: 80px 60px;
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.navbar {
overflow: hidden;
height: 120px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
max-width: 100vw;
width: 100%;
}
.navbar a.main {
color: black;
padding-left: 47px;
padding-right: 47px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
margin: 0px;
transition: all 0.3s;
display: block;
}
.navbar a.main:hover {
background-color: #ddd;
transform: scale(1.3);
color: black;
}
.dropdown-content {
visibility: none;
opacity: 0;
pointer-events: none;
position: absolute;
left: 64.6%;
top: 80%;
border-radius: 5px;
background-color: black;
min-width: 160px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
rgba(0, 0, 0, 0.22) 0px 10px 10px;
z-index: 1;
transition: all 0.5s;
}
.dropdown-content a {
float: none;
color: #ddd;
padding: 12px;
text-decoration: none;
display: block;
text-align: center;
transition: all 0.5s;
font-size: 1.5rem;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
I am using GTM's "Custom HTML Tag" option with the my below code but it is giving me the following error when I try to publish it: Invalid HTML, CSS, or JavaScript found in template.
I've seen other threads where it looks like GTM doesn't support or recognize certain tag attributes. I have tested my code, and no error prompts show up in the console either. It is a standard bootstrap modal:
function myFunction() {
var copyText = document.getElementById("myInput");
navigator.clipboard.writeText(copyText.innerHTML);
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copied: " + copyText.innerHTML;
}
function outFunc() {
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copy";
}
$("#myModal").modal();
body {
font-family: 'Varela Round', sans-serif
}
.modal-login {
color: #636363;
max-width: 850px;
width: 100%;
margin: 30px auto;
background-image: none!important
}
.modal-login .modal-content {
padding: 20px;
min-height: 586px;
border-radius: 5px;
margin: 1rem;
background-color: #eaebeb;
background-image: url(https://media-services.dcm-inc.com/couponsites/static/resources/img/festival.png);
background-size: 100%;
background-repeat: no-repeat
}
.modal-login .modal-header {
border-bottom: none;
position: relative;
justify-content: center;
margin-top: 130px
}
.modal-login img {
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
width: 40%
}
.modal-login .form-group {
position: relative
}
.modal-login h4 {
text-align: center;
font-size: 20px;
width: 80%;
display: block;
margin-left: auto;
margin-right: auto
}
.modal-login i {
position: absolute;
left: 13px;
top: 11px;
font-size: 18px
}
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%
}
#media screen and (max-width:600px) {
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%
}
}
.modal-login .form-control:focus {
border-color: #fcda7b
}
.modal-login .btn,
.modal-login .form-control {
min-height: 40px;
border-radius: 30px
}
.modal-login .hint-text {
text-align: center;
padding-top: 10px
}
.modal-login .close {
position: absolute;
top: -5px;
right: -5px
}
.button,
.modal-login .btn {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%);
border: none;
line-height: normal
}
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%
}
#media screen and (max-width:600px) {
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%
}
}
.modal-login .custom-social {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%
}
.modal-login .btn:focus,
.modal-login .btn:hover {
opacity: .7
}
.trigger-btn {
display: inline-block;
margin: 100px auto
}
.contest-social {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%
}
.modal-login .fa:hover {
opacity: .7
}
.modal-login .contest-social-facebook {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-twitter {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-youtube {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-instagram {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.flexC {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
-webkit-flex-flow: row wrap
}
.modal-title img {
margin: 1rem;
max-width: 100px;
border-radius: 10px;
box-shadow: 0 0 3px 3px #ddd
}
.modal-title p {
font-size: 20px;
font-weight: 500;
max-width: 300px;
color: #000
}
.ccme {
color: #fd5c88
}
.codelinkbox {
margin: 0;
position: relative;
text-align: center;
width: auto;
position: relative
}
.codeValue {
border: 2px dashed currentColor;
font-size: 28px;
height: 50px;
line-height: 48px;
padding: 0 15px;
border-right: none;
border-radius: 0;
display: inline-block;
white-space: nowrap;
cursor: pointer;
border-radius: 6px 0 0 6px!important;
font-weight: 700;
color: #000
}
.buttonBtn.copy {
background-color: currentColor;
cursor: pointer;
font-size: 16px;
height: 50px;
line-height: 42px;
margin: 0;
padding: 0 15px;
position: relative;
text-transform: capitalize;
overflow: hidden;
min-width: 0;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
border-radius: 0 6px 6px 0
}
.buttonBtn.copy:hover {
background: #6ba62c;
color: #fff
}
.copy span {
color: #fff
}
.m1 {
margin: 1rem auto
}
.txtC {
text-align: center
}
.buttonBtn {
position: relative;
cursor: pointer;
font-size: 15px;
left: 0;
top: 0;
margin: 0;
height: 54px;
min-width: 180px;
border: 0;
outline: 0;
padding: 0 15px;
border-radius: 10px;
line-height: 54px
}
.arrRight {
color: #fff;
font-weight: 700
}
.arrRight:after {
content: '\2192';
display: inline-block;
color: #fff
}
.emailIcon {
width: 24px;
max-width: 24px;
margin: 0 5px
}
.termsto {
margin: 3rem 0
}
.sendemail {
font-size: 13px;
margin: 10px 0
}
#media all and (max-width:540px) {
.modal-title {
text-align: center
}
.modal-login .modal-header {
margin-top: 40px
}
}
.testtip {
position: relative;
display: inline-block;
}
.testtip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 120%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.testtip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.testtip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<link href="https://fonts.googleapis.com/css?family=Roboto%7CVarela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-login border">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<div class="flexC">
<img src="https://res.cloudinary.com/csnetworkco/image/upload/c_scale,h_150,w_150/csnimages/Noon_568012.jpg" alt="Noon Discount Code" title="Noon Discount Code" width="150" height="150" loading="lazy">
<p>Up To 70% Off Sale + 10% Off Using Noon Coupon Code</p>
</div>
</div>
<div class="modal-body">
<div class="codelinkbox flexC m1">
<div id="myInput" class="codeValue">YB26</div>
<div class="testtip">
<button class="buttonBtn copy ccme" onclick="myFunction()" onmouseout="outFunc()"><span id="myTooltip">Copy</span></button>
</div>
</div>
</div>
<div class="row termsto">
<div class="col-sm-8">
<p><strong>Things to remember:</strong></p>
<ul>
<li>Don't forget to paste the code in the checkout during the purchase</li>
<li>Get 10% Off for New Customers & 5% Off for Returning Customers. </li>
<li>Code Usage: 2 times per customer.</li>
<li>Always contact our customer support team if there is any issues</li>
<li>You can always share the code</li>
</ul>
</div>
<div class="col-sm-4 txtC ">
<button class="buttonBtn ccme button" id=""><span class="arrRight">VISIT SITE </span></button>
</div>
</div>
</div>
</div>
</div>
</div>
I found what the issue was, in the img tag I was adding an attribute loading="lazy" due to which the invalid HTML CSS or JS error was being thrown
They really need to highlight what part of the code is the problem
I removed the above mentioned attribute and am now able to publish the tag
I'm still new to css and tried to make a sticky navbar with background of white color and black font. I'm struggling to find the solution and can't figure out what's wrong.
Here's my what my initial navbar looks like
initial navbar
And here's scrolled navbar
Scrolled Navbar
The picture isn't clear but the font is still white with a little black outline even though i changed the font color to black
Here's my HTML code:
<header id='navbar'>
LOGO
<div class="menu">
<div class="btn">
<i class="fas fa-times close-btn"></i>
</div>
Jadi Partner
Lapangan Favorit
Pesanan Saya
<div class="dropdown">
<button class="dropbtn">
<i class="fas fa-bars" id="menu-dropdown"></i><i class="fas fa-user-circle"></i>
</button>
<div class="dropdown-content">
Log In
Sign Up
</div>
</div>
</div>
<div class="btn">
<i class="fas fa-bars menu-btn"></i>
</div>
</header>
<script type="text/javascript">
window.addEventListener('scroll', function () {
// var header = document.querySelector('header');
var header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
})
</script>
<script type="text/javascript">
//Javacript of responsive navigation menu
const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");
menuBtn.addEventListener("click", () => {
menuBtn.classList.toggle("active");
navigation.classList.toggle("active");
});
</script>
and this is the CSS part:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
header{
z-index: 999;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
transition: 0.6s;
}
header.sticky {
background: #ffffff;
padding: 20px 100px;
}
header .brand{
color: #fff;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
}
header .menu{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header .menu a{
color: rgb(255, 255, 255);
font-size: 16px;
font-weight: 500;
text-decoration: none;
margin: 0 30px;
padding: 0 10px;
border-radius: 20px;
transition: 0.3s;
transition-property: color, background;
}
header.sticky .menu a{
color: black !important;
z-index: 9999999;
}
header .menu a:hover{
color: #000;
background: #fff;
}
header .btn{
color: #fff;
font-size: 25px;
cursor: pointer;
display: none;
}
.dropdown {
float: right;
position: relative;
/* overflow: hidden; */
margin-left: 10px;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
font-family: inherit;
margin-left: 20px;
color: black;
background-color: #fff;
border-radius: 30px;
padding: 0 3px;
}
.dropdown-content {
display: none;
position: absolute;
top: calc(100%);
right: 0;
background-color: #ffffff;
max-width: 160px;
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
z-index: 9999;
border-radius: 10px;
}
.dropdown-content a {
/* float: none; */
color: black !important;
margin: 5px 0 !important;
padding: 6px 10px;
min-width: 120px;
text-decoration: none;
display: inline-block;
font-size: .8em !important;
/* text-align: left; */
/* overflow: hidden; */
}
.dropdown-content a:hover {
background-color: rgb(212, 212, 212);
}
.dropdown:hover .dropdown-content {
display: block;
}
.navigation-items {
display: flex;
justify-content: center;
align-items: center;
}
header .navigation .navigation-items #profile-dropdown {
color: black;
background-color: #fff;
border-radius: 30px;
padding: 0 3px;
}
.dropbtn i {
margin: 0 3px;
}
#menu-dropdown {
font-size: .7em;
}
header ul li a:before {
content: '';
position: absolute;
background: rgb(255, 255, 255);
border-color: #000000;
width: 0;
height: 3px;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
header ul li a:hover:before {
width: 100%;
}
This part is edited
I found out that with only navbar it works perfectly fine, but the problem occure when i add background image below navbar. Here's my background code below navbar:
<section class="home">
<div class="images-home">
<img src="{% static 'main/images/basketball.jfif' %}" alt="" class="image-slide">
<img src="{% static 'main/images/prapoth-panchuea-OMWubltUEfE-unsplash.jpg' %}" alt="" class="image-slide">
<img src="{% static 'main/images/muktasim-azlan-rjWfNR_AC5g-unsplash.jpg' %}" alt="" class="image-slide">
</div>
<div class="content">
<h1>Train. Grow. Repeat.<br></h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores magnam quia vitae, animi unde consequuntur
nihil doloribus quidem culpa, voluptatem, harum consequatur laboriosam delectus officia!</p>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span> Booking sekarang</a>
</div>
<div class="slider-navigation">
<div onclick="slider_nav(1)" class="nav-btn" id="radio1"></div>
<div onclick="slider_nav(2)" class="nav-btn" id="radio2"></div>
<div onclick="slider_nav(3)" class="nav-btn" id="radio3"></div>
</div>
</section>
and here's CSS for background:
section {
padding: 100px 200px;
}
.home {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
/* background: #267be9; */
background: #ED1E1E;
}
.home:before {
z-index: 777;
content: '';
position: absolute;
/* background: rgba(62, 129, 245, 0.3); */
background: rgba(212, 11, 11, 0.3);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.home .content {
z-index: 888;
/* color: #fff; */
color: #fff;
width: 60%;
margin: 50px 70px;
position: absolute;
left: 0%;
}
.home .content h1 {
font-size: 3.5em;
font-weight: 700;
/* text-transform: uppercase; */
letter-spacing: 5px;
line-height: 75px;
margin-bottom: 40px;
}
.home .content p {
margin-bottom: 65px;
max-width: 50%;
/* font-size: 1.2vw; */
}
.home .content a {
/* background: #fff; */
width: 30%;
background: #ED1E1E;
padding: 15px 35px;
/* color: #1680AC; */
/* color: #ED1E1E; */
color: #ffffff;
/* font-size: 1.1em; */
font-size: 1.4vw;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
position: relative;
/* display: flex; */
}
.home .content a:hover {
color: var(--main-color);
background-color: #fff;
}
.home .content a span {
display: block;
position: absolute;
background: var(--main-color);
}
.home .content a span:nth-child(1) {
left: 0;
bottom: 0;
width: 2px;
height: 100%;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s;
}
.home .content a:hover span:nth-child(1) {
transform: scaleY(1);
transform-origin: bottom;
transition: transform 0.5s;
}
.home .content a span:nth-child(2) {
left: 0;
bottom: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
.home .content a:hover span:nth-child(2) {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.5s;
}
.home .content a span:nth-child(3) {
right: 0;
bottom: 0;
width: 2px;
height: 100%;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a:hover span:nth-child(3) {
transform: scaleY(1);
transform-origin: bottom;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a span:nth-child(4) {
left: 0;
top: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a:hover span:nth-child(4) {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home img {
z-index: 000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.home .media-icons {
z-index: 888;
position: absolute;
right: 30px;
display: flex;
flex-direction: column;
transition: 0.5s ease;
}
.home .media-icons a {
color: #fff;
font-size: 1.6em;
transition: 0.3s ease;
}
.home .media-icons a:not(:last-child) {
margin-bottom: 20px;
}
.home .media-icons a:hover {
transform: scale(1.3);
}
.slider-navigation {
z-index: 888;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
/* transform: translateY(80px); */
/* margin-bottom: 12px; */
bottom: 5%;
left: 50%;
transform: translateX(-50%);
}
.slider-navigation .nav-btn {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
transition: 0.3s ease;
}
.slider-navigation .nav-btn:not(:last-child) {
margin-right: 20px;
}
.slider-navigation .nav-btn:hover {
transform: scale(1.2);
}
.slider-navigation .nav-btn.active {
background: var(--main-color);
}
#media (max-width: 1040px) {
section {
padding: 100px 20px;
}
.home .content {
margin: 0 20px;
}
.home .media-icons {
right: 15px;
}
.home .content h1 {
font-size: 4vw;
line-height: 60px;
}
.home .content p {
margin-bottom: 65px;
max-width: 40%;
font-size: 13px;
}
}
#media (max-width: 560px) {
.home .content {
margin: 0 20px;
}
.home .content h1 {
/* font-size: 2em; */
line-height: 60px;
}
.home .content p {
margin-bottom: 65px;
max-width: 40%;
font-size: 10px;
}
.home .content a {
max-width: 10px;
padding: 10px 25px;
}
}
I read something about !important, but it dind't help. Thank you for anyone who are willing to help an amateur like me :)
You need to add background-color and color property to the header selector not header .sticky.
As you're dynamically adding the sticky class, so at first render the colors are not actually visible.
UPDATE
Checked your codepen and you're missing the property when .sticky class is applied via JS
header.sticky .dropdown .dropbtn {
background-color: #000;
}
header.sticky .brand{
color: #000;
}
I have the following short and concise code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 20px;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1070px;
margin-left: auto;
margin-right: auto;
width: 80%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>
I want the corner of the blog card to be perfectly aligned under the corner of the iframe. The first corner of the blog card should be right under the first corner of the iframe.
Expected Output
How would I modify the css to have it output as the above picture? Adding margin-left: auto on square does not work. Any suggestions?
Make both parent div of the iframe and div having class .square of the same width to achieve this
.container1,.resume-item {
display: flex;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1,.resume-item {
display: flex;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-right: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1000px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>
So i'm making a website, and i have a sort of a slider menu from top, and when i hover over a button everything appears, but when i hover out it doesn't disappear. In my js code i had to delay the disappearance with setTimeout() because there's a small gap between the button and the menu. So if someone would know how to make it disappear while keeping the timer thing so it doesn't disappear when going from button to the menu i'd be insanely grateful. Thanks in advance. Here's the code:
var timeout;
function mouseOver(){
document.getElementById('menu-roll').style.display = 'block';
timeout = setTimeout(function(){document.getElementById('menu-roll').style.display = 'none';}, 3000);
}
function mouseOut(){
clearTimeout(timeout);
}
:root{
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper{
height: 100vh;
width: 100%;
}
#navbar{
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a{
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover{
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper{
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup{
0%{
top: 150px;
}
100%{
top: 0;
}
}
#menu-wrapper{
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img{
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video{
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll{
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll{
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a{
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover{
text-decoration: underline;
}
ul{
list-style-type: none;
}
#h1-menu-tandoor{
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#h1-menu-restaurace{
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#information-section{
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction{
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1{
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3{
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p{
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider{
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos{
position: relative;
z-index: 6;
height: 10px;
}
.first-photo{
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info{
height: 407px;
}
#services-photo{
top: 50px;
}
#media screen and (max-width: 700px){
.first-photo{
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction{
width: 60%;
margin: 0 auto;
}
#divider{
margin-bottom: 10px;
}
#services-info{
height: 800px;
}
#services-photo{
top: 470px;
position: relative;
}
}
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
I'm not sure that I understand everything but take a look at this code.
var timeout;
function mouseOver() {
document.getElementById('menu-roll').style.display = 'block';
clearTimeout(timeout);
}
function mouseOut() {
timeout = setTimeout(function() {
document.getElementById('menu-roll').style.display = 'none';
}, 1000);
}
:root {
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper {
height: 100vh;
width: 100%;
}
#navbar {
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover {
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper {
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup {
0% {
top: 150px;
}
100% {
top: 0;
}
}
#menu-wrapper {
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img {
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video {
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll {
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll {
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a {
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
}
#h1-menu-tandoor {
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#h1-menu-restaurace {
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#information-section {
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction {
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1 {
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3 {
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p {
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider {
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos {
position: relative;
z-index: 6;
height: 10px;
}
.first-photo {
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info {
height: 407px;
}
#services-photo {
top: 50px;
}
#media screen and (max-width: 700px) {
.first-photo {
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction {
width: 60%;
margin: 0 auto;
}
#divider {
margin-bottom: 10px;
}
#services-info {
height: 800px;
}
#services-photo {
top: 470px;
position: relative;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/index.css">
<link rel="shortcut icon" href="styles/favicon.ico.png" />
<title>Tandoor</title>
</head>
<body>
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
</body>
</html>