Live News Pulse Icon

Developer
Toby
Size
2,001 Kb
Views
8,096
  1. Live News Pulse Icon Previews
  2. Live News Pulse Icon HTML Codes
  3. Live News Pulse Icon CSS Codes
  4. Live News Pulse Icon JS Codes

How do I make an live news pulse icon?

What is a live news pulse icon? How do you make a live news pulse icon? This script and codes were developed by Toby on 24 January 2023, Tuesday.

Live News Pulse Icon Previews
IQ Test

Live News Pulse Icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Live News Pulse Icon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" href="https://pasteup.guim.co.uk/0.0.5/css/fonts.pasteup.min.css">
<div class="headline"> <h2><span class="live-pulse-icon"></span> <span class="live-text">Live</span><span class="forward-slash"> / </span>EU referendum live: remain and leave make final push in last day of campaign</h2>
</div> <script src="js/index.js"></script>
</body>
</html>

Live News Pulse Icon - Script Codes CSS Codes

html,
body { background-color: #ae0000;
}
.live-pulse-icon { font-weight: bold; border-radius: 62.5rem; display: inline-block; position: relative; background-color: #fff; width: 0.75em; height: 0.75em; content: ''; margin-right: 0.1875rem; vertical-align: initial; animation: pulse 1s infinite;
}
@keyframes pulse { 0% { background-color: #ae0000; } 100% { background-color: #fff; }
}
h1,
h2 { font-family: "Guardian Egyptian Headline", Georgia, serif; color: #fff; font-weight: 500;
}
p { font-family: "Guardian Egyptian Text", Georgia, serif; color: #fff;
}
.headline { width: 25%; margin: 0 1.3em;
}
.live-text { color: #fdadba; font-weight: 500;
}
.forward-slash { color: #fdadba; font-weight: 300;
}

Live News Pulse Icon - Script Codes JS Codes

// Inspired by: http://www.theguardian.com/tone/minutebyminute
Live News Pulse Icon - Script Codes
Live News Pulse Icon - Script Codes
Home Page Home
Developer Toby
Username tobydennison
Uploaded January 24, 2023
Rating 3
Size 2,001 Kb
Views 8,096
Do you need developer help for Live News Pulse Icon?

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!

Toby (tobydennison) Script Codes
Name
Visual Studio Editor Mockup
FlowType.js Testing
Google reCaptcha Setup
JQuery Snow Animation
Angular Markdown Preview
Save a Quick Note
Custom Google Maps
CSS3 Animated Type by Toby Dennison
A Pen by Toby
Windows 8 Style Tile Navigation
Create amazing art & images 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!