Site Point Challenge #1

Developer
Satnam Singh
Size
1,927 Kb
Views
34,408
  1. Site Point Challenge #1 Previews
  2. Site Point Challenge #1 HTML Codes
  3. Site Point Challenge #1 CSS Codes

How do I make an site point challenge #1?

Recreate this GIF in HTML & CSSLeft is Mine, Right is GIFhttp://www.sitepoint.com/challenge-1-recreate-gif-css/. What is a site point challenge #1? How do you make a site point challenge #1? This script and codes were developed by Satnam Singh on 07 October 2022, Friday.

Site Point Challenge #1 Previews
IQ Test

Site Point Challenge #1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Site Point Challenge #1</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="shape"></div> <img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/08/1407310358spinner-cropped.gif" />
<p style="position:absolute; top:100px; left:35px;">Left is Mine < > Right is GIF</p>
</body>
</html>

Site Point Challenge #1 - Script Codes CSS Codes

.shape{ margin: 36px; float: left; background: #1EB287; /*green*/ height: 40px; width: 40px; border:0px solid #158BC5; -webkit-animation: changeShape 1.7s cubic-bezier(.4, .75,.25, 1) infinite; -webkit-animation-direction: 2 alternate;
}
@-webkit-keyframes changeShape { 0% { height: 40px; width: 40px; border:0px solid #158BC5; background-color:#1EB287; } 33.33% { transform:rotate(90deg); width:0; height:0; background:transparent; border:40px solid #158BC5; border-left:0px solid transparent; border-bottom:25px solid transparent; border-top:25px solid transparent; border-radius:0; } 66.66% { border:0 solid #D25E51; transform:rotate(180deg); border-radius:50%; background-color:#D25E51; height: 40px; width: 40px; } 100% { height: 40px; width: 40px; border:0px solid #158BC5; background-color:#1EB287; transform:rotate(270deg); }
}
/* blue: #158BC5 */
/* red: #D25E51 */
img { float: left;
}
Site Point Challenge #1 - Script Codes
Site Point Challenge #1 - Script Codes
Home Page Home
Developer Satnam Singh
Username rssatnam
Uploaded October 07, 2022
Rating 3
Size 1,927 Kb
Views 34,408
Do you need developer help for Site Point Challenge #1?

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!

Satnam Singh (rssatnam) Script Codes
Name
A Pen by Satnam Singh
Giving Strike, Del or S elements a Color
SVG Cone Scribble
Navigation Icon 3 lines to X
Navigation Slider
CSS Ribbon
CSS3 Form Page Design
Countdown Timer with Video
Image Viewer
Menu Hover Animation
Create amazing sales emails 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!