I am trying to animate a picture when the mouse hovers over it. I am currently using "animate.css" to get the animation. There are two problems:
1) How do I get jQuery to "fire" my script once per hover? For example, if I create an alert, the alert will fire several times (putting the mouse over and taking it off).
2) What is wrong with my current jQuery syntax? The animation does not play.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/stylesheet_test.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="CSS/animate.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:500&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="scripts/test.js"></script>
<title>Daryl N.</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="nav-text"><span id="home">Home</span><span id="archive">Archive</span></div>
</div>
<div id="first" class="background">
<div class="align-vert"><img id="me-pic" src="./images/me.jpg" alt="A picture of me is suppose to be here" style="width:240px;height:240px;" class="me-border animated bounceIn"><span class="daryl animated bounceIn">Hi, I'm Daryl</span></div>
</div>
<script type="text/javascript" src="scripts/test.js"></script>
<div id="second" class="background">
<p class="align-vert">This is my personal website</p>
</div>
</div>
</body>
</html>
JS
$(document).ready(function()
{
$('#me-pic').hover(function()
{
$(".bounceIn").toggleClass("bounce");
});
});
My CSS
body,html
{
width: 100%;
min-width: 200px;
height: 100%;
padding: 0;
margin: 0;
}
.container
{
width: 100%;
min-width: 500px;
height: 100%;
}
.background
{
height: 100%;
width: 100%;
display: inline-block;
position: relative;
z-index: 1;
}
.align-vert
{
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.me-border
{
border-radius: 50%;
border: 2px solid #FFF;
vertical-align:middle
}
.navbar
{
position: fixed;
background-color: rgba(0, 0, 0, 0.9);
margin: 0;
padding: 0;
width: 100%;
height: 50px;
z-index: 2;
}
.nav-text
{
color: #a3a3a3;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 16px;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#home
{
margin-right: 50px;
}
#home:hover
{
color: #777777;
}
#home a:hover, a:visited, a:link, a:active
{
text-decoration: none;
color: inherit;
}
#archive
{
margin-left: 50px;
}
#archive:hover
{
color: #777777;
}
.daryl
{
font-family: 'Work Sans', sans-serif;
display: inline-block;
padding-left: 20px;
font-size: 30px;
color: #FFF;
}
#first
{
background: #2C2D45;
}
#second
{
background: #354677;
font-size: 40px;
font-family: 'Work Sans', sans-serif;
color: white;
}
See here for animate.css
Could my CSS files cause a conflict?
Thanks in advance!
In your JS, I would instead use the mouseenter and mouseleave event handlers. Based on your explanation, this should serve nicely. It will fire exactly once when the mouse enters the div, and once when it leaves.
$(document).ready(function()
{
$('#me-pic').on('mouseenter', function() {
$(".bounceIn").toggleClass("bounce");
});
$('#me-pic').on('mouseleave', function() {
$(".bounceIn").toggleClass("bounce");
});
});
Related
I'm having trouble figuring out how to make the data-title only appear on hovering of the up-arrow only when the footer is down/not showing. However, I would also appreciate another solution where the data-title would still be visible when hovering the up-arrow even when the footer is up/showing. In this case, I would prefer the data-title to be displayed in its original position, up-right/0deg and on top of the up-arrow, rather than rotated 180deg and under the up-arrow.
I've tried using CSS and JavaScript to add and remove the data-title attribute, empty its innerHTML, and toggle its display, but nothing seems to work the way I want. Specifically, I was expecting the data-title to only appear on hover of an element (let's call it "Element A") when another element (let's call it "Element B") is hidden. Element A is the up-arrow, and I want the data-title to be shown on hover of Element A when Element B (the footer) is not visible on the page.
I suspect that the solution may be simple, but I'm struggling to figure it out. Any help or suggestions would be greatly appreciated.
// Get the up arrow element
const upArrow = document.getElementById("up-arrow");
const footer = document.querySelector(".slide-up-footer");
let isOpen = false;
// Add an event listener to toggle the "show" class
upArrow.addEventListener("click", toggleFooter);
upArrow.addEventListener("click", () => {
footer.classList.toggle("show");
});
function toggleFooter() {
if (isOpen) {
footer.style.bottom = "-100%";
upArrow.style.transform = "rotate(0deg)";
upArrow.style.bottom = "0";
} else {
footer.style.bottom = "0";
upArrow.style.bottom = "6%";
upArrow.style.transform = "rotate(180deg)";
}
isOpen = !isOpen;
}
html {
scroll-behavior:smooth;
}
body {
font-family: 'Adobe Caslon Pro Bold', sans-serif;
background-color: red;
overflow: hidden;
}
body h1 {
text-align: center;
}
.page-wrap {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
background: white;
border-radius: 30px;
padding: 20px;
text-align: center;
overflow: hidden;
}
.page-wrap h1 {
margin: 0;
}
p {
line-height: 3;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
.slide-up-footer {
display: flex;
flex-direction: column;
justify-content: center;
font: 10px Fakt Soft, sans-serif;
position: absolute;
bottom: -1000px; /* or another value that will hide the footer */
width: 100vw;
height: 8%;
transition: all 0.7s ease-in-out;
background-color: white;
}
.slide-up-footer.show {
bottom: 0;
}
.footer-text {
display: grid;
grid-row: 1/2;
font: 12px Fakt Soft, sans-serif;
color: black;
text-align: center;
padding: 10px;
justify-content: center;
position: relative;
}
.footer-text p{
line-height: 0;
}
.up-arrow {
transition: all 0.7s ease-in-out;
position: absolute;
bottom: 0px;
right: 0px;
margin: 2rem;
z-index: 999;
}
.custom-class{
font-weight: bold;
font: 20px Fakt Soft, sans-serif;
color:black;
cursor: pointer;
z-index: 999;
}
.custom-class:hover::before {
content: "FOOTER";
font: 12px Fakt Soft, sans-serif;
position: absolute;
background-color: transparent;
color: black;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Helvetica+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Retro Step</title>
</head>
<body>
<div class="page-wrap">
<footer class="slide-up-footer">
<div class="footer-text">
<p>FREE SHIPPING IN PORTUGAL / IN EUROPE FROM 150€ / EASY RETURNS</p>
</footer>
<div class="up-arrow" id="up-arrow">
<span class="custom-class" data-title="FOOTER">^</span>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
So apply a style when the sibling as the show class to hide it from view
.slide-up-footer.show + .up-arrow > .custom-class:hover::before {
display: none;
}
// Get the up arrow element
const upArrow = document.getElementById("up-arrow");
const footer = document.querySelector(".slide-up-footer");
let isOpen = false;
// Add an event listener to toggle the "show" class
upArrow.addEventListener("click", toggleFooter);
upArrow.addEventListener("click", () => {
footer.classList.toggle("show");
});
function toggleFooter() {
if (isOpen) {
footer.style.bottom = "-100%";
upArrow.style.transform = "rotate(0deg)";
upArrow.style.bottom = "0";
} else {
footer.style.bottom = "0";
upArrow.style.bottom = "6%";
upArrow.style.transform = "rotate(180deg)";
}
isOpen = !isOpen;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Adobe Caslon Pro Bold', sans-serif;
background-color: red;
overflow: hidden;
}
body h1 {
text-align: center;
}
.page-wrap {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
background: white;
border-radius: 30px;
padding: 20px;
text-align: center;
overflow: hidden;
}
.page-wrap h1 {
margin: 0;
}
p {
line-height: 3;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
.slide-up-footer {
display: flex;
flex-direction: column;
justify-content: center;
font: 10px Fakt Soft, sans-serif;
position: absolute;
bottom: -1000px;
/* or another value that will hide the footer */
width: 100vw;
height: 8%;
transition: all 0.7s ease-in-out;
background-color: white;
}
.slide-up-footer.show {
bottom: 0;
}
.footer-text {
display: grid;
grid-row: 1/2;
font: 12px Fakt Soft, sans-serif;
color: black;
text-align: center;
padding: 10px;
justify-content: center;
position: relative;
}
.footer-text p {
line-height: 0;
}
.up-arrow {
transition: all 0.7s ease-in-out;
position: absolute;
bottom: 0px;
right: 0px;
margin: 2rem;
z-index: 999;
}
.custom-class {
font-weight: bold;
font: 20px Fakt Soft, sans-serif;
color: black;
cursor: pointer;
z-index: 999;
}
.custom-class:hover::before {
content: "FOOTER";
font: 12px Fakt Soft, sans-serif;
position: absolute;
background-color: transparent;
color: black;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
.slide-up-footer.show+.up-arrow>.custom-class:hover::before {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Helvetica+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Retro Step</title>
</head>
<body>
<div class="page-wrap">
<footer class="slide-up-footer">
<div class="footer-text">
<p>FREE SHIPPING IN PORTUGAL / IN EUROPE FROM 150€ / EASY RETURNS</p>
</footer>
<div class="up-arrow" id="up-arrow">
<span class="custom-class" data-title="FOOTER">^</span>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
I have a sprite image containing 4 different pictures. They are 520px in height. I would like animate them sliding from the first picture to the last picture. I am able to get them to flip through images, however I cannot get them to slide smoothly. Also, when the last image is reached, I need to slide back to the first image. I am unsure how to do this, this is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<div id="leftArrow"</div>
<div id="rightArrow"></div>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","+=792px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-=792px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/`enter code here`
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;
$(".menu").click(function () {
if ('.pagelinks').style.display = 'none';
{
$('.pagelinks').style.display = 'block';
}
else
{
$('.pagelinks').style.display = 'none';
}
})
html,body
{
margin:0;
width: 100%;
overflow:hidden;
box-sizing: border-box;
height: 100%;
}
body
{
background: url(best8.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
header
{
width: 100%;
background-color: black;
height: 85px;
position: fixed;
}
.heading1
{
color:white;
position: relative;
align-content: center;
margin: 3em ;
top: 100px;
left: 675px;
}
.logo img
{
left: 0;
filter: brightness 100%;
position: fixed;
}
.menu
{
margin: auto;
margin-left: 75%;
display: block;
position: fixed;
top: 11px;
}
.nav div
{
height: 5px;
background-color: white;
margin: 4px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav
{
width: 30px;
display: block;
margin: 1em 0 0
}
.one
{
width: 30px;
}
.two
{
width: 20px;
}
.three
{
width: 25px;
}
.nav:hover div
{
width: 30px;
}
.pagelinks
{
margin: auto;
margin-left: 49%;
position: fixed;
top: -10px;
display: none;
}
.pagelinks ul
{
list-style-type: none;
}
.pagelinks ul li
{
float: left;
padding:30px;
margin: auto;
transition: 0.3;
color: white;
font-size: 20px;
font-weight: bold;
padding-top: 40px;
opacity: 0.6;
}
.pagelinks ul li:hover
{
color: green;
transition: 0.6s;
}
.logo img:hover
{
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title>Goesta Calculators</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://use.typekit.net/axs3axn.js"></script>
<script>try{Typekit.load({ async: true});}catch(e){}</script>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="main.js" type="text/javascript"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="NewLogo.PNG" >
<div class="menu">
<a href="" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</a>
</div>
<nav class="pagelinks">
<ul>
<li>About</li>
<li>Contact</li>
<li>Calculators</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="heading1">
<h1>Estimate. Plan your future.</h1>
</div>
</body>
</html>
I'm trying to make an unordered list show/hide when another div with .menu class, is clicked. I've tried several different ways in javascript from research online but nothing is working. I also want it to transition slowly and smoothly. When I click the menu (I'm assuming because its a link) the page seems to refresh.
First, your condition syntax is very wrong.
if ('.pagelinks').style.display = 'none';
Don't put semicolon in there. And wrap your condition with open and close parenthesis.
Second, use .css() if you want to modify your css.
Here's the working version of your jQuery
$(".menu").click(function () {
if ($('.pagelinks').css("display") == 'none')
{
$('.pagelinks').css("display", "block");
}
else
{
$('.pagelinks').css("display", "none");
}
})
Also, don't use anchor tag on your nav if it is only a trigger. Use <div> instead.
Like this
<div class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
And if you have problem with the cursor not transforming into a hand, just have this in your css
.nav:hover
{
cursor: pointer;
}
Working Sandbox of your code HERE
is there a way to have my html page in a fluid container (bootstrap 4) and be able to use js to make a menu appear and disappear over it with a toggle button in Javascript? (I already have my menu working but I can't make it appearing over the container)
var button = document.querySelector('.toggle_button'); // bouton sandwich
var nav = document.querySelector('.nav'); // menu deroulant gauche
var a = document.querySelector('.menu a');
//Derouler le menu
button.onclick = function() {
nav.classList.toggle('nav_open');
}
html,
body {
padding: 0;
margin: 0;
}
.toggle_button {
height: 3px;
width: 30px;
position: relative;
float: right;
margin-right: 10px;
margin-top: 5px;
cursor: pointer;
}
.toggle_button span {
height: 3px;
background-color: #2980b9;
width: 100%;
position: absolute;
top: 20px;
left: 0;
}
.toggle_button span:before {
content: '';
height: 3px;
background-color: #2980b9;
width: 100%;
position: absolute;
top: -10px;
left: 0;
}
.toggle_button span:after {
content: '';
height: 3px;
background-color: #2980b9;
width: 100%;
position: absolute;
top: 10px;
left: 0;
}
.menu {
height: 1000px;
width: 200px;
background-color: #2980b9;
}
.menu a {
color: #ecf0f1;
font-family: sans-serif;
text-align: center;
display: block;
padding-top: 30px;
text-decoration: none;
}
.menu a:hover {
text-decoration: underline;
}
.logo {
text-transform: uppercase;
font-weight: bold;
font-size: 24px;
}
.nav {
margin-left: -200px;
transition-duration: 0.2s;
}
.nav_open {
margin-left: 0;
transition-duration: 0.2s;
}
.back {
background-color: #ecf0f1;
}
.bandeau {
background-color: #e67e22;
height: 50px;
display: sticky;
}
.bandeau a {
color: #ecf0f1;
font-family: sans-serif;
text-align: center;
display: block;
font-size: 30px;
padding-top: 0px;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<!-- Header contenant le titre de la page home.html et le type d'encodage ecrit -->
<head>
<title> SARL Garage BRINCAT </title>
<meta charset="utf-8" \>
<link rel="stylesheet" href="../bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Container global -->
<div class="container-fluid back">
<!-- Boutton sandwich -->
<div class="toggle_button">
<span></span>
</div>
<div class="container">
<div class="row">
<!-- Logo FIAT -->
<article class="col-md-3 bandeau">
<img src="res/FIAT.jpg">
</article>
<!-- Titre -->
<article class="col-md-9 bandeau">
SARL Garage BRINCAT
</article>
</div>
</div>
</div>
<!-- Menu deroulant -->
<div class="menu nav">
Mon logo
Neuf
Occasions
Contact
</div>
<script type="text/javascript" src="js/app.js"></script>
<!-- Page principale (hors menu) -->
</body>
</html>
i am not good yet i just began to learn web dev so i may have done ugly things ^^' i am trying to make my menu on the left come when i push the sandwich button on the top right corner , but i don't know how to do to make it "ovverride" the container-fluid that is the main page because my responsive menu isn't part of it and isn't a bootstrap component neither, thanks for your time :)
Just use position: absolute on the menu, setting it to a high z-index.
.menu {
height: 1000px;
width: 200px;
background-color: #2980b9;
position: absolute;
z-index: 1000;
}
You may have to adjust the top offset.
i am new to web development, I have a small problem with positioning i placed a element with content in it all of the word are grumble up instead of be in one line . can anyone help me with a solution. positioning has been a big problem for me so far so if you guys know any sources where i can learn more about css positioning
#import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
#import url('https://fonts.googleapis.com/css?family=Montserrat:400');
#import url('https://fonts.googleapis.com/css?family=Poiret+One');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: absolute;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
position: absolute;
top: 10%;
left: 50%;
font-weight: lighter;
transform: translateX(-50%);
font-family: "montserrat";
}
.color {
color:orange;
}
/*--- Media Queries --*/
#media screen and (max-width: 900px) {
}
#media screen and (max-width: 768px) {
}
#media screen and (max-width: 480px) {
}
<!DOCTYPE html>
<html>
<head>
<title>Full Screen Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center">Our Mission</h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
</div>
</div>
</section>
</body>
</html>
"Relative" "position" relates positions, so this can avoid mess.
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
I assume you would like the "Our Mission" section to be centered and readable.
.ab-p {
font-weight: lighter;
font-family: "montserrat";
text-align: center;
}
h2 {
text-align: center;
}
Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.