I've build a webpage currently only with the header in it with simple html and css. And I've made sure that I've only used the px unit to specify the root font size and the rest to use rem unit, yet the page is not responsive. When the windows is scaled down the fonts are staying the same.
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: #777;
padding: 3rem;
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(
-50%,
-50%
);
text-align: center;
}
.header {
height: 95vh;
background-image: linear-gradient(
to right bottom,
rgba(126, 213, 111, 0.8),
rgba(40, 180, 133, 0.8)
),
url(../img/hero.jpg);
background-size: cover;
background-position: top;
clip-path: polygon(
0 0,
100% 0,
100% 75vh,
0 100%
);
position: relative;
}
.logo-box {
position: absolute;
top: 4rem;
left: 4rem;
}
.logo {
height: 3.5rem;
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.heading-primary {
color: #fff;
text-transform: uppercase;
backface-visibility: hidden;
margin-bottom: 6rem;
}
.heading-primary-main {
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-in;
}
.heading-primary-sub {
display: block;
font-size: 2rem;
font-weight: 700;
letter-spacing: 1.75rem;
animation: moveInRight 1s ease-in;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/icon-font.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- tab icon -->
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
<title>Natours | Exciting tours for adventurous people</title>
</head>
<body>
<header class="header">
<div class="logo-box">
<img class="logo" src="img/logo-white.png" alt="logo" />
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Outdoors</span>
<span class="heading-primary-sub">is where life happends</span>
</h1>
Discover out tours
</div>
</header>
</body>
</html>
Anybody see where I screwed up?
Browser: Chrome
Change font-size to units of vw instead of rem.
.heading-primary-main {
display: block;
font-size: 10vw;
font-weight: 400;
letter-spacing: 1.0rem;
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-in;
}
.heading-primary-sub {
display: block;
font-size: 4vw;
font-weight: 700;
letter-spacing: .75rem;
animation: moveInRight 1s ease-in;
}
You will have to play with your letter spacing to get it to your liking.
I would recommend calling the font from the CSS so you only use it when you need it.
Another recommendation would be that you use endpoints in css and when you want to change the font use the !important
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Related
After the slideIn animation the buttons don't set the cursor to pointer and don't do anything that was coded in the :hover/:active.
My goal is to have the button effects after the animation.
here is an example where the button effects don't work after the animation:
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
#btn1{
opacity: 0;
animation: slideIn 1.5s 2s 1 ease-out forwards;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 1;
transform: translateX(-900px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
Here is an example without animation where the button effects do work:
body{
background-image: url("../img/bg.png");
background-repeat: no-repeat;
background-size: 100%;
}
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
<?xml version="1.0" encoding="UTF-8"?>
<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/XHtml.xhtml to edit this template
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
Okay so a few problems here. You are trying to animate transform properties on hover and with the animation property.
The way I would solve this is by adding a container to the button where you would add the intro animation. Then add the hover animation to the button.
here's the HTML
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br /> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<div class="button-container">
<button class="btn">
<span>
1300000
</span>
</button>
</div>
</a>
</li>
</ul>
</div>
</section>
and then CSS
.content {
position: absolute;
background: linear-gradient(-45deg, #2e3192, #1bffff);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1 {
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 200%;
}
ul {
padding: 0px;
list-style: none;
}
.button-container {
animation: slideIn 1.5s 1 ease-out forwards;
}
.btn {
position: relative;
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
transition: transform 0.1s;
color: white;
cursor: pointer;
}
.btn:hover {
transform: translateY(-2px);
transition-duration: 0.3s;
}
.btn:active {
transform: scale(0.95);
}
span {
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 0;
transform: translateX(-900px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
Apply display: block; to the a tag around the button to make the whole button surface be a link:
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
#btn1{
opacity: 0;
animation: slideIn 1.5s 2s 1 ease-out forwards;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 1;
transform: translateX(-900px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#questions a {
display: block;
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
Updated answer (works with 2s delay):
Remove the transform: translateX(0) from the 100% keyframe on the animation. It's unnecessary, and it's overriding the :hover animation.
Old answer:.
(I changed the animation-fill-mode to none, and moved the opacity: 0 to the #keyframes). The problem was that the transform on the :hover was being overridden by the #keyframes, so changing the fill-mode fixed that.
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
#btn1{
opacity: 0;
animation: slideIn 1.5s 2s 1 ease-out forwards;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 1;
transform: translateX(-900px);
}
100% {
opacity: 1;
}
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
I wrote up an animation in which the banner elements will show up on the screen smoothly from the bottom up. The elements should also rotate slightly as they go up the screen. To accomplish that I added a transition property with value of translateY() rotateY(). Unfortunately, while translateY() works just fine, rotateY() does not. I've no idea why. Plz help me fix this issue. Regards.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Starter</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght#400;500;600;700;800&family=Josefin+Slab:ital,wght#0,300;0,400;1,200;1,300;1,400&family=Mulish:ital,wght#0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
<link
rel="stylesheet"
href="stylesheet.css"
/>
</head>
<body>
<div class="container">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<header class="header">
<div class="img-wrapper">
<img src="bg.jpg">
</div>
<div class="banner">
<h1>Architecture & Interior Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<button>Discover now</button>
</div>
</header>
</div>
<script src="test3.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
html{
font-size: 62.5%;
}
.hamburger-menu{
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 5rem;
height: 5rem;
z-index: 200;
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
}
.line{
width: 100%;
height: 0.2rem;
background-color: #fff;
box-shadow: 0 0.1rem .2rem rgba(0, 0, 0, 0.2);
}
.header{
width: 100%;
height: 100vh;
position: relative;
perspective: 100rem;
overflow: hidden;
}
.img-wrapper{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0 , .8);
overflow: hidden;
}
.img-wrapper img{
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
animation: scale 25s;
}
#keyframes scale{
0%{
transform: scale(1.3);
}
100%{
transform: scale(1);
}
}
.banner{
position: absolute;
top: 30%;
left: 15%;
}
.banner h1{
font-family: "Baloo Da 2", serif;
font-size: 8rem;
font-weight: 300;
color: #fff;
width: 50%;
line-height: 9rem;
letter-spacing: .2rem;
text-shadow: 0.3rem .5rem rgba(0, 0, 0, 0.4);
opacity: 0;
animation: moveBanner 1s 0.5s forwards;
}
.banner p{
font-family: "Josefin Slab", serif;
font-size: 4rem;
color: #fff;
width: 70%;
letter-spacing: 0.1rem;
margin-bottom: 3rem;
text-shadow: 0.3rem .5rem rgba(0, 0, 0, 0.4);
opacity: 0;
animation: moveBanner 1s 0.7s forwards;
}
.banner button{
width: 25rem;
height: 7rem;
background-color: #c29525;
border: none;
font-family: "Muli", serif;
font-size: 2rem;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0.2rem .4rem rgba(0, 0, 0, 0.2);
text-shadow: 0 0.3rem .5rem rgba(0, 0, 0, 0.4);
cursor: pointer;
opacity: 0;
animation: moveBanner 1s 0.9s forwards;
}
#keyframes moveBanner{
0%{
transform: translateY(40rem) rotateY(-20deg);
}
100%{
transform: translateY(0) rotateY(0);
opacity: 1;
}
}
rotateY rotates about the Y axis. So unless you introduce 3d aspects to the CSS nothing will seem to happen.
I think you require rotation about the Z axis, that is, the axis that is coming straight out of the screen.
div {
width: 300px;
height: 100px;
background: green;
transform: rotateZ(-45deg);
}
<div></div>
I found the solution. Just add a perspective of 100rem to the parent div.
.banner{
position: absolute;
top: 30%;
left: 15%;
perspective: 100rem;
}
i am working on chat application i want to make the button to be responsive for all the screen width below i added the code for the reference
Try shrinking the page width-wise and you'll see my issue. How can I keep the button size and position as close to the same as desktop as possible when resizing the screen? I'm stumped.
Pen: https://codepen.io/trjwaugh/pen/QWvypQJ
//FONTS
$heading-font: 'Roboto', sans-serif;
$main-font: 'Open Sans', sans-serif;
//COLORS
$btn-blue: #35A7FF;
* {
padding: 0;
margin: 0;
}
#header__chat {
position: absolute;
top: 30%;
left: 40%;
transform: translate(-50%, -50%);
width: 50vw;
max-width: 1000px;
display: flex;
padding: 20px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 50px;
animation: 5s;
}
#header__btn {
position: absolute;
top: 30%;
left: 72%;
transform: translate(-50%, -50%);
width: 6vw;
display: flex;
padding: 30px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 50px;
background-color: $btn-blue;
color: white;
align-items: center;
h2{
font-size: 2vw;
padding: 10px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
text-transform: uppercase;
}
}
h1 {
font-size: 5vw;
font-family: $heading-font;
}
h2 {
font-size: 2vw;
font-family: $heading-font;
}
.typing {
width: 12ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
<html lang="en">
<!--- Required Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Hello, I'm Tim. A Frontend Web Developer, always curious, learning and growing my skills in web design, data, analytics and software in general.">
<!--- CSS -->
<link rel="stylesheet" href="css/style.css">
<head>
<style>#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght#400;500;700&display=swap');</style>
</head>
<body>
<div id="header__chat">
<h1 class="typing">Text Goes Here.</h1>
</div>
<div id="header__btn">
<h2>Send</h2>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js" integrity="sha512-SttpKhJqONuBVxbRcuH0wezjuX+BoFoli0yPsnrAADcHsQMW8rkR84ItFHGIkPvhnlRnE2FaifDOUw+EltbuHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/script.js"></script>
</body>
</html>
By using media queries adjust the padding , width, height of button according to screen size
#media only screen and (max-width: 600px) {
#header__btn {
position: absolute;
top: 30%;
left: 75%;
transform: translate(-50%, -50%);
background-color: #35A7FF;
color: white;
align-items: center;
width: 50px;
height: 30px;
padding: 25px;
border-radius: 50px;
}
}
please refer this w3 schools media queires to clearly understand what is media queries
here i attached the reference image on changing css
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