This question already has an answer here:
How to keep origin in center of image in scale animation?
(1 answer)
Closed 1 year ago.
I tried to put a button in the center of my div but I couldn't though all my other contents are centered.
My code:
.middle {
width: 100%;
height: auto;
text-align: center;
position: relative;
}
.middle section {
padding: 18vh 6%;
line-height: 0.5;
color: #EE6352;
font-weight: 400;
font-size: calc(16px + 3vw);
}
.middle ul {
text-align: left;
}
.middle li {
font-size: calc(12px + 2vw);
line-height: 1.25;
color: #2A2D34;
}
.middle p {
font-size: calc(14px + 2.4vw);
font-weight: 400;
color: #2A2D34;
}
.upbutton {
padding: 10px;
background: #1ac6ff;
border-radius: 50%;
border-style: none;
cursor: pointer;
position: absolute;
top: 0px;
transition: background 0.3s;
box-shadow: 2px 2px 5px rgba(102, 102, 102, 0.5);
}
.upbutton img {
width: 25px;
height: 25px;
}
.upbutton:hover {
background: #00ace6;
-webkit-transform: scale(0.94);
-ms-transform: scale(0.94);
transform: scale(0.94);
}
.upbutton:active {
background: #0086b3;
}
<a id="middle">
<div class="middle">
</a>
<section>
<button class="upbutton"><img src="img/arrow.png"></button>
<h1>content</h1>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<p>...and more</p>
</section>
</div>
I also searched on this problem and tried to put this into the .upbutton class:
margin:0;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
and it centered my button. But when I hover, it didn't center anymore.
I don't know why I'm kinda new to this. Can anyone explain and help me, tks a lot!
Remember to add a transform: translateX(-50%); on the :hover selector for the button, this way it wont go back. If you change the transform property on hover it overides the existing one, so it goes back to translateX(0)
.upbutton:hover {
background: #00ace6;
-webkit-transform: translateX(-50%) scale(0.94);
-ms-transform: translateX(-50%) scale(0.94);
transform: translateX(-50%) scale(0.94);
}
<head>
<style>
.middle
{
width: 100%;
height: auto;
text-align: center;
position: relative;
}
.middle section
{
padding: 18vh 6%;
line-height: 0.5;
color: #EE6352;
font-weight: 400;
font-size:calc(16px + 3vw);
}
.middle ul
{
text-align: left;
}
.middle li
{
font-size: calc(12px + 2vw);
line-height: 1.25;
color: #2A2D34;
}
.middle p
{
font-size: calc(14px + 2.4vw);
font-weight: 400;
color: #2A2D34;
}
.upbutton
{
padding: 10px;
background: #1ac6ff;
border-radius: 50%;
border-style: none;
cursor: pointer;
position: absolute;
top:50%;
left:50%;
transition: background 0.3s;
box-shadow: 2px 2px 5px rgba(102, 102, 102, 0.5);
}
.upbutton img{width: 25px;height: 25px;}
.upbutton:hover{ background: #00ace6;
-webkit-transform: scale(0.94);
-ms-transform: scale(0.94);
transform: scale(0.94); }
.upbutton:active{background: #0086b3;}
</style>
</head>
<a id="middle"><div class="middle"></a>
<section>
<button class="upbutton"><img src="https://png.pngtree.com/png-vector/20190419/ourmid/pngtree-vector-up-arrow-icon-png-image_956434.jpg"></button>
<h1>content</h1>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<p>...and more</p>
</section>
</div>
In this example you can just use 'position': absolute and top:50%,left:50%
If you're trying to center it just add
top: 50%; property to the .upbutton class
Try doing it directly in the HTML. EDIT: Try using JS.
<center><button onclick = "goToTop()" id = "buttonId"><img src="img/arrow.png"></img></button></center>
<script>
function goToTop(){
var currentLink = window.location.href;
window.location = currentLink+'#top';
}
</script>
Tell me if this doesn't work for you and I'll try to fix it. Also, please accept if this did work for you. It works for me in Chrome.
Related
I'm building a series of flip boxes which have an image and title on the front and then on the reverse a background with some hyperlinks
All works fine on most browsers however on safari the boxes flicker for a few seconds when flipped over.
Can anyone see something I've missed?
.flip-card {
background-color: transparent;
width: 250px;
height: 250px;
perspective: 1000px;
margin-left:50px;
}
.flip-card-inner {
position: absolute;
width: 100%;
height: 100%;
text-align: left;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(181deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility:hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: black;
color: black;
}
.box-caption {
position: absolute;
top: 55%;
left: 50%;
z-index: 2;
margin-right: -50%;
transform: translate(-50%, -50%);
color: white;
text-align:center;
padding-left:25px;
padding-right:25px;
font-size: 20px;
word-wrap: break-word;
display: block;
}
.flip-card-back {
padding-top:0px;
padding-left:25px;
background:linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(8,30,37,1) 18%, rgba(50,195,192,1) 100%);;
color: white;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
word-wrap: break-word;
padding-right:15px;
display: block;
font-size: 13px;
}
.flip-card-title {
padding-top:15px;
font-weight: bold;
padding-bottom: 10px;
color: white;
word-wrap: break-word;
padding-right:15px;
display: block;
font-size: 16px;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
a.one:link {
color: white !important;
text-decoration: none !important;
}
a.one:active {
color: white !important;
text-decoration: none !important;
}
a.one:hover{
color: white !important;
text-decoration: underline !important;
}
a.one:visited {
color: white !important;
text-decoration: none !important;
}
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="http://philk18.sg-host.com/wp-content/uploads/2020/09/card-test.jpg" alt="Avatar" style="width:250px;height:250px;opacity:0.5;">
<div class="box-caption">
<p> <b> Lines and Wrinkles </b> </p>
</div>
</div>
<div class="flip-card-back">
<div class="flip-card-title">Lines and wrinkles</div>
<a class="one" href="/skin-boosters" target="_blank"> - Skin Boosters</a><br><a class="one" href="/derma-fillers" target="_blank"> - Derma Fillers</a>
</div>
</div>
</div>
https://codepen.io/xeddir/pen/VwaJpme
.box-caption {
z-index: 0;
}
change z-index to 0 that should fix it
I'm designing the front end of an e-commerce website and while looking through some inspiration I found a really nice effect involving a button and a after on that button, that when hovering over it, the text of the button would go up and at the same time an icon would replace it. You can see what I mean here. I probably won't use this on the project but I got really confused trying to mimic this effect while using Dev Tools, and just ending up with a cart icon on the bottom of the page and would love to know how to create something similar to this.
This is the final result
I almost got to something but I can't seem to make the text and the icon move at the same time, sometimes the icon wouldn't move at all and just the whole button would do, and not the text.
Any ideas on how this could be achieved with CSS? I already went through CodePen to find something similar and I'm not really sure how this effect is called to google it
EDIT: Already tried this code on an with a button class.
.button {
background: none;
font-weight: 600;
line-height: inherit;
margin: 0;
padding: 0 15px;
margin-top: 0;
position: relative;
text-align: center;
vertical-align: top;
-webkit-transition: color 0.15s linear 0s,-webkit-transform 0.3s linear 0s;
text-transform: uppercase;
transition: color 0.15s linear 0s,transform 0.3s linear 0s;
}
.button:hover {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.button:after {
background-color: inherit;
border-color: inherit;
border-style: inherit;
border-width: inherit;
font-size: 18px;
font-weight: 400;
height: auto;
margin: 0;
position: absolute;
left: 0;
top: 100%;
text-align: center;
width: 100%;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation: none;
animation: none;
}
.button:hover:after {
top: 150%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
Here is a simple example using a psuedo element and font-awesome icon
.btn {
background-color: turquoise;
border-radius: 10px;
color: white;
padding: 5px 10px;
position: relative;
overflow: hidden;
height: 20px;
display: inline-block;
transition: all .3s;
}
.btn span {
position: relative;
top: 0;
transition: all .3s;
}
.btn::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f217";
position: absolute;
left: 50%;
transform: translatex(-50%);
top: 40px;
transition: all .3s;
font-size: 20px;
}
.btn:hover {
background-color: blue;
}
.btn:hover span {
top: -30px;
}
.btn:hover::after {
top: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<a href="#" class="btn">
<span>Add to cart</span>
</a>
Here is a slightly simpler example using two different p tags instead of text/svg. It shouldn't be too much trouble to convert:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
button {
width: 100px;
height: 40px;
overflow: hidden;
border: unset;
border-radius: 10px;
background-color: turquoise;
transition: all 200ms;
}
button:hover {
background-color: blue;
}
div {
height: 80px;
transform: translateY(0%);
transition: inherit;
}
div:hover {
transform: translateY(-50%)
}
p {
display: flex;
align-items: center;
justify-content: center;
color: white;
height: 50%;
font-size: 18px;
font-weight: 600;
}
<button>
<div>
<p class="one">text one</p>
<p class="two">text two</p>
</div>
</button>
This question already has answers here:
How do I give text or an image a transparent background using CSS?
(29 answers)
Opacity of background-color, but not the text [duplicate]
(5 answers)
Closed 4 years ago.
I find myself having problems in controlling the opacity of my items inside my container. The container should be the only one that is transparent but unfortunately all the items inside my container began to go transparent even though I already establish opacity: 1; to them.
Here is my code...
HTML
<!DOCTYPE html>
<html>
<head>
<title>Dino-Jump</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
</head>
<body class = "bg">
<div id = container>
<img src="Pics/user.jpg" id = "user">
<form action = "action-login">
<div id = "login-box">
<h1 class = "label1">Login</h1>
<div class = "textbox">
<i class = "fa fa-user" aria-hidden = "true"></i>
<input type="text" name="uname" placeholder="Username" required = "true">
</div>
<div class = "textbox">
<i class = "fa fa-lock" aria-hidden = "true"></i>
<input type="password" name="pword" placeholder="Password" required = "true">
</div>
<input class = "btn" type = "button" name = "login" value = "Login">
<a id = "forget" href=""> Forget Password </a>
<a id = "reg" href=""> Register </a>
</form>
</div>
</div>
<img src="Pics/title.png" id="game-title">
<div class = "footer">
<p>© Copyrights Dino-Jump ZRH.Group 10.20.20.18.2.37</p>
</div>
</body>
</html>
CSS
/**Style**/
#import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
#media screen and (min-width:768){
.bg{
width: 100%;
margin: 0 auto;
padding: 0 auto;
display: block;
font-family: sans-serif;
background-image: url("Pics/bg.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
img{
width: 100%;
}
}
/**bofy**/
.bg{
margin: 0 auto;
padding: 0 auto;
font-family: sans-serif;
background-image: url("Pics/bg03.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
#user{
opacity: 1;
background-image: url("Pics/user.jpg");
width: 135px;
height: 135px;
margin: 0 auto;
padding: 0 auto;
border-radius: 50%;
border: 4px solid #ffbd04;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
#container{
opacity: 0.5;
margin: 0 auto;
padding: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 380px;
height: 480px;
background: #000;
border: 4px solid #ffbd04;
border-radius: 20px;
}
#login-box{
opacity: 1;
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
}
#login-box h1{
float: left;
font-size: 40px;
border-bottom: 4px solid #ffbd04;
margin-bottom: 50px;
padding: 13px 0;
}
.textbox{
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
border-bottom: 1px solid #ffbd04;
}
.texbox i{
width: 26px;
float: left;
text-align: center;
}
.textbox input{
border: none;
outline: none;
background: none;
color: #fff;
font-size: 18px;
width: 80%;
float: left;
margin: 0 10px;
}
::placeholder {
color: #fff;
}
[placeholder]:focus::-webkit-input-placeholder {
transition: text-indent 0.3s 0.3s ease;
text-indent: -100%;
opacity: 1;
}
.btn{
width: 100%;
background: none;
border: 2px solid #ffbd04;
border-radius: 10px;
color: #fff;
padding: 5px;
font-size: 18px;
margin: 12px;
transition: .6s;
overflow: hidden;
}
.btn:focus{
outline: none;
}
.btn:before{
content: '';
display: block;
position: absolute;
background: rgba(255,255,255,.5);
opacity: 0.5;
filter: blur(30px);
transform: translateX(-130px) skewX(-15deg);
}
.btn:after{
content: '';
display: block;
position: absolute;
background: rgba(255,255,255,.5);
opacity: 0;
filter: blur(30px);
transform: translate(-100px) scaleX(-15deg);
}
.btn:hover{
background: #ffbd04;
cursor: pointer;
}
.btn:hover:before{
transform: translateX(300px) skewX(-15deg);
opacity: 0.6;
transition: 0.7s;
}
.btn:hover:after{
transform: translateX(300px) skewX(-15deg);
opacity: 1;
transition: 0.7s;
}
/**Footer**/
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #000;
color: #fff;
text-align: left;
font-size: 8px;
}
#game-title{
width: 130px;
height: 40px;
position: absolute;
top: 91%;
left: 50%;
transform: translate(-50%,-50%);
}
#forget{
text-decoration: none;
position: absolute;
top: 110%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffbd04;
font-size: 12px;
font-family: sans-serif;
}
#reg{
text-decoration: none;
position: absolute;
top: 110%;
left: 50%;
transform: translate(-50%, -190%);
color: #ffbd04;
font-size: 12px;
font-family: sans-serif;
}
Sorry long post and thank you in advance.
The approach is wrong sir. It's child element's default behavior. You can't set opacity:1 to the child element once you set it to the parent element.
You have so many ways to achieve this. But since you are using a background color and looking for the opacity I suggest the easiest way that use background:rgba(0,0,0,0.5).This stands that the background color is #333 with the opacity of 0.5.
Learn more about rgba() here.
#container{
/*opacity: 0.5;*/ //remove this line
margin: 0 auto;
padding: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 380px;
height: 480px;
/*background: #000;*/ //remove this line
border: 4px solid #ffbd04;
border-radius: 20px;
background:(0,0,0,0.5); //newly added line
}
You have given opacity:0.5 to container class and opacity:1 to child class. Instead of setting opacity to parent class use background color in rgba format to container class and remove opacity
background: rgba(0, 0, 0, 0.5);
If you use opacity to parent class then child class does not have effect even if you set high opacity to child.
I was able to get some result by using the !important keyword.
#login-box{
opacity: 1 !important;
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff !important;
}
You can't see the text, but you might able to get what you want from there.
I wan the arrows on my navbar to produce the animation I've created when I hover the options on top of them,
When my mouse hovers "contact", "register" or "login", the arrows under them should move down indicating that they are dropdown buttons, how can I do this? I already have the code of the animation but I don't know how to sync this code with my buttons, I would appreciate any help. Here's the code:
#arrow1 {
position: absolute;
top: 11%;
left: 83.5%;
transform: translate(-50%, -50%);
width: 15px;
height: 100px;
text-align: center;
line-height: 110px;
color: white;
font-size: 30px;
overflow: hidden;
color: yellow;
}
#arrow1 {
margin: 0;
padding: 0;
animation: animate 1s;
right: 0;
pointer-events: none;
}
#keyframes animate {
50% {
transform: translateX(-8px);
margin-top: -35px;
}
}
#arrow2 {
position: absolute;
top: 11%;
left: 66%;
transform: translate(-50%, -50%);
width: 15px;
height: 100px;
text-align: center;
line-height: 110px;
color: white;
font-size: 30px;
overflow: hidden;
color: yellow;
}
#arro2 {
margin: 0;
padding: 0;
animation: animate 1s;
right: 0;
pointer-events: none;
}
#keyframes animate {
50% {
transform: translateX(-8px);
margin-top: -35px;
}
}
#arrow3 {
position: absolute;
top: 11%;
left: 48.7%;
transform: translate(-50%, -50%);
width: 15px;
height: 100px;
text-align: center;
line-height: 110px;
color: white;
font-size: 30px;
overflow: hidden;
color: yellow;
}
#arrow3 {
margin: 0;
padding: 0;
animation: animate 1s;
right: 0;
pointer-events: none;
}
#keyframes animate {
50% {
transform: translateX(-8px);
margin-top: -35px;
}
}
<ul>
<li id="inicio">INICIO</li>
<li id="contacto">CONTACTO</li>
<li id="registrate">REGISTRATE</li>
<li id="ingresar">INGRESAR</li>
<div class="circle">
<i class="fas fa-angle-down" id="arrow1"></i>
<i class="fas fa-angle-down" id="arrow2"></i>
<i class="fas fa-angle-down" id="arrow3"></i>
</div>
</ul>
Since you have your animation assigned to each arrow ID, that animation is playing on page load.
To have the animation play only when the cursor is hovering over the element, you need to add a :hover pseudo-class to each arrow and add the animation within that block.
#arrow1:hover {
animation: animate 1s;
}
After doing that, you should have something like this:
#container {
width: 100%;
height: 80px;
background: #151515;
}
#container,
.navItem {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
transform: translateZ(0);
}
.navItem {
cursor: pointer;
}
.navItem:hover .arrow {
animation: animate 1s;
}
.navText {
font-family: 'Arial', sans-serif;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
}
.arrow {
position: absolute;
color: #ffff4c;
bottom: -15px;
}
#keyframes animate {
50% {
transform: translateY(8px);
margin-top: -35px;
}
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div id="container">
<div class="navItem">
<div class="navText">
Contacto
</div>
<i class="fas fa-angle-down arrow"></i>
</div>
</div>
You may notice that I also edited the HTML and CSS for that example, but the idea is the same. This brings me to my next point, and something that may help you.
Classes
Using ID's is a perfectly acceptable way to write your markup and use CSS to style; however, using id as opposed to class can be cumbersome. Since you have multiple arrows, I would advise using classes as opposed to ID's.
So, all of your arrows would be assigned a class. In my example, I used a simple .arrow class. This is proper CSS styling. ID's are unique and should only be used sparingly, usually only once in a document. Classes are reused.
I should also note that this is purely a syntactical thing. CSS will treat ID's and classes similarly if you require it.
Transitions
You may have also noticed that the animation in my example stops if you hover away from the navItem. This is expected behavior if using a :hover pseudo-class on an element. A workaround is substituting an animation for a transition.
Transitions are an alternate way to apply animated properties to elements. They will animate 'forward' and 'backward' on, say, pseudo-classes like :hover and :focus.
Here's what that example looks like with a transition in place of an animation.
#container {
width: 100%;
height: 80px;
background: #151515;
}
#container,
.navItem {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
transform: translateZ(0);
}
.navItem {
cursor: pointer;
}
.navItem:hover .arrow {
transform: translateY(8px);
}
.navText {
font-family: 'Arial', sans-serif;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
}
.arrow {
position: absolute;
color: #ffff4c;
bottom: -15px;
transition: all 1s;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div id="container">
<div class="navItem">
<div class="navText">
Contacto
</div>
<i class="fas fa-angle-down arrow"></i>
</div>
</div>
So this gives you a much smoother interaction when hovering over a menu.
Pseudo Elements
Lastly, I want to touch up on using Pseudo Elements for things like icons. They're useful for adding additional children to a parent element, without affecting your written markup.
We can replace the arrows with a pseudo-element to clean up our HTML, as well as creating a more manageable workspace. Here's that example, again, but using a pseudo-element in place of HTML for the arrow.
#container {
width: 100%;
height: 80px;
background: #151515;
}
#container,
.navItem {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
transform: translateZ(0);
}
.navItem {
cursor: pointer;
}
.navItem:hover .navText::after {
transform: translateY(8px);
}
.navText {
font-family: 'Arial', sans-serif;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.navText::after {
content: "\f107";
font-family: 'FontAwesome';
color: #FFFF00;
position: absolute;
transition: all 1s;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div id="container">
<div class="navItem">
<div class="navText">
Contacto
</div>
</div>
</div>
Conclusion
Should you have any further questions, I'd be happy to answer them and go more in depth.
I also leave you with this final example via Codepen:
https://codepen.io/jeffheral/pen/NYKbZq
The HTML tags may not be what you want, but feel free to change them. The important thing is we have a solid setup of ID's and classes. If you want to add more navigation items, you only need to add more HTML to your document.
Instead of targetting every arrow individually, you can use a more generic solution:
.menu {
display: flex;
list-style: none;
background-color: #444;
}
.menu li {
padding: 10px 15px;
cursor: pointer;
padding-bottom: 20px;
position: relative;
margin: 5px;
color: white;
font-weight: bold;
font-family: sans-serif;
}
.menu li:after {
font-family: FontAwesome;
font-size: 20px;
font-weight: bold;
content: '\f107';
display: inline-block;
color: yellow;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
transition: transform 0.3s ease;
}
.menu li:hover {
background-color: rgba(0, 0, 0, 0.25);
}
.menu li:hover:after {
transform: translate(-50%, 5px);
}
<ul class="menu">
<li>INICIO</li>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
The text is "wrapping itself" and not displaying in line. I have tried to use p { display:in-line;} but that doesn't do anything. Almost one word after another appears below the word before. I wonder why? Please help and thank you! (I am using a font off google, but I wouldn't expect that to change the situation)
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<title>It's all about me!</title>
</head>
<body>
<header>
<div class="grow">
<ul>
<li>Home</li>
<li>About me</li>
<li>What I love</li>
</ul>
</div>
</header>
<h1>About Me<h1>
<p>Hi, welcome to my website. I am not sure why this is not working at the moment.</p>
</body>
</html>
------------------------------------CSS in another file------------------------------
body {
background-image: url(magical.jpg);
}
h1 { font-family: 'Lobster', cursive;
color: white;
position: absolute;
top: 200px;
left: 630px;
text-decoration: underline;
}
p { font-family: 'Lobster', cursive;
font-size: 20px;
color: white;
position: absolute;
top: 60px;
right:350px;
display: inline;
}
.grow {
position: absolute;
left: 550px;
top: 700px;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
ul {
padding: 10px;
background: #dcf3ff;
border-width: 6px;
border-style: solid;
border-color: white;
}
li {
display: inline;
padding: 0px 15px 0px 15px;
border-right: 2px solid black;
border-left: 2px solid black;
}
.grow {
display: inline-block;
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
Your h1 tag is not closed properly. Change:
<h1>About Me<h1>
to
<h1>About Me</h1>
jsfiddle
Change your P element in the css to this.
p { font-family: 'Lobster', cursive;
font-size: 20px;
color: white;
position: absolute;
top: 60px;
right:350px;
display: inline;
white-space: nowrap;
}