Golfing

Developer
Kevin Jannis
Size
3,530 Kb
Views
14,168
  1. Golfing Previews
  2. Golfing HTML Codes
  3. Golfing CSS Codes
  4. Golfing JS Codes

How do I make an golfing?

A dribbble I found recreated in html/css: https://dribbble.com/shots/2283181-Lucky-shot. What is a golfing? How do you make a golfing? This script and codes were developed by Kevin Jannis on 08 September 2022, Thursday.

Golfing Previews
IQ Test

Golfing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Golfing</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="screen"> <div id="course"> <div id="hole"></div> <div id="flag"> <span></span> </div> </div> <div id="ball"></div>
</div>
<p>A day at the course</p> <script src="js/index.js"></script>
</body>
</html>

Golfing - Script Codes CSS Codes

* { box-sizing: border-box;
}
html { background: #d1d1d1;
}
p { text-align: center; font-family: serif; font-size: 20px;
}
#screen { position: relative; background: #ffc94e; border: solid 30px #f9f9f9; border-radius: 3px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); overflow: hidden; margin: 50px auto; width: 460px; height: 360px;
}
#screen:before { content: " "; position: absolute; border-bottom: solid 10px #00c797; border-radius: 50%; z-index: 10; top: 181px; left: 50%; margin-left: -12px; width: 24px; height: 20px;
}
#course { position: absolute; background: #00c797; border-radius: 50%; top: 180px; left: 30px; width: 340px; height: 600px;
}
#hole { position: absolute; background: #143f64; border-radius: 50%; top: 8px; left: 50%; margin-left: -12px; width: 24px; height: 14px;
}
#flag { position: absolute; overflow: hidden; width: 40px; height: 68px; left: 50%; top: -55px; margin-left: 4px;
}
#flag:before { content: " "; position: absolute; background: #143f64; border-radius: 2px 2px 0 0; top: 0; left: 0; width: 4px; height: 68px;
}
#flag span { position: absolute; background: #ff0; border-left: solid 12px #000; border-right: solid 12px #f00; animation: flag 3s linear infinite; top: 3px; left: 5px; width: 35px; height: 28px;
}
#flag span:before { content: " "; position: absolute; background: #ffc94e; border-bottom-right-radius: 20px 10px; animation: flag-top .7s ease-out alternate-reverse infinite; top: 100px; left: 100px; width: 50px; height: 30px; transform: translateY(-120px) translateX(-110px) rotateZ(20deg);
}
#flag span:after { content: " "; position: absolute; background: #ffc94e; border-top-left-radius: 2px; border-top-right-radius: 50px 12px; animation: flag-bottom .7s linear alternate-reverse infinite; top: 100px; left: 100px; width: 50px; height: 30px; transform: translateY(-87px) translateX(-110px) rotateZ(-20deg);
}
#ball { position: absolute; background: #fff; border-radius: 5px; animation: ball 3s ease infinite; z-index: 5; top: 180px; left: 192px; width: 10px; height: 10px;
}
@keyframes flag { 8% { transform: none; } 10% { transform: rotateZ(4deg); } 14% { transform: none; }
}
@keyframes flag-top { 0% { border-bottom-right-radius: 24px 16px; } 100% { border-bottom-right-radius: 50px 20px; }
}
@keyframes flag-bottom { 0% { border-top-right-radius: 50px 12px; } 100% { border-top-right-radius: 0 0; }
}
@keyframes ball { 0% { top: 190px; left: -10px; } 5% { top: 120px; } 10% { top: 130px; left: 195px; } 17% { top: 80px; left: 192px; } 22% { top: 90px; } 26% { top: 196px; left: 193px; } 31% { left: 196px; } 33% { left: 193px; } 34% { left: 196px; } 35% { left: 193px; } 100% { top: 196px; left: 193px; }
}

Golfing - Script Codes JS Codes

/*
Golfing
Made by Kevin Jannis (@kevinjannis)
Inspired by this dribbble https://dribbble.com/shots/2283181-Lucky-shot
View more at www.janniskev.in
*/
Golfing - Script Codes
Golfing - Script Codes
Home Page Home
Developer Kevin Jannis
Username kevinjannis
Uploaded September 08, 2022
Rating 3.5
Size 3,530 Kb
Views 14,168
Do you need developer help for Golfing?

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!

Kevin Jannis (kevinjannis) Script Codes
Name
Star Wars The Force Awakens Speeder
The world with CSS3 Transforms
A winter wonderland scene
Simple float label
DC vs. Marvel
Curated collection of gradient backgrounds
The Simpsons Wall Painting
Vivid CSS3 Spinner
Random Access Memories
Vintage TV
Create amazing video scripts 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!