So I want to make my website have an initial first background sort of like the one on this website. For some reason, the picture is way too big and I can't resize it with any position property or even the background-size property regardless of everything I have tried for the past 2+ days. I also need it to be visible through the transparent nav-bar I have. I would then continue all the content of the webpage underneath the background. Also, I am new to this website so I'm not sure how to insert a random image to serve as an example of the problem, but you can see in the snippet where I inserted the image as the last piece of code in the HTML.
Here is my code:
/**********BODY GENERAL**********/
body {
margin: 0;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items:center;
background: /*rgba(255, 51, 0, .95);
*/
list-style-type: none;
z-index: 10;
}
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
.menu1 {
grid-column: 1;
}
.menu2 {
grid-column: 2;
}
.logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width:500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
}
.menu3 {
grid-column: 4;
}
.menu4 {
grid-column: 5;
}
/**************HOVER ANIMATION**************/
div > a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div > a:hover {
color: #000;
}
div > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
#header-div {
height: 100%;
width: 100%;
top: 0;
left: 0;
background: url(Images/BkgImg/HSNCT%202018%205th%20in%20Nation.jpg) no-repeat center;
position: absolute;
z-index: -5;
background-size: 275px 125px !important;
}
.titel-text {
color: #fff;
font-size: 10em;
text-align: center;
width: 100%;
padding-top: 100px;
}
/**********BODY*****************/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
</head>
<body>
<header>
<nav class="container">
<div class="menu1">
<a class="navLinks" href="#home">Home</a>
</div>
<div class="menu2">
<a class="navLinks" href="#upcoming">Tournaments</a>
</div>
<div class="logo">
<p>It's Academic</p>
</div>
<div class="menu3">
<a class="navLinks" href="#history">History</a>
</div>
<div class="menu4">
<a class="navLinks" href="#faq">Contact Info</a>
</div>
</nav>
<!-- Background Image -->
<div id="header-div">
<img src="Images/BkgImg/It's%20Ac%20semi%20finals%202017-18%20%20(8).JPG">
</div>
</header>
<p> askdfhkjsdhfl;</p>
</body>
</html>
Sounds like you need to add a background-size: cover. Remove your div and img tags and then wrap your header tags with a div and add a class bg-img to it. Then add this following CSS:
.bg-img {
background: url(''https://images.unsplash.com/photo-1508781015212-46d58946bb05?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39b69f4b9e54ea449f90e3d714bf9215&auto=format&fit=crop&w=1951&q=80) no-repeat center center;
background-size: cover;
height: 100vh;
}
Related
I'm working on a mobile first project, it's a project on with HTML and CSS only, allowing us to learn how to do animation with CSS only. I have a problem with my project that I hope you can help me with.
Due to the circle animation when you load the page, the button "Explorer nos restaurants" is not working, like the animation is still there and overlapping the page, I can't find a way to avoid this..
Thanks in advance for all the help you can provide to me!
/* Barre de chargement */
.chargement {
width: 100%;
height: 100%;
position: absolute;
animation-name: loader;
animation-duration: 2s;
}
.chargement_bloc {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.chargement_bloc-cercle {
width: 130px;
height: 130px;
border-radius: 50%;
border: 15px solid #fff;
border-bottom-color: transparent;
animation-name: circle;
animation-duration: 2s;
animation-timing-function: ease-in-out;
visibility: hidden;
}
#keyframes circle {
0% {
visibility: visible;
transform: rotate(0deg);
}
99% {
visibility: visible;
transform: rotate(1500deg);
}
100% {
z-index: -1;
visibility: hidden;
}
}
#keyframes loader {
0% {
background-color: #9356DC;
z-index: 1;
}
99% {
z-index: 1;
background-color: #9356DC;
}
100% {
z-index: -1;
visibility: hidden;
}
}
/* + modifier media queries pc pour version feuille */
/* Header */
header {
box-sizing: border-box;
height: 4rem;
}
header h1 {
font-family: 'Shrikhand', sans-serif;
text-align: center;
margin-top: 1rem;
}
main {
width: 100%;
}
/* Localisation */
.localisation {
display: flex;
justify-content: center;
width: 100%;
background-color: #eaeaea;
height: 2.5rem;
align-items: center;
box-shadow: inset 0px 11px 3px -9px #CCC;
}
.localisation i {
margin-right: 0.5rem;
}
/* Réservation */
.reservation {
background-color: #f6f6f6;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.reservation h2 {
margin-bottom: 0;
margin-top: 3rem;
margin-right: 2rem;
margin-left: 2rem;
text-align: center;
}
.reservation p {
flex-wrap: wrap;
margin-bottom: 2rem;
margin-right: 2rem;
margin-left: 2rem;
text-align: center;
}
.reservation .btn {
display: block;
outline: none;
border: none;
cursor: pointer;
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #fff;
background-size: 200%;
background-image: linear-gradient(90deg, #FF79DA, #9356DC);
background-position: 80%;
text-decoration: none;
padding: 1rem 1rem 1rem 1rem;
border-radius: 2rem;
transition: all 0.4s ease-in-out;
box-shadow: 0 5px 5px #0000002e;
margin-bottom: 3rem;
}
.reservation .btn:hover {
transform: scale(1.05);
background-position: 30%;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<!--Meta-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ohmyfood - Page d'accueil</title>
<!--Link-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/accueil.css">
<!--FontAwesome-->
<script src="https://kit.fontawesome.com/ec6ba8c4d3.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Barre de chargement -->
<div class="chargement">
<div class="chargement_bloc">
<div class="chargement_bloc-cercle"></div>
</div>
</div>
<!-- Header -->
<header>
<h1>ohmyfood</h1>
</header>
<!-- Localisation -->
<main>
<div class="localisation">
<i class="fa fa-map-marker"></i>
<p>Paris, Belleville</p>
</div>
<!-- Réservation + Bouton -->
<section class="reservation">
<h2>Réservez le menu qui vous convient</h2>
<p>Découvrez des restaurants d'exception, sélectionnés par nos soins.</p>
<button class="btn" type="button" href="#restaurants">Explorer nos restaurants</button>
</section>
You just need to add animation-fill-mode: forwards; to the .chargement class so that it remains on the last frame
.chargement {
width: 100%;
height: 100%;
position: absolute;
animation-name: loader;
animation-duration: 2s;
animation-fill-mode: forwards;
}
When I try to go from mobile to desktop screen , navigation does not show up.I am pretty much a beginner in frontend, so any hint on this is welcome.
I did responsive part for header links to show from 50em screeen width, but i could not show it appropriately.Still not sure(do not know) how to get this to work.
Here's my 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>Sunnyside agency landing page_challenge_1</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=Barlow:wght#600&display=swap" rel="stylesheet">
<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=Fraunces:wght#700;900&display=swap" rel="stylesheet">
</head>
<body>
<!--HEADER-->
<header>
<nav>
<a href="#">
<img src="./images/logo.svg" alt="Sunnyside logo" class="logo">
</a>
<a href="#" class="header__menu">
<span></span>
<span></span>
<span></span>
</a>
<div class="header__links">
About
Services
Projects
Contact
</div>
</nav>
</header>
<!--HERO-->
<section class="home__hero">
<div class="container">
<h1 class="title">We are Creatives</h1>
<img src="./images/icon-arrow-down.svg" alt="down arrow" class="hero__arrow">
</div>
</section>
<!--ABOUT-->
<section class="about__cta">
<div class="container">
<div class="about__card bg__spec__img__1">
</div>
<div class="about__card">
<h4 class="transform__title">Transform your brand</h4>
<p class="transform__par">We are a full-service creative agency specializing
in helping brands grow fast.Engage your clients
through compelling visuals that do most of the marketing
for you.
</p>
Learn More
</div>
<div class="about__card bg__spec__img__2">
<img src="./images/mobile/image-stand-out.jpg" alt="Call to action image">
</div>
<div class="about__card">
<h4 class="standout__title">Stand out to the right audience</h4>
<p class="standout__par">Using a collaborative formula of designers, researchers,
photographers, videographers, and copywriters, we'll
build and extend your brain in digital places.
</p>
</div>
<div class="about__card graphic__design__card">
<h4>Graphic Design</h4>
<p>Great design makes you memorable.We deliver artwork
that underscores your brand message and captures
potential client's attention.
</p>
</div>
<div class="about__card photo__card">
<h4>Photography</h4>
<p>Increase your credibility by getting the most stunning,
high-quality photos that improve your business image.
</p>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
Here is my CSS(not finished, in progress):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* font-family: 'Fraunces', serif;
font-family: 'Barlow', sans-serif; */
/* global styles
---------------- */
img {
max-width: 100%;
height: auto;
}
.container {
width: 100%;
margin: 0 auto;
}
/* typography
------------- */
.transform__title,
.standout__title {
font-size: 1.8rem;
font-weight: 900;
font-family: 'Fraunces', serif;
margin: 2.5em 1em 1.5em 1em;
text-align: center;
width: 55vw;
}
.transform__par,
.standout__par {
font-family: 'Barlow', sans-serif;
font-weight: 600;
line-height: 1.6;
text-align: center;
padding-bottom: 1.5em;
margin: 0em 1em 1em 1em;
width: 60vw;
font-size: 1.125em;
color: hsl(232, 10%, 55%);
}
/* buttons
--------- */
.btn {
border: none;
outline: none;
background: white;
text-decoration: none;
text-transform: uppercase;
padding: 0.6em 1.75em;
border-radius: 50px;
font-family: 'Fraunces', serif;
font-weight: 900;
color: hsl(212, 27%, 19%);
}
.btn__cta {
padding-bottom: 2em;
background: transparent;
}
#media (min-width: 50em) {
.btn {
font-size: 0.925em
}
.header__text {
font-size: 0.925em;
}
}
#media (min-width: 60em) {
.btn {
font-size: 1em;
}
}
/* header
--------- */
header {
position: absolute;
left: 0;
right: 0;
}
nav {
height: 7vh;
width: 100%;
padding: 2.5em 1.5em;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__menu {
position: absolute;
right: 5%;
top: 50%;
transform: translate(5%, -50%);
}
span {
display: block;
width: 25px;
height: 2px;
background: white;
margin: 5px;
transition: all 400ms ease-in-out;
}
.header__links {
font-size: 1.125em;
font-family: 'Barlow', sans-serif;
font-weight: 200;
z-index: 98;
}
.header__text {
text-decoration: none;
color: white;
font-weight: 200;
z-index: 99;
}
.header__text:hover {
color: #eee;
}
.header__text:not(:last-child) {
margin-right: 1.125em;
}
/* header===responsive
-------------------- */
#media screen and (min-width: 23.4375em) {
body {
overflow-x: hidden;
}
.header__links {
display: none;
position: absolute;
top: 110%;
right: 50%;
transform: translateX(160%);
transition: transform 400ms ease-in-out;
background: white;
width: 90vw;
height: 40vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.header__links::after {
content: '';
position: absolute;
top: -1em;
right: 0em;
border-width: 1em;
border-style: solid;
border-color: transparent white transparent transparent;
}
.header__text {
color: hsl(213, 9%, 39%);
}
.header__text:hover {
color: hsl(210, 4%, 67%);
}
.btn {
background: hsl(51, 100%, 49%);
}
}
/* mobileMenu
------------- */
.burgerActive {
transform: translateX(50%);
}
.header__menu.anim span:nth-child(1) {
transform: translate(5px, 8px) rotate(135deg);
}
.header__menu.anim span:nth-child(2) {
opacity: 0;
}
.header__menu.anim span:nth-child(3) {
transform: translate(5px, -8px) rotate(-135deg);
}
/* ----------------------------- */
#media screen and (min-width: 50em) {
.header__links {
display: block;
}
.header__menu {
display: none;
}
}
/* home-hero
------------ */
.home__hero {
background-image: url('./images/mobile/image-header.jpg');
padding: 10em 0;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom 20% right;
font-family: 'Fraunces', serif;
}
.title {
color: hsl(0, 0%, 100%);
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 3rem;
padding-bottom: 3.5em;
}
.container {
position: relative;
}
.hero__arrow {
position: absolute;
right: 50%;
top: 60%;
transform: translateX(50%);
}
/* about
------------ */
.about__cta {
display: grid;
grid-template-columns: auto;
}
.about__card {
width: 100%;
border: 2px solid red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bg__spec__img__1 {
background-image: url('./images/mobile/image-transform.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
min-height: 45vh;
}
Your <nav> element in the header has a height of 0, according to chrome inspector.
Culprit appears to be some combination of the following styles on .header__links being applied in this media query: #media screen and (min-width: 23.4375em):
position: absolute;
transform: translateX(160%);
height: 40vh;
If I remove the above styles then I can see the desktop header, so my guess is you'll need to add an additional media query (with a larger, more desktop-appropriate min-width value) that overrides those styles with something more like what you're going for for your desktop UI. You'll likely need to play around with it to get it to look right.
Like the title says, I spent something like an hour and I can't figure why it is not working.
I just wanted to change the color and the background-color while hovering the button(a), but, even if in other sites I have no problem with similar code, in this one it doesn't seem to work.
Please help I'm going mad.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Portfolio 2</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Main -->
<section id="main">
<div class="container">
<p>Hello, my name is</p>
<p><span>M</span>ateusz <span>L</span>ipski</p>
MY PORTFOLIO
</div>
</section>
<!-- End Main -->
</body>
</html>
CSS
#import url("https://fonts.googleapis.com/css2?
family=Dosis:wght#200;300;400;500;600;700;800&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Dosis", sans-serif;
}
span {
color: rgb(9, 189, 165);
font-weight: 600;
}
.program {
font-size: 1.2rem;
margin-bottom: 25px;
}
/* Main */
#main {
position: relative;
background-image: url(https://images.unsplash.com/photo-1513530534585-c7b1394c6d51?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80);
background-size: cover;
background-position: top-center;
z-index: -1;
}
#main::after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.3;
z-index: -1;
}
#main .container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
#main .container p {
position: relative;
color: transparent;
font-size: 2.5rem;
font-weight: 500;
margin-right: 300px;
line-height: 4rem;
animation: p_reveal 0.1s ease forwards;
}
#main .container p:first-of-type {
animation-delay: 1.2s;
}
#main .container p:nth-of-type(2) {
animation-delay: 2.7s;
}
#main .container span {
color: transparent;
animation: span_reveal 0.1s ease forwards;
animation-delay: 2.7s;
}
#main .container p::after {
content: "";
position: absolute;
height: 100%;
width: 0;
left: 0;
background-color: rgb(9, 189, 165);
overflow: hidden;
animation: box_reveal 1.5s ease forwards;
}
#main .container p:first-of-type::after {
animation-delay: 0.5s;
}
#main .container p:nth-of-type(2)::after {
animation-delay: 2s;
}
#main .container a {
padding: 10px 30px;
margin-right: 300px;
margin-top: 30px;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.2rem;
text-decoration: none;
border: 3px solid rgb(9, 189, 165);
color: rgb(9, 189, 165);
}
#main .container a:hover {
color: white;
background-color: rgb(9, 189, 165);
}
/* End Main */
You have an z-index on your main, thus you are not able to hover over your element.
if you set that z-index on your main to 1 for example, it will work.
/* Main */
#main {
position: relative;
background-image: url(https://images.unsplash.com/photo-1513530534585-c7b1394c6d51?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80);
background-size: cover;
background-position: top-center;
z-index: -1;
}
edit: this block to be exact.
I am working on this web page designing. I used visual studio code for this. And used HTML and CSS. Also I'm a beginner to web designing.
Design gets messy when resize the browser window size. Texts,images and other contents moves here and there.
Design changes when browser change (IE,chrome,Firefox). ex:-Border margins change.
What should I do?
*{
margin: 0%;
padding: 0%;
box-sizing: content-box;
}
html{
font-size: 10px;
font-family: 'Amatic SC', cursive;
}
section{
width: 100%;
height: 100%;
color: #fff;
background: linear-gradient(45deg,#770a0a,#a01919,#d3163f,#d3511e,#ee2f16);
background-size: 400% 400%;
position: relative;
animation: change 30s ease-in-out infinite;
}
h1{
font-size: 380%;
letter-spacing: 0.5vh;
text-transform: uppercase;
border: 0.3vh solid white;
border-radius: 7vh;
float: left;
position: absolute;
padding: 1% 5%;
padding-left: 1%;
top: 80%;
left: 50%;
transform: translate(-50%,-50%);
}
.imp:hover{
color:rgb(245, 231, 167);
}
#keyframes change{
0%{
background-position:0 50% ;
}
50%{
background-position:100% 50% ;
}
100%{
background-position:0 50% ;
}
}
.icon{
width: 11%;
position: absolute;
top: 32.5%;
left: 53%;
transform: translate(-50%,-50%);
}
.menu{
font-size: 280%;
border: 0.3vh solid white;
border-radius: 7vh;
float: right;
position: relative;
margin-right: 2%;
margin-top: 2%;
}
.menu ul li{
display: inline-block;
line-height: 150%;
margin: 0 3vh;
padding: 0.009%;
cursor: pointer;
position:relative;
font-weight: bold;
}
.menu ul li:hover{
font-size: 130%;
}
a:link, a:visited {
color: white;
cursor: auto;
}
a:link:active, a:visited:active {
color: white;
}
.Home{
color: rgb(245, 231, 167);
}
.about{
font-size: 300%;
position: absolute;
padding: 2%;
top: 53%;
left: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
.hola{
font-size: 250%;
}
.next{
width: 3%;
position: absolute;
top: 80%;
left: 56%;
transform: translate(-50%,-50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>ImpressMe | Home</title>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght#700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<img class="icon" src="cute.png" alt="Boy" title="Hola....">
<div class="go">
<a href="sendme/sendme.html" class="imp">
<h1>Impress Me</h1>
<img class="next" src="go.png" alt="go"></a>
</div>
<div class="about">
<p class="hola">Hola.....!</p><p>you look familiar<br>I'm pretty sure you got something to impress me<br>Tell me<br>I would love to hear from you</p>
</div>
<div class="menu">
<ul>
<a href="index.html">
<li class="Home">Home</li></a>
<a href="About/about.html">
<li class="#">About</li></a>
<li class="#">Contact</li>
</ul>
</div>
</section>
</body>
</html>
I recommend you to learn about Bootstrap for example here. For your problem you actually only need Container and Grid System Basics, to make your site responsive.
Also for your problem with different browsers use Normalize.css to make it look more consistent. (It's already included in Bootstrap)
So I have this front page and I'm trying to have the button align towards the middle like below the text, but I've tried adding margins and it won't move. Any tips?
.parallax {
height: 100vh;
width: 100%;
background-color: #C4CBCA;
background-attachment: scroll; /*fixed: image scrolls; scroll: image stays*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.create {
background-color: #a4cdd1;
color: white;
min-width: 214px;
border: none;
height: 43px;
display: inline-block;
float: right;
font: 700 15px Lato, arial, helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
align-items: center;
padding: 13px 15px 10px;
/*margin-left: 300px;*/
/*margin-top: 10px;*/
border: none;
cursor: pointer;
}
#animated-example {
font: 700 30px Lato, arial, helvetica, sans-serif;
color: #5D5F71;
float: right;
margin-top: 200px;
margin-right: 20px;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: linear;
}
#keyframes lightSpeedIn {
0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}
.lightSpeedIn {
animation-name: lightSpeedIn;
animation-timing-function: ease-out;
}
.animated.lightSpeedIn {
animation-duration: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>front page</title>
<link rel="stylesheet" href="front.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Raleway">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow">
</head>
<body>
<div class="parallax">
<div id="animated-example" class="animated lightSpeedIn">
<p>SOME TEXT HERE</p>
</div>
<div class="photo">
<img src="macmockup.png" style="width:675px; height:675px; margin-left:20px; margin-top:15px;">
</div>
<div class="create">
Create Template
</div>
</div>
</body>
</html>
So whats killing you here is the float right it is overriding anything you add after that.
Now i don't think this is the best solution but if you remove the float you can then add whatever margin left you need to get the button to move.
something to look into for you would be bootstrap, it is a much cleaner way to format a lot of this http://getbootstrap.com/
Try to do this Remove float: right from .create
<div class="create_wrapper">
<div class="create">
Create Template
</div>
</div>
CSS
.create {
background-color: #a4cdd1;
color: white;
min-width: 214px;
border: none;
height: 43px;
display: inline-block;
font: 700 15px Lato, arial, helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
align-items: center;
padding: 13px 15px 10px;
margin: auto;
border: none;
cursor: pointer;
}
.create_wrapper {
width: 100%;
text-align: center
}
Try to align .create to center if you want it in the middle.
.create{ text-align: center; }
add following css on your style:
.parallax {
position: relative;
}
.create {
position: absolute;
bottom: 0;
right:0;
}
check live http://codepen.io/sifulislam/pen/qaAjgY