For a school assignment, I am facing an issue where the paragraph is being affected by my CSS animation on the main header title that expands and contracts. My goal is to keep the paragraph in a fixed position without being moved by the header animation (View it in full size)
body {
background-color: blue;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font: Arial, Helvetica, sans-serif black;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
border-radius: 5px;
border-bottom: solid black;
border-top: solid black;
border-left: solid black;
border-right: solid black;
background: #09F;
background: -webkit-linear-gradient(#09F, #9FF);
background: -o-linear-gradient(#09F, #9FF);
background: -moz-linear-gradient(#09F, #9FF);
background: linear-gradient(#09F, #9FF);
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #0FC;
}
@keyframes expand {
0% {
font-size: 3em;
}
50% {
font-size: 4em;
}
100% {
font-size: 3em;
}
}
div.header {
font-family: "Impact";
font-size: 100px;
color: white;
text-align: center;
text-shadow: 5px 5px black;
margin-top: 134px;
margin-bottom: 32px;
animation-name: expand;
animation-duration: 1s;
animation-iteration-count: infinite;
}
div.center-out {
display: table;
margin: auto;
}
div.center-in {
display: table-cell;
vertical-align: middle;
text-align: center;
}
div.intro {
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
}
.button1 {
background-color: #0CF;
border: none;
color: white;
padding: 15px 32px;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 250px;
position: absolute;
top: 75%;
right: 44%;
}
.b1 {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.button1 {
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
}
.button1:hover {
background-color: #09F;
color: black;
}
a:visited {
text-decoration: none;
color: black;
font-family: Arial, Helvetica, sans-serif;
}<!DOCTYPE html>
<html>
<link href="style3.css" type="text/css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Supermercado+One" rel="stylesheet">
<head>
<title>The How to Draw Homepage</title>
</head>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#Tips">Tips</a></li>
<li><a href="index.html">Learn</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<body>
<div class="center-out">
<div class="header">
<h1>Learn to Draw!</h1>
</div>
<div class="intro">
<span><p>Welcome to the best place to enhance your drawing skills with helpful techniques!</p></span>
</div>
</div>
<div class="b1">
<a href="index.html"><button class="button1"><span>Start Drawing!</span></button></a>
</div>
</body>
</html>