folks!
Me might be stupid, but i cant get working video popUp box.
Okay, let's start from beginning. I have 3D style image carousel gallery with button and title in it. I have edited this (important) - "button" to tens of times to get it working, but still no results. It feels like the current 3D CSS, JQuery, Javascript and HTML image slider gallery doesn't work together with Video popUp box. I`m not sure, but it feels like. The working popUp video sample (demo) is here and I would like it to get this done combined with my 3D carousel(slider) image gallery. When I put few script lines from working sample to the gallery page i got no response from the script lines. Like the 3D gallery blocked the popUp video box and it does not show up.
My goal : I want to get popUp video box over the 3D image gallery slider.
Problem : PopUp box doesn't respond (not working), it is not displayed over the 3D gallery slider, after button (Watch movie) click.
Here it is the full code of 3D carousel image gallery and working popUp video box. To make it easier for you i put all the source links for this script sample, so you can just create your own index.html file with this script.
<html>
<head>
<meta charset="UTF-8">
<title>3D Smooth Carousel - Slider</title>
<link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel="stylesheet" href="https://kinobalss.lv/3d/css/style.css">
<style type="text/css">
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.popuptext {
display: none;
}
.mfp-hide {
display: none !important;
}
.button {
padding: 20px 40px;
border-color: #f3f3f3;
font-size: 17px;
font-size: 1.7rem;
font-family: "museo-sans", Arial, Verdana;
font-weight: 500;
margin-top: 40px;
display: inline-block;
}
.button {
border: 2px solid #fcf;
color: #000;
text-transform: uppercase;
transition: all 0.15s ease-in-out;
}
.button .fa {
margin-left: 20px;
}
.button:hover {
background-color: #07d;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
}
.content {
text-align: center;
}
</style>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
$('#videoLink')
.magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
})
}
//]]></script>
</head>
<body>
<div class="slider-container" id="slider">
<div class="slider-content">
<div class="slider-single">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img1.png" alt="1" />
<a class="slider-single-download" href="#videoStory" id="videoLink">Watch movie <i class="fa fa-play-circle" aria-hidden="true"></i></a>
<div id="videoStory" class="mfp-hide" style="max-width: 75%; margin: 0 auto;"><iframe width="853" height="480" src="https://www.kinobalss.lv/media/tvantena.mp4" frameborder="0" allowfullscreen=""></iframe>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>311,247</p>
</a>
</div>
<!--- Down below is only other 3D carousel image slider script lines. Those are not immportant. I`m working on this the first image from slider gallery, sample Above. Rest of these lines are because of full page script. //-->
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img2.png" alt="2" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-play-circle"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img3.png" alt="3" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img1.png" alt="4" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img2.png" alt="5" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img3.png" alt="6" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
</div>
<a class="slider-left" href="javascript:void(0);"><i class="fa fa-arrow-left"></i></a>
<a class="slider-right" href="javascript:void(0);"><i class="fa fa-arrow-right"></i></a>
</div>
<script src="https://kinobalss.lv/3d/js/index.js"></script>
</body>
</html>
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'm running into a small problem.
I want to display 3 houses and when you hover over them with your mouse it displays tooltip text. This is what I got so far. It runs fine as you can see, but when adding a style sheet it is interfering and deleting the houses and the tooltip text :
<!DOCTYPE html>
<html>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 110%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.linkhome {
display: inline-block;
font-size: 2.25rem;
padding-left: 10px;
padding-right: 10px;
}
.linkhome :hover {
color:#23739b;
transition: color 0.3s ease-in-out;
}
.links {
}
</style>
<body>
<h2>Bottom Tooltip w/ Top Arrow</h2>
<div class="links">
<div class="tooltip"><div class="linkhome">
<a href="https://bitcoin.org/" target="_blank" title="Official website">
<i class="fas fa-home"></i>
</a>
</div>
<span class="tooltiptext">Homepage</span>
</div>
<div class="tooltip"><div class="linkhome">
<a href="https://bitcoin.org/" target="_blank" title="Official website">
<i class="fas fa-home"></i>
</a>
</div>
<span class="tooltiptext">Tooltip text</span>
</div>
<div class="tooltip"><div class="linkhome">
<a href="https://bitcoin.org/" target="_blank" title="Official website">
<i class="fas fa-home"></i>
</a>
</div>
<span class="tooltiptext">Tooltip text</span>
</div>
</div>
</body>
</html>
But when I add this in the head-tag:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
crossorigin="anonymous">
The houses with the toolbelt disapears, Is there any reason to fix this problem?
Thanks for reading this post, I hope some can help me or give me a suggestion.
I would suggest you please use bootstrap4 tooltip
Please try below solution.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<body>
<h2>Bottom Tooltip w/ Top Arrow</h2>
<a href="https://bitcoin.org/" target="_blank" data-placement="bottom" data-toggle="tooltip" title="Official website">
<i class="fas fa-home"></i>
</a>
<a href="https://bitcoin.org/" target="_blank" data-placement="bottom" data-toggle="tooltip" title="Official website">
<i class="fas fa-home"></i>
</a>
<a href="https://bitcoin.org/" target="_blank" data-placement="bottom" data-toggle="tooltip" title="Official website">
<i class="fas fa-home"></i>
</a>
</body>
</html>
Hi guys looking for some assistance as the heat appears to be melting my brain. I'm having a stupid problem and in once of those situations where i should probably take a break and come back to this but hey.
Basically all i want to do is I add/removeClasses when the user clicks on the primary About Me button and then close with the .close class button.
For some reason I just can't see what I've dont wrong lol. I know I need jquery for this to add/removeClass. I also know I need to setup a new class to add the active state of the overlay and set a width to 100%. I'm just not having much joy at the moment. I have it working fine on hover but that isnt adequate for mobile so I need an onClick event for this. Came up with this so far. I know im close, any help would be appreciated. Thanks in advance
Jquery Code
//open on click
$(".slideIn").click(function(){
$(".overlay").addClass('.overlay-active');
});
//close on x button click
$(".close").click(function(){
$(".overlay").removeClass('.overlay-active');
});
HTML CODE
<section class="intro" role="region">
<div class="split-screen row">
<div class="col-sm-12 col-lg-6 left">
<a class="btn-btn-primary slideIn" style="color:#fff;" title="link to landing page task" href="#"><h2>About Me</h2></a>
<div class="overlay">
<div class="text">
<figure class="col-lg-4"><img class="img-responsive" src="img/nick_avatar.png" ></figure>
<div class="col-lg-8">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3>Nick</h3>
<p>some text| some text | some text</p>
<q>a bit more text for us to read here, why not</q>
<br/><br/>
<h3>Lets Connect</h3>
<div class="social row">
<i class="fa fa-phone" aria-hidden="true"></i></li>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a target="_blank" href="#" alt="Connect With Me On Twitter" title="Connect With Me On Twitter" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a>
<a target="_blank" href="#" alt="Connect With Me On LinkedIn" title="Connect With Me On LinkedIn" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a>
<a target="_blank href="#" alt="Connect With Me On CodePen" title="Connect With Me On CodePen" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-codepen fa-lg" aria-hidden="true"></i></a>
<a target="_blank" href="#" alt="Connect With Me On GitHub" title="Connect With Me On GitHub" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6 right">
<a class="btn-btn-primary" title="link to landing page task" href="#"><h2>To The Task</h2></a>
</div>
</div>
</section>
CSS CODE
html{
height:100%
}
body{
height:100%;
}
.intro{
height:100%
}
.split-screen{height:100%;}
.left{
position: relative;
display : flex;
justify-content : center;
align-items : center;
background-color:#009dcc;
height : 100%;
color : #FFF;
}
.right{
display : flex;
justify-content : center;
align-items : center;
background-color:#FFF;
height : 100%;
color : #000000;
}
#media (max-width: 1200px) {
.left{
height:50%
}
.right{
height:50%
}
}
.fa{margin:15px;}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 0;
height: 100%;
background-color: #008CBA;
overflow: hidden;
transition: .5s ease;
}
.overlay-active {
width: 100%;
}
.fa{color:#ffffff;}
.fa:hover{color:#fac600;}
.text {
position: absolute;
top: 50%;
left: 50%;
width:84%;
height:50%;
white-space: nowrap;
color: white;
font-size: 20px;
overflow: hidden;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
figure{padding:10px;}
figure img{
border:3px solid #fff;
border-radius:50%;
}
.social{border-top: 2px solid #fff;}
#media all and (max-width: 768px) {
figure{display:none;}
.text{padding:5px; height:67%;}
}
#media all and (max-width: 468px) {
p,q{font-size:12px;}
}
In your functions, remove the . from the class name in addClass() and removeClass(). With it you're actually adding a class called .overlay-active which includes the ..
Also, worth noting, you do not need jQuery to add or remove a class. Remember, jQuery is just javascript.
Welp... I'm stuck... again...
(FYI This is my first ever website that I am coding myself (not a template) so don't assume that I know anything.)
I am in the process of making my homepage more mobile / smaller screen sizes freindly. One of the biggest problems is that my navbar is too large on mobile and makes it so that in order to see the full navbar you have to scroll to the right, and this really breaks the website aesthetically. I have tried my best to implement things like flexnav into my website but I haven't been able to succeed in making it:
A. Be a Slide-Out / Push-Out menu on mobile which is triggered by a hamburger menu (which is preferably animated like style 2 in this tutorial: http://callmenick.com/post/animating-css-only-hamburger-menu-icons)
B. Have a TRANSPARENT background for both the hamburger menu and the navbar.
B1. Keep my navbar's color-scheme
C. Switch from the full nav-bar to the hamburger menu when the screen is less than 1200 px wide.
I know that I am asking a lot, but hopefully someone will be able to help me. As I am submitting my code in JSBin it would be really helpful If you could do the same (or if you prefer Codepen or JSFiddle or whatever). And I am sure that this stylish approach to a navbar which adapts to screen size would be appreciated by many people who find themselves in the same situation I do. Also, sorry for the messy code.
JSFBin: http://jsbin.com/jefosiweci/edit?html,css,js,output
Code:
<meta name="robots" content="noindex">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Lor emIp sumDo lorSita</title>
<link rel="stylesheet" href="CSS/lightbox.min.css">
<script src="https://use.typekit.net/pzl7njn.js"></script>
<link href="CSS/flexnav.css" rel="stylesheet" type="text/css" / >
</script>
<script>
try {
Typekit.load({
async: false
});
} catch (e) {}
</script>
<script src="JS/wow.min.js"></script>
<script>
new WOW().init();
</script>
<style id="jsbin-css">
/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/
.clearfix:after {
display: block;
clear: both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width: 100%;
background: #DAE6EB;
margin: 0px auto
}
.menu {
width: 1200px;
margin: 0px;
margin-bottom: -55px;
opacity: 5;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'industry';
font-size: 18px;
}
.menu a {
transition: all linear 0.15s;
color: #98a1a4;
font-size: 18px;
}
.menu li:hover > a,
.menu li:active > a,
.menu .current-item > a {
text-decoration: none;
color: #414546;
font-size: 18px;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 18px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
}
.menu > ul > li:hover > a,
.menu > ul > li:active > a,
.menu > ul > .current-item > a {
background: #98a1a4;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu,
.menu li:active {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
background: #98a1a4B;
text-align: left;
}
.sub-menu li {
display: block;
font-size: 18px;
}
.sub-menu li a {
padding: 10px 10px;
display: block;
font-size: 18px;
}
.sub-menu li a:hover,
.sub-menu li a:active,
.sub-menu .current-item a {
background: #98a1a4;
}
/*Jumbotron. Ignore*/
.jumbotron {
background-image: url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
background-repeat: no-repeat;
background-position: center top;
margin-top: 0px;
margin-bottom: -0px;
}
.jumbotron .container {
position: relative;
left: auto;
right: auto;
height: 100vh;
width: 100vw;
padding: 100px 0;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 84px;
font-family: "industry", sans-serif;
font-style: normal;
font-weight: 900;
text-shadow: 3px 3px #000;
}
.jumbotron p {
font-size: 24px;
font-family: "industry", sans-serif;
font-style: italic;
font-weight: 1000;
color: #f7f7f7;
}
</style>
</head>
<section id="Top">
</section>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix" data-breakpoint="1200">
<li class="current-item wow fadeInDown"><i class="fa fa-home fa"></i> Lore</li>
<li class="wow fadeInDown delay05"><i class="fa fa-user fa"></i> mIpsu mD</li>
<li class="wow fadeInDown delay05"><i class="fa fa-map fa"></i> olorS</li>
<li class="wow fadeInDown delay15"><i class="fa fa-bolt fa"></i> itAmet.L</li>
<li class="wow fadeInDown delay2"><i class="fa fa-paint-brush fa"></i> or emIps</li>
<li class="wow fadeInDown delay25"><i class="fa fa-envelope fa"></i> umDolor</li>
<li class="wow fadeInDown delay3"><i class="fa fa-pencil fa"></i> Sita</li>
</ul>
</nav>
</div>
<div class="jumbotron">
<div class="container">
<h1 class="wow fadeInLeft Big">Lor emIp sumDo lorSitA</h1>
<p class="wow fadeInRight delay1">metLorem Ip sumDo lorSitAm.</p>
<div class="container">
<ul class="actions">
<li class="wow fadeInUp Big delay2"><i class="fa fa-chevron-down fa"></i></li>
</ul>
</div>
</div>
</div>
I see that you are already using Bootstrap. Bootstrap makes this very easy for you to do as they have it built in already you just need to use their structure. Below I have put in their navbar structure into your existing code. I have taken out the menu css that you had and added just a couple of lines of css to get you started. You can mess with the css and change it to your liking but it should look almost identical to the setup that you had. In this code the nav will have a class of navbar-default which I have given a background of none and a position of absolute top to keep it at the top of the page and a width of 100%. Inside of it is a navbar-header and a navbar-collapse. In the navbar-header is your menu-hamburger which bootstrap has already styled and given javascript to open at a max-width of 767px. Then the navbar-collapse is where you have your links which I have given a media query style background of transparent black. So when you get to the 767 px it will be hidden until you click on the hamburger. This is all built into Bootstraps framework making it very easy for developers to get started on their sites. I hope this helps. Here is your revised code you should be able to just copy and paste this as is:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Lor emIp sumDo lorSita</title>
<link rel="stylesheet" href="CSS/lightbox.min.css">
<script src="https://use.typekit.net/pzl7njn.js"></script>
<link href="CSS/flexnav.css" rel="stylesheet" type="text/css" / >
</script>
<script>
try {
Typekit.load({
async: false
});
} catch (e) {}
</script>
<script src="JS/wow.min.js"></script>
<script>
new WOW().init();
</script>
<style id="jsbin-css">
/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/
.clearfix:after {
display: block;
clear: both;
}
.navbar-default {
background:none;
margin:0;
position:absolute;
top:0;
left:0;
width:100%;
border:none;
z-index:1;
}
.navbar-default .navbar-nav>li>a {
font-size:18px;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a.active{
background:#98a1a4;
color:#333;
}
#media screen and (max-width: 767px){
.navbar-collapse{background:rgba(0,0,0,0.8);}
}
/*Jumbotron. Ignore*/
.jumbotron {
background-image: url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
background-repeat: no-repeat;
background-position: center top;
margin-top: 0px;
margin-bottom: -0px;
}
.jumbotron .container {
position: relative;
left: auto;
right: auto;
height: 100vh;
width: 100vw;
padding: 100px 0;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 84px;
font-family: "industry", sans-serif;
font-style: normal;
font-weight: 900;
text-shadow: 3px 3px #000;
}
.jumbotron p {
font-size: 24px;
font-family: "industry", sans-serif;
font-style: italic;
font-weight: 1000;
color: #f7f7f7;
}
</style>
</head>
<section id="Top">
</section>
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="wow fadeInDown"><a class="active" href="#"><i class="fa fa-home fa"></i> Lore</a></li>
<li class="wow fadeInDown delay05"><i class="fa fa-user fa"></i> mIpsu mD</li>
<li class="wow fadeInDown delay05"><i class="fa fa-map fa"></i> olorS</li>
<li class="wow fadeInDown delay15"><i class="fa fa-bolt fa"></i> itAmet.L</li>
<li class="wow fadeInDown delay2"><i class="fa fa-paint-brush fa"></i> or emIps</li>
<li class="wow fadeInDown delay25"><i class="fa fa-envelope fa"></i> umDolor</li>
<li class="wow fadeInDown delay3"><i class="fa fa-pencil fa"></i> Sita</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="wow fadeInLeft Big">Lor emIp sumDo lorSitA</h1>
<p class="wow fadeInRight delay1">metLorem Ip sumDo lorSitAm.</p>
<div class="container">
<ul class="actions">
<li class="wow fadeInUp Big delay2"><i class="fa fa-chevron-down fa"></i></li>
</ul>
</div>
</div>
</div>
</body>
</html>
I'm not sure anyone is going to write the code for you, but we can point you in the right direction. What you are looking for, in terms of specifying different styles at different screen sizes are called media queries. They look like this:
#media screen and (max-width: 1199px) {...}
I have built something very similar to what you are looking for (although mine has probably more than what you are looking for) so if you need a reference on how things work or whatnot, I'll post a link.
http://codepen.io/mhodges44/pen/dGMMOK
You can ignore the angularJS stuff (all of the ng-* in the HTML and the javascript), just focus on the CSS media queries. That should give you a pretty good idea of how it all works and you should be able to apply it to your situation.