Skip to main content

Posts

Showing posts with the label html

Heart Pulse Animation Using CSS || Heart Animation CSS || HTML Code for Heart Animation || Heart Like Animation

Heart Pulse Animation Using HTML and CSS This heart animation is great for your website, blog post, or social media profile. It's beautiful and simple: just a pulsing heart in front of a solid black background. This tutorial will show you how to create a pulsing heart animation using html and css. HTML and CSS animation. In this tutorial, we'll be creating a simple pulsing heart animation using HTML and CSS. We'll explore the techniques necessary to create an animation that can be used in a variety of contexts, including websites, mobile apps, and embedded media. The finished product should look something like this: HTML: <! DOCTYPE html > < html lang =" en "> < head >     < meta charset =" UTF-8 ">     < meta http-equiv =" X-UA-Compatible " content =" IE=edge ">     < meta name =" viewport " content =" width=device-width, initial-scale=1.0 ">     < title >Heart Icon A
Post a Comment
Read more

How to Make an Animation RGB Color Using CSS || rgb animation in css and html - Creation Code

 Introduction: In this project, we will create a button which is covered by an animation that creates RGB effect HTML: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>RGB button by creation code</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <a href="#" class="button">         <span>CREATION CODE</span>     </a> </body> </html> CSS: html, body{     height: 100%;     overflow: hidden; } body{     background: #191919;     display: flex;     align-items: center;     justify-content: center; } .button{     background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 100%);     position: relativ
Post a Comment
Read more

How do You Code a Digital Clock? || How do you code a clock in javascript - Creation Code

How do you code a digital clock using HTML, CSS, and Javascript? Digital Clock: A digital clock is a type of clock that displays the time digitally(i.e in numerals or other symbols), as opposed to an analog clock. Digital clocks are often associated with electronics drives, but the 'digital' description refers only to the display, not to the drive mechanism. (Both analog and digital clocks can be driven either mechanically or electronically, but "clockwork" mechanisms with digital displays are rare In this post we will create a simple digital clock using javascript HTML: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link rel="stylesheet" href="style.css">     <title>Creation code</ti
Post a Comment
Read more

HTML Interview Question || What are the Basic Interview Questions in HTML? ||HTML Interview Question and Answer - Creation Code

  Top 4 HTML interview questions for your coming interview 1. What are attributes? Each tag can take in additional attributes that change the way the tag behaves. For example, an input tag has a type attribute, which allows you to specify whether the input field is a text field, checkbox, or radio button among other options. 2. What are entities in HTML? HTML character entities are used to replace reserved characters in HTML. You can also replace characters that are not present on your keyboard by using entities. 3. Explain HTML5? HTML5 is the most recent version of the Hypertext Markup Language. HTML5 introduces several new features: Adding new attributes Allow offline editing Adding new parsing rules to enhance flexibility Support (Web SQL) Support Protocol and MIME handler registration, allowing you to change the way of user interaction with documents. 4. What is an API for HTML5? An API, which stands for Application Programming Interfaces, is a way to build various web applications
Post a Comment
Read more

How to Make a Loader || loading animation css || css loading spinner - Creation Code

Loading animation with CSS When to use a loader? Immediate response time is less than 1 second. If they don't get any visual feedback after a second, they start to worry. If you have a process that takes longer than a second, you should display a spinner. It creates an excellent user experience on your website. HTML: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link rel="stylesheet" href="style.css">     <title>CREATION CODE</title> </head> <body>          <button class="btn">         <span class="loading">L<span class="loader"></span>ading</span>         <span class="dot dot1">.</span>         <sp
Post a Comment
Read more

Create Login Page Like Twitter || Twitter login page clone || twitter clone html, css - Creation Code

Twitter: Twitter is an American microblogging and social networking service on which users post and interact with messages known as "tweets". Registered users can post, like, and retweet tweets, but unregistered users can only read those that are publicly available. Users interact with Twitter through browsers or mobile frontend software, or programmatically via its APIs. Prior to April 2020, services were accessible via SMS. The service is provided by Twitter, Inc., a corporation based in San Francisco, California, and has more than 25 offices around the world. Tweets were originally restricted to 140 characters, but the limit was doubled to 280 for non-CJK languages in November 2017. Audio and video tweets remain limited to 140 seconds for most accounts. We are going to build the login clone with HTML and CSS HTML: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible"
Post a Comment
Read more

Word Counting Using HTML, CSS and JavaScript - Creation Code

Word Count: The word count is the number of  words  in a document or passage of text. Word counting may be needed when a text is required to stay within certain numbers of words. This may particularly be the case in  academia , legal proceedings,  journalism , and  advertising . Word count is commonly used by  translator s to determine the price of a translation job. Word counts may also be used to calculate measures of  readability  and to measure typing and reading speeds(usually in  words per minute ). When converting  character  count to words, a measure of 5 or 6 characters to a word is generally used for English In this post, we will use HTML, CSS, and JavaScript to make this project so let's jump into the code without wasting any time HTML: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv=&q
Post a Comment
Read more

Make a Simple Survey From Using Only HTML - Creation Code

Survey Data Collection:  With the application of probability  sampling  in the 1930s, surveys became a standard tool for  empirical research  in  social sciences ,  marketing , and official statistics. The methods involved in survey data collection are any of several ways in which data can be  collected  for a  statistical survey . First, there was the change from traditional paper-and-pencil interviewing(PAPI) to computer-assisted interviewing(CAI). Now, face-to-face surveys(CAPI), telephone surveys( CATI ), and mail surveys(CASI, CSAQ) are increasingly replaced by web surveys In this post, we will make a basic survey form with the help of HTML. In this post, we just use HTML but not CSS. You can make a style change as you want. HTML: <!DOCTYPE HTML> <html> <head>     <title>Survey</title> </head> <body>     <h1>Survey form</h1>     Enter your name:     <input type="text" name="UserName" size=35 maxlength=35
Post a Comment
Read more

Create an Awesome Calculator Using HTML, CSS and JavaScript - Creation Code

Calculator: The first  solid-state electronic  calculator was created in the early 1960s. Pocket-sized devices became available in the 1970s, especially after the  Intel 4004 , the first  microprocessor , was developed by  Intel  for the Japanese calculator company  Busicom . They later became used commonly within the petroleum industry(oil and gas) In this post, we will create a simple calculator for use on the web with the help of HTML, CSS, and javascript HTML: <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>calculator</title>  <link rel="stylesheet" href="./style.css"> </head> <body>  <section class="calculator">   <form>    <input type="text" name="&
Post a Comment
Read more

Make an Interesting Animation using Pure CSS and HTML | Animation in CSS

 In this project, we will only use HTML and CSS to make an animation where the moon is rotating our earth. HTML file <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > moon rotation around earth </ title >     < link rel = "stylesheet" href = "css/style.css" > </ head > < body >     < article class = "earth-demo" >         < div class = "earth" >           < img src = "https://cssanimation.rocks/images/random/earth.png" alt = "" ></ div >         < div class = "moon-container" >           < div class = "moon" >             < img src = "https
Post a Comment
Read more