I am having some problems with my stylesheet. I am trying to do some funny hover effects, but somehow I can't use transform. Can anyone help me? The error occurs down below the comment "view one".
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen" />
<head>
<title>thomasteilmann.dk</title>
</head>
<body>
<div class="header">
<h1><img src="teilmann.jpg" alt="Sick Logo" /></a></h1>
Copyright Thomas Teilmann
</div>
<div id="content">
<div class="view view-first">
<img src="images/cosmic_art_icon.jpg"/>
<div class="mask">
<h2>Cosmic Art</h2>
<p>A galleri of cosmic art made in Photoshop</p>
View
</div>
</div>
</body>
</html>
CSS:
body {
background: #21211f;
width: 902px;
font-family: helvetica, arial, sans-serif;
margin: 0 auto;
padding: 40px 0 0 0;
}
.header{
position: absolute;
width: 185px;
}
h1 img{
float: left;
padding: 0;
margin: 0;
}
#navbar ul {
position: absolute;
margin-left: 190px;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: white;
width: 692px;
margin-top: 65px;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
font-family: Georgia, times, serif;
color: black;
background-color: white;
}
#navbar ul li a:hover {
color: black;
background-color: #fff;
}
#content{
width: 612px;
background: #466287 url(images/corner.jpg) top right no-repeat;
line-height: 22px;
font-size: 18px;
font-family: Georgia, times, serif;
margin: 0 0 10px 0;
float: left;
color: #ffffff;
margin-left: 190px;
margin-top: 100px;
padding: 20px 60px 20px 30px;
}
img {
border: none;
}
.form{
margin: 15px 0;
padding: 20px 0 20px 0;
background: url(form1.jpg) no-repeat;
font-family: helvetica, arial, sans-serif;
}
/*
* View
*/
.view {
width: 279px;
height: 198px;
margin: 10px;
float: left;
border: 5px solid white;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 2px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask, .view .content {
width: 279px;
height: 198px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
}
.view a.info:hover {
box-shadow: 0 0 5px #000;
}
/* View one
*/
.view-first img {
transition: all 0.2s linear;
}
.view-first .mask {
opacity: 0;
background-color: rgba(219,127,8, 0.7);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first:hover img {
transform: scale(1.1);
}
.view-first:hover .mask {
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view-first:hover p {
transition-delay: 0.1s;
}
.view-first:hover a.info {
transition-delay: 0.2s;
}
transform isn't a standard yet, so no browser supports it at present.
However, some browsers support vendor extensions based on the draft:
-ms-transform in Internet Explorer 9
-moz-transform in Mozilla browsers (most notably Firefox)
-webkit-transform in Webkit browsers (Chrome, Safari, etc.)
-o-transform in Opera
Possibly others, I don't know.
just use this css inside your css code.Remember transform does not work in all browsers.
.view-first:hover {
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
You'll probably need to use vendor specific styles for the transitions, for example:
#id_of_element {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
You can read more about transitions and transformations here - http://css3.bradshawenterprises.com/
Related
just a relative simple question I think but can't find what to change. I you click to this input field you get a gradient color on the bottom of the field. I need to add something to get a red gradient color to the bottom when the page is loaded (so not clicked), when there is clicked the gradient changes to that yellow to pink gradient. thanks in advance!
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
/*---------------------------------------------*/
a {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
}
a:focus {
outline: none !important;
}
a:hover {
text-decoration: none;
color: #6a7dfe;
color: -webkit-linear-gradient(left, #21d4fd, #b721ff);
color: -o-linear-gradient(left, #21d4fd, #b721ff);
color: -moz-linear-gradient(left, #21d4fd, #b721ff);
color: linear-gradient(left, #21d4fd, #b721ff);
}
/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
margin: 0px;
}
p {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
}
ul, li {
margin: 0px;
list-style-type: none;
}
/*---------------------------------------------*/
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
textarea:focus, input:focus {
border-color: transparent !important;
}
/*------------------------------------------------------------------
[ Input ]*/
.wrap-input100 {
width: 100%;
position: relative;
border-bottom: 2px solid #adadad;
margin-bottom: 37px;
}
.input100 {
font-family: Poppins-Regular;
font-size: 15px;
color: #555555;
line-height: 1.2;
display: block;
width: 100%;
height: 45px;
background: transparent;
padding: 0 5px;
}
/*---------------------------------------------*/
.focus-input100 {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.focus-input100::before {
content: "";
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
background: #6a7dfe;
background: -webkit-linear-gradient(left, yellow, #b721ff);
background: -o-linear-gradient(left, yellow, #b721ff);
background: -moz-linear-gradient(left, yellow, #b721ff);
background: linear-gradient(left, yellow, #b721ff);
}
.focus-input100::after {
font-family: Poppins-Regular;
font-size: 15px;
color: #999999;
line-height: 1.2;
content: attr(data-placeholder);
display: block;
width: 100%;
position: absolute;
top: 16px;
left: 0px;
padding-left: 5px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.input100:focus + .focus-input100::after {
top: -15px;
}
.input100:focus + .focus-input100::before {
width: 100%;
}
.has-val.input100 + .focus-input100::after {
top: -15px;
}
.has-val.input100 + .focus-input100::before {
width: 100%;
}
/*------------------------------------------------------------------
[ Responsive ]*/
#media (max-width: 576px) {
.wrap-login100 {
padding: 77px 15px 33px 15px;
}
}
/*------------------------------------------------------------------
[ Alert validate ]*/
.validate-input {
position: relative;
}
.alert-validate::before {
content: attr(data-validate);
position: absolute;
max-width: 70%;
background-color: #fff;
border: 1px solid #c80000;
border-radius: 2px;
padding: 4px 25px 4px 10px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 0px;
pointer-events: none;
font-family: Poppins-Regular;
color: #c80000;
font-size: 13px;
line-height: 1.4;
text-align: left;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.alert-validate::after {
content: "\f06a";
font-family: FontAwesome;
font-size: 16px;
color: #c80000;
display: block;
position: absolute;
background-color: #fff;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 5px;
}
.alert-validate:hover:before {
visibility: visible;
opacity: 1;
}
.limiter {
width: 20%;
padding-top: 5%;
}
<div class="limiter">
<div class="wrap-input100 validate-input">
<span class="btn-show-pass">
<i class="zmdi zmdi-eye"></i>
</span>
<input class="input100" type="password" name="password">
<span class="focus-input100" data-placeholder="wachtwoord"></span>
</div>
</div>
Add CSS border-image and border-image-slice properties to the .wrap-input100 class
.wrap-input100 {
width: 100%;
position: relative;
margin-bottom: 37px;
border-bottom: 2px solid transparent;
border-image: linear-gradient(to right, #b721ff 0%, red 100%);
border-image-slice: 1;
}
I need help with my contact form, the screen isn't in fixed position and some element is making the page being able to scroll on mobile when its not supposed to since everything is aligned in the center. I tried removing padding in container in the Mobile query but that did not work and I can't seem to find out why its scrolling, I changed the viewport to 100% width and that fixed the issue but that will not work in the long run since my website is supposed to be responsive and I changed the viewport back to initial scale and everything as seen in the HTML code but the scrolling issue comes back.
CSS and HTML
#media screen and (max-width: 500px) /* Mobile */ {
* {
box-sizing: border-box;
}
#navigation {
display: none;
}
input[type=text3], select, textarea {
width: 55%; /* Full width */
padding: 30px; /* Some padding */
margin-top: 0px;
outline: none;
color: #ff0055;
text-align: center;
border: 1px solid #f3f3f3; /* Gray border */
border-radius: 100px; /* Rounded borders */
}
input[type=text2], select, textarea {
width: 55%; /* Full width */
padding: 20px; /* Some padding */
color: #ff0055;
outline: none;
text-align: center;
border: 1px solid #f3f3f3; /* Gray border */
border-radius: 100px; /* Rounded borders */
}
input[type=text2]:hover, select, textarea {
width: 55%; /* Full width */
padding: 20px; /* Some padding */
color: #ff0055;
text-align: center;
border: 2px solid #ff0055; /* Gray border */
border-radius: 100px; /* Rounded borders */
transition: all 0.3s ease 0s;
}
input[type=text3]:hover, select, textarea {
width: 55%; /* Full width */
padding: 30px; /* Some padding */
margin-top: 0px;
color: #ff0055;
text-align: center;
border: 2px solid #ff0055; /* Gray border */
border-radius: 100px; /* Rounded borders */
transition: all 0.3s ease 0s;
}
input[type=text], select, textarea {
width: 55%; /* Full width */
padding: 20px; /* Some padding */
text-align: center;
outline: none;
color: #FF0055;
border: 1px solid #f3f3f3; /* Gray border */
border-radius: 100px; /* Rounded borders */
}
input[type=text]:hover, select, textarea {
width: 55%;
padding: 20px; /* Some padding */
text-align: center;
border: 2px solid #ff0055; /* Gray border */
border-radius: 50px; /* Rounded borders */
transition: all 0.3s ease 0s;
}
input[type=submit] {
background-color: #001FFF;
color: white;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
border: none;
cursor: pointer;
border-color: #000000;
text-align: center;
display: inline-block;
text-decoration: none;
text-shadow: none;
margin: 50px 175px;
padding: 10px 50px;
border: none;
border-radius: 100px;
outline: none;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #0019CF;
color: white;
text-align: center;
outline: none;
-ms-transform: translate(-50%, -50%);
transition: all 0.3s ease 0s;
-webkit-box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
}
.container {
border-radius: 100%;
font-size: 20px;
text-align: center;
background-color: #FFFFFF;
display: inline-block;
}
.nav2 {
height: 50px;
width: 100%;
margin: 0 auto;
background-color: white;
position: fixed;
z-index: 9999;
}
.nav2 > .nav-header {
display: inline;
margin: 0 auto;
z-index: 9999;
}
.nav2 > .nav-header > .nav-title {
display: inline-block;
font-size: 20px;
margin: 0 auto;
color: #fff;
font-family: 'Pacifico', cursive;
padding: 5px 10px 10px 15px;
}
#header {
display: inline-block;
font-size: 20px;
position: fixed;
margin: 0 auto;
color: #000;
z-index: 10000;
font-family: 'Pacifico', cursive;
padding: 5px 10px 10px 15px;
}
.nav2 > .nav-btn {
display: none;
margin: 0 auto;
}
.nav2 > .nav-links {
display: inline;
z-index: 9999;
margin: 0 auto;
float: right;
font-size: 15px;
}
.nav2 > .nav-links > a {
display: inline-block;
z-index: 9999;
margin: 0 auto;
text-align: center;
background-color: white;
padding: 13px 10px 13px 10px;
text-decoration: none;
color: #000;
}
.nav2 > .nav-links > a:hover {
background-color: #005DFF;
color: white;
z-index: 9999;
}
.nav2 > #nav-check {
display: none;
}
#media (max-width:600px) {
.nav2 > .nav-btn {
z-index: 9999;
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.nav2 > .nav-btn > label {
display: inline-block;
z-index: 9999;
background-color: white;
color: black;
width: 50px;
height: 50px;
padding: 13px;
}
.nav2 > .nav-btn > label:hover {
background-color: blue);
z-index: 9999;
}
.nav2 > .nav-btn > label > span {
display: block;
z-index: 9999;
width: 25px;
height: 10px;
border-top: 3px solid black;
}
.nav2 > .nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #fff;
height: 0px;
z-index: 9999;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
left: 0px;
}
.nav2 > .nav-links > a {
display: block;
z-index: 9999;
color: black;
width: 100%;
}
.nav2> #nav-check:not(:checked) + .nav-links {
height: 0px;
z-index: 9999;
}
.nav2 > #nav-check:checked + .nav-links {
height: calc(100vh - 50px);
z-index: 9999;
overflow-y: auto;
}
}
}
.button {
position: absolute;
top: 130%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transition: all 0.3s ease 0s;
-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
background-color: #FFFFFF;
color: black;
font-size: 16px;
padding: 32px 24px;
font-family: 'Open Sans', sans-serif;
border: none;
cursor: pointer;
border-radius: 100px;
border-color: #000000;
text-align: center;
display: flex;
text-decoration: none;
text-shadow: none;
align-items: center;
justify-content: center;
}
.button:hover {
background-color: #FFFFFF;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
color: #FF0055;
text-shadow: none;
text-decoration: none;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
body, html {
height: 100%;
margin: 0;
font-family: 'Overpass', sans-serif;
background: #ffffff;
}
p {
text-align: center;
}
h1 {
text-align: center;
padding: 100px;
font-weight: bolder;
}
h2 {
padding: 10px 10px;
font-weight: bolder;
}
h3 {
font-weight: bolder;
top: 50%;
left: -10%;
transform: translate(0%, -100%);
}
#header.active {
box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s; /* Firefox < 16 */
-ms-animation: fadein 1s; /* Internet Explorer */
-o-animation: fadein 1s; /* Opera < 12.1 */
animation: fadein 1s;
}
a:link {
position: relative;
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
}
a:link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000000;
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;
}
.nav:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.active:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
a:link {
cursor: pointer;
padding: 13px;
text-decoration: none;
}
a:link:hover {
padding: 13px;
-webkit-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
a:link:active {
padding: 13px;
-webkit-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
a:visited {
color: #000000;
}
#header.scroll {
background-color: #000000;
opacity: 0.5;
}
.main {
border-radius: 100px;
padding: 13px;
border: none!important;
text-decoration: none!important
}
.main:hover {
background-color: #00439F;
color: white;
border: none;
padding: 13px;
text-decoration: none!important;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
position: fixed;
margin: -13px -90px;
border-radius: 100px;
-webkit-animation:bounce 1s infinite;
}
</style>
<!doctype html>
<html>
<head>
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>adamferreira - Contact</title>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">adamferreira</div>
<div id="navigation"
<ul>
<a class="main" href="portfolio.html">Portfolio</a>
<a class="nav" href="index.html">Home</a>
<a class="nav" href="contact.php">Contact</a>
<a class="nav" href="featured.html">Featured</a>
<a class="nav" href="story-highlights.html">Story Highlights</a>
</ul>
</div>
</div>
</div>
<div class="nav2">
<div class="nav-header">
<div class="nav-title"></div>
</div>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<input type="checkbox" id="nav-check">
<div class="nav-links">
Portfolio
Home
Contact
Featured
Story Highlights
</div>
</div>
</head>
<body>
<div class="headerBackground"></div>
<div class="container" data-aos="ease-in-out-back" data-aos="zoom out">
<h1>Contact</h1>
<form method="POST">
<input type="text" name="firstname" placeholder="Your name..." style="font-size: 15px;">
<input type="text2" name="lastname" placeholder="Your last name..." style="font-size: 15px;">
<input type="text3" name="comment" placeholder="Type your comment..." style="font-size: 15px;">
<input type="submit" class="btn" name="submit" value="Submit">
</form>
</div>
</body>
</html>
Your submit button is absolutely massive due to the margin: 50px 175px;. Just the margins take up 350px. Factor in the actual width of the button (50px) and you have 400px right there.
If you set a viewport tag (width=device-width), you're looking at 375px (or so) for an iPhone 6/7/8. So, excluding any other margin/padding to the body, you're already overflowing.
Edit:
Rather than use a defined value to center/offset the button, you could change display from inline-block to block. Then margin: 50px 175px to margin: 50px auto; which will center. flexbox would also help, but requires a bit more changes to the container/children.
Here's the rendered HTML/CSS after adjusting submit to display: block; margin: 50px auto (no more horizontal scroll!):
#media screen and (max-width: 500px)
/* Mobile */
{
* {
box-sizing: border-box;
}
#navigation {
display: none;
}
input[type=text3], select, textarea {
width: 55%;
/* Full width */
padding: 30px;
/* Some padding */
margin-top: 0px;
outline: none;
color: #ff0055;
text-align: center;
border: 1px solid #f3f3f3;
/* Gray border */
border-radius: 100px;
/* Rounded borders */
}
input[type=text2], select, textarea {
width: 55%;
/* Full width */
padding: 20px;
/* Some padding */
color: #ff0055;
outline: none;
text-align: center;
border: 1px solid #f3f3f3;
/* Gray border */
border-radius: 100px;
/* Rounded borders */
}
input[type=text2]:hover, select, textarea {
width: 55%;
/* Full width */
padding: 20px;
/* Some padding */
color: #ff0055;
text-align: center;
border: 2px solid #ff0055;
/* Gray border */
border-radius: 100px;
/* Rounded borders */
transition: all 0.3s ease 0s;
}
input[type=text3]:hover, select, textarea {
width: 55%;
/* Full width */
padding: 30px;
/* Some padding */
margin-top: 0px;
color: #ff0055;
text-align: center;
border: 2px solid #ff0055;
/* Gray border */
border-radius: 100px;
/* Rounded borders */
transition: all 0.3s ease 0s;
}
input[type=text], select, textarea {
width: 55%;
/* Full width */
padding: 20px;
/* Some padding */
text-align: center;
outline: none;
color: #FF0055;
border: 1px solid #f3f3f3;
/* Gray border */
border-radius: 100px;
/* Rounded borders */
}
input[type=text]:hover, select, textarea {
width: 55%;
padding: 20px;
/* Some padding */
text-align: center;
border: 2px solid #ff0055;
/* Gray border */
border-radius: 50px;
/* Rounded borders */
transition: all 0.3s ease 0s;
}
input[type=submit] {
background-color: #001FFF;
color: white;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
border: none;
cursor: pointer;
border-color: #000000;
text-align: center;
display: block;
text-decoration: none;
text-shadow: none;
margin: 50px auto;
padding: 10px 50px;
border: none;
border-radius: 100px;
outline: none;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #0019CF;
color: white;
text-align: center;
outline: none;
-ms-transform: translate(-50%, -50%);
transition: all 0.3s ease 0s;
-webkit-box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.1);
}
.container {
border-radius: 100%;
font-size: 20px;
text-align: center;
background-color: #FFFFFF;
display: inline-block;
}
.nav2 {
height: 50px;
width: 100%;
margin: 0 auto;
background-color: white;
position: fixed;
z-index: 9999;
}
.nav2 > .nav-header {
display: inline;
margin: 0 auto;
z-index: 9999;
}
.nav2 > .nav-header > .nav-title {
display: inline-block;
font-size: 20px;
margin: 0 auto;
color: #fff;
font-family: 'Pacifico', cursive;
padding: 5px 10px 10px 15px;
}
#header {
display: inline-block;
font-size: 20px;
position: fixed;
margin: 0 auto;
color: #000;
z-index: 10000;
font-family: 'Pacifico', cursive;
padding: 5px 10px 10px 15px;
}
.nav2 > .nav-btn {
display: none;
margin: 0 auto;
}
.nav2 > .nav-links {
display: inline;
z-index: 9999;
margin: 0 auto;
float: right;
font-size: 15px;
}
.nav2 > .nav-links > a {
display: inline-block;
z-index: 9999;
margin: 0 auto;
text-align: center;
background-color: white;
padding: 13px 10px 13px 10px;
text-decoration: none;
color: #000;
}
.nav2 > .nav-links > a:hover {
background-color: #005DFF;
color: white;
z-index: 9999;
}
.nav2 > #nav-check {
display: none;
}
#media (max-width:600px) {
.nav2 > .nav-btn {
z-index: 9999;
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.nav2 > .nav-btn > label {
display: inline-block;
z-index: 9999;
background-color: white;
color: black;
width: 50px;
height: 50px;
padding: 13px;
}
.nav2 > .nav-btn > label:hover {
background-color: blue);
z-index: 9999;
}
.nav2 > .nav-btn > label > span {
display: block;
z-index: 9999;
width: 25px;
height: 10px;
border-top: 3px solid black;
}
.nav2 > .nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #fff;
height: 0px;
z-index: 9999;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
left: 0px;
}
.nav2 > .nav-links > a {
display: block;
z-index: 9999;
color: black;
width: 100%;
}
.nav2> #nav-check:not(:checked) + .nav-links {
height: 0px;
z-index: 9999;
}
.nav2 > #nav-check:checked + .nav-links {
height: calc(100vh - 50px);
z-index: 9999;
overflow-y: auto;
}
}
}
.button {
position: absolute;
top: 130%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transition: all 0.3s ease 0s;
-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
background-color: #FFFFFF;
color: black;
font-size: 16px;
padding: 32px 24px;
font-family: 'Open Sans', sans-serif;
border: none;
cursor: pointer;
border-radius: 100px;
border-color: #000000;
text-align: center;
display: flex;
text-decoration: none;
text-shadow: none;
align-items: center;
justify-content: center;
}
.button:hover {
background-color: #FFFFFF;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
color: #FF0055;
text-shadow: none;
text-decoration: none;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
#-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body, html {
height: 100%;
margin: 0;
font-family: 'Overpass', sans-serif;
background: #ffffff;
}
p {
text-align: center;
}
h1 {
text-align: center;
padding: 100px;
font-weight: bolder;
}
h2 {
padding: 10px 10px;
font-weight: bolder;
}
h3 {
font-weight: bolder;
top: 50%;
left: -10%;
transform: translate(0%, -100%);
}
#header.active {
box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-animation: fadein 1s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s;
/* Firefox < 16 */
-ms-animation: fadein 1s;
/* Internet Explorer */
-o-animation: fadein 1s;
/* Opera < 12.1 */
animation: fadein 1s;
}
a:link {
position: relative;
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
}
a:link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000000;
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;
}
.nav:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.active:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
a:link {
cursor: pointer;
padding: 13px;
text-decoration: none;
}
a:link:hover {
padding: 13px;
-webkit-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
a:link:active {
padding: 13px;
-webkit-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
a:visited {
color: #000000;
}
#header.scroll {
background-color: #000000;
opacity: 0.5;
}
.main {
border-radius: 100px;
padding: 13px;
border: none!important;
text-decoration: none!important
}
.main:hover {
background-color: #00439F;
color: white;
border: none;
padding: 13px;
text-decoration: none!important;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
position: fixed;
margin: -13px -90px;
border-radius: 100px;
-webkit-animation:bounce 1s infinite;
}
<!doctype html>
<html>
<head>
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>adamferreira - Contact</title>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">adamferreira</div>
<div id="navigation"
<ul>
<a class="main" href="portfolio.html">Portfolio</a>
<a class="nav" href="index.html">Home</a>
<a class="nav" href="contact.php">Contact</a>
<a class="nav" href="featured.html">Featured</a>
<a class="nav" href="story-highlights.html">Story Highlights</a>
</ul>
</div>
</div>
</div>
<div class="nav2">
<div class="nav-header">
<div class="nav-title"></div>
</div>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<input type="checkbox" id="nav-check">
<div class="nav-links">
Portfolio
Home
Contact
Featured
Story Highlights
</div>
</div>
</head>
<body>
<div class="headerBackground"></div>
<div class="container" data-aos="ease-in-out-back" data-aos="zoom out">
<h1>Contact</h1>
<form method="POST">
<input type="text" name="firstname" placeholder="Your name..." style="font-size: 15px;">
<input type="text2" name="lastname" placeholder="Your last name..." style="font-size: 15px;">
<input type="text3" name="comment" placeholder="Type your comment..." style="font-size: 15px;">
<input type="submit" class="btn" name="submit" value="Submit">
</form>
</div>
</body>
</html>
I'm having trouble centering my home page text (the tag). I'm not sure why it's not working.
I have a button that performs a short animation when the user hovers over the button. The button is supposed to fill with red but when I change the background color of the #main container, the button loses its animation. I'm assuming that it's getting hidden behind main's background color but I don't know how to resolve this issue.
Thanks!
/*CSS DOCUMENT*/
/* Notes:
Hashtags are for ID's and dots(.) are for classes
If you do #nav .selected for example, it would look for .selected within the nav ID.
*/
/*Import stuff for button animations */
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/*Global Button Syles*/
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/*End Global Button Styles*/
/*Victoria Button Style 3*/
a.animated-button.victoria-three {
border: 2px solid #D24D57;
color: #333;
}
a.animated-button.victoria-three:after {
background: #D24D57;
opacity: .5;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
height: 140%;
opacity: 1;
}
body{
background-color: #EEEEEE;
font-family: 'Montserrat', sans-serif;
}
a{
text-decoration: none;
color: #D24D57;
}
h1{
padding: 10px;
align: left;
}
.light_saber{
align:bottom;
margin:5px;
}
h2{
align:center;
}
#container{
width: auto;
margin-left: 0px;
margin-right: auto;
}
#header{
background-color: #D24D57;
color: white;
padding: 10px;
}
#content{
padding: 10px 10px 10px 10px; /*top right bottom left*/
width: auto;
}
#nav{
width: auto;
height: auto;
background-color: #999;
}
#nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#nav .selected{
font-weight: bold;
}
#main{
width: auto;
height: 2000px;
float: center;
background-color: #999;
}
#main .profile_picture{
border-radius: 20px;
width: 250px;
height: 350px;
padding: 10px;
float: right;
background-color: #333;
}
#footer{
clear: both; /*Lets get past all the floating elements and then display footer*/
padding: 10px;
background-color: #999;
color: white;
text-align: center;
}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Siman Shrestha</title>
<link href = "stylesheet.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>Siman Shrestha</h1>
<div class="light_saber">
<img src="light_saber.gif" alt="Whoops, something went wrong :-(">
</div>
</div>
<div id="content">
<div id="nav">
<ul>
<li><a class="selected" href=""> Home </a></li> <!--creates a class tag and hyperlink*/-->
<li><a class="selected" href=""> About </a></li>
<li><a class="selected" href=""> Contact </a></li>
</ul>
</div>
<div id="main">
<h2>Home Page</h2>
<img src="IMG_1689.jpg" class="profile_picture" alt="Whoops, something went wrong :-(">
<!--Resume Button-->
<div class="col-md-3 col-sm-3 col-xs-6">
Resume
</div>
<p>
Saucin'
</P>
</div>
</div>
<div id="footer">
Copyright © 2017 Siman Shrestha
</div>
</div>
</body>
</html>
Changing the z-index works
/*CSS DOCUMENT*/
/* Notes:
Hashtags are for ID's and dots(.) are for classes
If you do #nav .selected for example, it would look for .selected within the nav ID.
*/
/*Import stuff for button animations */
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/*Global Button Syles*/
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/*End Global Button Styles*/
/*Victoria Button Style 3*/
a.animated-button.victoria-three {
border: 2px solid #D24D57;
color: #333;
z-index:998;
}
a.animated-button.victoria-three span{
z-index:999;
}
a.animated-button.victoria-three:after {
background: #D24D57;
opacity: .5;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
height: 140%;
opacity: 1;
}
body{
background-color: #EEEEEE;
font-family: 'Montserrat', sans-serif;
}
a{
text-decoration: none;
color: #D24D57;
}
h1{
padding: 10px;
align: left;
}
.light_saber{
align:bottom;
margin:5px;
}
h2{
align:center;
}
#container{
width: auto;
margin-left: 0px;
margin-right: auto;
}
#header{
background-color: #D24D57;
color: white;
padding: 10px;
}
#content{
padding: 10px 10px 10px 10px; /*top right bottom left*/
width: auto;
}
#nav{
width: auto;
height: auto;
background-color: #999;
}
#nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#nav .selected{
font-weight: bold;
}
#main{
width: auto;
height: 2000px;
float: center;
background-color: #999;
}
#main .profile_picture{
border-radius: 20px;
width: 250px;
height: 350px;
padding: 10px;
float: right;
background-color: #333;
}
#footer{
clear: both; /*Lets get past all the floating elements and then display footer*/
padding: 10px;
background-color: #999;
color: white;
text-align: center;
}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Siman Shrestha</title>
<link href = "stylesheet.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>Siman Shrestha</h1>
<div class="light_saber">
<img src="light_saber.gif" alt="Whoops, something went wrong :-(">
</div>
</div>
<div id="content">
<div id="nav">
<ul>
<li><a class="selected" href=""> Home </a></li> <!--creates a class tag and hyperlink*/-->
<li><a class="selected" href=""> About </a></li>
<li><a class="selected" href=""> Contact </a></li>
</ul>
</div>
<div id="main">
<h2>Home Page</h2>
<img src="IMG_1689.jpg" class="profile_picture" alt="Whoops, something went wrong :-(">
<!--Resume Button-->
<div class="col-md-3 col-sm-3 col-xs-6">
<span>Resume</span>
</div>
<p>
Saucin'
</P>
</div>
</div>
<div id="footer">
Copyright © 2017 Siman Shrestha
</div>
</div>
</body>
</html>
Hi so Im trying to get a circle to flip when I hover over it. As of now, the circle flips and changes color, but once the animation finishes the text on the reverse side of the circle disappears.
.header{
perspective: 700px;
}
body, html {
background: url(bg.jpg);
background-size: 110px 69px;
font-family: 'Playfair Display', serif;
}
body{
/*background-color: #ccf2ff;*/
background-color: #99ebff;
}
#-webkit-keyframes magnify {
from {background-color: #00e699; }
to {background-color: #00cc99;}
}
.header h1:hover{
/*background-color: #00cc99;
-webkit-animation-name: magnify; /* Chrome, Safari, Opera */
/* -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
/*animation-name: magnify;
animation-duration: 0.5s;
-webkit-animation-fill-mode: forwards;*/
}
.name{
font-size: 16px
}
#-webkit-keyframes magnifytext {
from {font-size: 16px; }
to {font-size: 18px;}
}
.name:hover{
-webkit-animation-name: magnifytext; /* Chrome, Safari, Opera */
-webkit-animation-duration: 0.1s; /* Chrome, Safari, Opera */
animation-name: magnifytext;
animation-duration: 0.1s;
-webkit-animation-fill-mode: forwards;
}
body p {
font-style: italic;
font-size: 16px;
}
.card{
border-radius: 100%;
background-color: #00e699;
box-shadow: 0 2px 5px rgba(0,0,0,0.25);
height: 200px;
width: 200px;
margin: 60px auto 0;
text-align: center;
z-index: 0;
transition: all 0.6s ease;
transform-style: preserve-3d;
}
.front, .back{
backface-visibility:hidden;
}
.back{
position: relative;
top: -191px;
margin: 60px auto 0;
transform: rotateY(180deg);
}
.header h1 {
}
.card:hover {
background-color:#cc00cc;
transform: rotateY(180deg);
}
.header h1 span {
color:#fff;
display: block;
font-size: 30px;
padding: 65px 0 0 0;
}
.header h1 span+span {
color:#000;
display: block;
font-size: 28px;
padding: 0;
}
.main .container {
background:#fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
margin: -70px auto 80px;
padding: 80px;
z-index: 0;
}
h1 {
color: #444;
font-family: 'Oswald', sans-serif;
font-size: 16px;
margin: 20px 0 0 0;
text-align: center;
text-transform: uppercase;
}
h2 {
border-bottom: 1px solid #444;
color: #000;
font-family: 'Oswald', sans-serif;
margin: 20px 0 10px;
padding: 0 0 10px 0;
text-transform: uppercase;
}
h3 {
color: #00cc99;
font-family: 'Oswald', sans-serif;
margin: 10px 0 5px;
text-transform: uppercase;
}
.price p {
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-style: normal;
margin: 26px 0 5px;
text-align: right;
}
<div class="header" ><!-- cardcontainer-->
<div class="card">
<div class="front">
<h1><span >Appointment Reminders</span></h1>
</div>
<div class="back">
<h1> <span style="position: relative; top: 10px;">Add patient<span></h1>
</div>
</div>
</div>
Thanks!
the problem is that you transform the "back"-div and on hover you try to transform the whole card, which transforms the front and the "back" divs once again. I hope this can help you:
<div class="header">
<div class = "card">
<div class = "front">
<h1><span >Appointment</span></h1>
</div>
<div class = "back">
<h1><span>Add patient</span></h1>
</div>
</div>
</div>
and the css:
.header{
perspective: 700px;
}
body{
background-color: #99ebff;
}
.card {
border-radius: 200px;
box-shadow: 0 2px 5px rgba(0,0,0,0.25);
height: 200px;
width: 200px;
margin: 60px auto 0;
text-align: center;
transition: all 0.6s ease;
transform-style: preserve-3d;
}
.front, .back{
position: absolute;
height: 100%;
width: 100%;
border-radius: 100%;
backface-visibility:hidden;
}
.front {
background-color: red;
}
.back{
background: green;
transform: rotateY(-180deg);
}
.card:hover {
transform: rotateY(180deg);
}
.header h1 span {
color:#fff;
display: block;
font-size: 16px;
padding: 65px 0 0 0;
}
I'm trying to change my site-title font on weebly. But unfortunately, it won't work.
I've tried some youtube tutorials but they didn't help.
I would like to have this font as site-title. (https://www.onlinewebfonts.com/download/7ad138835c0cf9f05a9f0ab343247612)
Hereby my css code and a screenshot, so I hope you can help me :)
Thank you in advance!
Screenshot: http://i66.tinypic.com/znu1aa.png[/IMG
#import url(//fonts.googleapis.com/css?family=Fjalla+One);
#font-face {font-family: "PNS";
src: url("http://db.onlinewebfonts.com/t/7ad138835c0cf9f05a9f0ab343247612.eot");
src: url("http://db.onlinewebfonts.com/t/7ad138835c0cf9f05a9f0ab343247612.eot?#iefix") format("embedded-opentype"),
url("http://db.onlinewebfonts.com/t/7ad138835c0cf9f05a9f0ab343247612.woff2") format("woff2"),
url("http://db.onlinewebfonts.com/t/7ad138835c0cf9f05a9f0ab343247612.woff") format("woff"),
url("http://db.onlinewebfonts.com/t/7ad138835c0cf9f05a9f0ab343247612.ttf") format("truetype"),
url("http://db.onlinewebfonts.com/t/7ad138835c0cf9f05a9f0ab343247612.svg#ProximaNovaSoftW03-Bold") format("svg");
}
/* Resets */
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
body,
html,
p,
blockquote,
fieldset,
input {
margin: 0;
padding: 0;
}
/* Global Styles */
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
background: #222121;
color: #666666;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 24px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: #1cadeb;
text-decoration: none;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
a:hover {
color: #1894c9;
}
a img {
border: 0;
}
ol,
ul {
list-style-type: none;
}
h2 {
padding-bottom: 15px;
color: #3b3b3b;
font-family: 'Fjalla One', sans-serif;
font-size: 36px;
font-weight: normal;
line-height: 1.2em;
}
p {
padding-bottom: 20px;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.5em;
}
blockquote {
margin: 2em 0;
padding: 1em;
padding-left: 30px !important;
background: url("quotes.png") no-repeat 0px 25px;
color: #666666;
border-left: 0px !important;
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 28px;
}
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
color: #666666;
}
input[type="text"],
input[type="email"],
textarea {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
text-shadow: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
border: 0px solid #93c4d3;
}
textarea {
resize: none;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
text-indent: 0.01px;
text-overflow: '';
}
input[type="radio"],
input[type="checkbox"] {
width: 16px;
height: 16px;
border: 1px solid #b2b2ad !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
text-shadow: none;
}
input[type="radio"] {
border-radius: 8px;
}
input[type="checkbox"] {
background-color: #ffffff;
border-radius: 0;
}
input[type="radio"]:after {
display: block;
border-radius: 8px;
box-sizing: border-box;
content: " ";
}
input[type="radio"]:checked,
input[type="checkbox"]:checked {
border: 1px solid #1cadeb !important;
}
input[type="radio"]:checked:after {
background: #1cadeb;
border: 2px solid #ffffff;
width: 14px;
height: 14px;
}
input[type="checkbox"]:after {
position: relative;
top: 1px;
left: 4px;
width: 3px;
height: 6px;
border: solid #666666;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type="checkbox"]:checked:after {
display: block;
border-color: #1cadeb;
content: " ";
}
.container {
width: 960px;
margin: 0 auto;
}
/* Editor Overrides :: DO NOT REMOVE */
#icontent .wrapper .paris-header,
#preview-iframe .landing-page .wrapper .paris-header,
#icontent.landing-page .wrapper .paris-header,
#icontent .wrapper .banner,
#preview-iframe .landing-page .wrapper .banner,
#icontent.landing-page .wrapper .banner {
opacity: 1 !important;
}
#preview-iframe .landing-page .banner-wrap,
#icontent.landing-page .banner-wrap {
height: 95vh;
min-height: 95vh;
}
body.fade-in-nav .paris-header {
opacity: 1;
}
/* Mobile app */
body.wsite-checkout-page .paris-header,
body.wsite-native-mobile-editor .paris-header {
position: absolute !important;
}
/* Header + Navigation */
.paris-header {
position: fixed;
top: 0;
z-index: 12;
overflow-y: hidden;
width: 100%;
background: #93c4d3 ;
border-top: 5px solid #93c4d3 ;
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transition: opacity 1000ms ease-in;
-moz-transition: opacity 1000ms ease-in;
-ms-transition: opacity 1000ms ease-in;
-o-transition: opacity 1000ms ease-in;
transition: opacity 1000ms ease-in;
}
.paris-header .container {
position: relative;
display: table;
width: 100%;
padding: 0 40px;
box-sizing: border-box;
}
.paris-header .logo {
display: table-cell;
padding-right: 25px;
vertical-align: middle;
color: #ffffff;
font-family: 'Fjalla One', sans-serif;
font-size: 24px;
font-weight: normal;
line-height: normal;
}
.paris-header .logo a {
overflow: hidden;
color: #ffffff;
letter-spacing: .05em;
text-transform: uppercase;
font-family: 'Fjalla One', sans-serif;
font-size: 24px;
font-weight: normal;
line-height: normal;
}
.paris-header .logo a img {
height: auto;
max-height: 50px;
}
.nav {
display: table-cell;
overflow: hidden;
vertical-align: middle;
text-align: center;
}
.nav ul {
float: right;
display: inline-block;
max-width: 1115px;
text-align: left;
}
.nav li {
display: block;
float: left;
-webkit-transition: background 500ms ease;
-moz-transition: background 500ms ease;
-ms-transition: background 500ms ease;
-o-transition: background 500ms ease;
transition: background 500ms ease;
}
.nav li a {
display: block;
color: #ffffff;
padding: 22px 20px;
letter-spacing: .05em;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 13px;
font-weight: bold;
line-height: normal;
}
.nav li.wsite-menu-item-wrap#active > a,
.nav li.wsite-menu-subitem-wrap#active > a,
.nav li.wsite-menu-item-wrap > a:hover,
.nav li.wsite-menu-subitem-wrap > a:hover {
background: #1cadeb;
}
.mobile-nav {
display: none;
}
/* Submenus */
#wsite-menus .wsite-menu li a {
padding: 10px 5px;
background: rgba(0, 0, 0, 0.9);
color: #ffffff;
border-bottom: 1px solid #303030;
border-left: none;
border-right: none;
font-family: 'Lato', sans-serif;
font-size: 13px;
font-weight: normal;
line-height: normal;
box-sizing: border-box;
}
#wsite-menus .wsite-menu li a:hover {
background: rgba(0, 0, 0, 0.9);
color: #ffffff;
border-left: 5px solid #1894c9;
}
#wsite-menus .wsite-menu-arrow {
color: transparent;
font-size: 0;
}
#wsite-menus .wsite-menu-arrow:before {
display: block;
color: #ffffff;
content: '\203A';
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: normal;
line-height: 11px;
}
/* Mini cart */
#wsite-mini-cart {
position: fixed !important;
top: 80px !important;
overflow-y: scroll;
max-height: 600px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#wsite-mini-cart .wsite-css-aspect {
width: 50px;
height: 50px;
margin: 10px;
}
/* Banner */
.banner-wrap {
position: relative;
width: 100%;
padding: 55px 0;
box-sizing: border-box;
background: #ffffff url('default-bg.jpg') center center no-repeat;
background-size: cover;
}
.banner-wrap:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
content: ' ';
}
.banner-wrap .container {
display: table;
overflow-y: hidden;
height: 100%;
}
.banner-wrap .banner {
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.banner-wrap .banner h2 {
padding-bottom: 30px;
color: #ffffff;
word-spacing: .1em;
text-transform: uppercase;
font-family: 'Fjalla One', sans-serif;
font-size: 100px;
font-weight: normal;
line-height: 1.1em;
}
.banner-wrap .banner p {
padding-bottom: 40px;
color: #ffffff;
letter-spacing: .03em;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: normal;
line-height: 1.4em;
}
.banner-wrap .banner .button-wrap {
display: inline-block;
}
.banner-wrap .banner .wsite-button {
text-align: center !important;
}
.banner-wrap .banner .wsite-button .wsite-button-inner {
background: #1cadeb;
color: #ffffff !important;
}
.banner-wrap .banner .wsite-button:hover .wsite-button-inner {
background: #1894c9;
}
/* Content */
.main-wrap {
background: #ffffff;
}
.main-wrap .content-wrap {
padding: 40px 0 30px;
background: #ffffff;
}
/* Footer */
.footer-wrap {
width: 100%;
background: #222121;
font-size: 13px;
color: #ffffff;
}
.footer-wrap .wsite-footer {
width: 960px;
margin: 0 auto;
padding: 35px 0 20px;
}
.footer-wrap h2 {
color: #989794;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: bold;
line-height: normal;
}
.footer-wrap p {
font-size: 13px;
padding: 0 0 15px;
}
.footer-wrap blockquote {
background: url("quotes.png") no-repeat 0px 15px;
font-size: 15px;
color: #ffffff;
}
.footer-wrap .wsite-form-container {
text-align: left;
margin-top: 0 !important;
}
.footer-wrap .wsite-form-label,
.footer-wrap .form-radio-container {
color: #ffffff;
font-size: 13px;
}
/* Social */
.wsite-social .wsite-social-item {
font-size: 16px;
margin-right: 5px;
}
/* Buttons */
.wsite-button {
height: auto;
padding: 0;
background: none;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.wsite-button:focus {
outline: none;
}
.wsite-button .wsite-button-inner {
display: block;
height: auto;
padding: 12px 16px;
background: #cccbc6;
color: #333333 !important;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: .1em;
white-space: normal;
font-family: 'Lato', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: normal;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.wsite-button.wsite-button-large {
background: none;
}
.wsite-button.wsite-button-large .wsite-button-inner {
padding: 16px 24px;
border-radius: 6px;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 700;
line-height: normal;
}
.wsite-button:hover .wsite-button-inner {
background: #b2b2ad;
}
.wsite-button.wsite-button-highlight {
background: none;
}
.wsite-button.wsite-button-highlight .wsite-button-inner {
background: #1cadeb;
color: #ffffff !important;
}
.wsite-button.wsite-button-highlight:hover .wsite-button-inner {
background: #1894c9;
}
.wsite-button-large.wsite-button-highlight {
background: none;
}
/* Forms */
.wsite-form-label {
display: inline-block;
color: #3b3b3b;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: normal;
line-height: normal;
}
.wsite-form-sublabel {
display: none;
}
.wsite-form-radio-container {
margin-bottom: 10px;
font-family: 'Lato', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: normal;
}
.wsite-form-radio-container label {
position: relative;
top: 1px;
}
.wsite-form-input,
.wsite-search-element-input {
margin-bottom: 10px;
padding: 8px !important;
background: #ffffff;
border-radius: 0;
border: 1px solid #b2b2ad;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: normal;
line-height: normal;
-webkit-transition: border 300ms ease;
-moz-transition: border 300ms ease;
-ms-transition: border 300ms ease;
-o-transition: border 300ms ease;
transition: border 300ms ease;
}
.wsite-form-input:focus,
.wsite-search-element-input:focus {
border: 1px solid #1cadeb;
}
.form-select,
.wsite-form-field select,
.wsite-com-product-option-groups select {
height: auto;
padding: 8px;
background: #ffffff url(select-dropdown.png) 97% center no-repeat;
border-radius: 0;
border: 1px solid #b2b2ad;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: normal;
line-height: normal;
-webkit-transition: border 300ms ease;
-moz-transition: border 300ms ease;
-ms-transition: border 300ms ease;
-o-transition: border 300ms ease;
transition: border 300ms ease;
}
.form-select:focus,
.wsite-form-field select:focus,
.wsite-com-product-option-groups select:focus {
border: 1px solid #1cadeb;
}
.formlist,
.wsite-editor .formlist {
min-height: inherit;
}
.form-field-error .wsite-form-radio-container {
border: none;
}
.form-field-error .wsite-form-radio-container input[type="radio"],
.form-field-error .wsite-form-radio-container input[type="checkbox"] {
border: 1px solid red;
}
.wsite-search-element-submit,
.wsite-editor .wsite-search-element-submit {
top: 12px;
margin-top: 0;
}
/* Gallery */
.imageGallery {
overflow: hidden;
}
.imageGallery * {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.imageGallery .galleryCaptionHolder {
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
}
.imageGallery .galleryCaptionHolder:hover .galleryCaptionHolderInnerBg {
background: #1894c9;
opacity: .8;
}
.imageGallery .galleryCaptionHolderInner {
height: 100%;
}
.imageGallery .galleryCaptionHolderInnerBg {
background-color: rgba(0, 0, 0, 0.2);
opacity: 1;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.imageGallery .galleryCaptionInnerTextHolder {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
box-sizing: border-box;
}
.imageGallery .fullImageGalleryCaption .galleryCaptionInnerTextHolder {
position: relative;
}
.imageGallery .galleryCaptionInnerText {
color: #ffffff;
letter-spacing: normal;
text-shadow: none;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
/* Fancybox overrides */
.fancybox-skin {
background: transparent !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.fancybox-title {
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: normal;
line-height: normal;
}
.fancybox-close,
.fancybox-next span,
.fancybox-prev span {
background: none !important;
width: auto;
height: auto;
}
.fancybox-close:before,
.fancybox-next span:before,
.fancybox-prev span:before {
color: #ffffff !important;
font-family: 'Lato', sans-serif;
font-size: 45px;
font-weight: normal;
line-height: 0.75em;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.fancybox-close:hover:before,
.fancybox-next:hover span:before,
.fancybox-prev:hover span:before {
color: #1cadeb !important;
}
.fancybox-prev span:before {
position: relative;
left: -10px;
content: '\3008';
}
.fancybox-next span:before {
position: relative;
right: -10px;
content: '\3009';
}
.fancybox-close {
top: 20px;
right: 20px;
}
.fancybox-close:before {
content: '\00D7';
}
/* Landing Page */
.landing-page .banner-wrap {
height: 100vh;
min-height: 100vh;
}
.landing-page .banner-wrap .banner {
opacity: 0;
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}
.landing-page #contentArrow {
position: absolute;
display: block;
left: 0;
right: 0;
bottom: 0;
width: 40px;
height: 40px;
margin: 0 auto;
border: 3px solid #ffffff;
border-radius: 100%;
opacity: 0.5;
cursor: pointer;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.landing-page #contentArrow span {
position: relative;
top: 8px;
left: 10px;
content: '\203A';
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: normal;
line-height: 11px;
}
.landing-page #contentArrow span:before,
.landing-page #contentArrow span:after {
position: relative;
display: block;
background: #ffffff;
width: 4px;
height: 16px;
content: ' ';
}
.landing-page #contentArrow span:before {
top: 5px;
left: 4px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.landing-page #contentArrow span:after {
top: -11px;
left: 13px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.landing-page #contentArrow:hover {
opacity: 1;
}
/* Fade In */
.landing-page.fade-in .banner {
opacity: 1;
}
/* Tall Header Page */
.tall-header-page .banner-wrap {
display: table;
width: 100%;
min-height: 450px;
padding-top: 50px;
text-align: center;
}
.tall-header-page .banner-wrap .container {
height: 450px;
}
.tall-header-page .banner-wrap .banner h2 {
font-size: 70px;
padding-top: 65px;
}
/* Short Header Page */
.short-header-page .banner-wrap {
display: table;
width: 100%;
min-height: 240px;
padding-top: 50px;
text-align: center;
}
.short-header-page .banner-wrap .container {
height: 240px;
}
.short-header-page .banner-wrap .banner h2 {
font-size: 60px;
padding-top: 65px;
}
/* No Header Page */
.no-header-page .main-wrap {
padding-top: 60px;
}
/* Splash Page */
.splash-page {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 100vh;
background: none;
box-sizing: border-box;
}
.splash-page .wrapper {
height: 100%;
}
.splash-page .main-wrap {
position: relative;
display: table;
width: 100%;
height: 100%;
min-height: 100vh;
background: url(default-bg.jpg) no-repeat;
background-attachment: fixed !important;
background-size: cover;
box-sizing: border-box;
}
.splash-page .main-wrap:before {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
content: ' ';
}
.splash-page .main-wrap > .container {
position: relative;
display: table;
height: 100%;
padding: 6em 0 4em;
box-sizing: border-box;
}
.splash-page .main-wrap .content-wrap {
display: table-cell;
padding: 0;
vertical-align: middle;
background: none;
}
.splash-page .main-wrap .splash-content h2 {
color: #ffffff;
text-transform: uppercase;
font-size: 70px;
}
.splash-page .main-wrap .splash-content p {
padding: 0 0 25px;
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 30px;
}
.splash-page .footer-wrap {
display: none;
}
/* Old styles */
#commentArea {
border-top: solid 1px #dadada;
padding-top: 20px;
}
#wsite-content #commentAreaTitle {
font-size: 26px;
}
#wsite-content #commentAreaTitle,
#wsite-content #commentReplyTitle,
#commentArea .blogCommentText p,
.main-wrap .blog-sidebar h2 {
padding: 0;
}
#commentAreaTitle {
font-family: 'fjalla-one', sans-serif;
}
.blogCommentHeading,
.blogCommentText p {
font-family: inherit;
}
.blogCommentWrap {
background: none;
}
.blogCommentWrap .blogCommentHeading,
.blogCommentWrap .blogCommentHeadingInner,
.blogCommentWrap .blogCommentAuthor {
background: none !important;
}
.blogCommentHeading .blogCommentAuthor span.name,
.blogCommentHeading .blogCommentAuthor span.email {
color: #2a92e5 !important;
float: none;
}
.blogCommentHeading {
padding: 0;
margin-bottom: 20px;
}
.blogCommentHeading .blogCommentAuthor,
.blogCommentHeading .blogCommentDate {
float: none;
text-align: left;
height: auto;
line-height: 1;
padding: 0;
}
.blogCommentHeading .blogCommentAuthor {
text-transform: uppercase;
}
.blogCommentHeading .blogCommentDate {
color: #999;
margin-left: 1em;
}
.blogCommentText {
padding: 0;
}
.blogCommentText p {
color: #666;
font-size: 14px;
}
.blogCommentHeading .blogCommentHeadingInner {
height: auto;
}
.blogCommentWrap .blogCommentHeading .blogCommentHeadingInner .blogCommentAuthor .name {
text-shadow: none;
height: auto;
line-height: 1;
color: #3b3b3b !important;
float: none;
}
.blogCommentHeading .blogCommentHeadingInner .blogCommentAuthor .link {
margin: 0 5px;
float: none;
display: inline-block;
}
.blogCommentHeading .blogCommentAuthor,
.blogCommentHeading .blogCommentDate {
float: none;
text-align: left;
height: auto;
line-height: 1;
padding: 0;
display: inline;
vertical-align: baseline;
text-transform: none;
}
I cut some of the code, it was to long to submit, but I only deleted the #mediascreen parts of it :)
It doesn't work because you aren't actually assigning the font:
h2 {
/* font-family: 'Fjalla One', sans-serif; */
font-family: 'PNS', sans-serif;
}