I've been trying to center the buttons to the middle of its parent's div, but have no idea how. I've tried adding margin: 0 auto and bootstrap's special class 'center-block' but it doesn't seem to be working. I suspect it may be clashing with the display:flex part of the css, but other than that, I don't know what to do.
Here's a picture of the problem.
/*--CSS--*/
* {
background-color: rgba(0, 0, 0, 0.1);
}
h1 {
font-family: "Raleway", "sans-serif" !important;
}
h2 {
font-family: "Raleway", "sans-serif" !important;
}
.page {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.table_cell {
text-align: center;
}
/*--Page1--*/
.title {}
#mainTitle {
font-size: 8em;
font-weight: 900 !important;
letter-spacing: -3px;
text-transform: uppercase;
}
#mainSub {}
/*--Button--*/
.introButtons {
margin: 0 auto !important;
}
.buttonBox {}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="firstPage" class="page col-md-12">
<div class="table_cell col-md-8">
<div class="introButtons col-md-8">
<div class="buttonBox col-md-3">
Who Are We?
</div>
<div class="buttonBox col-md-3">
Our Projects
</div>
<div class="buttonBox col-md-3">
Our Team
</div>
<div class="buttonBox col-md-3">
Contact Us
</div>
</div>
</div>
</div>
Solution 1 (If you want to change your HTML part)
You can use bootstrap offset classes. More help on offset
Replace introButtons col-sm-8 to introButtons col-sm-8 col-sm-offset-2
* {
background-color: rgba(0, 0, 0, 0.1);
}
h1 {
font-family: "Raleway", "sans-serif" !important;
}
h2 {
font-family: "Raleway", "sans-serif" !important;
}
.page {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.table_cell {
text-align: center;
}
#mainTitle {
font-size: 8em;
font-weight: 900 !important;
letter-spacing: -3px;
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="firstPage" class="page col-md-12">
<div class="table_cell col-md-8">
<div class="introButtons col-sm-8 col-sm-offset-2">
<div class="buttonBox col-md-3">
Who Are We?
</div>
<div class="buttonBox col-md-3">
Our Projects
</div>
<div class="buttonBox col-md-3">
Our Team
</div>
<div class="buttonBox col-md-3">
Contact Us
</div>
</div>
</div>
</div>
Solution 2 (If you want to change your CSS part)
Just add below css in your custom css file
.introButtons.col-md-8 {
margin: auto;
float: none;
}
* {
background-color: rgba(0, 0, 0, 0.1);
}
h1 {
font-family: "Raleway", "sans-serif" !important;
}
h2 {
font-family: "Raleway", "sans-serif" !important;
}
.page {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.table_cell {
text-align: center;
}
#mainTitle {
font-size: 8em;
font-weight: 900 !important;
letter-spacing: -3px;
text-transform: uppercase;
}
.introButtons.col-md-8 {
margin: 0 auto;
float: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="firstPage" class="page col-md-12">
<div class="table_cell col-md-8">
<div class="introButtons col-md-8">
<div class="buttonBox col-md-3">
Who Are We?
</div>
<div class="buttonBox col-md-3">
Our Projects
</div>
<div class="buttonBox col-md-3">
Our Team
</div>
<div class="buttonBox col-md-3">
Contact Us
</div>
</div>
</div>
</div>
Related
I am trying to make the second page of my Website, but some of the CSS and JS seem to not work.
I have 4 files, and 4 folders (all located in 1 same folder). The first folder is view, which contains index.html (the main page of the website), and links.html (the file that isn't working). Then there is the js folder which contains script.js. The third folder is css and inside of it is style.css. The final folder is asset which has image assets for my Website.
Here is the content of index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linkeld</title>
<!-- CSS Links -->
<link rel="stylesheet" href="../css/style.css">
<!-- JS Links -->
<script src="../js/script.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="loader">
<span>
<i class="fas fa-spinner fa-spin"></i>
</span>
</div>
<div id="topnav" class="transparent">
<div class="wrapper main">
<div class="wrapper left" id="navLogo">
<img src="../asset/9984-confusion.png" alt="logo">
</div>
<div class="wrapper right" id="navLinks">
Home
Links
Account
About
</div>
</div>
</div>
<div id="head">
<div class="wrapper">
<img src="../asset/9984-confusion.png" alt="logo">
<h1>Linkeld</h1>
<h2>With over 1.000.000 links worldwide</h2>
<div id="signup">
Sign-Up Now!
</div>
</div>
</div>
<div id="main">
<div id="aboutWebsite">
<div class="wrapper">
<div class="card">
<h1><i class="fas fa-share-alt"></i> Share</h1>
<p>Share links to people across the globe to discover, the limitation is only your imagination</p>
<div class="image" id="image1">
<img src="../asset/brooke-cagle-g1Kr4Ozfoac-unsplash-removebg-preview.png" alt="image1">
</div>
</div>
<div class="card">
<h1><i class="fas fa-search"></i> Discover</h1>
<p>Discover new websites from other people via links, you can visit all of the internet's website!
</p>
<div class="image" id="image2">
<img src="../asset/grzegorz-walczak-yoIIPcrWhjI-unsplash-removebg-preview.png" alt="image2">
</div>
</div>
<div class="card">
<h1><i class="fas fa-times-circle"></i> No Restrictions</h1>
<p>No restricted links or banned sites, share whatever you like</p>
<div class="image" id="image3">
<img src="../asset/cdd20-vR6bNYTVlpo-unsplash-removebg-preview.png" alt="image3">
</div>
</div>
</div>
</div>
<div id="whySignup">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Why Sign-Up?</h1>
<p>Firstly, you'll be able to share links with others! Not just click them.</p>
<p>Secondly, you can like and save links to your account, so you can view at them later.</p>
<p>Thirdly, you'll be able to customize your Username! No more plain old nicknames.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="phishing">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Would i fall to phishing?</h1>
<p>Well technically, yes, you will at some point fall into a phishing scam.</p>
<p>But, you can check the domain first, before clicking the link.</p>
<p>Check for any typos, or weird characters. A site that has a suspicious looking domain may be a
phishing website so be careful.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="nfsw">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Can I post NFSW related stuff?</h1>
<p>There is no limitation to what website you want to share here.</p>
<p>So yes you absolutely can post NFSW related content here and not get banned.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="signupCall">
<div class="wrapper">
<div class="section">
<h1>What are you waiting for?</h1>
</div>
<div class="section">
<div>
<a class="button" href="">Sign-Up Now!</a>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<div class="wrapper">
<div class="section">
<h2>Other resources</h2>
Home
Copyright
Terms
Policy
Sources
</div>
<div class="section">
<h2>About us</h2>
Team
About
Site Stats
</div>
</div>
</div>
</body>
</html>
And here is links.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linkeld</title>
<!-- CSS Links -->
<link rel="stylesheet" href="../css/style.css">
<!-- JS Links -->
<script src="../js/script.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="loader">
<span>
<i class="fas fa-spinner fa-spin"></i>
</span>
</div>
<div id="topnav" class="transparent">
<div class="wrapper main">
<div class="wrapper left" id="navLogo">
<img src="../asset/9984-confusion.png" alt="logo">
</div>
<div class="wrapper right" id="navLinks">
Home
Links
Account
About
</div>
</div>
</div>
<div id="head">
<div class="wrapper">
<img src="../asset/9984-confusion.png" alt="logo">
<h1>Links</h1>
<h2 style="margin-bottom: 100px;">This is where you'll find links to Websites!</h2>
</div>
</div>
<div id="main">
<div id="linksList">
<div class="wrapper">
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<div class="wrapper">
<div class="section">
<h2>Other resources</h2>
Home
Copyright
Terms
Policy
Sources
</div>
<div class="section">
<h2>About us</h2>
Team
About
Site Stats
</div>
</div>
</div>
</body>
</html>
Now for the CSS (style.css) :
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
:root {
/* CSS HEX */
--lime-green: #1ec90eff;
--metallic-sunburst: #9b7e46ff;
--mellow-apricot: #f4b266ff;
--dark-liver-horses: #544343ff;
}
html {
scroll-behavior: smooth;
}
a {
color: var(--lime-green);
text-decoration: none;
transition: text-decoration 0.3s ease-in-out;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: var(--lime-green);
}
#topnav {
position: fixed;
width: 100%;
z-index: 99;
background: white;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
transition: all 0.2s ease-in-out;
}
#topnav.transparent {
background: transparent;
box-shadow: none;
}
#topnav .wrapper.main {
display: flex;
justify-content: stretch;
}
#topnav .wrapper {
display: flex;
}
#topnav .wrapper#navLogo {
width: 70%;
}
#topnav .wrapper#navLogo img {
padding: 10px;
width: 60px;
margin-left: 40px;
}
#topnav .wrapper#navLinks {
flex: 1;
justify-content: space-evenly;
}
#topnav.transparent .wrapper#navLinks a {
padding: 20px;
text-decoration: none;
color: white;
text-align: center;
transition: all 0.2s ease-in-out;
}
#topnav .wrapper#navLinks a {
color: black;
padding: 20px;
text-decoration: none;
text-align: center;
transition: all 0.2s ease-in-out;
}
#head {
background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
margin-bottom: 30px;
}
#head .wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#head .wrapper h1,
#head .wrapper h2 {
color: white;
}
#head .wrapper img {
width: 40px;
margin: 100px 0 20px 0;
}
#head .wrapper h1 {
font-size: 90px;
}
#head .wrapper h2 {
font-size: 18px;
}
#head #signup {
margin: 80px 0 100px 0;
}
#head #signup a {
color: white;
padding: 20px;
background: var(--mellow-apricot);
border-radius: 10px;
transition: all 0.3s ease-in-out;
display: block;
}
#head #signup a:hover {
text-decoration: none;
transform: scale(1.1);
}
#aboutWebsite .wrapper {
display: flex;
flex-direction: row;
justify-content: center;
}
#aboutWebsite .wrapper .card {
width: 400px;
margin: 20px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
padding: 80px 60px;
}
#aboutWebsite .wrapper .card h1 {
font-size: 40px;
margin-bottom: 20px;
font-weight: 300;
}
#aboutWebsite .wrapper .card p {
font-size: 18px;
}
#aboutWebsite .wrapper .card .image {
display: flex;
justify-content: center;
}
#aboutWebsite .wrapper .card .image img {
width: 300px;
}
#aboutWebsite .wrapper .card .image#image1,
#aboutWebsite .wrapper .card .image#image2 {
margin-top: 130px;
}
#foot {
margin-top: 50px;
background: rgb(235, 235, 235);
}
#foot .wrapper {
display: flex;
}
#foot .wrapper .section {
flex: 1;
padding: 50px 30px;
}
#foot .wrapper .section a {
display: block;
color: black;
margin-bottom: 30px;
width: max-content;
}
#foot .wrapper .section h2 {
margin-bottom: 30px;
}
#loader {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
background: white;
z-index: 999;
}
#loader.loaded {
display: none;
}
#loader span {
font-size: 100px;
}
a.button {
color: white;
padding: 20px;
background: var(--mellow-apricot);
border-radius: 10px;
transition: all 0.3s ease-in-out;
display: block;
}
a.button:hover {
text-decoration: none;
transform: scale(1.1);
}
#whySignup {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#whySignup .wrapper {
display: flex;
justify-content: start;
transition: all 0.5s ease-in-out;
}
#whySignup .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#whySignup .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#whySignup .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#whySignup .wrapper .section img {
width: 450px;
height: 500px;
}
#phishing {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#phishing .wrapper {
display: flex;
justify-content: start;
flex-direction: row-reverse;
transition: all 0.5s ease-in-out;
}
#phishing .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#phishing .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#phishing .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#phishing .wrapper .section img {
width: 450px;
height: 500px;
}
#nfsw {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#nfsw .wrapper {
display: flex;
justify-content: start;
transition: all 0.5s ease-in-out;
}
#nfsw .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#nfsw .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#nfsw .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#nfsw .wrapper .section img {
width: 450px;
height: 500px;
}
#signupCall {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#signupCall .wrapper {
display: flex;
flex-direction: column;
transition: all 0.5s ease-in-out;
}
#signupCall .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
background: transparent;
}
#signupCall .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
font-size: 50px;
}
#signupCall .wrapper .section:first-child h2 {
font-size: 20px;
margin-bottom: 10px;
}
#signupCall .wrapper .section {
background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
background-position: -45%;
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 300px;
}
#linksList {
padding: 50px;
}
#linksList .wrapper {
display: flex;
}
#linksList .wrapper .cards {
padding: 30px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
width: 120px;
margin: 30px;
background: cyan;
}
Here's script.js :
window.addEventListener("load", () => {
const loader = document.getElementById("loader");
loader.classList.add("loaded");
})
window.addEventListener("scroll", () => {
let scrollY = window.scrollY;
let posY = 450;
let topnav = document.getElementById("topnav");
if (scrollY < posY) {
topnav.classList.add("transparent");
} else {
topnav.classList.remove("transparent");
}
});
Now the problem is that #linksList doesn't seem to change even though I've written the CSS in style.css. What's wrong about it? I can't seem to find anything that could've conflicted with the CSS. I even gave the .card in #linksList a cyan background to test if it works, but to no result.
Then there's the #topnav, the JS won't add the class .transparent when the user scrolled to the #topnav in links.html until the browser's screen was resized (I'm using Chrome). I have no actual clue about what is going on here. Maybe it's just my browser acting weird or is it because I made some kind of mistake in the scripting?
(sorry for the long question)
I am currently working on a website I am in the midst of creating. However, I am having some trouble closing the gap of margin that is on the far right side of the page As seen in this picture I tried setting the body to margin 0px, but that didn't help. Any help would definitely be appreciated and detail, where I went wrong, will be insightful. Thank you!
body {
margin: 0px;
background-color: #1a1a1a;
font-weight: 100;
line-height: 1.7857;
letter-spacing: .075em max-width: 100%;
}
.nav {
border-width: 1px 0;
list-style: none;
background: linear-gradient(to top right, #0b0b0b, #494848);
overflow: hidden;
width: 100%;
height: 77px;
background-color: #000000;
margin-top: 0px margin-bottom: 0px;
margin: 0 auto;
}
.nav li {
display: inline;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
font-weight: 100 line-height: 1.7857;
letter-spacing: .075em;
float: right !important;
margin: 20px;
margin-right: 4%;
line-height: 1.7857;
letter-spacing: .075em;
}
.nav a {
color: white;
text-decoration: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav img {
margin-left: 4%;
}
/*
Bootstrap Image Carousel Slider with Animate.css
Code snippet by Hashif (http://hashif.com) for Bootsnipp.com
Image credits: unsplash.com
*/
#import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);
body {
font-family: 'Quicksand', sans-serif;
font-weight: 700;
}
/********************************/
/* Main CSS */
/********************************/
#first-slider .main-container {
padding: 0;
}
#first-slider .slide1 h3,
#first-slider .slide2 h3,
#first-slider .slide3 h3,
#first-slider .slide4 h3 {
color: #fff;
font-size: 30px;
text-transform: uppercase;
font-weight: 700;
}
#first-slider .slide1 h4,
#first-slider .slide2 h4,
#first-slider .slide3 h4,
#first-slider .slide4 h4 {
color: #fff;
font-size: 30px;
text-transform: uppercase;
font-weight: 700;
}
#first-slider .slide1 .text-left,
#first-slider .slide3 .text-left {
padding-left: 40px;
}
#first-slider .carousel-indicators {
bottom: 0;
}
#first-slider .carousel-control.right,
#first-slider .carousel-control.left {
background-image: none;
}
#first-slider .carousel .item {
min-height: 425px;
height: 100%;
width: 100%;
}
.carousel-inner .item .container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0px;
top: 0;
left: 0;
right: 0;
}
#first-slider h3 {
animation-delay: 1s;
}
#first-slider h4 {
animation-delay: 2s;
}
#first-slider h2 {
animation-delay: 3s;
}
#first-slider .carousel-control {
width: 6%;
text-shadow: none;
}
#first-slider h1 {
text-align: center;
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
}
#first-slider .p {
padding-top: 125px;
text-align: center;
}
#first-slider .p a {
text-decoration: underline;
}
#first-slider .carousel-indicators li {
width: 14px;
height: 14px;
background-color: rgba(255, 255, 255, .4);
border: none;
}
#first-slider .carousel-indicators .active {
width: 16px;
height: 16px;
background-color: #fff;
border: none;
}
.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
.carousel-control .fa-angle-right,
.carousel-control .fa-angle-left {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.carousel-control .fa-angle-left {
left: 50%;
width: 38px;
height: 38px;
margin-top: -15px;
font-size: 30px;
color: #fff;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 53px;
}
.carousel-control .fa-angle-right {
right: 50%;
width: 38px;
height: 38px;
margin-top: -15px;
font-size: 30px;
color: #fff;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 53px;
}
.carousel-control {
opacity: 1;
filter: alpha(opacity=100);
}
/********************************/
/* Slides backgrounds */
/********************************/
#first-slider .slide1 {
background-image: url(https://i.imgur.com/LUIbnzG.png);
background-size: cover;
background-repeat: no-repeat;
}
#first-slider .slide2 {
background-image: url(https://i.imgur.com/agI540K.png);
background-size: cover;
background-repeat: no-repeat;
}
#first-slider .slide3 {
background-image: url(https://i.imgur.com/owkaQW7.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#first-slider .slide4 {
background-image: url(https://i.imgur.com/MpzqHnf.png);
background-size: cover;
background-repeat: no-repeat;
}
/********************************/
/* Media Queries */
/********************************/
#media screen and (min-width: 980px) {}
#media screen and (max-width: 640px) {}
.carousel-inner {
margin-top: 0px;
}
/***Site article**********/
.article-container {
margin-top: 6.0em;
background-color: red;
}
.articletitle h3 {
color: white;
font-family: 'Allerta', Helvetica, Arial, sans-serif;
font-weight: bold;
margin-left: 45px;
margin-top: 25px;
border-style: 3px solid;
border-radius: 1px;
background-color: black;
width: 640px;
padding-left: 10px;
text-shadow: 0.5px 0.5px;
}
#pg1p {
font-family: 'Allerta', Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: normal;
text-transform: none;
width: 80%;
color: white;
margin-top: 4.0em;
margin-left: 10px;
line-height: 29px;
}
#pg1img img {
margin-left: 5%;
margin-top: 50px;
position: static;
border-radius: 8px;
}
/*****HOW IT WORKS***/
#employment {
background-color: #f5f5f5;
padding-top: 70px;
padding-bottom: 70px;
}
.section-title {
margin-bottom: 50px;
font-size: 14px;
font-weight: 200;
}
.st-service {
margin-top: 30px;
}
/*********FOOTER****/
footer {
width: 100%;
background-color: red;
padding: 60px 0px;
}
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Hayat Express</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
</head>
<body>
<ul class="nav">
<img src="logos/navbar-logo.png">
<li><a class="hover" href="#Contact">Contact</a></li>
<li><a class="active" href="#Careers">Careers</a></li>
<li><a class="active" href="#Services">Services</a></li>
<li><a class="active" href="#Drivers">Drivers</a></li>
</ul>
</div>
<div id="first-slider">
<div id="carousel-example-generic" class="carousel slide carousel-fade">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- Item 1 -->
<div class="item active slide1">
<div class="row">
<div class="container">
<div class="col-md-3 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://i.imgur.com/JeFTT4W.png">
</div>
<div class="col-md-9 text-left">
<h3 data-animation="animated bounceInDown">Partnership with Hayat Express ®</h3>
<h4 data-animation="animated bounceInUp">Deliver packages in your area</h4>
</div>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="item slide2">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">
<h3> Global Critical Delivery</h3>
<h4 data-animation="animated bounceInUp">For your most challenged delivery </h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s18.postimg.org/l8cplxczd/forklift.png">
</div>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item slide3">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">Residencial E-Commerce</h3>
<h4 data-animation="animated bounceInUp">Providing Service to Consumers Worldwide</h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/eq8xvxeq5/globe_network.png">
</div>
</div>
</div>
</div>
<!-- Item 4 -->
<div class="item slide4">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">Global Critical Delivery</h3>
<h4 data-animation="animated bounceInUp">For your most challenged delivery </h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/9vf8xngel/internet_speed.png">
</div>
</div>
</div>
</div>
<!-- End Item 4 -->
</div>
<!-- End Wrapper for slides-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i><span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<i class="fa fa-angle-right"></i><span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="article-container">
<div class="articletitle">
<h3>CONNECTING YOU TO THE PRODUCTS YOU NEED</h3>
</div>
</div>
<div class="row">
<div class="container-fluid">
<div id="pg1img">
<div class="col-md-6">
<img src="logos/section1.png">
</div>
</div>
<div class="row">
<div class="col-md-5">
<div id="pg1p">
<p>You deserve a great delivery experience. You want your favorite products delivered to you fast, with free shipping and no hassles.
<br>
<p>We help leading and emerging internet retailers get you what you want. Whether we’re delivering your meal kits to help you quickly prepare dinner, or helping you avoid a last-minute trip to the store, our goal is to give you more time for
what’s important by delivering your favorite products to you — fast.</p>
</div>
</div>
</div>
</div>
</div>
<!--How it works-->
<section id="employment">
<div class="container">
<div class="row" align="center">
<div class="section-title">
<h1>How it works</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-7 st-service">
<br>
<p>
HyatExpress operates within the largest and fastest growing metro areas in the eastern United States. Our 60+ operational facilities and four sorting hubs are staffed by people who take pride in supporting you with consistent performance, and are excited
to be a part of the newly-emerging and sophisticated logistics economy. LaserShip parcels are brought to you by people with a passion for improving the delivery experience. Many have made a career as delivery professionals, others may deliver
as a supplemental job, and some are gig-economy millennials delivering parcels throughout their busy schedules. Together, we’re able to deliver packages to you faster than national carriers. </p>
</div>
<div class="col-md-6 col-sm-7 st-service">
<br>
<img src="https://www.lasership.com/img/section/customer.jpg">
</div>
</div>
</div>
</section>
<script>
(function($) {
//Function to animate slider captions
function doAnimations(elems) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function() {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function() {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function(e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
$('#carousel-example-generic').carousel({
interval: 3000,
pause: "false"
});
})(jQuery);
</script>
<footer>
</footer>
</body>
</html>
I just found out the solution by adding padding 0px and overflow-x hidden;
html,body {
;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
I am trying to add a URL on clicking the next Bootstrap carousel button. So, when someone clicks the carousel indicator to view the slides a third time, it takes them to another URL. Here is my code along with the CSS code:
.dropdown {
margin-left: 15px;
}
#textColor {
color: #4b617d;
}
.bg-faded {
background-color: #ffffff;
}
.container {
padding-top: 12px;
}
.carousel-control {
color: #bada55;
}
.carousel-control-next-icon {
background-image: url('download.png');
}
/* Carousel Header Styles */
.header-text {
position: absolute;
top: 60%;
right: auto;
width: 96.66666666666666%;
color: #ffffff;
}
.header-text2 {
position: absolute;
top: 60%;
right: auto;
width: 96.66666666666666%;
color: #ffffff;
}
.header-text3 {
position: absolute;
top: 60%;
right: auto;
width: 96.66666666666666%;
color: #ffffff;
}
.carousel-control-prev-icon {
display: none;
}
.carousel-indicators {
right: 105px;
bottom: 1px;
}
.header-text h2 span {
padding: 10px;
}
.header-text h3 span {
padding: 15px;
}
.dropdown-item {
padding: 3px 1.2rem !important;
}
.dropdown-menu {
min-width: 3rem !important;
width: 110px !important;
}
#media (max-width: 1200px) {
#rightcol {
margin-left: 12px;
}
}
.d-block {
height: 180px;
width: 180px;
}
.header-text h4,
h5 {
text-align: left !important;
}
.header-text h4,
h5 {
font-weight: 400;
}
.header-text2 h4,
h5 {
font-weight: 400;
}
.header-text3 h4,
h5 {
font-weight: 400;
}
.header-text2 h4,
h5 {
text-align: left !important;
}
.header-text3 h4,
h5 {
text-align: left !important;
}
.carousel-indicators {
right: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group">
<div class="row">
<div class="col-md-11" style="padding-left: 0px;">
<h5 id="textColor" style="margin-left: 12px;">Consecteteur Eliptois eliot</h5>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-4 col-sm-12">
<img class="d-block img-fluid img-responsive" src="carouselbox.jpg" alt="First slide" style="padding-right:6px;">
<!-- Static Header -->
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
<h4><span><strong>Image1</strong></span><br /></h4>
<h5>Lorem Ipsum</h5>
</div>
</div>
<!-- /header-text -->
</div>
<div class="col-md-4">
<img class="d-block img-fluid img-responsive" src="carouselbox.jpg" alt="First slide" style="padding-right:6px;">
<!-- Static Header -->
<div class="header-text2 hidden-xs" id="secondslide">
<div class="col-md-12 text-center">
<h5>
<span><strong>Image1</strong></span><br /> Lorem Ipsum
</h5>
</div>
</div>
<!-- /header-text -->
</div>
<div class="col-md-4">
<img class="d-block img-fluid img-responsive" src="carouselbox.jpg" alt="First slide">
<!-- Static Header -->
<div class="header-text3 hidden-xs" id="secondslide">
<div class="col-md-12 text-center">
<h5>
<span><strong>Image1</strong></span><br /> Lorem Ipsum
</h5>
</div>
</div>
<!-- /header-text -->
</div>
</div>
</div>
I'm new to Jquery and am trying to implement it into my website. I am trying to fadein (upwards) my first row of pictures when scrolling. But for some reason they will not scroll. Can't seem to find the solution, any help?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row js--wp-1">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
<section class="contact-me">
<div class="contact">
<h3><span class="white">Conta</span><span class="black">ct Me</span></h3>
</div>
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" name="name" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Drop me a line</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Send it!">
</div>
</div>
</div>
</form>
</section>
<section class="copywrite">
<h6>Copywrite © 2016 built by Temple Cerulean Naylor</h6>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
CSS:
body {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 60px;
margin-bottom: 60px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s, transform .35s;
transform: scale(1.0);
}
.affect:hover img {
opacity: 1;
transform: scale(1.15);
}
/* CONTACT */
.contact-me {
background: linear-gradient(to right, black 50%, white 50%);
overflow-x: hidden;
}
h3 {
color: white;
text-align: center;
}
.white {
color: white;
font-family: 'Oswald', sans-serif;
font-size: 240%;
}
.black {
color: black;
font-family: 'Oswald', sans-serif;
font-size: 240%;
}
.contact-form {
width: 40%;
margin: 0 auto;
float: left;
padding-left: 8%;
padding-top: 4%;
padding-bottom: 4%;
}
input[type=text],
input[type=email],
select,textarea {
width: 100%;
padding: 7px;
border-radius: 3px;
border: 1px solid #e62222;
}
textarea {
height: 100px;
}
input[type=submit] {
background-color: #e62222;
border: 1px solid #e62222;
color: #fff;
margin-right: 15px;
border-radius: 5px;
}
input[type=submit]:hover,
input[type=submit]:active {
background-color: #e94141;
}
/* *:focus {outline: none;} */
/* ------Copywrite----- */
.copywrite {
margin-top: 25px;
margin-bottom: 25px;
}
.copywrite h6 {
text-align: center;
font-size: 150%;
}
/* -----ANIMATIONS-----*/
.js--wp-1 {
opacity: 0;
}
.js--wp-1.animated {
opacity: 1;
}
JavaScript:
$(document).ready(function() {
// SCROLL ------------------------
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
// GALLERY FADEIN ----------------
$('.js--wp-1').waypoint(function(direction) {
$('.js--wp-1').addClass('animated fadeIn');
}, {
offset: '50%'
});
});
Try this:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
</body>
</html>
or
$('#message').hide().html("You clicked on a checkbox.").fadeIn('slow');
link:-Why doesn't jquery fadeIn() work with .html()?
There is a faq on my website for a school project created with Javascript animations.
The problem is:
1; The background moves when 2 or more faqs are opened.
2; There is a white space beneath the background.
The faq on my website (click for the image)
The javascript
var main = function() {
$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
$(document).keypress(function(event) {
if(event.which === 111) {
$('.current').children('.description').toggle();
}
else if(event.which === 110) {
var currentArticle = $('.current');
var nextArticle = currentArticle.next();
currentArticle.removeClass('current');
nextArticle.addClass('current');
}
});
};
$(document).ready(main);
The Css
Body {
background: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png');
}
.articles_title {
color:white;
font-size: 250%;
position: fixed;
top: 30px;
right: 50%;
}
p {
margin: 0;
}
.row {
margin: 0;
}
.articles {
margin-top: 16px;
margin-bottom: 16px;
}
.article {
color: #222;
background: rgba(255,255,255,.9);
border-spacing: 2px;
border-color: gray;
font-family: arial,sans-serif;
border-bottom: 1px #e5e5e5 solid;
}
.current .item {
background: rgba(206,220,206,.9);
}
.item {
cursor: pointer;
padding-top: 7px;
padding-bottom: 7px;
}
.item .source {
margin-left: 16px;
}
.item .title {
font-weight: bold;
}
.item .pubdate {
margin-right: 16px;
}
.item .pubdate {
text-align: right;
}
.description {
display: none;
padding-top: 10px;
padding-bottom: 10px;
}
.description h1 {
margin-top: 0px;
font-size: 16px;
}
/* the index.php css */
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
/* Initial menu */
.menu {
background: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
left: -285px; /* start off behind the scenes */
height: 100%;
position: fixed;
width: 285px;
}
/* Basic styling */
.jumbotron {
background-image: url('http://i.imgur.com/JvdPG8h.png?1');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
}
The index.php in the faq.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles/faq.css">
</head>
<body>
<div class="articles container">
<div class="article current">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 23</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
<p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Commercial Aviation</p>
</div>
<div class="col-xs-6">
<p class="title">CSeries Supplier Scramble</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>CSeries Supplier Scramble</h1>
<p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Commercial Aviation</p>
</div>
<div class="col-xs-6">
<p class="title">CSeries Supplier Scramble</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>CSeries Supplier Scramble</h1>
<p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Commercial Aviation</p>
</div>
<div class="col-xs-6">
<p class="title">CSeries Supplier Scramble</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>CSeries Supplier Scramble</h1>
<p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/faq.js"></script>
</body>
</html>
I jsfiddle your question http://jsfiddle.net/wz7eojqp/
I couldn't find the problems you described.
but I think that regarding the white space in the bottom of your page the problem is default browser margin. try to body{margin: 0;} or even better reset code.
http://meyerweb.com/eric/tools/css/reset/
Please close all (!) your html tags. It will fix many problems.
I've created a jsfiddle: http://jsfiddle.net/7ypk522y/
I have deleted your css class .jumbotron because you don't use it and changed it with the following lines. I hope this fixes your problem.
body {
background: url("http://i.imgur.com/JvdPG8h.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
padding: 20px;
}