I've started coding this landing page and after I was done with the fullvp menu the section class="hero" is now not responding, when trying to edit it on chrome it actually worked. so, I went back to my source to see if there are any typos or missing symbols - didn't find none -_-, so... Need some help from the community, thank
P.S
It's probably something stupid I've done so my apologies =)
img { width: 100%; }
header {
background-color: #000;
padding: 1px;
text-align: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
#logo {
border: 5px solid #fff;
display: inline-block;
color: #fff;
padding: 5px;
}
#menu-icon {
position: fixed;
top: 0;
left: 0;
z-index: 1;
padding: 5px;
width: 50px;
background: royalblue;
color: white;
transition: .3s ease;
display: inline-block;
}
#menu-icon:hover, #menu-icon:focus {
/*background: black;*/
transition: .5s ease;
width: 100%;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 46px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color:royalblue;
}
.closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px !important;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
.hero {
background: green;
display: inline-block;
margin-top: 150px;
padding: 1px;
}
<!DOCTYPE html>
<html>
<head>
<title>Student Loan Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="norm.css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="wrap">
<section class="header">
<header>
<h1 id="logo">SAVVY STUDENT</h1>
<div id="myNav" class="overlay">
<i class="fa fa-times" aria-hidden="true"></i>
<div class="overlay-content">
Home
About
Contact
</div>
</div>
<span id="menu-icon" style="font-size:30px;cursor:pointer" onclick="openNav()"><i class="fa fa-bars" aria-hidden="true"></i></span>
</header>
</section>
<section class="hero">
<div class="hero-content">
<h2 id="hero-content-headline">GRADUATE FROM STUDENT LOANS</h2>
<p id="hero-content-content">STUDENT LOAN DEBT, RECORD BREAKING $1.5 TRILIAN. POST STUDENTS ARE TAKING ADVANTAGE OF DEBT RELIEFE. WE BELIVE THAT EVERYONE DESERVES A SECOND CHANGE. DON’T FALL BEGIND TAKE ADVANTAGE OF STUDENT LOAN FORGIVENESS. APPLY NOW AND FIND OUT HOW MUCH YOU CAN GET FORGIVEN</p>
</div>
<div class="form-wrap">
<form method="post" action="send.php">
<legend>Find out how much you can get forgiven <span class="form-tagline">Enter your details and we will get in touch</span></legend>
<fieldset class="form-fields">
<label for="user-first">First Name</label>
<input type="text" name="user_first_name" class="user-first">
<label for="user-last">Last Name</label>
<input type="text" name="user_last_name" class="user-last"><br>
<label for="user-email">Email</label>
<input type="email" name="user_email_address" class="user-email">
<label for="user-phone">Phone</label>
<input type="tel" name="user_phone_number" class="user-phone"><br>
<label for="user-address">Address</label>
<input type="text" name="user_address_street" class="user-address">
<label for="user-city">City</label>
<input type="text" name="user_address_city" class="user-acity"><br>
<label for="user-state">State</label>
<input type="text" name="user_address_state" class="user-state">
<label for="user-zip">Zip</label>
<input type="number" name="user_address_zip" class="user-zip"><br>
<button type="submit">find out now!</button>
</fieldset>
</form>
</div>
</section>
<section class="why-program">
<div class="why-program-wrap">
<h1>Why Apply to Student Loan Forgiveness Program?</h1>
<ul>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Reduce payment</li>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Consolidate loans</li>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Increase credit Score</li>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Deal with one lender</li>
</ul>
</div>
</section>
<section class="features">
<div class="feature-apply feeature">
<span><i class="fa fa-pencil" aria-hidden="true"></i></span>
<h3>Apply today</h3>
<p>Fill out the form or give us a call.</p>
</div>
<div class="feature-apply feeature">
<span><i class="fa fa-thumbs-up" aria-hidden="true"></i></span>
<h3>Approved</h3>
<p>Submit your request with 1 of our consultants and get approved in minutes.</p>
</div>
<div class="feature-apply feeature">
<span><i class="fa fa-graduation-cap" aria-hidden="true"></i></span>
<h3>Enroll</h3>
<p>To one of the programs and change your life today</p>
</div>
<div class="features-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/BeBx8UdVOCc" frameborder="0" allowfullscreen></iframe>
</div>
</section>
<section class="reviews">
<h3>What Are Clients Say...</h3>
<div class="review">
<img src="" alt="Reviewer-name" class="reviewer-photo">
<h3 class="review-name">Bob Smith</h3>
<p class="review-content">Best Company Ever</p>
</div>
</section>
<section class="how-works">
<div class="how how-1">
<h3>one stop shop</h3>
<p>We do it all for you from preparing your documentation, talking to your lender, enrolling you to the program, you don’t need to lift a finger.</p>
</div>
<div class="line"></div>
<div class="how how-2">
<h3>You are safe</h3>
<p>We are a trusted company with your information encrypted to our system where only the Department of Education has access too.</p>
</div>
<div class="line"></div>
<div class="how how-3">
<h3>Approved in 1 call</h3>
<p>In just 1 phone call our team of experts will let you know if you get approved.</p>
</div>
</section>
<section class="why-us">
<h3>Why Us</h3>
<p>[company] main priority is to help post students get the financial aid they deserve. Company has been in business for years. Professionally providing great customer service with 1 point of contact and quick response. While keeping your personal information safe and secured. Our team of consultants and underwriters strive on providing on point information on enrolling you to the program that will best benefit you. We stick by you on the full length of your program, providing you with answers to all your questions and concerns.</p>
</section>
<div class="divider"><hr></div>
<section class="articles">
<div class="article">
<img class="article-img" alt="" src="RES/HERO-2.jpg">
<h3 class="article-head">Lorem Ipsum has been</h3>
<p class="article-content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
read more
</div>
<div class="article">
<img class="article-img" alt="" src="RES/HERO-2.jpg">
<h3 class="article-head">Lorem Ipsum has been</h3>
<p class="article-content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
read more
</div>
<div class="article">
<img class="article-img" alt="" src="RES/HERO-2.jpg">
<h3 class="article-head">Lorem Ipsum has been</h3>
<p class="article-content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
read more
</div>
</section>
<footer>
<section class="contact-us">
<div class="colm-1">
<h3>Contact Us</h3>
<ul>
<li>Office: (866) 210-1337</li>
<li>Address: 2351 W 3rd St<br>Los Angeles, CA</li>
<li>Email: info#fslforgive.com</li>
</ul>
</div>
<div class="colm-2">
<form method="post" action="send.php">
<legend>Find out how much you can get forgiven <span class="form-tagline">Enter your details and we will get in touch</span></legend>
<fieldset class="form-fields">
<label for="user-first">First Name</label>
<input type="text" name="user_first_name" class="user-first">
<label for="user-last">Last Name</label>
<input type="text" name="user_last_name" class="user-last"><br>
<label for="user-email">Email</label>
<input type="email" name="user_email_address" class="user-email">
<label for="user-phone">Phone</label>
<input type="tel" name="user_phone_number" class="user-phone"><br>
<label for="user-address">Address</label>
<input type="text" name="user_address_street" class="user-address">
<label for="user-city">City</label>
<input type="text" name="user_address_city" class="user-acity"><br>
<label for="user-state">State</label>
<input type="text" name="user_address_state" class="user-state">
<label for="user-zip">Zip</label>
<input type="number" name="user_address_zip" class="user-zip"><br>
<button type="submit">find out now!</button>
</fieldset>
</form>
</div>
<div class="social">
<span><i class="fa fa-facebook-official" aria-hidden="true"></i></span>
<span><i class="fa fa-youtube-play" aria-hidden="true"></i></span>
<span><i class="fa fa-instagram" aria-hidden="true"></i></span>
<span><i class="fa fa-envelope" aria-hidden="true"></i></span>
</div>
</section>
</footer>
</div>
<script src="https://use.fontawesome.com/e4028997c7.js"></script>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>
#media screen is not closed properly
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
}/**closing bracket is missing***/
.hero {
background: green;
display: inline-block;
margin-top: 150px;
padding: 1px;
}
http://codepen.io/nagasai/pen/xORWmd
Related
I have a little problem where my web page is displaying fine on my pc screen but when i go live on my laptop or mobile phone the layout is all messed up. Does anyone know how i can fix this? Its is completely ruined in other screens and is not user friendly, but on my main computer where i was using to preview and create my website, it is basically ready.
/*PLAYER PAGE*/
.container {
padding: 40px 20px 0;
max-width: 2000px;
margin: 0 auto;
border-bottom: 2px solid rgb(105, 105, 105);
border-width: 100%;
padding-bottom: 20px;
}
h1 {
margin: 0;
text-align: center;
font-size: 50px;
overflow: hidden;
line-height: 1;
color: white;
}
h1 span {
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}
.meet-the-owner h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 25px;
font-family: "BatmanForeverAlternate";
}
.meet-the-owner-top h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 25px;
font-family: "BatmanForeverAlternate";
padding: 40px;
}
.luxxreno {
text-align: left;
position: relative;
left: 400px;
padding-top: 80px;
bottom: 150px;
}
.luxxreno img {
border-radius: 50%;
width: 600px;
padding-bottom: 10px;
position: relative;
top: 80px;
}
.meet-the-owner {
padding: 50px;
border-top: 2px solid rgb(105, 105, 105);
}
.q-l {
color: white;
display: inline-block;
flex: right;
text-align: left;
position: relative;
left: 300px;
bottom: 10px;
font-size: 21px;
}
.questions p {
padding: 10px;
position: relative;
top: 30px;
}
.luxx-name {
font-family: "BatmanForeverAlternate";
padding-bottom: 35px;
position: relative;
left: 12px;
font-size: 50px;
}
.owner {
font-family: "BatmanForeverAlternate";
position: relative;
left: 12px;
color: red;
}
.luxx-socials {
position: relative;
left: 9px;
top: 50px;
}
.luxx-socials ul li {
padding: 10px 30px;
position: relative;
top: 15px;
list-style-type: none;
display: inline-block;
right: 30px;
font-family: "BatmanForeverAlternate";
font-size: 25px;
color: #ffd700;
transition: 0.5s;
}
.luxx-socials ul li a {
text-decoration: none;
}
.luxx-socials ul a li:hover {
color: red;
}
#keyframes reveal {
0% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}
<head>
<!--
<script>
ScrollReveal({
reset: true
});
</script>
-->
<script src="https://unpkg.com/scrollreveal"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Players | LuxxMob</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#400;500;700&display=swap" rel="stylesheet" />
<script src="https://kit.fontawesome.com/360332bae9.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#200;400;700&display=swap" rel="stylesheet" />
</head>
<body>
<div class="menu-header">
<nav>
<img src="images/HD_FILE (2).png" />
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<!--END OF NAV-->
<section class="player-bios">
<div class="container">
<h1>
<span>Players</span>
</h1>
</div>
<div class="meet-the-owner-top">
<h3>Meet the Owner</h3>
</div>
<div class="luxxreno">
<img src="images/luxx.jpg">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">LUXX RENO</h2>
<h2 class="owner">OWNER</h2>
<p>Real Name: <b>Cory George</b></p>
<p>Online Name: <b>Luxx Reno</b></p>
<p>First Game Played as a Kid: <b>Duck Hunter/Super Nintendo</b></p>
<p>Game I'm Best At: <b>Fortnite</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Mimicry, so I'd be able to mimic and super power I see.</b></p>
<p>Favourite Artist of All Time: <b>Billy Raffoul</b></p>
<p>Hidden Talents: <b>Won lots of medals for swimming!</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCPqsHNuWTAbckHg4R3WAJIg" target=”_blank”>
<li>487 # YouTube</li>
</a>
<a href="https://www.instagram.com/luxxreno/?hl=en" target=”_blank”>
<li>2.6k # Instagram</li>
</a>
<a href="https://www.twitch.tv/luxxreno" target=”_blank”>
<li>3k # Twitch</li>
</a><br>
<a href="https://twitter.com/LuxxReno" target=”_blank”>
<li>2.5k # Twitter</li>
</a>
<a href="https://www.tiktok.com/#luxxxreno?lang=en&is_copy_url=1&is_from_webapp=v1" target=”_blank”>
<li>657k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Creator</h3>
</div>
<div class="luxxreno">
<img src="images/abz-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">ABZZINO</h2>
<h2 class="owner">Content Creator</h2>
<p>Real Name: <b>Abdullah Khan</b></p>
<p>Online Name: <b>Abzzino</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty</b></p>
<p>Game I'm Best At: <b>Call Of Duty (all of them)</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Flying</b></p>
<p>Hidden Talents: <b>They're hidden for a reason.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/c/Abzzino/featured" target=”_blank”>
<li>360 # YouTube</li>
</a>
<a href="https://www.instagram.com/_abzzino_/" target=”_blank”>
<li>193 # Instagram</li>
</a>
<a href="https://www.twitch.tv/abzzinok" target=”_blank”>
<li>2.6k # Twitch</li>
</a><br>
<a href="https://twitter.com/_Abzzino_" target=”_blank”>
<li>142 # Twitter</li>
</a>
<a href="https://www.tiktok.com/#abzzinoyt?lang=en" target=”_blank”>
<li>23.6k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>COMPETITIVE PLAYER</h3>
</div>
<div class="luxxreno">
<img src="images/kyran-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">KEEZO</h2>
<h2 class="owner">COMPETITIVE PLAYER</h2>
<p>Real Name: <b>Kyran Garden</b></p>
<p>Online Name: <b>KEEZO</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty 3</b></p>
<p>Game I'm Best At: <b>Warzone</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Flying</b></p>
<p>Favourite Artist of All Time: <b>Drake</b></p>
<p>Hidden Talents: <b>I'm good at football.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.twitch.tv/LKeezo" target=”_blank”>
<li>400 # Twitch</li>
</a>
<a href="https://twitter.com/KEEZZ0" target=”_blank”>
<li>1.2k # Twitter</li>
</a>
<a href="https://www.tiktok.com/#kkeezo?lang=en" target=”_blank”>
<li>1.1k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Manager</h3>
</div>
<div class="luxxreno">
<img src="images/brad-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">SPODERBRAD</h2>
<h2 class="owner">Content Manager</h2>
<p>Real Name: <b>Brad</b></p>
<p>Online Name: <b>SpoderBrad</b></p>
<p>First Game Played as a Kid: <b>Metal Gear Solid</b></p>
<p>Game I'm Best At: <b>Splitgate</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Honestly don’t want a super power just wanna be Iron Man.</b></p>
<p>Favourite Artist of All Time: <b>Drake or Eminem can’t decide</b></p>
<p>Hidden Talents: <b>Best Free Kick Taker on Twitch.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCnqgXWWmmg1F3L919lzT6aQ" target=”_blank”>
<li>353 # YouTube</li>
</a>
<a href="https://www.instagram.com/spoderbrad/?hl=en-gb" target=”_blank”>
<li>115 # Instagram</li>
</a>
<a href="https://www.twitch.tv/SpoderBrad" target=”_blank”>
<li>2.1k # Twitch</li>
</a><br>
<a href="https://twitter.com/SpoderBrad" target=”_blank”>
<li>392 # Twitter</li>
</a>
<a href="https://www.tiktok.com/#spoderbrad?lang=en" target=”_blank”>
<li>60k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
</section>
<!--FOOTER-->
<footer>
<div class="footer-headers">
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<div class="foot-logo">
<img src="images/HD_FILE (2).png" />
</div>
<div class="socials">
<i class="fab fa-tiktok"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">
<h4>© 2021 LuxxMob</h4>
<h4>Made with ❤ by #truechow</h4>
</div>
</footer>
<!--
<script>
ScrollReveal().reveal('footer', {
duration: 2000
});
</script>
<script>
ScrollReveal().reveal('.luxxreno', {
duration: 2000
});
</script>
<script>
ScrollReveal().reveal('.header');
</script>
<script>
ScrollReveal(options);
</script>
-->
</body>
This is likely because your webpage is not responsive. An easy fix is to always use percentages instead of specific pixels to position items.
eg top: 5% instead of top: 15px
I think it's because you have to use media queries to make your website responsive on all devices.
Check it out here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
Another tip is not to use only pixels as a unit of measurement, also use 'em', 'rem', vw (for the font) and '%'
Check it out here too:
https://www.w3schools.com/cssref/css_units.asp
There's a couple of random things in your css that I don't know why they're there. max-width: 2000px, why is this 2000 pixels, it would be way too much for most phones and screens (perhaps there's a reason like the player map being large, I dunno). overflow: hidden, why is there an overflow on a h1 tag. border-width: 100%, why are you setting border widths to 100%. margin: 0 auto why is there a margin auto on a 2000px wide container, it'll never be the center of anything. position: relative, why is everything relative. There's a bunch of random CSS that I don't know what it's doing or why it's there (it shouldn't be).
Along with that you shouldn't ever use pixels for fonts, it won't scale on a mobile phone so your text (and containers containing text) will get messed up. Use font-size: 100% on the html container and then use font-size: 1rem // or 1.2 or 1.4 on anything else so you scale everything according to root.
Along with that you've used pixels everywhere to define borders/tops/alignment, which will almost never work out (unless you're just lucky). You should be using flex for page layout and pixels if you want to define specific containers. You've not shown body and the main page CSS but from container I can see you've not used that. You should have:
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
}
.container {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
}
Or something similar for your page layout. You don't need any #media stuff for that because flex will work correctly across all devices.
enter image description hereenter image description hereI created a webpage by using html css and javascript. In home page, I added a pop up contact button and form, it is working but pop up window is opened at the top of page. Home page is like one page you scroll. I added the button to the footer but form is opened close to header. I want to it to open while user see the end of the page. I hope I can clear the problem.
https://github.com/ipeksaygut/website in this link there are HTML- CSS-JS files of only home page.
I am really beginner, I really do not understand the problem. Thanks for helps!
-If something need let me know to sahre to clear problem!
Window is seen as the picture but ı want to see it at the end of page I added photo of window how it is seen and where ı want to see it.
Hi Ipek Saygut!
I put together this code that will give you an idea of what was going on with your css. I have modified the .popUp class in order to fix this issue. Please be aware that you will need to read more on HTML and CSS best practices. Please have a look at this article to get you started in the amazing world of HTML and CSS, don't worry, it takes practice but you will master it soon. HTML & CSS Best Practices.
I certainly hope this code helps, have a good time coding, fellow!
let btn = document.querySelector("button");
let cont = document.querySelector(".popUp");
btn.addEventListener('click', function(){
cont.id = "show";
});
cont.addEventListener('click', function(e){
if(e.target == this){
this.id = "hidden";}
e.preventDefault;
});
body {
font-family: 'Red Hat Display', sans-serif;
}
.footer {
border-top: 5px solid #00acc8;
height: 200px;
background-color: #000;
padding: 50px;
margin: auto;
}
.container {
justify-items: left;
align-items: bottom;
z-index: 2;
padding-top: 55px;
padding-left: 18px;
}
button {
width: 140px;
height: 60px;
font-size: 16px;
font-weight: bold;
color: #2e9ca5;
border: 2px solid #2e9ca5;
border-radius: 5px;
background: white;
transition: all 0.5s ease;
cursor: pointer;
}
button:hover {
background: #2e9ca5;
color: white;
}
#show {
visibility: visible;
animation: pop 0.5s ease-in;
}
#keyframes pop {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
#hidden {
animation: out 0.5s ease-out;
}
#keyframes out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
.popUp::before {
content: "x";
font-size: 30px;
color: #8FC1C1;
position: fixed;
right: -35px;
top: 4px;
}
.popUp {
display: block;
margin-top: 5% !important;
background: rgba(0, 0, 0, 0);
width: 50%;
height: 100%;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
transform: translate(-50%, -50%);
justify-items: center;
align-items: center;
visibility: hidden;
}
form {
display: flex;
flex-direction: column;
width:85%;
margin:0 auto;
grid-template-columns: 150px;
grid-template-rows: repeat(10, 30px);
grid-row-gap: 10px;
background: white;
padding: 30px;
border-radius: 5px;
border: 1px solid #2e9ca5;
}
input,
textarea {
border-radius: 3px;
border: 1px solid #f2f2f2;
padding: 0 6px;
}
input[type=text],
input[type=email] {
height: 30px;
}
input[type=textarea] {}
input[type=submit] {
height: 30px;
background: #2e9ca5;
color: white;
font-weight: bold;
transition: background 0.3s ease;
border: 0;
border-radius: 5px;
}
input[type=submit]:hover {
background: white;
color: #2e9ca5;
}
.remove {
justify-content: end;
align-items: end;
}
label {
color: #b3b3b3;
}
<!DOCTYPE html>
<html>
<head>
<title>Discover To Istanbul</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto&display=swap'>
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght#400;900;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu-bar">
<div class="menu-banner">istanbul</div>
<div class="menu-button">
<ul>
<li>HOME</li>
<li>DESTINATIONS</li>
<li>GALLERY</li>
</ul>
</div>
</div>
<script src="js/main.js" type="text/javascript" defer></script>
<div class="main-header">
<center>
<div class="header-tab">
<h1>İSTANBUL</h1>
<div class="header-alt">Let's Go On The Adventure with us !</div>
<div class="header-alt2"> EXPLORE ISTANBUL </div>
</div>
<div class="header-tab-video">
<header>
<video autoplay="" style="filter:contrast(1.099) brightness(0.92)" preload="none" muted="" loop="" width="780" height="560">
<source src="image/video.mp4" type="video/mp4">
</video>
<div id="overlay">
<p>Istanbul is <span class="typed-text" ></span></p>
</div>
</header>
</div>
</center>
</div>
<a name="anc2">
<div name="#anc2" class="places" id="sacred">
</a>
<h1>sacred places</h1>
<h5>explore most impressive sacred places with us.</h5>
<h6> discover more</h6>
</div>
<div class="places" id="palaces">
<h1 id="flt-rght"> palaces</h1>
<h5 id="flt-rght">explore most attractive palaces with us.</h5>
<a href="html/palaces/palaces.html">
<h6>discover more</h6>
</a>
</div>
<div class= "places" id="oldbuildings">
<h1>old buildings</h1>
<h5>Explore breathtaking and beautiful buildings with us.</h5>
<a href="html/oldbuildings/oldbuildings.html">
<h6>discover more</h6>
</a>
</div>
<div class="galeri">
<h1><a name="anc3" style="text-decoration:none;">#discoverTurkey</a></h1>
<h2>VIDEO <font color=red>|</font> PHOTO </h2>
<div class="galeri-alt">
<div class="galeri-ic" id="galeri1"></div>
<div class="galeri-ic" id="galeri2"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri3"></div>
<div class="galeri-ic" id="galeri4"></div>
<div class="galeri-ic" id="galeri5"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri6"></div>
</div>
</div>
<div class="kayangörseller"
<center><p style="font-size:60px""font-family:Calluna;">Social Media</p></center>
<div class="images">
<marquee direction="right" scrollamount="7">
<a href="https://www.instagram.com/p/CI3iV5yr416/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/galata.jpg" style="width:400px;height:400px;"> </a>
<a href="https://www.instagram.com/p/CI3huz5LGDw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/c.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3h9xCLXPy/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/ayasofya.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iMZXLZy9/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/fenerrum.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iaZlLn-N/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/kapalicarsi.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iikbrmdw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/sultanahmet.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3isMKLXrS/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/taksimanit.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i9RALySO/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/yerebatan.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3xiRiryIn/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/a.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i1EWrZQr/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/t.jpg" style="width:400px;height:400px;">
</marquee>
</div>
</div>
<div class="map">
<center>
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1D66DY_D1-yifqdWfN4_k4mrj_S_JukO6" width="640" height="480" ></iframe>
</center>
</div>
<footer>
<div class="footer">
<div class="social">
<img src="image/instagram.png"><img src="image/youtube.png"><img src="image/twitter.png"><img src="image/facebook.png">
<div class="container">
<button>Contact Us</button>
</div>
<div class="popUp">
<form>
<label for="fn">First Name</label>
<input type="text" name="fn">
<label for="ln">Last Name</label>
<input type="text" name="ln">
<label for="email">Email</label>
<input type="email" name="email">
<label for="notes">Comments</label>
<textarea name="notes" rows="5" cols="5"></textarea>
<input id='submit' type="submit" value="Submit">
<p style="color:#b3b3b3;"> Pop-Up Facts, Recommendations,Interesting Routes... More For Istanbul! </p>
</form>
</div>
</div>
<div class="social" style="width:300px;">
<p>This website prepared for web design course by Kadir Has University students.</p>
<p>Ayça Çiçekdağ</p>
<p>Emre Karağaç</p>
<p>Hilal Pelin Akyüz</p>
<p>İpek Saygut</p>
<p>Sude Arslan</p>
</div>
<div class="social" style="width:180px;" id="logoalt"></div>
</div>
</footer>
<div class="kayanyazi">
<marquee direction=right bgColor="#2e9ca5" text-color="white">FIND ISTANBUL-EXPLORE ISTANBUL WITH US ! | by Ayça Çiçekdağ , Emre Karağaç,Hilal Pelin Akyüz
İpek Saygut,Sude Arslan
</marquee>
</div>
</body>
</html>
I am a beginner i am trying to make a one page simple html website.i want to change color of navbar to saffron(#FF9933) and footer to green but i am facing problem so whenever i change navbar color to some color the same color applies to the footer also any idea? here is the code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Netzach’s</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style> body { font: 400 15px/1.8 Lato, sans-serif; color: ##ff7f00; } h3, h4 { margin: 10px 0 30px 0; letter-spacing: 10px; font-size: 20px; color: #228b22; }
.left{text-align: left;}
.container { padding: 80px 120px; }
.person { border: 10px solid transparent; margin-bottom: 25px; width: 80%; height: 80%; opacity: 0.7; }
.person:hover { border-color: #228b22; }
.carousel-inner img { -webkit-filter: grayscale(90%); filter: grayscale(90%); /* make all photos black and white */ width: 100%; /* Set width to 100% */ margin: auto; }
.carousel-caption h3 { color: #ff7f00!important; } #media (max-width: 600px) { .carousel-caption { display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */ } }
.bg-1 { background: #2d2d30; color: #228b22; } .bg-1 h3 {color: #ff7f00;} .bg-1 p {font-style: italic;} .list-group-item:first-child { border-top-right-radius: 0; border-top-left-radius: 0; }
.list-group-item:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.thumbnail { padding: 0 0 15px 0; border: none; border-radius: 0; } .thumbnail p { margin-top: 15px; color: #555; }
.btn { padding: 10px 20px; background-color: #333; color: #f1f1f1; border-radius: 0; transition: .2s; }
.btn:hover, .btn:focus { border: 1px solid #333; background-color: #fff; color: #000; }
.modal-header, h4, .close { background-color: #228b22; color: #fff !important; text-align: center; font-size: 30px; } .modal-header, .modal-body { padding: 40px 50px; }
.nav-tabs li a { color: #ff7f00; } #googleMap { width: 100%; height: 400px; -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.navbar { font-family: Montserrat, sans-serif; margin-bottom: 0; background-color: #FF9933; border: 0; font-size: 11px !important; letter-spacing: 4px; opacity: 0.9; }
.navbar li a, .navbar .navbar-brand { color: #ff7f00 !important; } .navbar-nav li a:hover { color: #fff !important; }
.navbar-nav li.active a { color: #fff !important; background-color: #ff7f00 !important; } .navbar-default .navbar-toggle { border-color: transparent; }
.open .dropdown-toggle { color: #fff; background-color: #ff7f00 !important; } .dropdown-menu li a { color: #000 !important; }
.dropdown-menu li a:hover { background-color: red !important; }
footer { color: black; padding: 32px; }
footer a { color: #228b22; }
footer a:hover { color: #777; text-decoration: none; }
.form-control { border-radius: 0; } textarea { resize: none; }
td{border-style: groove;}
body{
background-color: white;
}
</style>
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine0/style.css" />
<!--script type="text/javascript" src="engine0/jquery.js"></script--> <!-- End WOWSlider.com HEAD section -->
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#myPage"><img src="" alt="Logo"></img></a> </div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>ABOUT US</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#Services">
SERVICES <!--<span class="caret"></span>-->
</a>
<!--<ul class="dropdown-menu"> <li>Electoral</li> <li>Media P.R</li> <li>Legal Consultancy</li> <li>Training and Development</li> <li>Advertisment</li> </ul> -->
<li>ASSIGNMENTS</li>
<li>CAREER</li>
<li>CONTACT</li>
</li>
<li><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</nav>
<!--
<div id="wowslider-container0"> <div class="ws_images"><ul>
<li><img src="data0/images/slide1.jpg" alt="SLIDE" title="SLIDE" id="wows0_0"/></li>
<li><img src="data0/images/slide2.png" alt="http://wowslider.com/" title="SLIDE" id="wows0_1"/></li>
<li><img src="data0/images/slide3.jpg" alt="slide" title="slide" id="wows0_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<span><img src="data0/tooltips/slide1.jpg" alt="SLIDE"/>1</span>
<span><img src="data0/tooltips/slide2.png" alt="SLIDE"/>2</span>
<span><img src="data0/tooltips/slide3.jpg" alt="slide"/>3</span>
</div></div><div class="ws_script" style="position:absolute;left:-99%">responsive slider by WOWSlider.com v8.7</div> <div class="ws_shadow"></div> </div> --> <script type="text/javascript" src="engine0/wowslider.js"></script> <script type="text/javascript" src="engine0/script.js"></script> <!-- End WOWSlider.com BODY section --> <!-- Container (The Band Section) -->
<div id="band" class="container text-center">
<h3>About Us</h3>
<p class="left">SOME TEXT
</p>
<br> <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group"> <label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label> <input type="number" class="form-control" id="psw" placeholder="How many?"> </div>
<div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label> <input type="text" class="form-control" id="usrname" placeholder="Enter email"> </div>
<button type="submit" class="btn btn-block">Pay <span class="glyphicon glyphicon-ok"></span> </button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"> <span class="glyphicon glyphicon-remove"></span> Cancel </button>
<p>Need help?</p>
</div>
</div>
</div>
</div>
</div>
<div id="Services" class="container text-center">
<h3>Services</h3>
<div class="row">
<p>
<div class="col-lg-12 col-md-12 col-sm-12">
<h3>Psephological Consultancy:</h3>
We provide solutions at every level at your doorstep. Some of them are:
<table style="border-style: dotted;" class="col-lg-12 col-md-12 col-sm-12">
<tr>
<td>Political surveys</td>
<td>Constituency profiling</td>
</tr>
<tr>
<td>Candidate positioning</td>
<td>Political party position</td>
</tr>
<tr>
<td>Opinion polls</td>
<td>Pre -Poll</td>
</tr>
<tr>
<td>Exit Poll</td>
<td>Tracking Poll</td>
</tr>
<tr>
<td>Election campaign management</td>
<td>Increase voter awareness and support</td>
</tr>
<tr>
<td>Public opinion creation</td>
<td>Bring the voter to booth</td>
</tr>
<tr>
<td>Campaign support </td>
<td>Media and social media support</td>
</tr>
</table>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<br/>
<br/>
<p>
<h3>Market Research</h3>
The skills required for stakeholder research are easily transferable towards addressing client requirements such as market assessment, preparation of concept notes, demand quantification, customer feedback and brand image building. The services are not limited by geography or the industry type. Given our experience in various elections and ready access to top consultants within India and abroad. We will be glad to offer you customized solutions for your market research.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<br/>
<br/>
<p>
<h3>Media Consultancy</h3>
From providing content outsourcing to training and set up of niche programming streams such as election programming to full fledged turnkey solutions tailored for print and electronic media. Netzach’s is your one stop shop for your consultancy needs. Not only have we successfully operated in diverse media environments such as News Agency, TV Channels, Newspapers, Magazines and Internet media, we have also delivered value to our clients cutting across borders. We are adept at providing localized and customized consultancy suited to the milieu in which our clients operate.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Socio-Economic Research</h3>
Netzach’s is proud to have partnered with academic institutions, NGOs, Independent Researchers and various Industry bodies in production of socio-economic data and research reports. Furthering the frontiers of human well being was one of the founding motives of our organization and we are proud to have done justice to the same. We encourage individuals and bodies engaged in socio-economic research to work with us. our clients cutting across borders. We are adept at providing localized and customized consultancy suited to the milieu in which our clients operate.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Qualitative Consultancy</h3>
Ever felt the need to talk to someone who understands the local polity and culture beyond what the numbers convey? Our team of highly trained analysts and consultants who have years of experience under their belt would be glad to offer you some advice. Not only do we have access to best political analysts in the business we also have a enviable network of consultants who are ready to provide niche consultancy services to our clients.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Public Private Partnerships</h3>
Our experience with democratic processes and formidable skill set in determining policy direction empower us to be an active partner of the host government in public-private partnership projects. Sectors such as Education, Resource mapping, Governance Surveys, Independent Evaluation and Policy assessment are some of the streams that have witnessed active Netzach’s participation or demonstrated deploy-able capability to execute the projects satisfactorily.
</p>
</div>
</div>
</div>
<div id="Assignments" class="container text-center">
<h3>Assignments</h3>
<div class="col-lg-12 col-md-12 col-sm-12 text-center">
<h3>Recent Assignments</h3>
<p></p>
</div>
<br/>
<div class="col-lg-6 col-md-6 col-sm-6 text-center">
<h3>Ongoing project</h3>
<p class="center"></p>
</div>
</div>
<div id="Career" class="container text-center">
<h3>Career</h3>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Interns</h3>
Netzach’s offers college and university students a snapshot of professional life that awaits them via a limited number of internships. The selection criteria for the internships are very
stringent and we advise the students to generate a very high quality cover letter and a CV that delineates their extra-curricular and curricular activities to better help us evaluate their merits. Email us to: netzachsrnd#outlook.com
Please write "Internship" in the subject line of the mail.
We offer Opportunities for professional growth and development
Platform to express freely and multi tasking
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Competitive package</h3>
Flexibility and learning while working experience.
</p>
</div>
</p>
<br>
</div>
<!-- Container (Contact Section) -->
<div id="contact" class="container">
<h3 class="text-center">Contact</h3>
<div class="row">
     Please enter your details in the form below or email to netzachsrnd#outlook.com. We will contact you shortly.
<br/>
<br/>
<div class="col-md-4">
<p>Drop a Message here</p>
<p><span class="glyphicon glyphicon-map-marker"></span>Mumbai, India</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: 000000000</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email: netzachsrnd#outlook.com</p>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-sm-6 form-group"> <input class="form-control" id="name" name="name" placeholder="Name" type="text" required> </div>
<div class="col-sm-6 form-group"> <input class="form-control" id="email" name="email" placeholder="Email" type="email" required> </div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
<br>
<div class="row">
<div class="col-md-12 form-group"> <button class="btn pull-right" type="submit">Send</button> </div>
</div>
</div>
</div>
</div>
<br><br><br><br>
<!--Fixed Footer-->
<footer>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="navbar-text pull-left">
<p> © 2016 Netzach`s.</p>
</div>
</div>
<br><br> </footer>
<script>$(document).ready(function(){ // Initialize Tooltip $('[data-toggle="tooltip"]').tooltip(); // Add smooth scrolling to all links in navbar + footer link $(".navbar a, footer a[href='#myPage']").on('click', function(event) { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 900, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); });})</script>
</body>
</html>
There is an issue in your css.
Replace
.navbar-inverse {
background-color: #222;
border-color: #080808; }
with
.navbar.navbar-inverse {
background-color: #222;
border-color: #080808; }
your footer also has the navbar class;
so you have to define it like that:
footer .navbar {
background-color: green;
}
I have set up 3 divs, one on the left and two on the right on top of each other.
I want the 'onclick' to make the div on the left slide out from the left
and one of divs on the right-top to go up and the one on the right-bottom to slide in from the right.
After that animations are finished I want the next time I press the 'onclick' button to do the same to the next divs (with different content) to come in from the points the previous divs came.
I've managed to change the background color of the div's but not the content and animations.
This is what I've gotten so far.
$(document).ready(function(){
$('#next').click(function(){
if ($('.active').next('.case').length) {
$('.active').removeClass('active')
.next('.case')
.addClass('active');
}
});
$('#prev').click(function(){
if ($('.active').prev('.case').length) {
$('.active').removeClass('active')
.prev('.case')
.addClass('active');
}
});
});
html,body,section{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#next,#prev{
position:fixed;
z-index:101;
}
#next{
right:0px;
}
#prev{
left:0px;
}
#t1{
float:left;
height:100%;
width:43%;
background-color: #c92639;
position: absolute;
left: 0px;
}
#logo >h1{
color: white;
}
#logo >h3{
width: 58%;
margin: 0 auto;
}
#t2,#t3{
height: 50%;
width: 57%;
margin-left: auto;
margin-right: 0px;
}
#t3{
position: absolute;
right: 0px;
bottom: 0px;
background-color: #c8c8c8;
}
#t2{
background-color: white;
position: absolute;
right: 0px;
top: 0px;
}
#t2 >img{
margin-top: 11%;
}
#logo{
margin-top: 40%;
}
#t3>ul{
display: inline-table;
width: 80%;
margin: 0 auto;
margin-top: 50px;
}
#t3>ul>li{
display: inline-table;
width: 33%;
}
#t3>ul>li>div>img{
width: 53%;
margin-top: 25%;
}
#home{
display: none !important;
}
#circle1,#circle2,#circle3{
border-radius: 128px;
width: 150px;
height: 150px;
margin: 0 auto;
box-shadow: 10px 10px 5px #888888;
}
#circle1{
background: #32325f;
}
#circle2{
background: white;
}
#circle3{
background: #ef9d34;
}
.active{
display:initial !important;
z-index:100;
}
#case{
display:none;
position:absolute;
top:0px;
height: 100%;
width: 100%;
z-index:99;
}
.stern1{
background:blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="next">
<h1>next</h1>
</div>
<div id="prev">
<h1>prev</h1>
</div>
<div id="case" class="case active">
<div id="t1" class="tcee1">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="case tcee2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tcee3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
<div id="case" class="case">
<div id="t1" class="tstern1" style="background:blue;">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="tstern2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tstern3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
<div id="case" class="case">
<div id="t1" class="tstern1" style="background:black;">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="tstern2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tstern3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
have a look at this simple tutorial, its worked fine for me and you can add / improve it as well.
simple javascript slideshow
I have create different product via for loop so the input hidden field have same class but the value is different in it so what I want is to get the different value of the same class when I click on send enquiry button. You can understand after watching this jsfiddle link. Sorry for the English in advance.
Hidden input is sibling to the clicked element either you can get it using siblings() or next() ( next() can be use since it's a sibling which is immediately after the element )
var pro_nm = $(this).siblings('.proname').val();
$('.send-enq a').click(function(s) {
var pro_nm = $(this).parent().find('.proname').val();
alert(pro_nm);
});
.col-sm-4 {
width: 33.33333333%;
}
.single-product {
position: relative;
height: auto;
margin-bottom: 30px;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px #dddddd;
transition: 0.7s all ease;
}
.single-product figure {
position: relative;
margin: 0;
padding: 1px;
width: 100%;
height: 200px;
border-bottom: 1px solid #dddddd;
}
.single-product figure img {
width: 100%;
height: 100%;
}
.read-more {
position: absolute;
top: 50px;
}
.send-enq {
position: absolute;
top: 50px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="Wildcraft" class="proname">
</div>
</figcaption>
</figure>
<div class="col-xs-12 nopadding">
<span class="col-xs-8">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
</span>
<strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
</div>
</div>
<!-- end .single-product -->
</div>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
</div>
or get the parent using parent() and find the element inside
var pro_nm = $(this).parent().find('.proname').val();
$('.send-enq a').click(function(s) {
var pro_nm = $(this).siblings('.proname').val();
// or
// var pro_nm = $(this).next().val();
alert(pro_nm);
});
.col-sm-4 {
width: 33.33333333%;
}
.single-product {
position: relative;
height: auto;
margin-bottom: 30px;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px #dddddd;
transition: 0.7s all ease;
}
.single-product figure {
position: relative;
margin: 0;
padding: 1px;
width: 100%;
height: 200px;
border-bottom: 1px solid #dddddd;
}
.single-product figure img {
width: 100%;
height: 100%;
}
.read-more {
position: absolute;
top: 50px;
}
.send-enq {
position: absolute;
top: 50px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="Wildcraft" class="proname">
</div>
</figcaption>
</figure>
<div class="col-xs-12 nopadding">
<span class="col-xs-8">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
</span>
<strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
</div>
</div>
<!-- end .single-product -->
</div>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
</div>
Just try this:
Fiddle: http://jsfiddle.net/kjoLyf9d/
just replace $('.send-enq') with $(this) and replace find() with next() because it refer to anchortag
$('.send-enq a').click(function(s){
var pro_nm = $(this).next('.proname').val(); // just replace $('.send-enq') with $(this) and replace find() with next() because it refer to anchortag
alert(pro_nm);
});
Since jQuery uses CSS selectors you could technically do something like
$('#proimg:nth-of-type(2)')
in order to select the second #proimg element, but having more than one element with the same id is just bad practice.
Other, better options is having them have the same class (for style purposes) and give each one of them a different id, you just have to write in something like "product1","product2"... with the loop you already have
Your jQuery code should be replaced with class selector.
$('.send-enq a').click(function(s){
var pro_nm = $(this).next('.proname').val();
console.log("test",pro_nm);
});