A Pen by Christian Naths

Developer
Christian Naths
Size
2,563 Kb
Views
8,096
  1. A Pen by Christian Naths Previews
  2. A Pen by Christian Naths HTML Codes
  3. A Pen by Christian Naths CSS Codes

How do I make an a pen by christian naths?

What is a a pen by christian naths? How do you make a a pen by christian naths? This script and codes were developed by Christian Naths on 29 November 2022, Tuesday.

A Pen by Christian Naths Previews
IQ Test

A Pen by Christian Naths - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Christian Naths</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p> <span class='top half'>FIGHT!</span> <span class='bottom half'>FIGHT!</span>
</p>
</body>
</html>

A Pen by Christian Naths - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Ceviche+One");
body { width: 960px; margin: 0 auto; background: #333; font-family: helvetica, arial, sans-serif; font-family: "Ceviche One"; font-size: 120px; font-weight: 700; color: #fff; text-align: center;
}
.half { display: block; position: relative; overflow: hidden; height: 60px; opacity: 1; text-shadow: 1px 1px 10px #f00;
}
.bottom { line-height: 7px; left: 0px;
}
.top { left: 0px;
}
@-webkit-keyframes infromleft { 0% { left: -200px; opacity: 0; } 100% { left: 0px; opacity: 0.5; }
}
@-webkit-keyframes outtoright { 0% { left: 0px; opacity: 0.5; } 100% { left: 200px; opacity: 0; }
}
@-webkit-keyframes infromright { 0% { left: 200px; opacity: 0; } 100% { left: 0px; opacity: 0.5; }
}
@-webkit-keyframes outtoleft { 0% { left: 0px; opacity: 0.5; } 100% { left: -200px; opacity: 0; }
}
@-webkit-keyframes flashcolor { 0% { opacity: 0.5; } 45% { opacity: 1; -webkit-animation-timing-function: ease-in; } 50% { opacity: 0.5; -webkit-animation-timing-function: ease-out; } 65% { opacity: 1; -webkit-animation-timing-function: ease-in; } 100% { opacity: 0.5; -webkit-animation-timing-function: ease-out; }
}
.bottom { -webkit-animation: infromleft 1s forwards, flashcolor 0.6s 1s forwards, outtoright 1s 2s forwards;
}
.top { -webkit-animation: infromright 1s forwards, flashcolor 0.6s 1s forwards, outtoleft 1s 2s forwards;
}
A Pen by Christian Naths - Script Codes
A Pen by Christian Naths - Script Codes
Home Page Home
Developer Christian Naths
Username christiannaths
Uploaded November 29, 2022
Rating 3
Size 2,563 Kb
Views 8,096
Do you need developer help for A Pen by Christian Naths?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Christian Naths (christiannaths) Script Codes
Name
Off-Canvas Responsive Layout
Collection-bootstrap
Next Game Widget
Activity Timeline
Responsive App Layout
Upcoming Event Stream
Animated Open Mentorship Logo
CSS-Only Inputs
Responsive Admin Panel
Checkbox Switch
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!