CSS not being applied correctly - html

Question

Still learning, I've tried everything within my knowledge to make this work.
I'm trying to apply the following:
https://codepen.io/tech-lane/pen/XWbqGyx
<div class="codepen" data-height="201" data-theme-id="light" data-default-tab="css,result" data-user="tech-lane" data-slug-hash="XWbqGyx" data-prefill='{"title":"Pure CSS | FadeIn Text with bars | KeyFrames & Scss","tags":[],"head":" <script src=\"https://kit.fontawesome.com/aa09fdd343.js\"></script>\n\n","scripts":[],"stylesheets":[]}'>
<pre data-lang="html"><div class="container">
<div class="box">
<div class="title">
<span class="block"></span>
<h1>Lane Willmore<span></span></h1>
</div>
<!-- here role goes -->
<h4 class="wordCarousel">
<div>
<!-- Use classes 2,3, or 4 to match the number of words -->
<ul class="flip4">
<li>Oh My!</li>
<li>Swoosh</li>
<li>Cool</li>
<li>Awesome</li>
</ul>
</div>
</h4>
</div>
</div>
</pre>
<pre data-lang="scss" >#import url('https://fonts.googleapis.com/css?family=Lato:300,400|Poppins:300,400,800&display=swap');
* {
margin: 0;
padding: 0;
}
body, html {
overflow: hidden;
}
.container {
width: 100%;
height: 100vh;
background: #232323;
display: flex;
justify-content: center;
align-items: center;
.box {
width: 250px;
height: 250px;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
.title {
width: 100%;
position: relative;
display: flex;
align-items: center;
height: 50px;
.block {
width: 0%;
height: inherit;
background: #ffb510;
position: absolute;
animation: mainBlock 2s cubic-bezier(.74, .06, .4, .92) forwards;
display: flex;
}
h1 {
font-family: 'Poppins';
color: #fff;
font-size: 32px;
-webkit-animation: mainFadeIn 2s forwards;
-o-animation: mainFadeIn 2s forwards;
animation: mainFadeIn 2s forwards;
animation-delay: 1.6s;
opacity: 0;
display: flex;
align-items: baseline;
position: relative;
span {
width:0px;
height: 0px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #ffb510;
-webkit-animation: load 0.6s cubic-bezier(.74, .06, .4, .92) forwards;
animation: popIn 0.8s cubic-bezier(.74, .06, .4, .92) forwards;
animation-delay: 2s;
margin-left: 5px;
margin-top: -10px;
position: absolute;
bottom: 13px;
right: -12px;
}
}
}
.wordCarousel {
font-size: 36px;
font-weight: 100;
color: #939393;
div {
overflow: hidden;
position: relative;
float: left;
height: 45px;
padding-top: 5px;
margin-top: -10px;
li {
font-family: Serif;
color: #ccc;
font-weight: 250;
padding: 0 5px;
height: 45px;
margin-bottom: 45px;
display: block;
}
}
}
}
}
.flip4 { animation: flip4 15s cubic-bezier(1, 1, 0.32, 1.2) infinite; }
#keyframes flip4 {
0% { margin-top: -360px; }
5% { margin-top: -270px; }
25% { margin-top: -270px; }
30% { margin-top: -180px; }
50% { margin-top: -180px; }
55% { margin-top: -90px; }
75% { margin-top: -90px; }
80% { margin-top: 0px; }
99.99% { margin-top: 0px; }
100% { margin-top: -270px; }
}
#keyframes mainBlock {
0% {
width: 0%;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes secBlock {
0% {
width: 0%;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes mainFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes popIn {
0% {
width: 0px;
height: 0px;
background: #e9d856;
border: 0px solid #ddd;
opacity: 0;
}
50% {
width: 10px;
height: 10px;
background: #e9d856;
opacity: 1;
bottom: 45px;
}
65% {
width: 7px;
height: 7px;
bottom: 0px;
width: 15px
}
80% {
width: 10px;
height: 10px;
bottom: 20px
}
100% {
width: 7px;
height: 7px;
background: #e9d856;
border: 0px solid #222;
bottom: 13px;
}
}
#keyframes secFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.5;
}
}
footer {
width: 350px;
height: 80px;
background: #ffb510;
position: absolute;
right: 0;
bottom: -80px;
display: flex;
justify-content: center;
align-items: center;
animation: top 0.8s forwards;
animation-delay: 4s;
span {
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #232323;
font-family: 'Poppins';
i {
margin-right: 25px;
font-size: 22px;
color: #232323;
animation: icon 2s forwards;
animation-delay: 4s;
opacity: 0;
}
}
}
#keyframes top {
0% {
opacity: 0;
bottom: -80px
}
100% {
opacity: 1;
bottom: 0px
}
}
#keyframes icon {
0% {
opacity: 0;
transform: scale(0.0);
}
50% {
opacity: 1;
transform: scale(1.3) rotate(-02deg);
}
100% {
opacity: 1;
bottom: 0px;
}
}</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
to my header in the layout found here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_make_a_website
When applying it the CSS doesn't style it correctly. I'm hoping someone here can point me in the right direction.

Answer 1

Try this code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 80px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Increase the font size of the heading */
.header h1 {
font-size: 40px;
}
/* Style the top navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
}
/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%;
/* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
-ms-flex: 70%;
/* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
#import url("https://fonts.googleapis.com/css?family=Lato:300,400|Poppins:300,400,800&display=swap");
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container * {
margin: 0;
padding: 0;
}
.container .box {
width: 250px;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
}
.container .box .title {
width: 100%;
position: relative;
display: flex;
align-items: center;
height: 50px;
}
.container .box .title .block {
width: 0%;
height: inherit;
background: #ffb510;
position: absolute;
animation: mainBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
display: flex;
}
.container .box .title h1 {
font-family: 'Poppins';
color: #fff;
font-size: 32px;
-webkit-animation: mainFadeIn 2s forwards;
-o-animation: mainFadeIn 2s forwards;
animation: mainFadeIn 2s forwards;
animation-delay: 1.6s;
opacity: 0;
display: flex;
align-items: baseline;
position: relative;
}
.container .box .title h1 span {
width: 0px;
height: 0px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #ffb510;
-webkit-animation: load 0.6s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
animation: popIn 0.8s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
animation-delay: 2s;
margin-left: 5px;
margin-top: -10px;
position: absolute;
bottom: 13px;
right: -12px;
}
.container .box .wordCarousel {
font-size: 36px;
font-weight: 100;
color: #939393;
}
.container .box .wordCarousel div {
overflow: hidden;
position: relative;
float: left;
height: 45px;
padding-top: 5px;
margin-top: -10px;
}
.container .box .wordCarousel div li {
font-family: Serif;
color: #ccc;
font-weight: 250;
padding: 0 5px;
height: 45px;
margin-bottom: 45px;
display: block;
}
.flip4 {
animation: flip4 15s cubic-bezier(1, 1, 0.32, 1.2) infinite;
}
#keyframes flip4 {
0% {
margin-top: -360px;
}
5% {
margin-top: -270px;
}
25% {
margin-top: -270px;
}
30% {
margin-top: -180px;
}
50% {
margin-top: -180px;
}
55% {
margin-top: -90px;
}
75% {
margin-top: -90px;
}
80% {
margin-top: 0px;
}
99.99% {
margin-top: 0px;
}
100% {
margin-top: -270px;
}
}
#keyframes mainBlock {
0% {
width: 0%;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes secBlock {
0% {
width: 0%;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes mainFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes popIn {
0% {
width: 0px;
height: 0px;
background: #e9d856;
border: 0px solid #ddd;
opacity: 0;
}
50% {
width: 10px;
height: 10px;
background: #e9d856;
opacity: 1;
bottom: 45px;
}
65% {
width: 7px;
height: 7px;
bottom: 0px;
width: 15px;
}
80% {
width: 10px;
height: 10px;
bottom: 20px;
}
100% {
width: 7px;
height: 7px;
background: #e9d856;
border: 0px solid #222;
bottom: 13px;
}
}
#keyframes secFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.5;
}
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
#media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="box">
<div class="title">
<span class="block"></span>
<h1>Lane Willmore<span></span></h1>
</div>
<!-- here role goes -->
<h4 class="wordCarousel">
<div>
<!-- Use classes 2,3, or 4 to match the number of words -->
<ul class="flip4">
<li>word 1</li>
<li>word 2</li>
<li>word 3</li>
<li>word 4</li>
</ul>
</div>
</h4>
</div>
</div>
</div>
<div class="navbar">
Link
Link
Link
Link
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>