<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:blogger='http://schemas.google.com/blogger/2008' xmlns:georss='http://www.georss.org/georss' xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-1208186832088695539</id><updated>2026-03-26T16:31:17.063+05:00</updated><category term="web development"/><category term="HTML &amp; CSS"/><category term="Javascript"/><category term="Responsive Navigation Menu Bar"/><category term="Responsive Navigation Menu Bar using HTML CSS"/><category term="CSS Animations"/><category term="Responsive Navigation Menu Bar without javascript"/><category term="CSS Tips &amp; Tricks"/><category term="Quick Website Development Tips"/><category term="create website in 5 Minutes"/><category term="Responsive     Website With HTML CSS JS"/><category term="Responsive Carousel"/><category term="Responsive Image Slider"/><category term="Responsive Navigation Menu Bar using HTML CSS &amp; Javascript"/><category term="Responsive Website With HTML CSS"/><category term="latest css animation effects"/><category term="wordpress"/><category term="CSS Hover Effects"/><category term="CSS Text Animation"/><category term="Responsive Image Slider with Buttons"/><category term="Responsive Sticky Navbar with css"/><category term="Responsive dropdown Navigation menu bar"/><category term="Tech Tips &amp; Tricks"/><category term="Text Changing Animation Effect"/><category term="image slider with html css only"/><category term="web application with javascript"/><category term="wordpress tips &amp; tricks"/><category term="Admin Profile Photo On Wordpress"/><category term="Animated Hamburger Menu"/><category term="Animated Hover Button"/><category term="Animated Search Form"/><category term="Animated Sticky Navigation bar"/><category term="Animation Website"/><category term="Bootstrap"/><category term="CSS Buttons Hover Effects"/><category term="CSS Moving Car Animation"/><category term="Calculator Using HTML CSS and Javascript"/><category term="Center a Div Horizontally and Vertically in CSS"/><category term="Copy or Clone Any Website"/><category term="Create Website Preloader"/><category term="Custom Checkbox and Radio Using Font Awesome Icons"/><category term="Digital Clock UI"/><category term="Digital Clock UI Using HTML CSS3 &amp; Vanilla Javascript"/><category term="Download Bootstrap Website"/><category term="Download Complete Website Code"/><category term="Download Unlimited Free Preloader"/><category term="Easily Add Preloader To Website"/><category term="Filterable image gallery"/><category term="Find All Wifi Passwords"/><category term="Hamburger Menu"/><category term="Image Slider Carousel With Javascript"/><category term="JQuery"/><category term="JQuery Plugin"/><category term="Magnific Popup"/><category term="Menu bar with search box"/><category term="Preloader"/><category term="Responsive Animated Login Form"/><category term="Responsive Animated Login Form using HTML CSS Only"/><category term="Responsive Sliding Menu bar"/><category term="Rotating Text Animation"/><category term="Sidebar Navigation Menu bar"/><category term="Sliding Background Hover Effect"/><category term="Transforming Hamburger Menu CSS HTML"/><category term="Wifi Password Tricks"/><category term="Wifi Passwords With Only 1 Command"/><category term="Wordpress (Gravatar)"/><category term="Wordpress Website Tutorial"/><category term="blogger"/><category term="calculator using javascript"/><category term="cmd tricks"/><category term="create aboutus page"/><category term="create contactus page"/><category term="create disclaimer page"/><category term="create dmca page"/><category term="create pages in blogger wordpress"/><category term="create privacy policy page"/><category term="create terms and conditions page"/><category term="custom profile picture"/><category term="free SSL"/><category term="free domain"/><category term="free web hosting"/><category term="gravatar"/><category term="hosting"/><category term="image lightbox"/><category term="responsive image gallery lightbox"/><category term="wordpress hosting"/><category term="wordpress website"/><category term="wp user avatar"/><title type='text'>Tech Memorise: Learn Web Development SEO &amp;amp; Tech Tutorials</title><subtitle type='html'>Tech Memorise Provide Information about Web Development, Technology, Basic Information, Tech news, Freelance Web Development Tips, Graphics Designing Tips Free, Computer Education Article, Free tips and tricks about web development and design, Tech Tutorials, techmemorise, technology, SEO, freelancing, Computer courses,  and Update yourself with The whole new Internet world of Tricks.</subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default?redirect=false'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><link rel='next' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default?start-index=26&amp;max-results=25&amp;redirect=false'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>35</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-787435101180210418</id><published>2023-01-06T01:55:00.009+05:00</published><updated>2023-01-06T02:04:58.839+05:00</updated><title type='text'>Five excellent habits that every software engineer must need to follow</title><content type='html'>Recently I have read some books and important articles, and gained some very important five excellent habits that I want to share with you guys and that every software engineer should follow:&lt;br /&gt;&lt;br /&gt;&lt;b&gt;1) Take your time, stay hungry for learning, and keep exploring. &lt;/b&gt;&lt;br /&gt;&lt;br /&gt;This Habit can help you to improve your skills as a software engineer and stay current with new developments in the field. It&#39;s important to keep learning and growing as a professional, as the field of software engineering is constantly evolving. &lt;br /&gt;&lt;br /&gt;Let us think about a plant that needs to be watered and nurtured in order to grow. Just as a plant needs time, care, and the right conditions to thrive, you need to invest time and effort in your own development as a software engineer in order to grow and improve. You must need to strengthen your basics, to making professional in your field.&lt;br /&gt;&lt;br /&gt;&lt;b&gt;2) Never build borders around your knowledge, learn everything you love.&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;Think of a chef who is open to trying new ingredients and experimenting with different cuisines. Just as a chef who is open to trying new things is more likely to create interesting and varied dishes, an engineer who is open to learning about a wide range of topics is more likely to be able to tackle a diverse range of projects and challenges. &lt;br /&gt;&lt;br /&gt;We often meet some good experts like Angular experts, React experts, Java experts, and many more. But we rarely meet all-rounders who can adapt and love any technology.&lt;br /&gt;&lt;br /&gt;Die-hard programmers treat technology stacks as tools that help them to solve engineering problems. &lt;br /&gt;&lt;br /&gt;Some developers work with only one technology in their whole career. Like some developers are only experts in the web frontend part, and some devs are only experts in the backend part of their whole career.&lt;br /&gt;&lt;br /&gt;Specializing in one computer science field is undoubtedly good, but if you specialize in one technology stack, you will build borders around your knowledge and skill set.&lt;br /&gt;&lt;br /&gt;For example, mastering the software engineering field is great. But, if you build Node.js RESTful APIs in your whole career, you will limit your knowledge and skills by yourself.&lt;br /&gt;&lt;br /&gt;Learn everything you love to learn. It’s a great way to identify your expertise. Learn multiple programming languages and experiment with different technologies, then you will learn impressive concepts and lessons that help you go forward in your career.&lt;br /&gt;&lt;br /&gt;&lt;b&gt;3) Assume your colleagues know something you don&#39;t. &lt;/b&gt;&lt;br /&gt;&lt;br /&gt;This Habit can help you to stay humble and open to learning from others. It&#39;s important to recognize that you can always learn from others, regardless of your own level of expertise.&lt;br /&gt;&lt;br /&gt;Think about a student who is open to learning from their teacher. Just as a student who is open to learning from their teacher is more likely to improve and succeed, an engineer who is open to learning from their colleagues is more likely to improve and succeed in their work.&lt;br /&gt;&lt;br /&gt;&lt;b&gt;4) Don&#39;t bad mouth other people&#39;s code even if it&#39;s bad.&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;Refraining from badmouthing other people&#39;s code, even if it is not up to your standards, is a matter of professionalism and respect. It&#39;s important to be constructive in your criticism and offer suggestions for improvement rather than simply tearing down the work of others.&lt;br /&gt;&lt;br /&gt;Think about a sports team that supports and encourages one another. Just as a sports team that works together and supports each other is more likely to succeed, a team of engineers that works.&lt;br /&gt;&lt;br /&gt;&lt;b&gt;5) Questioning about everything.&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;Asking questions and being curious about how things work can help you to learn and grow as a software engineer. It&#39;s important to be proactive in seeking out new information and understanding, rather than simply accepting things at face value.&lt;br /&gt;&lt;br /&gt;Think about a detective who is always seeking to uncover the truth. Just as a detective is constantly asking questions and looking for clues to solve a case, an engineer who is curious and asks questions is more likely to find solutions and improve their understanding of a problem.&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/787435101180210418/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2023/01/blog-post.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/787435101180210418'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/787435101180210418'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2023/01/blog-post.html' title='Five excellent habits that every software engineer must need to follow'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-2027722990474330775</id><published>2020-12-21T16:20:00.006+05:00</published><updated>2021-07-21T16:10:44.245+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Create Website Preloader"/><category scheme="http://www.blogger.com/atom/ns#" term="CSS Animations"/><category scheme="http://www.blogger.com/atom/ns#" term="Download Unlimited Free Preloader"/><category scheme="http://www.blogger.com/atom/ns#" term="Easily Add Preloader To Website"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="Javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="Preloader"/><category scheme="http://www.blogger.com/atom/ns#" term="Quick Website Development Tips"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>Easily Add Preloader To Website 🔥 | Create Website Preloader | Download Unlimited Free Preloader</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;Easily Add Preloader To Website 🔥 | Create Website Preloader | Download Unlimited Free Preloader&quot; border=&quot;0&quot; data-original-height=&quot;720&quot; data-original-width=&quot;1280&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1l7ZzTKEVLukAxUm7TZtuOFubk4zFZdOGnVqZcnhgV5sVeUAr0blvJVBr61pmbQSU6SLUAiV7g2_lK1x3NxXW4zlg-Uxt8APk7yBLFxzJCBzSe14WYdOwWXGMD0xa1gJZDvU4tlz4ac8/w640-h360/easily-add-preloader-to-website-create-website-preloader-download-unlimited-free-preloader.jpg&quot; title=&quot;Easily Add Preloader To Website 🔥 | Create Website Preloader | Download Unlimited Free Preloader&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: justify;&quot;&gt;&lt;span style=&quot;text-align: start; white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Want to Learn How to easily add a preloader to the website? Today I am sharing how I download unlimited preloader and create website preloader using CSS.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: justify;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;text-align: start; white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;h2 style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;Create Website Preloader:&lt;/span&gt;&lt;/h2&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Hey Guys, &lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;In This Video Tutorial, I will be showing and Explain to you How to create a responsive and nice-looking website preloader using only pure HTML, CSS, and JavaScript (No JQuery is Used). Nice Looking CSS Preloader on any website plays an important role in a better user experience. Many Tutorials on Youtube and Google create a preloader with Jquery but we create this preloader with the use of vanilla javascript and the performance is not decreased.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;h2 style=&quot;clear: both; font-family: &amp;quot;Times New Roman&amp;quot;; white-space: normal;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;Download Unlimited Free Preloader:&lt;/span&gt;&lt;/h2&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; font-family: &amp;quot;Times New Roman&amp;quot;; white-space: normal;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Also, I share a great website for downloading unlimited free preloader for your website. This Website Contains Many CSS spinners and preloaders with CSS animation optimized in size, speed, and developers friendly for your next web project.  Kindly Go to this website and see the next-level animations.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; font-family: &amp;quot;Times New Roman&amp;quot;; white-space: normal;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Loading.io Website Link: &lt;a href=&quot;https://loading.io/css/&quot;&gt;https://loading.io/css/&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; font-family: &amp;quot;Times New Roman&amp;quot;; white-space: normal;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; font-family: &amp;quot;Times New Roman&amp;quot;; white-space: normal;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;h2 style=&quot;clear: both; font-family: &amp;quot;Times New Roman&amp;quot;; white-space: normal;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;Easily Add Preloader To Website:&lt;/span&gt;&lt;/h2&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; font-family: &amp;quot;Times New Roman&amp;quot;; white-space: normal;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;And the Very Last and Important Thing is how to add preloader to the HTML page. In this video tutorial. How to add Preloader to Website | Using HTML, CSS, and JavaScript. No JQuery is used For This. There are many ways to explain on another resource about adding a preloader to an HTML page. But my explanation is very easy because we also provide the source code in this video. If you want this tutorial helpful for you, please hit the like button and also press the bell icon for more latest updates.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;h3 style=&quot;text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Compare Our Website Preloader with others:&lt;/span&gt;&lt;/h3&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;I know many YouTubers already make videos about the easily Add Preloader To the Website but I am showing and explaining to you unique concepts and extra tips &amp;amp; tricks. So Please Support me because I am working very hard day and night for making videos for you. please subscribe, like, share my channel and also support me on all social media.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;h4 style=&quot;text-align: left;&quot;&gt;&lt;span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Creative CSS3 Preloaders Source Code:&lt;/span&gt;&lt;/span&gt;&lt;/h4&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;If You have any queries in your precious mind kindly comment on us. So If you like my act of teaching and way of delivering a concept to you so please comment to me and raise my confidence level. If You want to Download the full Source code of the Website Preloader. So the downloading link is given below.

Don&#39;t Click On This Link 🔥 :  &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;a href=&quot;https://bit.ly/3i4lNUu&quot;&gt;https://bit.ly/3i4lNUu&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;h4 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Youtube Video Timestamp:&lt;/span&gt;&lt;/h4&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;1. Javascript Preloader Demo: &lt;/span&gt;&lt;b&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;0:00&lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt; - &lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;00:17&lt;/span&gt;&lt;/b&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;
2. Easily Add Preloader To Website: &lt;/span&gt;&lt;b&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;00:18&lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt; - &lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;06:09&lt;/span&gt;&lt;/b&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;
3. Techmemorise Outro:- &lt;/span&gt;&lt;b&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;06:10&lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt; - &lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;06:20&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;
  
&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;
&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;
&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/Ctlem_k_yaA&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;    

&lt;span color=&quot;rgba(0, 0, 0, 0.870588235294118)&quot; face=&quot;Roboto, Noto, sans-serif&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;h3&gt;&lt;br /&gt;&lt;/h3&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;&lt;b style=&quot;background-color: #fcff01;&quot;&gt;If you want to download the complete source code of Website Preloader using HTML CSS click the button below and download it:&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://drive.google.com/file/d/1xCyBTbjktcXfxdbX9RIXEaxY2bfc0ZUt/view&quot; id=&quot;Responsive Sidebar Navigation Menu bar using HTML CSS Only&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Easily Add Preloader To Website 🔥 | Create Website Preloader | Download Unlimited Free Preloader&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;Easily Add Preloader To Website 🔥 | Create Website Preloader | Download Unlimited Free Preloader&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br style=&quot;font-size: 18.72px;&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;/div&gt;&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/2027722990474330775/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/12/easily-add-create-preloader-to-website-download-unlimited-free-preloader.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/2027722990474330775'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/2027722990474330775'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/12/easily-add-create-preloader-to-website-download-unlimited-free-preloader.html' title='Easily Add Preloader To Website 🔥 | Create Website Preloader | Download Unlimited Free Preloader'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1l7ZzTKEVLukAxUm7TZtuOFubk4zFZdOGnVqZcnhgV5sVeUAr0blvJVBr61pmbQSU6SLUAiV7g2_lK1x3NxXW4zlg-Uxt8APk7yBLFxzJCBzSe14WYdOwWXGMD0xa1gJZDvU4tlz4ac8/s72-w640-h360-c/easily-add-preloader-to-website-create-website-preloader-download-unlimited-free-preloader.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-5683143197677016559</id><published>2020-12-21T07:53:00.002+05:00</published><updated>2020-12-21T07:53:37.010+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="CSS Animations"/><category scheme="http://www.blogger.com/atom/ns#" term="CSS Text Animation"/><category scheme="http://www.blogger.com/atom/ns#" term="CSS Tips &amp; Tricks"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="latest css animation effects"/><category scheme="http://www.blogger.com/atom/ns#" term="Rotating Text Animation"/><category scheme="http://www.blogger.com/atom/ns#" term="Text Changing Animation Effect"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>CSS3 Text Changing Using Rotating Text Animation Effect  🔥 | CSS Text Animation | No JavaScript</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;CSS3 Text Changing Using Rotating Text Animation Effect  🔥 | CSS Text Animation | No JavaScript&quot; border=&quot;0&quot; data-original-height=&quot;720&quot; data-original-width=&quot;1280&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5ms1phpjR941VJX6VNLVevvYc1sDbyo6mW7s_JlFyxB44EpgNRhGWzB6tr409hJpZ2F_ZNPsZgnM8uOhM3XNeiqzylumdHZ1qggZJ9qwrd3mAGikfg3Q7zK6NZ7STY-s94j7F4z8zd4g/w640-h360/pure-css-text-rotating-animation-effect-no-javascript.jpg&quot; title=&quot;CSS3 Text Changing Using Rotating Text Animation Effect | CSS Text Animation | No JavaScript&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: justify;&quot;&gt;&lt;span style=&quot;text-align: start; white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Want to Learn How to create nice CSS text Rotating animation effects? Today I am sharing how I exactly make a pure CSS3 text changing animation effect Without JavaScript.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: justify;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;text-align: start; white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;h2 style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;Rotating Text Animation Effect:&lt;/span&gt;&lt;/h2&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Hey Guys,
In This Video Tutorial, I will be showing and Explain to you that How to create an awesome nice looking, and user-friendly pure CSS rotating text-changing animation with CSS keyframes. When a beautiful text animation effect is placed on the website header that plays an important role in a better user experience. I use pure HTML CSS for creating this text effect. In this Text Changing Animation, we use CSS animations, Keyframes, Pseudo element, position, and transform property. we use CSS keyframes to change positions of text with a specific interval of time.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;h3 style=&quot;text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Compare Pure CSS3 Animation Effect with others:&lt;/span&gt;&lt;/h3&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;I know many YouTubers already make videos about the CSS3 Text Changing Animation but I am showing and explaining to you with unique concepts and extra tips &amp;amp; tricks. So Please Support me because I am working very hard day and night for making videos for you. please subscribe, like, share my channel and also support me on all social media.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;h4 style=&quot;text-align: left;&quot;&gt;&lt;span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Creative CSS3 Text Changing effects Source Code:&lt;/span&gt;&lt;/span&gt;&lt;/h4&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;If You have any queries in your precious mind kindly comment on us. So If you like my act of teaching and way of delivering a concept to you so please comment to me and raise my confidence level. If You want to Download the full Source code of CSS Text Animation. So the downloading link is given below.

Don&#39;t Click On This Link 🔥 :  &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;a href=&quot;https://bit.ly/3i4lNUu&quot;&gt;https://bit.ly/3i4lNUu&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;h4 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Youtube Video Timestamp:&lt;/span&gt;&lt;/h4&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;1. Text Changing Demo: &lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;0:00&lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt; - &lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;00:17&lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;
2. How to create text rotating animations: &lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;00:18&lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt; - &lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;06:09&lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;
3. Techmemorise Outro:- &lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;06:10&lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt; - &lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;06:20&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;h4 style=&quot;text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Content That I Cover In This Video:&lt;/span&gt;&lt;/h4&gt;&lt;/div&gt;&lt;p style=&quot;text-align: left;&quot;&gt;&lt;/p&gt;&lt;ul style=&quot;text-align: left;&quot;&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;CSS Text Animation&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;CSS Rotating animation&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Text Changing Animation&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Rotating Animation Effect&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;CSS quick tips &amp;amp; tricks&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Rotating text Animation Without JavaScript&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;CSS animation effects&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;CSS animation tutorial
&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;CSS text animation&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;
  
&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;
&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;
&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/UftaKXRZ2Vo&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;    

&lt;span color=&quot;rgba(0, 0, 0, 0.870588235294118)&quot; face=&quot;Roboto, Noto, sans-serif&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;h3&gt;&lt;br /&gt;&lt;/h3&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;&lt;b style=&quot;background-color: #fcff01;&quot;&gt;If you want to download the complete source code of Animated Hover Button using HTML CSS click the button below and download it:&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://drive.google.com/file/d/1srzejRhmYnDq566QW3afTQA0xUAu5Mbz/view&quot; id=&quot;Responsive Sidebar Navigation Menu bar using HTML CSS Only&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;CSS3 Text Changing Using Rotating Text Animation Effect  🔥 | CSS Text Animation | No JavaScript&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;CSS3 Text Changing Using Rotating Text Animation Effect  🔥 | CSS Text Animation | No JavaScript&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br style=&quot;font-size: 18.72px;&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;/div&gt;&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/5683143197677016559/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/12/pure-css3-rotating-text-changing-animation-effects-without-javascript.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/5683143197677016559'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/5683143197677016559'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/12/pure-css3-rotating-text-changing-animation-effects-without-javascript.html' title='CSS3 Text Changing Using Rotating Text Animation Effect  🔥 | CSS Text Animation | No JavaScript'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5ms1phpjR941VJX6VNLVevvYc1sDbyo6mW7s_JlFyxB44EpgNRhGWzB6tr409hJpZ2F_ZNPsZgnM8uOhM3XNeiqzylumdHZ1qggZJ9qwrd3mAGikfg3Q7zK6NZ7STY-s94j7F4z8zd4g/s72-w640-h360-c/pure-css-text-rotating-animation-effect-no-javascript.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-7231976769575519950</id><published>2020-12-21T07:39:00.002+05:00</published><updated>2020-12-21T07:54:00.984+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="CSS Animations"/><category scheme="http://www.blogger.com/atom/ns#" term="CSS Text Animation"/><category scheme="http://www.blogger.com/atom/ns#" term="CSS Tips &amp; Tricks"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="latest css animation effects"/><category scheme="http://www.blogger.com/atom/ns#" term="Text Changing Animation Effect"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>Pure CSS3 Text Changing Animation Effect 🔥 | CSS Text Animation | No JavaScript</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;Pure CSS3 Text Changing Animation Effect | CSS Text Animation | No JavaScript&quot; border=&quot;0&quot; data-original-height=&quot;720&quot; data-original-width=&quot;1280&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ZXbXLWCyvFcCwevhLcQjUYINEh-n51GLlCLvyLWhccs0nqYr74_OUAxb9mtolETM5paPEaq2I3dPefWGINTHO8sP7yjh6V_phg0A_l3y8VydvAR-pZeMYQuiDE99pn-1wsCr_QG0_Jo/w640-h360/pure-css-text-changing-animation-effect-no-javascript.jpg&quot; title=&quot;Pure CSS3 Text Changing Animation Effect | CSS Text Animation | No JavaScript&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: justify;&quot;&gt;&lt;span style=&quot;text-align: start; white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Want to Learn How to create nice CSS text animation effects? Today I am sharing how I exactly make a pure CSS3 text changing animation effect Without javascript.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: justify;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;text-align: start; white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;h2 style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;Text Changing Animation Effect:&lt;/span&gt;&lt;/h2&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Hey Guys,
In This Video Tutorial, I will be showing and Explain to you that How to create an awesome nice looking, and user-friendly pure CSS text-changing animation with CSS keyframes. When a beautiful text animation effect is placed on the website header that plays an important role in a better user experience. I use pure HTML CSS for creating this text effect. In this Text Changing Animation, we use CSS animations, Keyframes, Pseudo element, and changing the text of h1 before pseudo-element after a few intervals of time. This is the whole formula of my nice creation.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;h3 style=&quot;text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Compare Pure CSS3 Animation Effect with others:&lt;/span&gt;&lt;/h3&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;I know many YouTubers already make videos about the CSS3 Text Changing Animation but I am showing and explaining to you with unique concepts and extra tips &amp;amp; tricks. So Please Support me because I am working very hard day and night for making videos for you. please subscribe, like, share my channel and also support me on all social media.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;h4 style=&quot;text-align: left;&quot;&gt;&lt;span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Creative CSS3 Animation effects Source Code:&lt;/span&gt;&lt;/span&gt;&lt;/h4&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;If You have any queries in your precious mind kindly comment on us. So If you like my act of teaching and way of delivering a concept to you so please comment to me and raise my confidence level. If You want to Download the full Source code of CSS Text Animation. So the downloading link is given below.

Don&#39;t Click On This Link 🔥 :  &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;a href=&quot;https://bit.ly/3i4lNUu&quot;&gt;https://bit.ly/3i4lNUu&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;h4 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Youtube Video Timestamp:&lt;/span&gt;&lt;/h4&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;1. Text Changing Demo: &lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;0:00&lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt; - &lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;00:17&lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;
2. How to create text animations with pure CSS: &lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;00:18&lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt; - &lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;06:09&lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;
3. Techmemorise Outro:- &lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;06:10&lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt; - &lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;06:20&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;h4 style=&quot;text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Content That I Cover In This Video:&lt;/span&gt;&lt;/h4&gt;&lt;/div&gt;&lt;p style=&quot;text-align: left;&quot;&gt;&lt;/p&gt;&lt;ul style=&quot;text-align: left;&quot;&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;CSS Text Animation&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;CSS animation&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Text Changing Animation&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Animation Effect&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;CSS quick tips &amp;amp; tricks&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Animation Without Javascript&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;CSS animation effects&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;CSS animation tutorial
&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;CSS text animation&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;
  
&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;
&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;
&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/XJvuOfz25_g&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;    

&lt;span color=&quot;rgba(0, 0, 0, 0.870588235294118)&quot; face=&quot;Roboto, Noto, sans-serif&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;h3&gt;&lt;br /&gt;&lt;/h3&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;&lt;b style=&quot;background-color: #fcff01;&quot;&gt;If you want to download the complete source code of Animated Hover Button using HTML CSS click the button below and download it:&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://drive.google.com/file/d/1QbSPJ2QTOg_JJvDEEuvpjTmft8kv-uYC/view?usp=sharing&quot; id=&quot;Responsive Sidebar Navigation Menu bar using HTML CSS Only&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Pure CSS3 Text Changing Animation Effect | CSS Text Animation | No JavaScript&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;Pure CSS3 Text Changing Animation Effect | CSS Text Animation | No JavaScript&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br style=&quot;font-size: 18.72px;&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;/div&gt;&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/7231976769575519950/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/12/css-text-changing-animation-effect-without-javascript.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/7231976769575519950'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/7231976769575519950'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/12/css-text-changing-animation-effect-without-javascript.html' title='Pure CSS3 Text Changing Animation Effect 🔥 | CSS Text Animation | No JavaScript'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ZXbXLWCyvFcCwevhLcQjUYINEh-n51GLlCLvyLWhccs0nqYr74_OUAxb9mtolETM5paPEaq2I3dPefWGINTHO8sP7yjh6V_phg0A_l3y8VydvAR-pZeMYQuiDE99pn-1wsCr_QG0_Jo/s72-w640-h360-c/pure-css-text-changing-animation-effect-no-javascript.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-4940834848899665524</id><published>2020-12-09T20:57:00.005+05:00</published><updated>2020-12-09T21:01:16.814+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="CSS Animations"/><category scheme="http://www.blogger.com/atom/ns#" term="CSS Buttons Hover Effects"/><category scheme="http://www.blogger.com/atom/ns#" term="CSS Hover Effects"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="latest css animation effects"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>CSS Buttons Hover Effects | CSS Button Animation Effects | HTML &amp; CSS Only</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;CSS Buttons Hover Effects | CSS Button Animation Effects | HTML &amp;amp; CSS Only&quot; border=&quot;0&quot; data-original-height=&quot;720&quot; data-original-width=&quot;1280&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimLTWVeOS5bYpx0K9GEtx5W3JVEabqpbXzVUl3JdgGHi20aqTgCRf-YgFe_4rAw29J2QcI15HsftYYviEtSZ0DpoGI8GU2tLpSMOQ5fhONUEpZXX4XMDqGnmoM4PPMuc_j61erxoUcuFw/w640-h360/CSS+Buttons+Hover+Effects++CSS+Button+Animation+Effects++HTML+CSS+Only.jpg&quot; title=&quot;CSS Buttons Hover Effects | CSS Button Animation Effects | HTML &amp;amp; CSS Only&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: justify;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: 15px; text-align: left; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: justify;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;text-align: start; white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Want to learn how to create CSS animation effects? Today I am sharing how I exactly make button hover effects &amp;amp; animations using HTML &amp;amp; CSS Only.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: justify;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;text-align: start; white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;h2 style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;Sliding Background Effect:&lt;/span&gt;&lt;/h2&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Hey Guys,
In This Video Tutorial, I will be showing and Explain to you how to make a button hover effect in CSS. Cool CSS button hover effects on any website play an important role in a better user interface &amp;amp; experience. I use pure HTML CSS for creating this creative button hover effects. In this CSS tutorial, I use a little bit of HTML contains 4 anchor tags and make the awesome CSS button hover effects using some easy properties of CSS.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;h3 style=&quot;text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Compare CSS Button Hover Effect with others:&lt;/span&gt;&lt;/h3&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot;&gt;I know many YouTubers already make videos about the best CSS button hover effects but I am showing and explaining to you with unique concepts and extra tips &amp;amp; tricks. So Please Support me because I am working very hard day and night for making videos for you. please subscribe, like, share my channel and also support me on all social media.&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;h4 style=&quot;text-align: left;&quot;&gt;&lt;span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;creative button hover effects Source Code:&lt;/span&gt;&lt;/span&gt;&lt;/h4&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot;&gt;If You have any queries in your precious mind kindly comment on us. So If you like my act of teaching and way of delivering a concept to you so please comment to me and raise my confidence level. If You want to Download the full Source code of CSS Button Animation Effects. So the downloading link is given below.&lt;/span&gt;

Don&#39;t Click On This Link 🔥 :  &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;a href=&quot;https://bit.ly/3i4lNUu&quot;&gt;https://bit.ly/3i4lNUu&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;white-space: pre-wrap;&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;h4 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Youtube Video Timestamp:&lt;/span&gt;&lt;/h4&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;1. Buttons Hover Effects Intro: &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;0:00&lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt; - 00:012
2. Button Hover Effect Source Code: &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;00:13&lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt; - &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;05:00&lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;
3. Techmemorise Outro:- &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;04:12&lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt; - &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;04:25&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;h4 style=&quot;text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Content That I Cover In This Video:&lt;/span&gt;&lt;/h4&gt;&lt;/div&gt;&lt;p style=&quot;text-align: left;&quot;&gt;&lt;/p&gt;&lt;ul style=&quot;text-align: left;&quot;&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;CSS animation effects&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;button hover effects&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;buttons animations using HTML &amp;amp; CSS Only&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;how to make a button hover effect in CSS&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;Cool CSS button hover effects&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;creative button hover effects&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;awesome CSS button hover effects&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;best CSS button hover effects&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;
  
&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;
&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;
&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/EnHmB8E1Ox0&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;    

&lt;span color=&quot;rgba(0, 0, 0, 0.870588235294118)&quot; face=&quot;Roboto, Noto, sans-serif&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;h3&gt;&lt;br /&gt;&lt;/h3&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;&lt;b style=&quot;background-color: #fcff01;&quot;&gt;If you want to download the complete source code of Animated Hover Button using HTML CSS click the button below and download it:&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://drive.google.com/file/d/1xAjlnhwysqF2Wo5jr8m16u1Pg0pGa6RA/view&quot; id=&quot;Responsive Sidebar Navigation Menu bar using HTML CSS Only&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;CSS Buttons Hover Effects | CSS Button Animation Effects | HTML &amp;amp; CSS Only&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;CSS Buttons Hover Effects | CSS Button Animation Effects | HTML &amp;amp; CSS Only&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br style=&quot;font-size: 18.72px;&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;/div&gt;&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/4940834848899665524/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/12/css-buttons-hover-effects-animations-html-css.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/4940834848899665524'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/4940834848899665524'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/12/css-buttons-hover-effects-animations-html-css.html' title='CSS Buttons Hover Effects | CSS Button Animation Effects | HTML &amp; CSS Only'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimLTWVeOS5bYpx0K9GEtx5W3JVEabqpbXzVUl3JdgGHi20aqTgCRf-YgFe_4rAw29J2QcI15HsftYYviEtSZ0DpoGI8GU2tLpSMOQ5fhONUEpZXX4XMDqGnmoM4PPMuc_j61erxoUcuFw/s72-w640-h360-c/CSS+Buttons+Hover+Effects++CSS+Button+Animation+Effects++HTML+CSS+Only.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-4279091903302109052</id><published>2020-12-06T21:10:00.010+05:00</published><updated>2020-12-09T20:36:51.506+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Animated Hover Button"/><category scheme="http://www.blogger.com/atom/ns#" term="CSS Animations"/><category scheme="http://www.blogger.com/atom/ns#" term="CSS Hover Effects"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="Sliding Background Hover Effect"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>Pure  CSS Button With Sliding Background Hover Effect 🔥 | Animated Hover Button using HTML CSS</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;Pure  CSS Button With Sliding Background Hover Effect 🔥 | Animated Hover Button using HTML CSS&quot; border=&quot;0&quot; data-original-height=&quot;720&quot; data-original-width=&quot;1280&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoRTwhjTvZs0jNFlX80XiC-YD4Rjo3GnAIvRqDv8ROYuN6srvQ7BLz_8z7vCcfzsHVA_5B7XF-cpkUE3e16j6o_6fiYd8uWYl3E25ywIJqceyGOeAZ_C0PnvIl1n1DQY0Xmz4KA9KZBDI/w640-h360/pure-css-button-with-sliding-background-hover-effect.jpg&quot; title=&quot;Pure  CSS Button With Sliding Background Hover Effect 🔥 | Animated Hover Button using HTML CSS&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;Want to Learn How to Create Pure  CSS Sliding Background Button Hover Effect? Today. I am sharing how I exactly make a  CSS Animated Hover Effect With Source Code.&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;h1 style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: large;&quot;&gt;Sliding Background Effect:&lt;/span&gt;&lt;/h1&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;Hey Guys,
In This Video Tutorial, I will be showing and Explain to you that How to create an awesome nice-looking button with creative sliding background hover effect using only CSS. This is a Unique animation hover effect that makes an awesome user interface. The Source code animation button hover effect is uploaded to my website kindly check this.&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Compare CSS Button Hover Effect with others:&lt;/span&gt;&lt;/h2&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;I know many YouTubers already make videos about the CSS Sliding Background Button Hover Effect but I am showing and explaining to you with unique concepts and extra tips &amp;amp; tricks. So Please Support me because I am working very hard day and night for making videos for you. please subscribe, like, share my channel and also support me on all social media.

If You have any queries in your precious mind kindly comment on us. So If you like my act of teaching and way of delivering a concept to you so please comment to me and raise my confidence level. If You want to Download the full Source code of this animation. So the downloading link is given below.

Don&#39;t Click On This Link 🔥 :  &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;a href=&quot;https://bit.ly/3i4lNUu&quot;&gt;https://bit.ly/3i4lNUu&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;h3 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: large; white-space: pre-wrap;&quot;&gt;Youtube Video Timestamp:&lt;/span&gt;&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;1. Button Hover Intro: &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;0:00&lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt; - &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;00:29&lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;
2. CSS Animated Hover Effect: &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;00:30&lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt; - &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;05:00&lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;
3. Techmemorise Outro:- &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;05:01&lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt; - &lt;/span&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;05:13&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: medium; white-space: pre-wrap;&quot;&gt;Content That I Cover In This Video:&lt;/span&gt;&lt;/h2&gt;&lt;/div&gt;&lt;p style=&quot;text-align: left;&quot;&gt;&lt;/p&gt;&lt;ul style=&quot;text-align: left;&quot;&gt;&lt;li&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;hover effects&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;animation hover effects&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;creative button hover effect&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;sliding background hover&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;button hover effect&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;CSS buttons&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;CSS advanced hover effect&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;CSS advanced hover animation&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;sliding button hover effect&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;pure CSS&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;hover.css&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;font-family: verdana; font-size: 15px; white-space: pre-wrap;&quot;&gt;Button using HTML CSS&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana;&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;
  
&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;
&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;
&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/WD41t8L52H8&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;    

&lt;span color=&quot;rgba(0, 0, 0, 0.870588235294118)&quot; face=&quot;Roboto, Noto, sans-serif&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;h3&gt;&lt;br /&gt;&lt;/h3&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;&lt;b style=&quot;background-color: #fcff01;&quot;&gt;If you want to download the complete source code of Animated Hover Button using HTML CSS click the button below and download it:&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-family: verdana; font-size: medium;&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://drive.google.com/file/d/1yicuKT9sTcQT5HIMsQUhf7_i26OGyeq4/view?usp=sharing&quot; id=&quot;Responsive Sidebar Navigation Menu bar using HTML CSS Only&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Pure  CSS Button With Sliding Background Hover Effect 🔥 | Animated Hover Button using HTML CSS&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;Pure  CSS Button With Sliding Background Hover Effect 🔥 | Animated Hover Button using HTML CSS&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br style=&quot;font-size: 18.72px;&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;/div&gt;&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; face=&quot;Roboto, Noto, sans-serif&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/4279091903302109052/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/12/button-sliding-background-hover-effect-html-css.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/4279091903302109052'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/4279091903302109052'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/12/button-sliding-background-hover-effect-html-css.html' title='Pure  CSS Button With Sliding Background Hover Effect 🔥 | Animated Hover Button using HTML CSS'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoRTwhjTvZs0jNFlX80XiC-YD4Rjo3GnAIvRqDv8ROYuN6srvQ7BLz_8z7vCcfzsHVA_5B7XF-cpkUE3e16j6o_6fiYd8uWYl3E25ywIJqceyGOeAZ_C0PnvIl1n1DQY0Xmz4KA9KZBDI/s72-w640-h360-c/pure-css-button-with-sliding-background-hover-effect.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-7825359117718231291</id><published>2020-11-21T22:15:00.002+05:00</published><updated>2020-11-21T22:15:23.010+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Filterable image gallery"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="image lightbox"/><category scheme="http://www.blogger.com/atom/ns#" term="JQuery"/><category scheme="http://www.blogger.com/atom/ns#" term="JQuery Plugin"/><category scheme="http://www.blogger.com/atom/ns#" term="Magnific Popup"/><category scheme="http://www.blogger.com/atom/ns#" term="responsive image gallery lightbox"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>Responsive Filterable image gallery with image lightbox 🔥 | Magnific Popup | HTML CSS JQuery</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;Responsive Filterable image gallery with image lightbox Magnific Popup  HTML CSS JQuery&quot; border=&quot;0&quot; data-original-height=&quot;720&quot; data-original-width=&quot;1280&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit2PNztiq6rpd2JZcGQhNPvE4uW2kELBpBvttESiS2_tshc-OZ-CredhUdpL23CJfmlH8vQ97cPwyyoPn4U0nyIZJtDYlVs5r1RuI9_UA0luscq6P4zDYa8C0ybCW1z0cYCaIPzI4jtPw/w640-h360/Responsive+Filterable+image+gallery+with+image+lightbox++Magnific+Popup++HTML+CSS+JQuery.jpg&quot; title=&quot;Responsive Filterable image gallery with image lightbox  Magnific Popup  HTML CSS JQuery&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: arial;&quot;&gt;Want to Learn How to Create a &lt;b&gt;Responsive Filterable image gallery&lt;/b&gt; with an &lt;b&gt;image lightbox&lt;/b&gt;? Today I am sharing how I exactly make a &lt;b&gt;Magnific Popup&lt;/b&gt; using HTML CSS and &lt;b&gt;JQuery
&lt;/b&gt;
Hey Guys,
In This Video Tutorial, I will be showing and Explain to you that How to create a responsive filterable image gallery with the&lt;b&gt; image lightbox using HTML CSS &lt;/b&gt;and one of the most popular &lt;b&gt;JQuery plugins&lt;/b&gt; that are magnific popup. The magnific popup plugin is a widely used plugin for showing an image gallery with a popup. If we want to create a &lt;b&gt;portfolio projects section&lt;/b&gt;, an online store product section, and many more sections must use the magnific popup plugin. In this video tutorial, I also include a filterable image gallery option with a &lt;b&gt;lightbox using Jquery&lt;/b&gt;.

I know many YouTubers already make videos about the &lt;b&gt;filterable image gallery&lt;/b&gt; but I am showing and explaining to you unique concepts and extra tips &amp;amp; tricks. So Please Support me because I am working very hard day and night for making videos for you. please subscribe, like, share my channel and also support me on all social media.

If You have any queries in your precious mind kindly comment on us. So If you like my act of teaching and way of delivering a concept to you so please comment to me and raise my confidence level. If You want to Download the full Source code of the&lt;b&gt; image gallery&lt;/b&gt; with the image lightbox. So the downloading link is given below.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;

  
&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;
&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;
&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/wcGCj7mvmsc&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;  
  
  
&lt;h3&gt;&lt;span face=&quot;arial, helvetica, sans-serif&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;span style=&quot;font-family: arial; font-size: medium;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span face=&quot;arial, helvetica, sans-serif&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;span style=&quot;font-family: arial; font-size: medium;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to download the complete source code of this development click the button below and download it:-&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
&lt;/div&gt;
&lt;/h3&gt;
&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
&lt;div style=&quot;color: #333333;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;
&lt;a href=&quot;https://drive.google.com/file/d/1yicuKT9sTcQT5HIMsQUhf7_i26OGyeq4/view?usp=sharing&quot; id=&quot;Responsive Sidebar Navigation Menu bar using HTML CSS Only&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Responsive Filterable image gallery with image lightbox 🔥 | Magnific Popup | HTML CSS JQuery&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;Responsive Filterable image gallery with image lightbox 🔥 | Magnific Popup | HTML CSS JQuery&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;/h3&gt;
&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;/h3&gt;

&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/7825359117718231291/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/11/responsive-filterable-image-gallery-lightbox.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/7825359117718231291'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/7825359117718231291'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/11/responsive-filterable-image-gallery-lightbox.html' title='Responsive Filterable image gallery with image lightbox 🔥 | Magnific Popup | HTML CSS JQuery'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit2PNztiq6rpd2JZcGQhNPvE4uW2kELBpBvttESiS2_tshc-OZ-CredhUdpL23CJfmlH8vQ97cPwyyoPn4U0nyIZJtDYlVs5r1RuI9_UA0luscq6P4zDYa8C0ybCW1z0cYCaIPzI4jtPw/s72-w640-h360-c/Responsive+Filterable+image+gallery+with+image+lightbox++Magnific+Popup++HTML+CSS+JQuery.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-7948951772197747621</id><published>2020-11-21T21:59:00.002+05:00</published><updated>2020-11-21T21:59:37.499+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Animation Website"/><category scheme="http://www.blogger.com/atom/ns#" term="CSS Animations"/><category scheme="http://www.blogger.com/atom/ns#" term="CSS Moving Car Animation"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>CSS Moving Car Animation Website 🔥 | Pure HTML &amp; CSS Only | CSS Animations</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;CSS Moving Car Animation Website 🔥  Pure HTML &amp;amp; CSS Only  CSS Animations&quot; border=&quot;0&quot; data-original-height=&quot;720&quot; data-original-width=&quot;1280&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJJzCJy3C8pZ4PMKLVYQPk2MuTL1lHrg_SlWBlpAADewVfJTK7GsaVttk47KatGYhqRRJm13gwvzs7KtDw1AC40r2Sos4UMtc_QTbJZCWvSjpPrnAVCBuGu_j5MhvkKz4e7efHEsp9j4Y/w640-h360/CSS+Moving+Car+Animation+Website++Pure+HTML+%2526+CSS+Only++CSS+Animations.jpg&quot; title=&quot;CSS Moving Car Animation Website 🔥  Pure HTML &amp;amp; CSS Only  CSS Animations&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;br /&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;span color=&quot;rgba(0, 0, 0, 0.87)&quot; style=&quot;white-space: pre-wrap;&quot;&gt;&lt;span style=&quot;font-family: arial;&quot;&gt;Want to Learn How to Create a moving&lt;b&gt; car animation Website&lt;/b&gt;? Today I am sharing how I exactly make a car animation using HTML CSS Only.

Hey Guys,
In This Video Tutorial, I will be showing and Explain to you that How to create &lt;b&gt;CSS moving car &lt;/b&gt;animations using HTML CSS Only. It is a &lt;b&gt;CSS animation&lt;/b&gt; website made by pure CSS. In this animation, we use a unique car design, awesome car wheels, and lining road with a nice looking background. All of the images with source code provided in the description.

I know many YouTubers already make videos about the &lt;b&gt;CSS car animation&lt;/b&gt; but I am showing and explaining to you unique concepts and extra tips &amp;amp; tricks. So Please Support me because I am working very hard day and night for making videos for you. please subscribe, like, share my channel and also support me on all social media.

If You have any queries in your precious mind kindly comment on us. So If you like my act of teaching and way of delivering a concept to you so please comment to me and raise my confidence level. If You want to Download the full Source code of the Animation Website. So the downloading link is given below.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;

  
&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;
&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;
&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/z86Kvx-Ubmk&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;  
  
  
&lt;h3&gt;&lt;span face=&quot;arial, helvetica, sans-serif&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;span style=&quot;font-family: arial; font-size: medium;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span face=&quot;arial, helvetica, sans-serif&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;span style=&quot;font-family: arial; font-size: medium;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to download the complete source code of this development click the button below and download it:-&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
&lt;/div&gt;
&lt;/h3&gt;
&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
&lt;div style=&quot;color: #333333;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;
&lt;a href=&quot;https://drive.google.com/file/d/1tGHhpZp9LzX-4yd3KwEWoe4hXZzR0Av9/view?usp=sharing&quot; id=&quot;Responsive Sidebar Navigation Menu bar using HTML CSS Only&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;CSS Moving Car Animation Website | Pure HTML &amp;amp; CSS Only | CSS Animations&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;CSS Moving Car Animation Website | Pure HTML &amp;amp; CSS Only | CSS Animations&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;/h3&gt;
&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;/h3&gt;

&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/7948951772197747621/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/11/css-moving-car-animation-website.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/7948951772197747621'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/7948951772197747621'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/11/css-moving-car-animation-website.html' title='CSS Moving Car Animation Website 🔥 | Pure HTML &amp; CSS Only | CSS Animations'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJJzCJy3C8pZ4PMKLVYQPk2MuTL1lHrg_SlWBlpAADewVfJTK7GsaVttk47KatGYhqRRJm13gwvzs7KtDw1AC40r2Sos4UMtc_QTbJZCWvSjpPrnAVCBuGu_j5MhvkKz4e7efHEsp9j4Y/s72-w640-h360-c/CSS+Moving+Car+Animation+Website++Pure+HTML+%2526+CSS+Only++CSS+Animations.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-778810690814427758</id><published>2020-06-15T16:25:00.033+05:00</published><updated>2020-06-21T22:14:19.049+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="blogger"/><category scheme="http://www.blogger.com/atom/ns#" term="create aboutus page"/><category scheme="http://www.blogger.com/atom/ns#" term="create contactus page"/><category scheme="http://www.blogger.com/atom/ns#" term="create disclaimer page"/><category scheme="http://www.blogger.com/atom/ns#" term="create dmca page"/><category scheme="http://www.blogger.com/atom/ns#" term="create pages in blogger wordpress"/><category scheme="http://www.blogger.com/atom/ns#" term="create privacy policy page"/><category scheme="http://www.blogger.com/atom/ns#" term="create terms and conditions page"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>How to Create Contact us, About us, Privacy Policy, Terms &amp; Conditions, DMCA, and Disclaimer Page in Blogger</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;How to Create Contact us, About us, Privacy Policy, Terms &amp;amp; Conditions, and DMCA Page in Blogger.&quot; border=&quot;0&quot; data-original-height=&quot;360&quot; data-original-width=&quot;640&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmIU6mSuywuA6_x4658jqlC0YSeJ42Z7I8vzKNnjcjdeuA3IRUyhojmFKi2RRLYtOtiM428Y07U6ypk0ro2sSsBTAIAJFCcHVa-lkbLi1ZrOHZUDPnHYl2Ob7YY8grKJhPUKNt9AD_s6A/w640-h360/contact-us-about-us%252C-dmca-privacy-policy-terms-conditions-disclaimer.jpg&quot; title=&quot;How to Create Contact us, About us, Privacy Policy, Terms &amp;amp; Conditions, and DMCA Page in Blogger.&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;verdana&quot;&gt;One of the most important things on the website journey is creating all important pages on our website that are important for AdSense approval so that the best way to create these pages I explain in my full tutorial video. Please watch my video, it&#39;s embedded on the bottom section of this post. It Does Not Depend on what the website technology is ? because our website made with any platform and uses any type of CMS like Wordpress, blogger, and any other type of website. This Trick is Always Applicable on any website.&lt;br /&gt;&lt;br /&gt;The best way to create pages for our AdSense approval like about us page, contact us page, privacy policy page, disclaimer page, DMCA page, and terms and condition pages and many other pages that you want. Explain all the websites one by one is given below.&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;verdana&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;5&quot;&gt;1- &lt;a href=&quot;https://www.disclaimergenerator.org/&quot; id=&quot;Disclaimer Generator&quot; name=&quot;Disclaimer Generator&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;Disclaimer Generator&lt;/a&gt;:-&lt;/font&gt;&lt;/h2&gt;&lt;font face=&quot;verdana&quot;&gt;This is the Best Website For Creating a disclaimer page. if you want to visit this website click the Disclaimer Generator Heading Title and Visit this website. you just enter your website name, your email, and your business name in the Disclaimer Generator Website then your Site disclaimer is successfully generated.&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;verdana&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;5&quot;&gt;2- &lt;a href=&quot;https://www.terms-conditions-generator.com/&quot; id=&quot;Terms &amp;amp; Conditions Generator&quot; name=&quot;Terms &amp;amp; Conditions Generator&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;Terms &amp;amp; Conditions Generator&lt;/a&gt;:-&lt;/font&gt;&lt;/h2&gt;&lt;font face=&quot;verdana&quot;&gt;This is the Best Website For Creating a Terms &amp;amp; Conditions page. if you want to visit this website click the Terms &amp;amp; Conditions Generator Heading Title and Visit this website. You just enter your website name, your email, and your business name in the Terms &amp;amp; Conditions Generator Website then your Terms &amp;amp; Conditions Page is successfully generated.&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;verdana&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;5&quot;&gt;3- &lt;a href=&quot;https://www.generateprivacypolicy.com/&quot; id=&quot;Privacy Policy Generator&quot; name=&quot;Privacy Policy Generator&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;Privacy Policy Generator&lt;/a&gt;:-&lt;/font&gt;&lt;/h2&gt;&lt;font face=&quot;verdana&quot;&gt;This is the Best Website For Creating a Privacy Policy Page For Your Website. if you want to visit this website click the Privacy Policy Generator Heading Title and Visit this website. You just enter your website name, your email, and your business name in the Privacy Policy Generator Website then your Privacy Policy Page is successfully generated.&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;verdana&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;5&quot;&gt;4- &lt;a href=&quot;https://www.volusion.com/v1/tools/about-us-generator&quot; id=&quot;About us Generator&quot; name=&quot;About us Generator&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;About us Generator&lt;/a&gt;:-&lt;/font&gt;&lt;/h2&gt;&lt;font face=&quot;verdana&quot;&gt;This is the Best Website For Creating an About us Page For a better impression on your website. if you want to visit this generator website click the About us Generator Title and Visit this content generator website. You just enter your website name, your email, and your business name in the About us Generator Web Application then you&#39;re About us Page is successfully generated.&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;verdana&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;5&quot;&gt;5- &lt;a href=&quot;https://drive.google.com/uc?export=download&amp;amp;id=1vxGqIU5iCLq1Nv2DvahNF5WqPMh7Qbga&quot; id=&quot;Contact us Page Template&quot; name=&quot;Contact us Page Template&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;Contact us Page Template&lt;/a&gt;:-&lt;/font&gt;&lt;/h2&gt;&lt;font face=&quot;verdana&quot;&gt;Many pages content website generator generates a lot of pages but this website doesn&#39;t generate a DMCA and contact-us page so that I create an awesome template for you. You just edit this template and where my website name is located on template change from your website name and just copy and paste on your website. This is the best technique for creating a contact us page in your website if you want step by step tutorial for making a contact us page so please watch my YouTube video tutorial for the better understanding tutorial is embedded at the bottom of this post. If You don&#39;t know I teach a way to creating a contact form in the blogger contact us page. That&#39;s Why you watch the video tutorial.&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;verdana&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;div&gt;&lt;h2&gt;&lt;font face=&quot;verdana&quot; size=&quot;5&quot;&gt;6- &lt;a href=&quot;https://drive.google.com/uc?export=download&amp;amp;id=1YRVGaXq0QCdAN9v8RIxT8k1GZw75f2zF&quot; id=&quot;DMCA Page Template&quot; name=&quot;DMCA Page Template&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;DMCA&amp;nbsp;Page Template&lt;/a&gt;:-&lt;/font&gt;&lt;/h2&gt;&lt;/div&gt;&lt;font face=&quot;verdana&quot;&gt;Many pages content website generator generates a lot of pages but this website doesn&#39;t generate a DMCA and contact-us page so that I create a template for you. You just edit this template and where my website name is located on template change from your website name and just copy and paste on your website. This is the best technique for creating a DMCA page in your website if you want step by step tutorial for making a DMCA page so please watch my YouTube video tutorial for the better understanding tutorial is embedded at the bottom of this post.&lt;/font&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;verdana&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;&lt;font color=&quot;#b51200&quot; face=&quot;verdana&quot;&gt;But One of the most important things about all generator websites is that our blog&amp;nbsp;does not do any guarantee about all these websites because you all depend on the generator privacy policy.&amp;nbsp;The accuracy of the generated content from all websites in the above list is not legally binding. Use it at your own risk.&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;5&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;/div&gt;
&lt;font size=&quot;5&quot;&gt;&lt;style&gt;.iframe-container{position:relative;width:100%;overflow:hidden;padding-top:56.25%}.responsive-iframe{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;border:none}&lt;/style&gt;&lt;/font&gt;&lt;div class=&quot;iframe-container&quot; style=&quot;text-align: left;&quot;&gt;&lt;div style=&quot;text-align: justify;&quot;&gt; &lt;font size=&quot;5&quot;&gt;&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/eH2eCu_NRRY&quot;&gt;&lt;/iframe&gt;&lt;/font&gt;&lt;/div&gt;&lt;/div&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;color: #333333; font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;color: #333333; font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;color: #333333; font-weight: normal;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;3&quot; style=&quot;font-weight: normal;&quot;&gt;Hopefully, You Like my Article &quot;&lt;/font&gt;&lt;a href=&quot;https://techmemorise.blogspot.com/2020/06/create-contactus-aboutus-privacy-policy-terms-conditions-dmca-disclaimer-pages-blogger-wordpress.html&quot; style=&quot;font-family: verdana; font-size: medium; font-weight: normal;&quot; target=&quot;_blank&quot;&gt;How to Create Contact us, About us, Privacy Policy, Terms &amp;amp; Conditions, DMCA, and Disclaimer Page in Blogger&lt;/a&gt;&lt;span style=&quot;font-family: verdana; font-size: medium; font-weight: normal;&quot;&gt;&quot;. If you Like my content so please share this article on social media and also with your friends. Stay Home &amp;amp; Stay Safe!&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;color: #333333; font-weight: normal;&quot;&gt;&lt;span style=&quot;text-align: left;&quot;&gt;&lt;font color=&quot;#b51200&quot; face=&quot;verdana&quot; size=&quot;3&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/778810690814427758/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/06/create-contactus-aboutus-privacy-policy-terms-conditions-dmca-disclaimer-pages-blogger-wordpress.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/778810690814427758'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/778810690814427758'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/06/create-contactus-aboutus-privacy-policy-terms-conditions-dmca-disclaimer-pages-blogger-wordpress.html' title='How to Create Contact us, About us, Privacy Policy, Terms &amp; Conditions, DMCA, and Disclaimer Page in Blogger'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmIU6mSuywuA6_x4658jqlC0YSeJ42Z7I8vzKNnjcjdeuA3IRUyhojmFKi2RRLYtOtiM428Y07U6ypk0ro2sSsBTAIAJFCcHVa-lkbLi1ZrOHZUDPnHYl2Ob7YY8grKJhPUKNt9AD_s6A/s72-w640-h360-c/contact-us-about-us%252C-dmca-privacy-policy-terms-conditions-disclaimer.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-7066793245014502295</id><published>2020-06-07T19:56:00.011+05:00</published><updated>2020-06-10T20:49:21.409+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="cmd tricks"/><category scheme="http://www.blogger.com/atom/ns#" term="Find All Wifi Passwords"/><category scheme="http://www.blogger.com/atom/ns#" term="Tech Tips &amp; Tricks"/><category scheme="http://www.blogger.com/atom/ns#" term="Wifi Password Tricks"/><category scheme="http://www.blogger.com/atom/ns#" term="Wifi Passwords With Only 1 Command"/><title type='text'>CMD : Find All Wifi Passwords With Only 1 Command - Windows 10/8/8.1/7</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;CMD : Find All Wifi Passwords With Only 1 Command - Windows 10/8/8.1/7&quot; border=&quot;0&quot; data-original-height=&quot;360&quot; data-original-width=&quot;640&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGOR-LHK0IbEUPNU_bRK879iedED7Z1-WPXGBVYSMU3zx95NzlOyjJ5Jyhk-eAQ_a4UhdvsPYYEzx_y3a-4IG5BaCMk4Tvp2A2RkBmDwZ-xXDTRW-nuswIJHs4yaS36kq_ehxzzxciZfU/w640-h360/CMD-Find-All-Wifi-Passwords-With-Only-1-Command-Windows-10-8-8.1-7.jpg&quot; title=&quot;CMD : Find All Wifi Passwords With Only 1 Command - Windows 10/8/8.1/7&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;In this article, I Will Tell You &lt;b&gt;How to&amp;nbsp;Find All Wifi Passwords With Only 1 Command in Windows 10/8/8.1/7.&lt;/b&gt;&amp;nbsp;This is all about finding&lt;b&gt;&amp;nbsp;saved passwords.&lt;/b&gt;&lt;br /&gt; &lt;br /&gt;  One of the major difficulties while &lt;b&gt;Finding All Wifi Passwords&lt;/b&gt;&amp;nbsp;is that the wifi password export in a text file so I completely solve this problem. In this &lt;b&gt;Tech Tips &amp;amp;&lt;/b&gt;&amp;nbsp;&lt;b&gt;Trick&lt;/b&gt;, I will use a simple cmd command.&amp;nbsp;I know that many tutorials on youtube taught about it already but I want to teach with unique concepts.&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;Did you forget one among your wireless local area &lt;b&gt;network passwords?&lt;/b&gt; does one want access thereto right away? Using the electronic communication (CMD), you&#39;ll be able to see an inventory of each &lt;b&gt;wireless network &lt;/b&gt;your pc has ever connected to and their &lt;b&gt;passwords.&lt;/b&gt;&amp;nbsp;&lt;/font&gt;&lt;div&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;div&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;Whenever we have a tendency to connect with a local area network and enter the positive identification to attach to its network, we have a tendency to really build a wireless fidelity profile of that local area network. That profile is held on within our laptop, in conjunction with the opposite needed details of the local area network profile.&lt;/font&gt;&lt;br /&gt;&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;I know many YouTubers already make videos about&lt;b&gt;&amp;nbsp;Find All Wifi Passwords With Only 1 Command&lt;/b&gt;&amp;nbsp;but I am showing and explaining to you with unique concepts and extra tips &amp;amp; tricks. So Please Support me because I am working very hard day and night for making videos for you. please subscribe, like, share my channel and also support me on all social media.&lt;br /&gt; &lt;br /&gt;  I will be showing and Explain to you Find All &lt;b&gt;Saved Wifi Passwords&lt;/b&gt;&lt;b&gt;.&lt;/b&gt; we never use any type of coding while Finding my &lt;b&gt;wifi Passwords.&lt;/b&gt;&amp;nbsp;This Trick is extremely powerful. This is a Very Awesome Video. Please Like It and Share it With Others. &lt;br /&gt; &lt;br /&gt; So If you like my act of teaching and way of delivering a concept to you so please comment me and raise my confidence level. So If you want to watch the video tutorials click the below video and learn from this tutorial.&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;/div&gt;


&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/T5WBipIpkkY&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;/div&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;color: #333333; font-size: 21px; font-weight: normal;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;color: #333333; font-weight: normal;&quot;&gt;&lt;b style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; color: black; line-height: inherit; outline: none; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; color: #333333; font-family: arial, helvetica, sans-serif; font-size: large; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;color: #333333; font-weight: normal;&quot;&gt;&lt;b style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; color: black; line-height: inherit; outline: none; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; color: #333333; font-family: arial, helvetica, sans-serif; font-size: large; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;color: #333333; font-weight: normal;&quot;&gt;&lt;div style=&quot;font-size: 18.72px; font-weight: normal;&quot;&gt;&lt;b style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; color: black; line-height: inherit; outline: none; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-color: #d52c1f; background-position: 0px 0px; border: 0px; color: #333333; font-family: arial, helvetica, sans-serif; font-size: large; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;font color=&quot;#ffffff&quot; face=&quot;verdana&quot; size=&quot;2&quot;&gt;COMMANDS THAT USED IN THIS TUTORIALS:&amp;nbsp;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; color: black; line-height: inherit; outline: none; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-color: #d52c1f; background-position: 0px 0px; border: 0px; color: #333333; font-family: arial, helvetica, sans-serif; font-size: large; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;font color=&quot;#ffffff&quot; face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;color: #333333; font-weight: normal;&quot;&gt;&lt;font face=&quot;arial, helvetica, sans-serif&quot; size=&quot;2&quot;&gt;1- &lt;span style=&quot;background-color: #f7cb4d;&quot;&gt;netsh wlan show profile&lt;/span&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: #333333; font-weight: normal;&quot;&gt;&lt;font face=&quot;arial, helvetica, sans-serif&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: #333333; font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;2- &lt;span style=&quot;background-color: #f7cb4d;&quot;&gt;netsh wlan export profile folder=C:\ key=clear&lt;/span&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;color: #333333; font-weight: normal;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;/div&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; font-family: arial, helvetica, sans-serif; font-size: large; line-height: inherit; outline: none; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;div style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: inherit; outline: none; padding: 0px; text-align: justify; vertical-align: baseline;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;div style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; color: black; font-weight: bold; line-height: inherit; outline: none; padding: 0px; text-align: justify; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; color: #333333; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;IF&lt;/span&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; color: #333333; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&amp;nbsp;you have any queries or Questions in your precious mind About this Article so Kindly&lt;/span&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; color: #333333; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&amp;nbsp;comment down below...&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: inherit; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;color: #333333;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; color: black; font-weight: bold; line-height: inherit; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;color: #333333;&quot;&gt;Thank you.&lt;/span&gt;&lt;/div&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/font&gt;&lt;/span&gt;&lt;div style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: inherit; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font color=&quot;#eeeeee&quot; face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;color: black;&quot;&gt;&lt;/span&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: inherit; outline: none; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;color: black;&quot;&gt;&lt;span style=&quot;background-color: #0b8043; color: #333333; font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font color=&quot;#eeeeee&quot; face=&quot;verdana&quot; size=&quot;2&quot;&gt;I NEED YOUR SUPPORT ON ALL SOCIAL MEDIA. PLEASE FOLLOW ME.&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/7066793245014502295/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/06/find-all-wifi-password-only-1-command.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/7066793245014502295'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/7066793245014502295'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/06/find-all-wifi-password-only-1-command.html' title='CMD : Find All Wifi Passwords With Only 1 Command - Windows 10/8/8.1/7'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGOR-LHK0IbEUPNU_bRK879iedED7Z1-WPXGBVYSMU3zx95NzlOyjJ5Jyhk-eAQ_a4UhdvsPYYEzx_y3a-4IG5BaCMk4Tvp2A2RkBmDwZ-xXDTRW-nuswIJHs4yaS36kq_ehxzzxciZfU/s72-w640-h360-c/CMD-Find-All-Wifi-Passwords-With-Only-1-Command-Windows-10-8-8.1-7.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-4219618928584256017</id><published>2020-06-07T17:06:00.006+05:00</published><updated>2021-02-21T14:09:26.494+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Bootstrap"/><category scheme="http://www.blogger.com/atom/ns#" term="Copy or Clone Any Website"/><category scheme="http://www.blogger.com/atom/ns#" term="create website in 5 Minutes"/><category scheme="http://www.blogger.com/atom/ns#" term="Download Bootstrap Website"/><category scheme="http://www.blogger.com/atom/ns#" term="Download Complete Website Code"/><category scheme="http://www.blogger.com/atom/ns#" term="Quick Website Development Tips"/><category scheme="http://www.blogger.com/atom/ns#" term="Tech Tips &amp; Tricks"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>How to Copy or Clone Any Website - Download Complete Website Code</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;How to Copy or Clone Any Website - Download Complete Website Code&quot; border=&quot;0&quot; data-original-height=&quot;360&quot; data-original-width=&quot;640&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj06FjtCmMiL2B1eFDH4hQPej0EH9ImLC6Yh8UanuO9ZaYLZPsqoNYNekH-czcFFRZwJ7AixWu26P2D_099W6WKasy8s1L4JT033oi4obLnogvVCRML1QJ7SOLamtPUdpagG4RfSP3vrE/w640-h360/how-to-copy-or-clone-any-website.jpg&quot; title=&quot;How to Copy or Clone Any Website - Download Complete Website Code&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;In this article, I Will Tell You &lt;b&gt;How to Copy or Clone Any Website&lt;/b&gt;. This is the &lt;b&gt;fastest way of creating a website&lt;/b&gt;. This is all about &lt;b&gt;download website code.&lt;/b&gt;&lt;br /&gt; &lt;br /&gt;  One of the major difficulties while &lt;b&gt;Copying or Cloning the Website&lt;/b&gt;&amp;nbsp;is that the website is not downloaded completely&amp;nbsp;so I completely solve this problem. In this &lt;b&gt;Quick Web Development Trick&lt;/b&gt;, I will use simple Software &lt;a href=&quot;https://www.httrack.com/page/2/&quot; target=&quot;_blank&quot;&gt;Httrack&lt;/a&gt;. I know that many tutorials on youtube taught me about it already but I want to teach with unique concepts.&amp;nbsp;&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt; I will be showing you that &lt;b&gt;How to Download a Website&lt;/b&gt;. It&#39;s a Secret Trick of &lt;b&gt;Quick Web Development&lt;/b&gt;. I use Simple software to download all resources of the website. It&#39;s the best way to clone a website. The website copying speed all depends on your internet because when the website is bigger the software consumes more internet.&amp;nbsp;&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;I know many YouTubers already make videos about &lt;b&gt;How to Copy Any Website?&lt;/b&gt; but I am showing and explaining to you unique concepts and extra tips &amp;amp; tricks. So Please Support me because I am working very hard day and night for making videos for you. please subscribe, like, share my channel and also support me on all social media.&lt;br /&gt; &lt;br /&gt;  I will be showing and Explain to you&amp;nbsp;&lt;b&gt;How to Copy or Clone or Download Any Website.&lt;/b&gt; we never use any type of coding while copying this website because a smart app called Httrack Website Copier can download the website. This Website is fully Responsive I Hope you will Like it. This is a Very Awesome Video. Please Like It and Share it With Others. &lt;br /&gt; &lt;br /&gt; So If you like my act of teaching and way of delivering a concept to you so please comment to me and raise my confidence level. So If you want to watch the video tutorials click the below video and learn from this tutorial.&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;&lt;h3&gt;&lt;span face=&quot;arial, helvetica, sans-serif&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to download the Website Copier Software click the button below and download it:-&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;color: #333333;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;a href=&quot;https://www.httrack.com/page/2/&quot; id=&quot;How to Copy or Clone Any Website - Download Complete Website Code&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;How to Copy or Clone Any Website - Download Complete Website Code&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;How to Copy or Clone Any Website - Download Complete Website Code&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/4219618928584256017/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/06/how-to-copy-clone-download-website.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/4219618928584256017'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/4219618928584256017'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/06/how-to-copy-clone-download-website.html' title='How to Copy or Clone Any Website - Download Complete Website Code'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj06FjtCmMiL2B1eFDH4hQPej0EH9ImLC6Yh8UanuO9ZaYLZPsqoNYNekH-czcFFRZwJ7AixWu26P2D_099W6WKasy8s1L4JT033oi4obLnogvVCRML1QJ7SOLamtPUdpagG4RfSP3vrE/s72-w640-h360-c/how-to-copy-or-clone-any-website.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-7971766577088775409</id><published>2020-06-05T10:07:00.006+05:00</published><updated>2020-06-12T12:23:11.712+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Digital Clock UI"/><category scheme="http://www.blogger.com/atom/ns#" term="Digital Clock UI Using HTML CSS3 &amp; Vanilla Javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="Javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="web application with javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>Digital Clock UI Using HTML CSS3 &amp; Vanilla Javascript</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;Digital Clock UI Using HTML CSS3 &amp;amp; Vanilla Javascript&quot; border=&quot;0&quot; data-original-height=&quot;360&quot; data-original-width=&quot;640&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpXjly3-NNcBKJyR0npANLHfm7zE63Qkyp2R4Pk0-co3cnb__NeS9f8l8L3J872BGHdYwf-0r2A4ZRZF-0hYWrpPkvcYZd2JmqX0dUH6q2Y73imG0g0Um9wzp3IRjjnL0icTlLRhoHDf4/w640-h360/digital-clock-using-html-css-javascript.jpg&quot; title=&quot;Digital Clock UI Using HTML CSS3 &amp;amp; Vanilla Javascript&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;
&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;font face=&quot;arial, helvetica, sans-serif&quot;&gt;In This Article, I Will Tell You about&amp;nbsp;&lt;b&gt;Digital Clock UI Using HTML CSS3 &amp;amp; Vanilla Javascript.&lt;/b&gt;&amp;nbsp;This is the best way of creating a &lt;b&gt;javascript clock.&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;font face=&quot;arial, helvetica, sans-serif&quot;&gt;The &lt;b&gt;Digital Clock&lt;/b&gt;&amp;nbsp;on any website plays an important role in better user experience so that it is the main reason for publishing this article. I create an awesome Digitally Nice Looking &lt;b&gt;clock&lt;/b&gt; that works very better in any version of mobile.&lt;/font&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;font face=&quot;arial, helvetica, sans-serif&quot;&gt;I will use pure &lt;/font&gt;&lt;b style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;HTML CSS3 &amp;amp; Vanilla Javascript&lt;/b&gt;&lt;font face=&quot;arial, helvetica, sans-serif&quot;&gt; for creating this digital clock. One of the major difficulties all of us are face while creating a Digital Clock UI&amp;nbsp;is to make the &lt;b&gt;clock &lt;/b&gt;with 12-hour format and also with am/pm sessions.&lt;/font&gt;&lt;font face=&quot;arial, helvetica, sans-serif&quot;&gt;&amp;nbsp;I completely solve this problem.&lt;/font&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;font face=&quot;arial, helvetica, sans-serif&quot;&gt;In this Navigation bar, I will use simple CSS properties for making it a &lt;b&gt;Digital Clock UI Using Vanilla Javascript&lt;/b&gt;. I know that many tutorials on youtube taught about already it but I want to teach with unique concepts. I will be showing and Explain to you how to create a&amp;nbsp;&lt;/font&gt;&lt;font face=&quot;arial, helvetica, sans-serif&quot;&gt;&lt;b&gt;Digital Clock UI&lt;/b&gt;&amp;nbsp;with HTML CSS &amp;amp;&amp;nbsp;Javascript.&lt;/font&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;font face=&quot;arial, helvetica, sans-serif&quot;&gt;We use pure HTML, CSS for making this &lt;b&gt;Digital Clock&lt;/b&gt;. This clock is fully digital. The Digital Clock use on many websites because it works as a timer in the quiz management system as well as it is also used on an alarm clock website. Due to the major demand for clock UI, I publish this article. so I hope you will Like it. This is a Very Awesome Video. Please Like It and Share it With Others.&amp;nbsp;&lt;/font&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;color: red;&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;color: red; font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;b&gt;So If you like my act of teaching and way of delivering a concept to you so please comment me and raise my confidence level.&lt;/b&gt;&lt;/span&gt;&lt;font face=&quot;arial, helvetica, sans-serif&quot;&gt; If You want to Download the full Source code of &lt;b&gt;Digital Clock UI&lt;/b&gt;. So downloading link is given below. and If you want to watch the video tutorials click the below video and learn from this tutorial.&amp;nbsp;&lt;/font&gt;&lt;/span&gt;&lt;/font&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/font&gt;&lt;/div&gt;&lt;/div&gt;

  
&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;
&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/R_qlA8yiKlw&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;  

  
&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to download the complete source code of this development click the button below and download it:-&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;color: #333333;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;a href=&quot;https://drive.google.com/file/d/19GvDKqIxVVgnHhHECj4ULjNa-6aei02k/view&quot; id=&quot;Digital Clock UI Using HTML CSS3 &amp;amp; Vanilla Javascript&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Digital Clock UI Using HTML CSS3 &amp;amp; Vanilla Javascript&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;Digital Clock UI Using HTML CSS3 &amp;amp; Vanilla Javascript&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/7971766577088775409/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/06/digital-clock-ui-html-css3-js.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/7971766577088775409'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/7971766577088775409'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/06/digital-clock-ui-html-css3-js.html' title='Digital Clock UI Using HTML CSS3 &amp; Vanilla Javascript'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpXjly3-NNcBKJyR0npANLHfm7zE63Qkyp2R4Pk0-co3cnb__NeS9f8l8L3J872BGHdYwf-0r2A4ZRZF-0hYWrpPkvcYZd2JmqX0dUH6q2Y73imG0g0Um9wzp3IRjjnL0icTlLRhoHDf4/s72-w640-h360-c/digital-clock-using-html-css-javascript.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-7773754638277334638</id><published>2020-06-04T14:51:00.015+05:00</published><updated>2020-06-12T12:28:19.639+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive Navigation Menu Bar"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive Navigation Menu Bar using HTML CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive Navigation Menu Bar without javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="Sidebar Navigation Menu bar"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>Responsive Sidebar Navigation Menu bar using HTML CSS Only</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;Responsive Sidebar Navigation Menu bar using HTML CSS Only&quot; border=&quot;0&quot; data-original-height=&quot;360&quot; data-original-width=&quot;640&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioxZSKTMzil0MgHawUqMHmBMK5JBPNPiLWH_INQgnFbp-eDiTyIq5Y4evJZ99QQBuYyc_wPWvUba4mko0LnajnUc38bwO_r1QUjaSNGGPjFchTecFwtvZs_tUYZvmXFmadTeJpWQnn5DA/w640-h360/responsive-sidebar-navigation-menu-bar-html-css.jpg&quot; title=&quot;Responsive Sidebar Navigation Menu bar using HTML CSS Only&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;In This Article, I Will Tell You &lt;b&gt;Responsive Sidebar Navigation Menu bar using HTML CSS Only&lt;/b&gt;. This is the best way of creating a &lt;b&gt;responsive Sidebar menu.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;I will use pure HTML CSS for creating this &lt;b&gt;Sidebar Navigation Menu&lt;/b&gt;. One of the major difficulties while creating a responsive navbar is to make the &lt;b&gt;navbar mobile friendly&lt;/b&gt; I completely solve this problem. In this &lt;b&gt;Navigation bar&lt;/b&gt;, I will use simple CSS properties for making it a responsive mobile friendly navbar. This Sidebar contains menu items with icons. If you want to learn from start to end with no step missed so watch the video tutorial that embed in the bottom of the post.&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;I know that many tutorials on youtube taught about already it but I want to teach with unique concepts. I will be showing and Explain to you how to Create a &lt;b&gt;Responsive Sidebar Menu&lt;/b&gt; with &lt;b&gt;HTML &amp;amp; CSS only with No Javascript&lt;/b&gt;. we use pure HTML, CSS for making this Navbar. This Navbar is fully Responsive I Hope you will Like it. This is a Very Awesome Video ever. Please Like It and Share it With Others.&amp;nbsp;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;The Responsive Sidebar Navigation works in many projects like the admin panel. All of you are already know about Wordpress. It&#39;s the content management system platform that makes a website without coding it also uses HTML CSS to create &lt;b&gt;responsive sidebar navigation&lt;/b&gt; that&#39;s why I published this article because the sidebar navigation menu is very important in web development. If you Like to learn other development In my blog so under the menu bar and sidebar I add many categories like &lt;b&gt;HTML CSS, BOOTSTRAP&lt;/b&gt;, and many more you easily visit this.&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;So If you like my act of teaching and way of delivering a concept to you so please comment me and raise my confidence level. I created many developments in my youtube channel kindly visit this because I update my youtube channel day by day so you don&#39;t find my &lt;b&gt;youtube channel link&lt;/b&gt; so the link is present on my blog header and footer social icons, Kindly visit and also support me on my all social media platforms. If You want to Download the full Source code so download the link is given below. and If you want to watch the video tutorials click the below video and learn from this tutorial.&lt;/font&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;

  
&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;
&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;
&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/5V8t1_70Qig&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;  
  
  
&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;span style=&quot;font-family: arial; font-size: medium;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;span style=&quot;font-family: arial; font-size: medium;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to download the complete source code of this development click the button below and download it:-&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
&lt;/div&gt;
&lt;/h3&gt;
&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
&lt;div style=&quot;color: #333333;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;
&lt;a href=&quot;https://drive.google.com/file/d/1DeFz5lEcWgFWnRLkP9Dn1WR5PEK1WSBs/view&quot; id=&quot;Responsive Sidebar Navigation Menu bar using HTML CSS Only&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Responsive Sidebar Navigation Menu bar using HTML CSS Only&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;Responsive Sidebar Navigation Menu bar using HTML CSS Only&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;/h3&gt;
&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/7773754638277334638/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/06/responsive-sidebar-navigation-menu-bar.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/7773754638277334638'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/7773754638277334638'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/06/responsive-sidebar-navigation-menu-bar.html' title='Responsive Sidebar Navigation Menu bar using HTML CSS Only'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioxZSKTMzil0MgHawUqMHmBMK5JBPNPiLWH_INQgnFbp-eDiTyIq5Y4evJZ99QQBuYyc_wPWvUba4mko0LnajnUc38bwO_r1QUjaSNGGPjFchTecFwtvZs_tUYZvmXFmadTeJpWQnn5DA/s72-w640-h360-c/responsive-sidebar-navigation-menu-bar-html-css.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-320829687250109777</id><published>2020-05-30T22:18:00.041+05:00</published><updated>2020-06-12T11:52:05.879+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="create website in 5 Minutes"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="Javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="Quick Website Development Tips"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive     Website With HTML CSS JS"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive Website With HTML CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>Quick Web Tips: Responsive Website using HTML CSS</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
  &lt;div style=&quot;text-align: left;&quot;&gt;
    &lt;div style=&quot;text-align: justify;&quot;&gt;
      &lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;font face=&quot;verdana&quot;&gt;&lt;img alt=&quot;Quick Web Tips: Responsive Website using HTML CSS&quot; border=&quot;0&quot; data-original-height=&quot;360&quot; data-original-width=&quot;640&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWd0HUmBcaG7DawghIn-8pohFEH4tm4f9990WnIMHw7snQFsOigiOQyYVFJhr8rJ3S07PRZHlW07E3ZgvOpQ_CE8zP2AB5dgdnGIQ9WioSRVroHKDKnQbZn9Bn1B2SHuC9ldEmxqxQs8k/w640-h360/Responsive-Websiite-without-coding-copy-paste.jpg&quot; title=&quot;Quick Web Tips: Responsive Website using HTML CSS&quot; width=&quot;640&quot; /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;In This Article, I Will Tell You &lt;b&gt;Create Responsive Website Design with a copy-paste trick.&lt;/b&gt; This is the best way to create a &lt;b&gt;responsive web design without coding just only copy-paste.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;span id=&quot;docs-internal-guid-07ac1e11-7fff-98dc-141a-42a5f5b2dce6&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;p dir=&quot;ltr&quot; style=&quot;line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;This is a much faster way of creating a website so please apply this trick and generate more websites it is like a &lt;b&gt;website generator&lt;/b&gt; because I do not code but &lt;b&gt;I chose the design and make a website&lt;/b&gt; if you do not&amp;nbsp; know about &lt;a href=&quot;https://tailwindcss.com/&quot; id=&quot;Tailwind CSS&quot; target=&quot;_blank&quot;&gt;&lt;b&gt;Tailwind CSS&lt;/b&gt;&lt;/a&gt; so many tutorials are present on my YouTube channel so kindly visit this link that present on my header and footer social icons&lt;/span&gt;&lt;/p&gt;&lt;br /&gt;&lt;p dir=&quot;ltr&quot; style=&quot;line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;I use &lt;a href=&quot;https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css&quot; style=&quot;text-align: left; white-space: normal;&quot; target=&quot;_blank&quot;&gt;CDN link&lt;/a&gt; of tailwind CSS and make this website one of the popular CSS frameworks is &lt;a href=&quot;https://tailwindcss.com/&quot; id=&quot;Tailwind CSS&quot; target=&quot;_blank&quot;&gt;Tailwind CSS&lt;/a&gt; so if you do not know about this CSS frameworks&lt;/span&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt; Google it and learn more and one important thing is &lt;/span&gt;&lt;a href=&quot;https://mertjf.github.io/tailblocks/&quot; style=&quot;white-space: pre-wrap;&quot; target=&quot;_blank&quot;&gt;&lt;b&gt;Tailblocks&lt;/b&gt;&lt;/a&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt; it is a website that contains responsive website ready templates made with tailwind CSS this is two websites that I used in my video tutorial so kindly visit my youtube video tutorial for step by step learning.&lt;/span&gt;&lt;/p&gt;&lt;p dir=&quot;ltr&quot; style=&quot;line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;&lt;p dir=&quot;ltr&quot; style=&quot;line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;&lt;span id=&quot;docs-internal-guid-c7d0adef-7fff-229d-9a88-6662ca665c67&quot;&gt;&lt;span style=&quot;font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;This is a very much &lt;b&gt;faster way of creating a website&lt;/b&gt;. &lt;b&gt;Tailwind CSS&lt;/b&gt; is very much popular CSS frameworks but less popular than &lt;b&gt;Bootstrap&lt;/b&gt; very fewer people know about that because Bootstrap is more popular than tailwind CSS but if you want to create a website with no coding and nice looking so I prefer to you please use Tailwind CSS without tailwind CSS you do not make a website fastly and only used of &lt;b&gt;tailwind CSS&lt;/b&gt; you do not make a website faster because &lt;b&gt;tailblocks&lt;/b&gt; are very important because it is a website that provides website ready template that made with the tailwind CSS. if you like this article please follow me on all social media I working very hard day and night for making the tutorials for you please support me and also in case of any query and question in your precious mind so kindly comment us below.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;So If you like my act of teaching and way of delivering a concept to you so please Like, Share, Subscribe and comment on me and raise my confidence level. If You want to Download the full Source code of the Create Responsive Website Design in Simple Way. So downloading link is given below&amp;nbsp;and If you want to watch the video tutorials click the below video and learn from this tutorial.&amp;nbsp;&lt;/font&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot; style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/font&gt;&lt;/div&gt;&lt;/div&gt;


&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/IlZJN--l_Zw&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to download the complete source code of this development click the button below and download it:-&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;color: #333333;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;a href=&quot;https://drive.google.com/file/d/1FMd3_Y9SLwrpnIi0UtaiR7jBAyvB5Kx_/view&quot; id=&quot;Quick Web Tips: Responsive Website using HTML CSS&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Quick Web Tips: Responsive Website using HTML CSS&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;Quick Web Tips: Responsive Website using HTML CSS&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; font-family: arial, helvetica, sans-serif; font-size: large; line-height: inherit; outline: none; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;div style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; color: black; font-weight: bold; line-height: inherit; outline: none; padding: 0px; text-align: justify; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; color: #333333; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;/div&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/320829687250109777/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/05/quick-web-tips-responsive-website-html-css.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/320829687250109777'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/320829687250109777'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/05/quick-web-tips-responsive-website-html-css.html' title='Quick Web Tips: Responsive Website using HTML CSS'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWd0HUmBcaG7DawghIn-8pohFEH4tm4f9990WnIMHw7snQFsOigiOQyYVFJhr8rJ3S07PRZHlW07E3ZgvOpQ_CE8zP2AB5dgdnGIQ9WioSRVroHKDKnQbZn9Bn1B2SHuC9ldEmxqxQs8k/s72-w640-h360-c/Responsive-Websiite-without-coding-copy-paste.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-897238571853571531</id><published>2020-05-30T07:44:00.015+05:00</published><updated>2020-06-12T12:34:21.891+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="create website in 5 Minutes"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="Javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="Quick Website Development Tips"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive     Website With HTML CSS JS"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive Website With HTML CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>Quick Web Tips : Create Responsive Website Design in Simple Way</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiykZUC_XnFMFtjhKHF0mzQ7aUyymIcjQ2JfP1MqLSlsW9CWHSouTqHNhckNCXqL0TPAtcg0JfnyPV02faCeRe9wIqatMSO5YL4x2iGARvLKMitK0I41p6gmiXIVa1Sge5BITMri-5RHo/s640/Responsive-Websiite-without-coding.jpg&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img alt=&quot;Quick Web Tips : Create Responsive Website Design in Simple Way&quot; border=&quot;0&quot; data-original-height=&quot;360&quot; data-original-width=&quot;640&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiykZUC_XnFMFtjhKHF0mzQ7aUyymIcjQ2JfP1MqLSlsW9CWHSouTqHNhckNCXqL0TPAtcg0JfnyPV02faCeRe9wIqatMSO5YL4x2iGARvLKMitK0I41p6gmiXIVa1Sge5BITMri-5RHo/w640-h360/Responsive-Websiite-without-coding.jpg&quot; title=&quot;Quick Web Tips : Create Responsive Website Design in Simple Way&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;In This Article, I Will Tell You Create &lt;b&gt;Responsive Website Design in Simple Way&lt;/b&gt;. This is the best way to create a&lt;b&gt; responsive web design with coding just only copy-paste.&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;If you want to make a&lt;b&gt; website with no coding&lt;/b&gt; so friends that is the right place for you because I make a website without coding only copy paste work in within &lt;b&gt;5 minutes&lt;/b&gt;. It is the best video tutorial for&lt;b&gt; making a website within 5 to 10 minutes&lt;/b&gt;. it is a &lt;b&gt;quick web tip&lt;/b&gt; for you if you do not know my YouTube channel &lt;a href=&quot;https://www.youtube.com/channel/UCrF1DtyIAwkLPLm6kKYlTQA?view_as=subscriber&quot; target=&quot;_blank&quot;&gt;techmemorise&lt;/a&gt; so kindly visit the link that presents within my blog header and footer social icons so first of all this is the video tutorial in which I explain step by step procedure so kindly visit this &lt;b&gt;YouTube channel&lt;/b&gt; and watch my video tutorial that is embedded in my bottom section of this post. &lt;br /&gt;&lt;br /&gt;If you do not know my other tutorial on this topic &lt;b&gt;make the website within 5 to 10 minutes&lt;/b&gt; and without coding only copy paste work also read this it is a must-read &lt;a href=&quot;https://techmemorise.blogspot.com/2020/05/quick-web-tips-responsive-website-html-css.html&quot; target=&quot;_blank&quot;&gt;post-link&lt;/a&gt;.  First of all, I used &lt;a href=&quot;https://tailwindcss.com/&quot; id=&quot;Tailwind CSS&quot; target=&quot;_blank&quot;&gt;&lt;b&gt;Tailwind CSS&lt;/b&gt;&lt;/a&gt; for making this website and also use &lt;b&gt;&lt;a href=&quot;https://mertjf.github.io/tailblocks/&quot; id=&quot;Tailblocks&quot; target=&quot;_blank&quot;&gt;Tailblocks&lt;/a&gt;&lt;/b&gt; it is a website that provides website ready templates that made with the &lt;b&gt;tailwind CSS&lt;/b&gt; if you do not know about tailwind CSS it is one of the most popular CSS frameworks like &lt;b&gt;Bootstrap&lt;/b&gt; but it is less popular than Bootstrap. &lt;br /&gt;&lt;br /&gt;it is a simple procedure for making websites fastly. First, you can attach the &lt;a href=&quot;https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css&quot; target=&quot;_blank&quot;&gt;CDN link &lt;/a&gt;of &lt;b&gt;Tailwind CSS&lt;/b&gt; in your head tag and add website ready templates from Tailblocks in the body tag of HTML document and then your website is ready and this is a technique used in the video tutorial kindly watch this I hope you will like it because this is a&lt;b&gt; responsive website&lt;/b&gt; that I make for you if you do not know I provide source code of the website so the bottom of this post I provide download link of the source code so kindly download it and share with your friends&amp;nbsp;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;So If you like my act of teaching and way of delivering a concept to you so please Like, Share, Subscribe and comment on me and raise my confidence level. If You want to Download the full Source code of the Create &lt;b&gt;Responsive Website Design in Simple Way&lt;/b&gt;. So downloading link is given below. If you want to watch the video tutorials click the below video and learn from this tutorial.&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;
&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/S9LsiKIdYTE&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;


&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to download the complete source code of this development click the button below and download it:-&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;color: #333333;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;a href=&quot;https://drive.google.com/file/d/1GPMqQ68fZiuAgosKXqDQql0x7tToKTVd/view&quot; id=&quot;Quick Web Tips : Create Responsive Website Design in Simple Way&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Quick Web Tips : Create Responsive Website Design in Simple Way&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;Quick Web Tips : Create Responsive Website Design in Simple Way&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/897238571853571531/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/05/responsive-website-design-simple-way.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/897238571853571531'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/897238571853571531'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/05/responsive-website-design-simple-way.html' title='Quick Web Tips : Create Responsive Website Design in Simple Way'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiykZUC_XnFMFtjhKHF0mzQ7aUyymIcjQ2JfP1MqLSlsW9CWHSouTqHNhckNCXqL0TPAtcg0JfnyPV02faCeRe9wIqatMSO5YL4x2iGARvLKMitK0I41p6gmiXIVa1Sge5BITMri-5RHo/s72-w640-h360-c/Responsive-Websiite-without-coding.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-6367000328684245507</id><published>2020-05-29T10:20:00.006+05:00</published><updated>2020-06-11T16:32:11.778+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="CSS Tips &amp; Tricks"/><category scheme="http://www.blogger.com/atom/ns#" term="Custom Checkbox and Radio Using Font Awesome Icons"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>Create Custom Checkbox and Radio Using Font Awesome Icons</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;Create Custom Checkbox and Radio Using Font Awesome Icons&quot; border=&quot;0&quot; data-original-height=&quot;360&quot; data-original-width=&quot;640&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw5CPGRkiaVSTRVS_3xtetTMBHAhH2ZA1cDxJjEL5cvJx4aGOhu2F7dY-LjQDordWjBKVi05MP-94xzS2VPKgHaR6cq_0xFWba7Uj5t7gk8CoPAVvlcic2BxJYKNqlr0O44JiCKeMK3vI/w640-h360/custom-checkbox-radio-fontawesome.jpg&quot; title=&quot;Create Custom Checkbox and Radio Using Font Awesome Icons&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;In This Article, I Will Tell You &lt;b&gt;Create Custom Checkbox and Radio Using Font Awesome Icons.&lt;/b&gt; This is the best way to Create Custom &lt;b&gt;Checkbox and Radio.&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;so friends if you are bored from making &lt;b&gt;custom checkboxes and radio button&lt;/b&gt; and if you like font awesome icons so this article is absolutely for you because in this article I will use font awesome to create very &lt;b&gt;awesome checkboxes and radio buttons&lt;/b&gt; if you are new in my blog so please follow me on my all social media like Twitter Instagram Facebook and YouTube if you do not know my where the social links are present so in my blog header and footer section social media link is present so please support me on all my social media.&lt;br /&gt;&lt;br /&gt;First of all friends you will go to &lt;a href=&quot;https://fontawesome.com/&quot; target=&quot;_blank&quot;&gt;&lt;b&gt;fontawesome.com&lt;/b&gt;&lt;/a&gt; and search for an Icon “&lt;a href=&quot;https://fontawesome.com/icons/square?style=regular&quot; target=&quot;_blank&quot;&gt;&lt;b&gt;Square&lt;/b&gt;&lt;/a&gt;” and again search for another icon “&lt;a href=&quot;https://fontawesome.com/icons/check-square?style=regular&quot; target=&quot;_blank&quot;&gt;&lt;b&gt;Check-square&lt;/b&gt;&lt;/a&gt;” and friends this is a very interesting technique for making &lt;b&gt;custom checkboxes&lt;/b&gt; because I display a square icon when the &lt;b&gt;checkbox&lt;/b&gt; is unchecked and when the checkbox is checked I display check-square icon.&lt;br /&gt;&lt;br /&gt;For Making custom radio button with fontawesome you search for an icon &lt;b&gt;“&lt;a href=&quot;https://fontawesome.com/icons/circle?style=regular&quot; target=&quot;_blank&quot;&gt;Circle&lt;/a&gt;”&lt;/b&gt; after searching this you also search for &quot;&lt;a href=&quot;https://fontawesome.com/icons/dot-circle?style=regular&quot; target=&quot;_blank&quot;&gt;&lt;b&gt;dot-circle&lt;/b&gt;&lt;/a&gt;&quot; icon and this is a technique for making a custom radio buttons because I display circle icon when the &lt;b&gt;radio button&lt;/b&gt; is unchecked and when the radio button is checked I display dot-circle icon&lt;br /&gt;&lt;br /&gt;If you do not know, I make &lt;b&gt;tips and tricks&lt;/b&gt; for you day by day in my YouTube channel so please subscribe me and also press the bell icon for more latest videos if you learning this &lt;b&gt;development&lt;/b&gt; step by step from start to end so please visit my YouTube channel and also watch my video that embedded on the bottom section of this post.&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;So If you like my act of teaching and way of delivering a concept to you so please Like, Share, Subscribe and comment on me and raise my confidence level. If You want to Download the full Source code of the &lt;b&gt;Create Custom Checkbox and Radio Using Font Awesome Icons.&lt;/b&gt; So downloading link is given below and If you want to watch the video tutorials click the below video and learn from this tutorial.&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/font&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/8H8Dc--OUc8&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;

  
&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to download the complete source code of this development click the button below and download it:-&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;color: #333333;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;a href=&quot;https://drive.google.com/file/d/1ctuZyyFz3W23ACmK_SEusvBaP4Lm_RKO/view&quot; id=&quot;Create Custom Checkbox and Radio Using Font Awesome Icons&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Create Custom Checkbox and Radio Using Font Awesome Icons&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;Create Custom Checkbox and Radio Using Font Awesome Icons&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/6367000328684245507/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/05/custom-checkbox-radio-font-awesome-icon.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/6367000328684245507'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/6367000328684245507'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/05/custom-checkbox-radio-font-awesome-icon.html' title='Create Custom Checkbox and Radio Using Font Awesome Icons'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw5CPGRkiaVSTRVS_3xtetTMBHAhH2ZA1cDxJjEL5cvJx4aGOhu2F7dY-LjQDordWjBKVi05MP-94xzS2VPKgHaR6cq_0xFWba7Uj5t7gk8CoPAVvlcic2BxJYKNqlr0O44JiCKeMK3vI/s72-w640-h360-c/custom-checkbox-radio-fontawesome.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-6767869340594257001</id><published>2020-05-29T08:19:00.011+05:00</published><updated>2020-06-11T17:50:32.881+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Center a Div Horizontally and Vertically in CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="CSS Tips &amp; Tricks"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>4 Quick Ways to Center a Div Horizontally and Vertically in CSS</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;4 Quick Ways to Center a Div Horizontally and Vertically in CSS&quot; border=&quot;0&quot; data-original-height=&quot;360&quot; data-original-width=&quot;640&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAoSmBH9XSPj6IHEGIjK9CywD6hMN52mVs8LBzQdJaq5TftMaq9_P0IPfKU6ZOJ0XGZ_-vNmxoi4jXBA_DxepQmbRSpudD1u8L7vngz5zSAHjODCogipJjS7fNoECUrAucfnOuBgnuxk8/w640-h360/4-ways-to-center-div-vertically-horizontally.jpg&quot; title=&quot;4 Quick Ways to Center a Div Horizontally and Vertically in CSS&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;In This Article, I Will Tell You&lt;b&gt; 4 Quick Ways to Center a Div Horizontally and Vertically in CSS&lt;/b&gt;. This is the best way of the &lt;b&gt;center a div in another div.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;span id=&quot;docs-internal-guid-d607e1ba-7fff-35a7-5499-cb6e45f8fa99&quot;&gt;&lt;span style=&quot;font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;Hey, guys if you are worried about why my div was not center with the respect of horizontally and vertically and it inside another div.&amp;nbsp; so this article is absolutely for you because in this article I will you explaining the top &lt;b&gt;4 ways to center your div inside another div&lt;/b&gt;. By the way, there are many ways to Centre a div inside another div but I will be explaining your top four ways that make your &lt;b&gt;div Centre horizontally and vertically inside another div. &lt;/b&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;span&gt;&lt;span style=&quot;font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;span&gt;&lt;span style=&quot;font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;So the very First way to Centre a div inside another div is the absolute property and the second way is flexbox property and the Third way is is margin auto within any flexible container and the last property is using display grid property. I will be explaining all the properties one by one. &lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;4&quot;&gt;1-&amp;nbsp; Absolute Property:-&lt;/font&gt;&lt;/h2&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;We can easily Centre div inside another div with CSS absolute property you can type just two to three properties and then your div is Centered within another div. so you type three properties in your child div then your div is centered successfully.&lt;/span&gt;&amp;nbsp;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font color=&quot;#ffffff&quot; face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;b style=&quot;background-color: #f57c00;&quot;&gt;display: absolute;&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font color=&quot;#ffffff&quot; face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;b style=&quot;background-color: #f57c00;&quot;&gt;top: 50%;&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font color=&quot;#ffffff&quot; face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;b style=&quot;background-color: #f57c00;&quot;&gt;left: 50%;&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font color=&quot;#ffffff&quot; face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;b style=&quot;background-color: #f57c00;&quot;&gt;transform: translate(-50% , -50%);&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font color=&quot;#ffffff&quot; face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;b style=&quot;background-color: #f57c00;&quot;&gt;&lt;br /&gt;&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;4&quot;&gt;2-&amp;nbsp; Flexbox Property:-&lt;/font&gt;&lt;/h2&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;We can easily Centre div inside another div with CSS Flexbox property you can type just two to three properties and then your div is Centered within another div. so you type three properties in your Parent div then your child div is centered successfully.&lt;/span&gt;&amp;nbsp;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font color=&quot;#ffffff&quot; face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;b style=&quot;background-color: #f57c00;&quot;&gt;display: flex;&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font color=&quot;#ffffff&quot; face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;background-color: #f57c00;&quot;&gt;&lt;b&gt;justify-content: center;&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font color=&quot;#ffffff&quot; face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;background-color: #f57c00;&quot;&gt;&lt;b&gt;align-items: center;&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;h2&gt;&lt;font face=&quot;verdana&quot; size=&quot;4&quot;&gt;3-&amp;nbsp; Margin Property:-&lt;/font&gt;&lt;/h2&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;We can easily Centre div inside another div with simple CSS margin property inside any flexible container like that made with display: grid; or display: flex; you can type just two to three properties and then your div is Centered within another div. so you type one property in your Parent div.&lt;/span&gt;&amp;nbsp;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;b style=&quot;background-color: #f57c00; color: white; text-align: left;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;display: flex;&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;And this property is type in the child div.&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;b style=&quot;background-color: #f57c00; color: white; text-align: left;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;margin: auto;&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;4&quot;&gt;4-&amp;nbsp; Grid Property:-&lt;/font&gt;&lt;/h2&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;We can easily Centre div inside another div with CSS Grid property. It is the best functionality of the grid layout system. you can type just two to three properties and then your div is Centered within another div. so you type three properties in your Parent div then your child div is centered successfully.&lt;/span&gt;&amp;nbsp;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;font color=&quot;#ffffff&quot; face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;b style=&quot;background-color: #f57c00;&quot;&gt;display: grid;&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;font color=&quot;#ffffff&quot; face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;background-color: #f57c00;&quot;&gt;&lt;b&gt;justify-content: center;&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;font color=&quot;#ffffff&quot; face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;background-color: #f57c00;&quot;&gt;&lt;b&gt;align-items: center;&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;background-color: white; color: #5f5f5f; font-family: verdana; font-size: small; text-align: justify;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;background-color: white; text-align: justify;&quot;&gt;So If you like my act of teaching and way of delivering a concept to you so please Like, Share, Subscribe and comment on me and raise my confidence level. If You want to Download the full Source code of the&amp;nbsp;&lt;/span&gt;&lt;b style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;&quot;&gt;4 Quick Ways to Center a Div Horizontally and Vertically in CSS&lt;/b&gt;&lt;span style=&quot;background-color: white; text-align: justify;&quot;&gt;&amp;nbsp;So downloading link is given below and If you want to watch the video tutorials click the below video and learn from this tutorial.&lt;/span&gt;&lt;/font&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/TeAQ7PKvjVg&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;


&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to download the complete source code of this development click the button below and download it:-&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;color: #333333;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;a href=&quot;https://drive.google.com/file/d/1OGLSlmzrY0DOP0mnur82gLTbhHNb-akj/view&quot; id=&quot;4 Quick Ways to Center a Div Horizontally and Vertically in CSS&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;4 Quick Ways to Center a Div Horizontally and Vertically in CSS&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;4 Quick Ways to Center a Div Horizontally and Vertically in CSS&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/6767869340594257001/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/05/4-quick-ways-center-div-css.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/6767869340594257001'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/6767869340594257001'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/05/4-quick-ways-center-div-css.html' title='4 Quick Ways to Center a Div Horizontally and Vertically in CSS'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAoSmBH9XSPj6IHEGIjK9CywD6hMN52mVs8LBzQdJaq5TftMaq9_P0IPfKU6ZOJ0XGZ_-vNmxoi4jXBA_DxepQmbRSpudD1u8L7vngz5zSAHjODCogipJjS7fNoECUrAucfnOuBgnuxk8/s72-w640-h360-c/4-ways-to-center-div-vertically-horizontally.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-8127342358209451382</id><published>2020-05-29T00:01:00.007+05:00</published><updated>2020-06-11T20:32:08.275+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive Animated Login Form"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive Animated Login Form using HTML CSS Only"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>Responsive Animated Login Form using HTML CSS Only.</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;Responsive Animated Login Form using HTML CSS Only.&quot; border=&quot;0&quot; data-original-height=&quot;720&quot; data-original-width=&quot;1280&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdTk6RYajAe-2Jo2kdsM6ywBlv6kb0IT10u7141gRtu0KWeLykVEPCkrSt1ROh5TdMjyi66P2dzPq9tXOO3nHFeYQ3aQpt1bXVd4QoWQMbvRYwpCnL6KyklOC9NHu9TI4l-hqQxwJcnxA/w640-h360/responsive-animated-login-form.webp&quot; title=&quot;Responsive Animated Login Form using HTML CSS Only.&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;
In This Article, I Will Tell You How To Make a &lt;b&gt;Responsive Animated Login Form using HTML CSS Only&lt;/b&gt;. This is the best way of creating an &lt;b&gt;Animated&lt;/b&gt;&amp;nbsp;&lt;b&gt;Login Form&lt;/b&gt;.&lt;br /&gt; &lt;br /&gt; I will use &lt;b&gt;pure HTML CSS&lt;/b&gt; for creating this &lt;b&gt;Animated Login Form&lt;/b&gt;. One of the major difficulties all of us are face while creating a Login Form is that the Placeholder of input can not float properly. I completely solve this problem. with extra tips &amp;amp; techniques that are reasonable and unique.&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;This is an awesome way to create an &lt;b&gt;animated login form&lt;/b&gt; I will use your &lt;b&gt;HTML CSS&lt;/b&gt; for creating this form I know many people already make a tutorial on YouTube but I will teach with extra tips and tricks. So please if you are new in my blog please put me on all social media. The main feature adds an animated login form is that &lt;b&gt;floating placeholder&lt;/b&gt; when input is in focus and I will remove all borders outlines of the default input element. One of the main functionality in my login form is that it is &lt;b&gt;fully mobile-friendly&lt;/b&gt; and open easily in any version of mobile.&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;One of the most important questions that are in your mind is why we create a &lt;b&gt;login form&lt;/b&gt; and why the login form is very important in &lt;b&gt;web development&lt;/b&gt;. The answer is simple to clean and elegant. Login form for any website is very important because without login form there is no website at all because every website have a contact-us page and you know that in contact page login form is very important because it is the only resource to contact with the website admin, and many other purposes that login form is used so there is a great time to learning &lt;b&gt;how to create login form fastly.&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;So If you like my act of teaching and way of delivering a concept to you so please Like, Share, Subscribe and comment on me and raise my confidence level. If You want to Download the full Source code of the &lt;b&gt;Animated Login Form&lt;/b&gt;. So downloading link is given below and If you want to watch the video tutorials click the below video and learn from this tutorial.&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/font&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/font&gt;&lt;/div&gt;
&lt;/div&gt;

  
&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/DVAtG2VaFAs&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;

  
&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to download the complete source code of this development click the button below and download it:-&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;color: #333333;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;a href=&quot;https://drive.google.com/file/d/1klAD4B1_TQwRkIzf48vk0XtlPqvbjWyq/view&quot; id=&quot;Responsive Animated Login Form using HTML CSS Only.&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Responsive Animated Login Form using HTML CSS Only.&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;Responsive Animated Login Form using HTML CSS Only.&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/8127342358209451382/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/05/responsive-animated-login-form-html-css.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/8127342358209451382'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/8127342358209451382'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/05/responsive-animated-login-form-html-css.html' title='Responsive Animated Login Form using HTML CSS Only.'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdTk6RYajAe-2Jo2kdsM6ywBlv6kb0IT10u7141gRtu0KWeLykVEPCkrSt1ROh5TdMjyi66P2dzPq9tXOO3nHFeYQ3aQpt1bXVd4QoWQMbvRYwpCnL6KyklOC9NHu9TI4l-hqQxwJcnxA/s72-w640-h360-c/responsive-animated-login-form.webp" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-462610756460271668</id><published>2020-05-27T07:07:00.011+05:00</published><updated>2020-06-12T12:22:43.771+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Calculator Using HTML CSS and Javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="calculator using javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="Javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="web application with javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>How To Make a Calculator Using HTML CSS and Javascript</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;How To Make a Calculator Using HTML CSS and Javascript&quot; border=&quot;0&quot; data-original-height=&quot;720&quot; data-original-width=&quot;1280&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi4qmaK0qTgdghJ7GUeTzJtL-UGxEIYrcCFs9Y49eC7lJy6Q4Tnob75axfzpkum_3dkDgUWEEdL9u1To9qL4gYUZiaxcZ4UyrePhknAmPGe8Vhb8aZOZwrPhwiup1EzKsht4J_TBgCWDo/w640-h360/create-calculator-html-css-js.webp&quot; title=&quot;How To Make a Calculator Using HTML CSS and Javascript&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;In This Article, I Will Tell You the &lt;b&gt;How To Make a Calculator Using HTML CSS and Javascript &lt;/b&gt;This is the best way of creating a &lt;b&gt;Javascript Calculator.&lt;/b&gt;&lt;br /&gt; &lt;br /&gt;I will use pure &lt;b&gt;markup language&lt;/b&gt; CSS for making this &lt;b&gt;Javascript Calculator&lt;/b&gt;. one in every of the most important difficulties all folks square measure face whereas making a &lt;b&gt;Javascript Calculator&lt;/b&gt; is that the &lt;b&gt;calculator can&#39;t handle syntax errors properly&lt;/b&gt;.&amp;nbsp;I completely solve this problem. with extra &lt;b&gt;tips &amp;amp; techniques&lt;/b&gt; that are reasonable and unique.&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;This JavaScript calculator is really awesome it contains many features like &lt;b&gt;Handling Syntax error reference error&lt;/b&gt; and any other that you do for example if you type 1 divided by 0 it automatically handle the error and show Infinity if you type -1 then it &lt;b&gt;artificial intelligence&lt;/b&gt; automatically handle this and shows answer -infinity so friends this is an awesome trick and Fastrack please watch my video tutorial for step by step and start to end learning. This is an awesome trick of &lt;b&gt;shorthand learning&lt;/b&gt; if you do not now my channel contains many tips and tricks like this one. So please subscribe to my channel and also press the bell icon for more latest videos for video learning you can go to the bottom of the post video lecture is also provided.&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;If you do not know to evaluate function &lt;b&gt;eval()&lt;/b&gt; in JavaScript. So friends&#39; Eval() function is very important in &lt;b&gt;JavaScript&lt;/b&gt; because due to this function we evaluate any big mathematical expression within seconds. So friends this is the trick that I used in my &lt;b&gt;JavaScript calculator&lt;/b&gt;. I use a try-catch-throw-finally statement also called &lt;b&gt;exception handling&lt;/b&gt; in JavaScript for handling any type of error in evaluating function so you do not need to handle errors I already do it. if you do not know I also provide the source code in the video description and also the bottom of this article so please download my&lt;b&gt; source code&lt;/b&gt; and enjoy it.&lt;/div&gt; &lt;br /&gt; So If you like my act of teaching and way of delivering a concept to you so please Like, Share, Subscribe and comment on me and raise my confidence level. If You want to Download the full &lt;b&gt;Source code of Javascript Calculator&lt;/b&gt;. So downloading link is given below and If you want to watch the video tutorials click the below video and learn from this tutorial.&lt;/font&gt;&lt;br /&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;


&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/CZVihFO9cGc&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;


&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to download the complete source code of this development click the button below and download it:-&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;color: #333333;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;a href=&quot;https://drive.google.com/file/d/1Ni3om-miOrjgRmaGTxbJVPCrtEuaEHeX/view&quot; id=&quot;How To Make a Calculator Using HTML CSS and Javascript&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;How To Make a Calculator Using HTML CSS and Javascript&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;How To Make a Calculator Using HTML CSS and Javascript&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/462610756460271668/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/05/make-calculator-html-css-js.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/462610756460271668'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/462610756460271668'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/05/make-calculator-html-css-js.html' title='How To Make a Calculator Using HTML CSS and Javascript'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi4qmaK0qTgdghJ7GUeTzJtL-UGxEIYrcCFs9Y49eC7lJy6Q4Tnob75axfzpkum_3dkDgUWEEdL9u1To9qL4gYUZiaxcZ4UyrePhknAmPGe8Vhb8aZOZwrPhwiup1EzKsht4J_TBgCWDo/s72-w640-h360-c/create-calculator-html-css-js.webp" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-3041076685346124999</id><published>2020-05-27T05:38:00.011+05:00</published><updated>2020-06-11T21:01:57.286+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Animated Hamburger Menu"/><category scheme="http://www.blogger.com/atom/ns#" term="Hamburger Menu"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="Javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="Transforming Hamburger Menu CSS HTML"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>Animated Hamburger Menu - Transforming Hamburger Menu HTML CSS</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
  &lt;div style=&quot;text-align: left;&quot;&gt;
    &lt;div style=&quot;text-align: justify;&quot;&gt;
      &lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;Animated Hamburger Menu - Transforming Hamburger Menu CSS HTML&quot; border=&quot;0&quot; data-original-height=&quot;720&quot; data-original-width=&quot;1280&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjMFVuG6FDDwfdPKTvGq6BnGGN-KX_Md2zFP_Fh5lzwniEaLa2Qg3q_GY769yeTnPnojjQMXSdtA5SAc3aOU_yHxSAGLR0UELpZDaB-LssfB1KmavlgMaJd4rMtpMY7-2t8isokl59l6s/w640-h360/hamburger-menu-icon-animation.webp&quot; title=&quot;Animated Hamburger Menu - Transforming Hamburger Menu CSS HTML&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;
      &lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;In This Article, I Will Tell You the
          &lt;b&gt;Animated Hamburger Menu - Transforming Hamburger Menu CSS
            HTML.&amp;nbsp;&lt;/b&gt;This is the best way of creating an&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;b&gt;Animated Hamburger Menu.&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
        &lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
        &lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;The &lt;b&gt;Animated Hamburger Menu&lt;/b&gt;&amp;nbsp;on any website plays an important role in better user experience so that it is the main reason for publishing this article. I create a fully responsive&amp;nbsp;
          Animated Hamburger that works very better in any version of mobile.&lt;/span&gt;&lt;br /&gt;
        &lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;I will use pure &lt;b&gt;HTML CSS&lt;/b&gt;&amp;nbsp;for creating this
          Responsive&amp;nbsp;&lt;b&gt;Animated Hamburger Menu&lt;/b&gt;. One of the major difficulties all of us are face while creating a Transforming Hamburger Menu is that the Hamburger is not animate properly. I completely solve this problem. with extra tips &amp;amp; techniques that are reasonable and unique.&lt;/span&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;I will use the three best &lt;b&gt;hamburger animation&lt;/b&gt; in this video tutorial so please like my video tutorial and also subscribe to my channel all these &lt;b&gt;hamburger animation&lt;/b&gt; source codes provided at the bottom of the post so do not worry about it. Hamburger animation makes a better User experience and also user interface. It is the best way for creating a &lt;b&gt;responsive hamburger navbar.&lt;/b&gt;&lt;br /&gt;
        &lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
        &lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;In this Transforming Hamburger Menu, I will use simple CSS properties for making it&amp;nbsp;&lt;b&gt;Responsive and animatable.&lt;/b&gt;&amp;nbsp;I know that many tutorials on youtube taught about already it but I want to teach with unique concepts. I will be showing and Explain to you how to
          Create an&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;b&gt;Animated Hamburger Menu &lt;/b&gt;Transforming Hamburger Menu CSS
          HTML&lt;/span&gt;&lt;br /&gt;
        &lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;We use pure &lt;b&gt;HTML, CSS &amp;amp; JS&lt;/b&gt; for making this &lt;b&gt;Hamburger Menu&lt;/b&gt;.
          This Navigation bar is fully Responsive I Hope you will Like it. This is a Very Awesome Video. Please Like It and Share it With
          Others.&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
        &lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;color: red;&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/span&gt;&lt;/span&gt;
        &lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;color: red;&quot;&gt;&lt;b&gt;So If you like my act of teaching and way of delivering a concept to you so please comment me and raise my confidence level.&lt;/b&gt;&lt;/span&gt;
          If You want to Download the full Source code of
          &lt;b&gt;Animated Hamburger Menu&lt;/b&gt;. So downloading link is given below.
          and If you want to watch the video tutorials click the below video and learn from this tutorial.&amp;nbsp;&lt;/span&gt;&lt;/font&gt;&lt;br /&gt;
    &lt;/div&gt;
    &lt;div style=&quot;text-align: justify;&quot;&gt;
      &lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/font&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  
&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/3ItBB4hhGvQ&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;


    &lt;div style=&quot;text-align: justify;&quot;&gt;&lt;h3 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to download the complete source code of this development click the button below and download it:-&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;color: #333333;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;a href=&quot;https://drive.google.com/file/d/1p03r8f0QeUzcdwTSYFcj4aQ1INSh-J-c/view&quot; id=&quot;Animated Hamburger Menu - Transforming Hamburger Menu CSS HTML&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Animated Hamburger Menu - Transforming Hamburger Menu CSS HTML&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;Animated Hamburger Menu - Transforming Hamburger Menu CSS HTML&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;/h3&gt;&lt;/div&gt;&lt;/div&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
  &lt;/h3&gt;

&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/3041076685346124999/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/05/animated-hamburger-menu-css-html.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/3041076685346124999'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/3041076685346124999'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/05/animated-hamburger-menu-css-html.html' title='Animated Hamburger Menu - Transforming Hamburger Menu HTML CSS'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjMFVuG6FDDwfdPKTvGq6BnGGN-KX_Md2zFP_Fh5lzwniEaLa2Qg3q_GY769yeTnPnojjQMXSdtA5SAc3aOU_yHxSAGLR0UELpZDaB-LssfB1KmavlgMaJd4rMtpMY7-2t8isokl59l6s/s72-w640-h360-c/hamburger-menu-icon-animation.webp" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-8137022972769533532</id><published>2020-05-13T19:20:00.011+05:00</published><updated>2020-12-24T13:43:39.529+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="create website in 5 Minutes"/><category scheme="http://www.blogger.com/atom/ns#" term="wordpress"/><category scheme="http://www.blogger.com/atom/ns#" term="wordpress tips &amp; tricks"/><category scheme="http://www.blogger.com/atom/ns#" term="wordpress website"/><category scheme="http://www.blogger.com/atom/ns#" term="Wordpress Website Tutorial"/><title type='text'>How to Create Website in 5 Minutes Wordpress Website Tutorial</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;How to Create Website in 5 Minutes Wordpress Website Tutorial&quot; border=&quot;0&quot; data-original-height=&quot;720&quot; data-original-width=&quot;1280&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnM5duQExdnzO0zJ_D7FL5XOzevPzYKwsQmJLgka4dmQLDSo-IEazZZbvaKfvaFlIQSUkoTQ-x6MfSUC8DwWzdVXuzGn-YLvfWclIXt2AA1IWcSGLWHr-Rwhq5LJytmvP1eW_rPgllwNg/w640-h360/create-free-wordpress-website-in-5-minutes.webp&quot; title=&quot;How to Create Website in 5 Minutes Wordpress Website Tutorial&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;
&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;In this article, I will tell the &lt;b&gt;How to Create a Website in 5 Minutes Wordpress Website&lt;/b&gt; Tutorial.  It is the Best Way to &lt;b&gt;Create a WordPress Website in just a few clicks&lt;/b&gt;. if  If you Like My Article Please Follow me on my all Social Media. &lt;br /&gt; &lt;br /&gt;When you accept beginning a blogging or web site, you may directly think about WordPress. And with good reason! Since its first launch in 2003, WordPress has worked exhausting to be the simplest blogging platform on the web industry, and as of 2019, &lt;b&gt;&lt;a href=&quot;wordpress.com&quot; target=&quot;_blank&quot;&gt;WordPress&lt;/a&gt;&lt;/b&gt; is that the preferred &lt;b&gt;content management system (CMS)&lt;/b&gt;. More than 30 percent of the website in the internet web make with WordPress. &lt;br /&gt; &lt;br /&gt;&lt;/font&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;So that I Highly Recommend Wordpress. &lt;b&gt;Create a website on the internet &lt;/b&gt;during a &lt;b&gt;Wordpress &lt;/b&gt;isn&#39;t a giant deal however produce a Wordpress website during a quicker approach could be a smart manner. but the most drawback whereas making the Wordpress web site is that paid theme and plugins I fully resolved this drawback and created a decent wanting web site with &lt;b&gt;free themes and free plugins.&lt;/b&gt;&lt;/font&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;br /&gt;If You Want To Watch The Full Video Tutorial Click The Below Video And Watch. If You want to see more tutorials like this, please subscribe to my channel and one more thing that all of you are always forget while subscribing is the bell icon, Please Press the bell icon for time to time Update from My Channel.&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;
  

&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/xWtDT_iB8Ic&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;


  &lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: x-large;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/h2&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: x-large;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;4&quot;&gt;1- Astra Theme :&amp;nbsp;&lt;/font&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;b&gt;Astra Theme&lt;/b&gt; is the Best Theme for creating a&lt;b&gt; good looking website&lt;/b&gt;. One of the popular themes in the &lt;b&gt;Wordpress&lt;/b&gt; market is Astra. The most common reason for the growing fame of the &lt;b&gt;Astra theme&lt;/b&gt; contains many features like &lt;b&gt;user-friendly&lt;/b&gt;, &lt;b&gt;mobile-friendly&lt;/b&gt;, &lt;b&gt;SEO-friendly.&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://wordpress.org/themes/astra/&quot; id=&quot;How to Create Website in 5 Minutes Wordpress Website Tutorial&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;How to Create Website in 5 Minutes Wordpress Website Tutorial&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;How to Create Website in 5 Minutes Wordpress Website Tutorial&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/h2&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;4&quot;&gt;2 - Astra Starter Sites Plugin :&amp;nbsp;&lt;/font&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;The Astra Starter Sites plugin allowed you to &lt;b&gt;import complete web site&lt;/b&gt; in your WordPress dashboard tweak them, and build skilled websites. This plugin gives you access to 280+ pre-made full website templates and individual pages for your favorite page builder such as &lt;b&gt;Elementor,&lt;/b&gt; &lt;b&gt;Beaver Builder&lt;/b&gt;, &lt;b&gt;Brizy,&lt;/b&gt; and the &lt;b&gt;WordPress default editor Gutenberg.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://wordpress.org/plugins/astra-sites/&quot; id=&quot;How to Create Website in 5 Minutes Wordpress Website Tutorial&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;How to Create Website in 5 Minutes Wordpress Website Tutorial&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;How to Create Website in 5 Minutes Wordpress Website Tutorial&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;h2&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/h2&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;4&quot;&gt;3 - Elementor Plugin :&amp;nbsp;&lt;/font&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;div&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;Elementor is a live drag and drop&amp;nbsp;&lt;b&gt;page builder&lt;/b&gt;, with no limits of &lt;b&gt;design&lt;/b&gt;. A page builder that delivers &lt;b&gt;high-end page designs with extra plugins&lt;/b&gt; and advanced capabilities, never before seen on &lt;b&gt;WordPress&lt;/b&gt;&lt;/font&gt;&lt;font size=&quot;4&quot; style=&quot;font-family: arial;&quot;&gt;.&lt;/font&gt;&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: medium;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://wordpress.org/plugins/elementor/&quot; id=&quot;How to Create Website in 5 Minutes Wordpress Website Tutorial&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;How to Create Website in 5 Minutes Wordpress Website Tutorial&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;How to Create Website in 5 Minutes Wordpress Website Tutorial&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/8137022972769533532/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/05/create-wordpress-website-in-5-minutes.html#comment-form' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/8137022972769533532'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/8137022972769533532'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/05/create-wordpress-website-in-5-minutes.html' title='How to Create Website in 5 Minutes Wordpress Website Tutorial'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnM5duQExdnzO0zJ_D7FL5XOzevPzYKwsQmJLgka4dmQLDSo-IEazZZbvaKfvaFlIQSUkoTQ-x6MfSUC8DwWzdVXuzGn-YLvfWclIXt2AA1IWcSGLWHr-Rwhq5LJytmvP1eW_rPgllwNg/s72-w640-h360-c/create-free-wordpress-website-in-5-minutes.webp" height="72" width="72"/><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-531631214209741704</id><published>2020-05-11T01:58:00.021+05:00</published><updated>2020-06-12T11:44:21.276+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="free domain"/><category scheme="http://www.blogger.com/atom/ns#" term="free SSL"/><category scheme="http://www.blogger.com/atom/ns#" term="free web hosting"/><category scheme="http://www.blogger.com/atom/ns#" term="hosting"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><category scheme="http://www.blogger.com/atom/ns#" term="wordpress"/><category scheme="http://www.blogger.com/atom/ns#" term="wordpress hosting"/><title type='text'>Top 5 Free Hosting With Free Domain SSL &amp; Wordpress Hosting</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; border=&quot;0&quot; data-original-height=&quot;720&quot; data-original-width=&quot;1280&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtxdmWSTWoqAm74mkEYV711g_7dxxYJPwqIS2iKzNwU94890rMlOp7GX__bgKq7EPc7Qb5uNM-r5yrmHJ5tLNNbh2JMESORX3usjfZ0Z395DG47Gd5rjYxDn7_ePtVUqlu7LP0OL8SgZU/w640-h360/top-5-free-web-hosting-free-domain-ssl-for-lifetime.webp&quot; title=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;In this article,&amp;nbsp;I will tell the &lt;b&gt;Top 5 Best Free Hosting For Lifetime With Free Domain and Free SSL&lt;/b&gt;. All web Hosting provides &lt;b&gt;Free Wordpress Hosting.&lt;/b&gt; This is an Amazing Website that I share With you. If you Like My Article Please Follow me on my all Social Media. If You Want To Watch The Full Video Tutorial Click The Below Video And Watch.&amp;nbsp;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;


&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/OFVjzh8AfKQ&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;

  
&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: x-large;&quot;&gt;&lt;font size=&quot;6&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/h2&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: x-large;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;4&quot;&gt;1- Infinity Free&lt;/font&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;b&gt;InfinityFree&lt;/b&gt; is a hosting provider, which offers you &lt;b&gt;Free hosting&lt;/b&gt; services without any kind of fee. It is dedicated to tending your needs, providing &lt;b&gt;free hosting&lt;/b&gt; services for the last six years. Over 200,000 people are using it to host their Awesome website.&lt;/font&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;margin-left: 1em; margin-right: 1em; text-align: center;&quot;&gt;&lt;img alt=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; border=&quot;0&quot; data-original-height=&quot;622&quot; data-original-width=&quot;1346&quot; height=&quot;296&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_nyA3i81lI8BxvETyOEvKkLoVFDHCFU2dxsOc3RbboEj38xDFa1Rax8EhXIbCrHsJEeNFaakw_EB3x0m1QbAexm8OWaDAGH2chFaG1FdiYTjM6nsChX_xwwNUpCMBYK6CoRoka3huiM/w640-h296/Infinityfree.net.webp&quot; title=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div&gt;
&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to visit the Website of this free web hosting provider. So the visit website link is given below:-&amp;nbsp;&amp;nbsp;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;div&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: x-large;&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://infinityfree.net/&quot; id=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; border=&quot;0&quot; data-original-height=&quot;100&quot; data-original-width=&quot;600&quot; height=&quot;53&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7UskYds0px6lvMCzQT5PXzo4yXvb_43j81oUoH62ow8YQXFBN3rtqDYB6mI-5oZICaYJSaNqe38cXYne4OfaVGPq3kqRmsWSNlzg3MSkoe0qs13Nvd3R4LKg1nwtTZdxoD10sMb5o6og/w320-h53/visit-website-button.webp&quot; title=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;/span&gt;&lt;/h2&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: x-large;&quot;&gt;&lt;font size=&quot;6&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/h2&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: x-large;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;4&quot;&gt;2- ProFreeHost&lt;/font&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;b&gt;Profreehost&lt;/b&gt; is a &lt;b&gt;free hosting provider&lt;/b&gt; for a lifetime. &lt;b&gt;ProFreeHost&lt;/b&gt; is a &lt;b&gt;web hosting&lt;/b&gt; service that is aimed at providing free &lt;b&gt;servers &lt;/b&gt;and tools to its members for both &lt;b&gt;personal and commercial use.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/font&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; border=&quot;0&quot; data-original-height=&quot;622&quot; data-original-width=&quot;1348&quot; height=&quot;296&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKRxwDIGc_A7KxV2exYwcONvqNgfr8_BGcQL7O14wzUk-dPciDhk2H7QGRdrEH0MHOSMg_j4fYwzhWpLtd3R4FyD_EVhlJvr0VGOk9HdMChc7uRyzDR1b2kIjZVcKPSGtU3xSiTZzr9fE/w640-h296/profreehost.com.webp&quot; title=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/h2&gt;&lt;div&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to visit the Website of this free web hosting provider. So the visit website link is given below:-&amp;nbsp;&amp;nbsp;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;div&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: x-large;&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://profreehost.com/&quot; id=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; border=&quot;0&quot; data-original-height=&quot;100&quot; data-original-width=&quot;600&quot; height=&quot;53&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7UskYds0px6lvMCzQT5PXzo4yXvb_43j81oUoH62ow8YQXFBN3rtqDYB6mI-5oZICaYJSaNqe38cXYne4OfaVGPq3kqRmsWSNlzg3MSkoe0qs13Nvd3R4LKg1nwtTZdxoD10sMb5o6og/w320-h53/visit-website-button.webp&quot; title=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;/span&gt;&lt;/h2&gt;&lt;/div&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: x-large;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;4&quot;&gt;3- 000WebHost&lt;/font&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;b&gt;000WebHost&lt;/b&gt; Provides&amp;nbsp;Zero cost website hosting with &lt;b&gt;PHP, MySQL&lt;/b&gt;, cPanel &amp;amp; no ads!. Go with the unique high-quality web hosting, provided by the leaders of the industry at the lowest cost.&amp;nbsp;&lt;b&gt;Free hosting&lt;/b&gt; allows you to host a limited number of &lt;b&gt;websites&lt;/b&gt; and comes with disk space and bandwidth cap. This is put in place to make sure that everyone can have a fair chance at the service. Free hosting is the perfect place to learn. It allows you to experiment, code, and &lt;b&gt;build without an investment.&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; border=&quot;0&quot; data-original-height=&quot;624&quot; data-original-width=&quot;1344&quot; height=&quot;298&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiY975L_0zPwhqtpbcYvH2VDVBIIcMGvJ9tz-qUQJunv79kx0HDToBJCVk1TkS7n64bZqesg6ThW9aQTopBWny359L9sQVU1TyvhXFmSh2IO-ZM3BdWfv8WKK8AAGLG4CzUvnF6-qeFcQ/w640-h298/000webhost.com.webp&quot; title=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to visit the Website of this free web hosting provider. So the visit website link is given below:-&amp;nbsp;&amp;nbsp;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;div&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: x-large;&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://www.000webhost.com/&quot; id=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; border=&quot;0&quot; data-original-height=&quot;100&quot; data-original-width=&quot;600&quot; height=&quot;53&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7UskYds0px6lvMCzQT5PXzo4yXvb_43j81oUoH62ow8YQXFBN3rtqDYB6mI-5oZICaYJSaNqe38cXYne4OfaVGPq3kqRmsWSNlzg3MSkoe0qs13Nvd3R4LKg1nwtTZdxoD10sMb5o6og/w320-h53/visit-website-button.webp&quot; title=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;/span&gt;&lt;/h2&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: x-large;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;4&quot;&gt;4 - GoogiHost&lt;/font&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;b&gt;GoogiHost &lt;/b&gt;believes everyone deserves to have their own &lt;b&gt;stunning website.&lt;/b&gt; Googiehost offers you &lt;b&gt;Free hosting,&lt;/b&gt; Website Builder, Emails, Support, and more to kick start your website at no cost. GoogiHost&amp;nbsp;We provide 100% &lt;b&gt;Cloud-Based&lt;/b&gt; super fast cPanel &lt;b&gt;free web hosting service&lt;/b&gt; for everyone across the globe. All hosting accounts comprise of 1000 MB &lt;b&gt;Pure SSD Space.&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; border=&quot;0&quot; data-original-height=&quot;622&quot; data-original-width=&quot;1352&quot; height=&quot;296&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcfM2EYEMREPeYBq5J-NRZnqKiUsAVP8WnZI5yClDHKEJwS7CvwYm2Q5SiCID8-kGRGQ44CJQ48UQPjt6OZqbyFm1EjaIUCbnjwkMZjNeSfQGN4uFuYoyQgYyoHdDMgQB_CV77fwHTMLg/w640-h296/googiehost.com.webp&quot; title=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/h2&gt;&lt;div&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to visit the Website of this free web hosting provider. So the visit website link is given below:-&amp;nbsp;&amp;nbsp;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;div&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: x-large;&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://googiehost.com/&quot; id=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; border=&quot;0&quot; data-original-height=&quot;100&quot; data-original-width=&quot;600&quot; height=&quot;53&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7UskYds0px6lvMCzQT5PXzo4yXvb_43j81oUoH62ow8YQXFBN3rtqDYB6mI-5oZICaYJSaNqe38cXYne4OfaVGPq3kqRmsWSNlzg3MSkoe0qs13Nvd3R4LKg1nwtTZdxoD10sMb5o6og/w320-h53/visit-website-button.webp&quot; title=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;/span&gt;&lt;/h2&gt;&lt;/div&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: x-large;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;4&quot;&gt;5 - CloudAccess&lt;/font&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;The &lt;b&gt;CloudAccess.net&lt;/b&gt; Platform is built and optimized for Joomla Hosting and &lt;b&gt;WordPress Hosting&lt;/b&gt;. We offer support services like &lt;b&gt;free tutorials&lt;/b&gt; and an industry-leading Support Team ready to help clients develop their Joomla or &lt;b&gt;WordPress websites.&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; border=&quot;0&quot; data-original-height=&quot;620&quot; data-original-width=&quot;1346&quot; height=&quot;296&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2oHjIt0zB2sgWInQ2YTCLbOGyRMIHQJIw3FwOEAUit724AxEys-tjn-s8hbEH4YTfvSCE02ITFEhzbA_s6-mo0nlgjCiGuestSOn-_UgIYCa858jUVVjbrOWvyz3OHUJxgsPbYfVkbh0/w640-h296/cloudaccess.net.webp&quot; title=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;color: #333333; font-size: 21px; font-weight: normal;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to visit the Website of this free web hosting provider. So the visit website link is given below:-&amp;nbsp;&amp;nbsp;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;font-weight: normal;&quot;&gt;&lt;div style=&quot;color: black; font-size: medium; text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h2 style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: x-large;&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://www.cloudaccess.net/&quot; id=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; border=&quot;0&quot; data-original-height=&quot;100&quot; data-original-width=&quot;600&quot; height=&quot;53&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7UskYds0px6lvMCzQT5PXzo4yXvb_43j81oUoH62ow8YQXFBN3rtqDYB6mI-5oZICaYJSaNqe38cXYne4OfaVGPq3kqRmsWSNlzg3MSkoe0qs13Nvd3R4LKg1nwtTZdxoD10sMb5o6og/w320-h53/visit-website-button.webp&quot; title=&quot;Top 5 Free Hosting With Free Domain SSL &amp;amp; Wordpress Hosting&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;/span&gt;&lt;/h2&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;======================================================&lt;/font&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;IF you have any queries or Question About this Article Kindly comment down below...&lt;/font&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;Thank you.&lt;/font&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;======================================================&lt;/font&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: inherit; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;font-weight: bold; text-align: left;&quot;&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: inherit; outline: none; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;color: black;&quot;&gt;&lt;span style=&quot;color: #333333; font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;color: black;&quot;&gt;&lt;/span&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: inherit; outline: none; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;color: black;&quot;&gt;&lt;span style=&quot;color: #333333; font-family: arial, helvetica, sans-serif; font-size: large;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;NEED YOUR SUPPORT ON SOCIAL MEDIA:&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: inherit; outline: none; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;color: black;&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;&lt;/font&gt;&lt;div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;font-weight: normal;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: inherit; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: inherit; outline: none; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;color: black;&quot;&gt;&lt;span style=&quot;color: #333333;&quot;&gt;&lt;span class=&quot;style-scope yt-formatted-string&quot; dir=&quot;auto&quot; style=&quot;background-color: white; border: 0px; color: #030303; font-family: arial, helvetica, sans-serif; font-size: large; margin: 0px; padding: 0px; white-space: pre-wrap;&quot;&gt;▀▄▀▄▀▄ [ Follow Me on ] ▄▀▄▀▄▀&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: inherit; outline: none; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;color: black;&quot;&gt;&lt;span style=&quot;color: #333333;&quot;&gt;&lt;span class=&quot;style-scope yt-formatted-string&quot; dir=&quot;auto&quot; style=&quot;background-color: white; border: 0px; color: #030303; font-family: arial, helvetica, sans-serif; font-size: large; margin: 0px; padding: 0px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/font&gt;&lt;/div&gt;&lt;/div&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: inherit; outline: none; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;color: black;&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;&lt;/font&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;Instagram: &lt;a href=&quot;https://www.instagram.com/techmemorise/&quot; id=&quot;Techmemorise - Instagram&quot; name=&quot;Techmemorise - Instagram&quot; target=&quot;_blank&quot;&gt;https://www.instagram.com/techmemorise/&lt;/a&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: inherit; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-family: verdana; font-size: small;&quot;&gt;Twitter:&amp;nbsp;&lt;/span&gt;&lt;a href=&quot;https://www.twitter.com/techmemorise/&quot; id=&quot;Techmemorise - Twitter&quot; name=&quot;Techmemorise - Twitter&quot; style=&quot;font-family: verdana; font-size: small;&quot; target=&quot;_blank&quot;&gt;https://www.twitter.com/techmemorise/&lt;/a&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;Facebook: &lt;a href=&quot;https://www.facebook.com/techmemories/&quot; id=&quot;Techmemorise - Facebook&quot; name=&quot;Techmemorise - Facebook&quot; target=&quot;_blank&quot;&gt;https://www.facebook.com/techmemories/&lt;/a&gt;&lt;br /&gt;Youtube: &lt;a href=&quot;https://www.youtube.com/channel/UCrF1DtyIAwkLPLm6kKYlTQA?view_as=subscriber&quot; id=&quot;Techmemorise - Youtube&quot; name=&quot;Techmemorise - Youtube&quot; target=&quot;_blank&quot;&gt;https://www.youtube.com/c/techmemorise&lt;/a&gt;&lt;br /&gt;Blog: &lt;a href=&quot;https://techmemorise.blogspot.com/&quot; id=&quot;Techmemorise - Blogspot&quot; name=&quot;Techmemorise - Blogspot&quot; target=&quot;_blank&quot;&gt;https://techmemorise.blogspot.com/&lt;/a&gt;&lt;/font&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: inherit; outline: none; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;background: 0px 0px; border: 0px; clear: both; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif; font-size: x-small;&quot;&gt;&lt;span style=&quot;font-size: large; font-weight: 400;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;Hopefully, you would like this information, and if you have a problem in this article, query, and any question in your precious mind so kindly tell us me in the comment box and also contact me on my email and also support me on my social media. if you do not know my email you can visit my contact us page. For further details, time to time visit my youtube channel Tech Memorise.&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;background: 0px 0px; border: 0px; clear: both; color: black; font-size: 21px; font-weight: bold; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://www.youtube.com/channel/UCrF1DtyIAwkLPLm6kKYlTQA&quot; id=&quot;Techmemorise Youtube Channel&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Techmemorise Youtube Channel&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC3Teh6L-L3yeKscH2wPZarcmysSMxFf5j1k7wsdOY60WXzayG6GDhzxmAUMhJp7w_5u78DRHWqziorXDanF9LUyB_YleTP27zh6nQF5ix-n3kOPY-3az-DxNa1M97j88KORP_tkpYjnY/w320-h58/visit-channel-button.webp&quot; title=&quot;Techmemorise Youtube Channel&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;/h3&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;
&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/531631214209741704/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/05/top-free-web-hosting-domain-ssl-wordpress.html#comment-form' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/531631214209741704'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/531631214209741704'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/05/top-free-web-hosting-domain-ssl-wordpress.html' title='Top 5 Free Hosting With Free Domain SSL &amp; Wordpress Hosting'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtxdmWSTWoqAm74mkEYV711g_7dxxYJPwqIS2iKzNwU94890rMlOp7GX__bgKq7EPc7Qb5uNM-r5yrmHJ5tLNNbh2JMESORX3usjfZ0Z395DG47Gd5rjYxDn7_ePtVUqlu7LP0OL8SgZU/s72-w640-h360-c/top-5-free-web-hosting-free-domain-ssl-for-lifetime.webp" height="72" width="72"/><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-2652026624930462538</id><published>2020-05-11T01:10:00.011+05:00</published><updated>2020-06-12T12:00:35.754+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="Image Slider Carousel With Javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="Javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive Carousel"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive Image Slider"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive Image Slider with Buttons"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>Create Responsive Image Slider Carousel With Javascript</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;Create Responsive Image Slider Carousel With Javascript&quot; border=&quot;0&quot; data-original-height=&quot;720&quot; data-original-width=&quot;1280&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9nOdwDjbw1-exDptxe6jiBle5bqEtmuEAQWj2QThXn5Amv8lHpcJ1OrlWZ5noPJZHqshyphenhyphen0e0A0BHI3iZQt_-6iao_4pH8MaMziSgErTnsBQZ52_PF95lwQVypJ2TffaUpOCaaKgL28Ak/w640-h360/responsive-carousel-with-javascript.webp&quot; title=&quot;Create Responsive Image Slider Carousel With Javascript&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;
&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;In This Article, I Will Tell You the How to &lt;b&gt;Create a Responsive Image Slider Carousel With HTML, CSS, and Javascript&lt;/b&gt; This is the best way of creating a &lt;b&gt;Responsive Image Slider.&lt;br /&gt;&lt;/b&gt; &lt;br /&gt; This &lt;b&gt;Responsive Carousel&lt;/b&gt; Contains Sliding Content that plays an important role in &lt;b&gt;better user experience and user interface&lt;/b&gt; also. So that it is the main reason for publishing this article. I create a fully responsive Full-Width Sliding Content that works very better in any version of mobile.&lt;br /&gt; &lt;br /&gt;I will use pure HTML CSS Javascript for creating this&lt;b&gt; Responsive Image Slider.&lt;/b&gt; One of the major difficulties has happened when all of us are face while creating a &lt;b&gt;Responsive Image Slider&lt;/b&gt; Using HTML and CSS is that the responsiveness issue. I completely solve this problem with extra tips &amp;amp; techniques that are reasonable and unique.&lt;br /&gt; &lt;br /&gt; In this Sticky Header, I will use simple CSS properties for making it a Responsive Image Slider Carousel With Javascript. I know that many tutorials on youtube taught about already it but I want to teach with unique concepts. I will be showing and Explain to you how to Create a Responsive Image Slider Pure &lt;b&gt;HTML CSS &amp;amp; JS.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;It is a purely responsive image slider that made with JavaScript one of the main functionality in this &lt;b&gt;slider&lt;/b&gt; is that it is sliding images automatically and when mouse hover on its image sliding is paused and when the mouse leaves from it starts images sliding automatically. And I also provide the buttons on it. So that it is an &lt;b&gt;image slider that made with JavaScript with automatic control and Manual control.&lt;/b&gt; If you like my tutorial so please subscribe to my YouTube channel and also press the bell icon for more latest videos. Please put me on all social media because I am working very hard with day and night for making the video tutorials and article tutorials for you so please support me.&lt;/font&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt; &lt;br /&gt; So If you like my act of teaching and way of delivering a concept to you so please comment me and raise my confidence level. If You want to Download the full Source code of&lt;b&gt; Responsive Image Slider. &lt;/b&gt;So downloading link is given below. and If you want to watch the video tutorials click the below video and learn from this tutorial. &lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/font&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/7IBd7vI-jxY&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;


&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to download the complete source code of this development click the button below and download it:-&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;color: #333333;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;a href=&quot;https://drive.google.com/file/d/1P_e2AlKIo61OQsWROMCzIG5x8QinA-Oj/view&quot; id=&quot;Create Responsive Image Slider Carousel With Javascript&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Create Responsive Image Slider Carousel With Javascript&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;Create Responsive Image Slider Carousel With Javascript&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/2652026624930462538/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/05/image-slider-carousel-javascript.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/2652026624930462538'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/2652026624930462538'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/05/image-slider-carousel-javascript.html' title='Create Responsive Image Slider Carousel With Javascript'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9nOdwDjbw1-exDptxe6jiBle5bqEtmuEAQWj2QThXn5Amv8lHpcJ1OrlWZ5noPJZHqshyphenhyphen0e0A0BHI3iZQt_-6iao_4pH8MaMziSgErTnsBQZ52_PF95lwQVypJ2TffaUpOCaaKgL28Ak/s72-w640-h360-c/responsive-carousel-with-javascript.webp" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-8639439090547650443</id><published>2020-05-10T02:48:00.010+05:00</published><updated>2020-06-11T22:24:00.719+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="Javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive     Website With HTML CSS JS"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive Sticky Navbar with css"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive Website With HTML CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>How to Make Responsive Website Design Using HTML and CSS</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
  &lt;div style=&quot;text-align: left;&quot;&gt;
    &lt;div style=&quot;text-align: justify;&quot;&gt;
      &lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;img alt=&quot;How to Make Responsive Website Design Using HTML and CSS&quot; border=&quot;0&quot; data-original-height=&quot;720&quot; data-original-width=&quot;1280&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiSl8Sna1vHOE4iaXbGZYPQeH2xQrZbLiQKpgwKA8GZ7-bGQSMxLGVjF8To7tHUbk9zsFL6XnyvVUPO-yigvXL_0PhU4fS82KTsbgVtPHGs1olIcZl6sTTS27vmcCoSc6QifbUkiH-TFc/w640-h360/responsive-website-html-css.webp&quot; title=&quot;How to Make Responsive Website Design Using HTML and CSS&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;In This Article, I Will Tell You the How to &lt;b&gt;Make The Responsive Website Design Using HTML and CSS&lt;/b&gt; This is the best way of creating a &lt;b&gt;Responsive Website Design.&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;This &lt;b&gt;Responsive Website&lt;/b&gt; Contains &lt;b&gt;Sticky Navbar&lt;/b&gt; that plays an important role in better user experience so that it is the main reason for publishing this article. I create a fully responsive Full-Width &lt;b&gt;Sticky Navbar &lt;/b&gt;that works very better in any version of mobile.&lt;br /&gt;&lt;br /&gt;I will use pure HTML CSS for creating this &lt;b&gt;Responsive Website Design&lt;/b&gt;. One of the major difficulties all of us is face while creating a &lt;b&gt;Website Design&lt;/b&gt; Using &lt;b&gt;HTML and CSS&lt;/b&gt; is that the responsiveness issue. I completely solve this problem. with extra tips &amp;amp; techniques that are reasonable and unique.&lt;br /&gt;&lt;br /&gt;In this Sticky Header, I will use simple CSS properties for making it a &lt;b&gt;Responsive Sticky Navbar After Scrolling Using Pure CSS &amp;amp; JS.&lt;/b&gt; I know that many tutorials on youtube taught about already it but I want to teach with unique concepts and extra techniques. I will be showing and Explain to you how to Create a &lt;b&gt;Responsive Sticky Navbar&lt;/b&gt; Pure &lt;b&gt;HTML CSS &amp;amp; JS.&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;text-align: justify;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;I will use HTML CSS and a little bit JavaScript for creating this &lt;b&gt;website&lt;/b&gt; in this website I will create an awesome sticky navbar that sticks on top when scrolling the page I also create a little bit &lt;b&gt;about us, contact us,&lt;/b&gt; &lt;b&gt;portfolio&lt;/b&gt; and many other sections in a website. This Website Design is fully Responsive I Hope you will Like it. This is a Very Awesome Video. Please Like It and Share it With Others. &lt;br /&gt;&lt;br /&gt;So If you like my act of teaching and way of delivering a concept to you so please comment me and raise my confidence level. If You want to Download the full Source code of &lt;b&gt;Responsive Website Design&lt;/b&gt;. So downloading link is given below. and If you want to watch the video tutorials click the below video and learn from this tutorial. &lt;/font&gt;
    &lt;/div&gt;
    &lt;div style=&quot;text-align: left;&quot;&gt;
      &lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/font&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  

&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/7MIIxSGN4v8&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;


  &lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;arial&quot; size=&quot;4&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-size: 14px;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to download the complete source code of this development click the button below and download it:-&lt;/font&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
    &lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
      &lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;&lt;div style=&quot;color: #333333;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;a href=&quot;https://drive.google.com/file/d/1u6j9wmazaK-7xfH2YzVCkw7eB2O74Bwv/view&quot; id=&quot;How to Make Responsive Website Design Using HTML and CSS&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;How to Make Responsive Website Design Using HTML and CSS&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;How to Make Responsive Website Design Using HTML and CSS&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;div class=&quot;separator&quot; style=&quot;background: 0px 0px; border: 0px; clear: both; color: black; font-size: 21px; font-weight: bold; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;&quot;&gt;
    &lt;/div&gt;
  &lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/8639439090547650443/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/05/responsive-website-design-html-css.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/8639439090547650443'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/8639439090547650443'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/05/responsive-website-design-html-css.html' title='How to Make Responsive Website Design Using HTML and CSS'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiSl8Sna1vHOE4iaXbGZYPQeH2xQrZbLiQKpgwKA8GZ7-bGQSMxLGVjF8To7tHUbk9zsFL6XnyvVUPO-yigvXL_0PhU4fS82KTsbgVtPHGs1olIcZl6sTTS27vmcCoSc6QifbUkiH-TFc/s72-w640-h360-c/responsive-website-html-css.webp" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1208186832088695539.post-4914126431098914063</id><published>2020-05-08T22:16:00.010+05:00</published><updated>2020-06-11T22:31:31.465+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Animated Sticky Navigation bar"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML &amp; CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="Javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive Navigation Menu Bar"/><category scheme="http://www.blogger.com/atom/ns#" term="Responsive Navigation Menu Bar using HTML CSS &amp; Javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="web development"/><title type='text'>Animated Sticky Navigation bar on Scroll - Sticky Header on Scroll</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;img alt=&quot;Animated Sticky Navigation bar on Scroll - Sticky Header on Scroll&quot; border=&quot;0&quot; data-original-height=&quot;720&quot; data-original-width=&quot;1280&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4SgjSO1eNMNT0RW7SyY_sfgXZXKMB2qGqPAUv2Jltr7J09BZjKZnao8qxIsQj7gcVg7Mh-18mho36xog7SFdrLot91_I6HonLD-lp3EHi-yRn3KhcGlDB9QeXetF-SCXGZ6VzHsLzuqk/w640/animated-sticky-navigation-on-scroll-sticky-header-on-scroll.webp&quot; title=&quot;Animated Sticky Navigation bar on Scroll - Sticky Header on Scroll&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;In This Article, I Will Tell You the &lt;b&gt;Animated Sticky Navigation bar on Scroll&lt;/b&gt;. This is the best way of creating a &lt;b&gt;Responsive Sticky Header on Scroll.&lt;/b&gt;&lt;br /&gt; &lt;br /&gt; The Sticky Navbar on any website plays an important role in better user experience so that it is the main reason for publishing this article. I create a fully &lt;b&gt;responsive Full-Width Sticky Navbar&lt;/b&gt; that works very &lt;b&gt;better in any version of mobile.&lt;/b&gt;&lt;br /&gt; &lt;br /&gt;I will use pure &lt;b&gt;HTML CSS &lt;/b&gt;for creating this Responsive &lt;b&gt;Animated Sticky Navbar&lt;/b&gt;. One of the major difficulties all of us is face while creating a &lt;b&gt;Responsive Sticky Navbar&lt;/b&gt; is that the Navbar is not stick on top when scrolling the page I completely solve this problem. with extra tips &amp;amp; techniques that are reasonable and unique.&lt;br /&gt; &lt;br /&gt; In this Sticky Header, I will use simple CSS properties for making it a Responsive &lt;b&gt;Sticky Navbar After Scrolling Using Pure CSS &amp;amp; JS.&lt;/b&gt; I know that many tutorials on youtube taught about already it but I want to teach with unique concepts. I will be showing and Explain to you how to Create a Responsive &lt;b&gt;Sticky Navbar Pure HTML CSS &amp;amp; JS.&lt;br /&gt;&lt;/b&gt; &lt;br /&gt;We use pure &lt;b&gt;HTML, CSS &amp;amp; JS for making this Sticky Navbar. &lt;/b&gt;This &lt;b&gt;Navigation bar&lt;/b&gt; is fully Responsive I Hope you will Like it. This is a Very Awesome Video. Please Like It and Share it With Others.I use a little bit &lt;b&gt;JavaScript&lt;/b&gt; for making this responsive sticky navbar when it Scrolls its sticks on top of the page. And also when scrolling the page I ask you some &lt;b&gt;CSS classes&lt;/b&gt; to change its styling when the navbar is stick on top of the page I add the awesome drop shadow and also add padding from left and right in it that makes it cool and user friendly. If you do not now I provide source code at the bottom of this post so please download it and enjoy it also support me on all social media. &lt;br /&gt; &lt;br /&gt; So If you like my act of teaching and way of delivering a concept to you so please comment me and raise my confidence level. If You want to Download the full Source code of &lt;b&gt;Sticky Navbar&lt;/b&gt;. So downloading link is given below. and If you want to watch the video tutorials click the below video and learn from this tutorial.&lt;/font&gt;&lt;/div&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;span style=&quot;font-family: arial; font-size: medium;&quot;&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: arial, helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;/div&gt;
&lt;!----- Youtube Video Start ------&gt;
&lt;style&gt;
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
&lt;/style&gt;
&lt;div class=&quot;iframe-container&quot;&gt;
&lt;div style=&quot;text-align: justify;&quot;&gt;
&lt;iframe class=&quot;responsive-iframe&quot; src=&quot;https://www.youtube.com/embed/QTs57KA689E&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!----- Youtube Video End ------&gt;&lt;h3&gt;&lt;span style=&quot;background-color: yellow; font-family: arial; font-size: medium;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h3&gt;&lt;span style=&quot;background-color: yellow; font-family: arial; font-size: medium;&quot;&gt;&lt;font face=&quot;verdana&quot; size=&quot;2&quot;&gt;If you want to download the complete source code of this development click the button below and download it:-&lt;/font&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
&lt;/div&gt;
&lt;/h3&gt;
&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;div style=&quot;color: #333333; text-align: justify;&quot;&gt;
&lt;div style=&quot;color: #333333;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;
&lt;a href=&quot;https://drive.google.com/file/d/1A03_1CEoXj-pmzfC51S5kgYGBxAHBQYm/view&quot; id=&quot;Animated Sticky Navigation bar on Scroll - Sticky Header on Scroll&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Animated Sticky Navigation bar on Scroll - Sticky Header on Scroll&quot; border=&quot;0&quot; data-original-height=&quot;122&quot; data-original-width=&quot;669&quot; height=&quot;58&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDCOnIz8ZRlO0IL80HYR_XhkAhhKqazrbJUavQQOpGHqe6rbVWaWg7mZStUbhnaIKp1PJt_K1DW9l60F6iOEA_Si_4YrNQEtVJn5I0fj5ckHUzZxluH3YB7d1dtsCcrfpGtLuZ4DdzRs/w320-h58/download-button.webp&quot; title=&quot;Animated Sticky Navigation bar on Scroll - Sticky Header on Scroll&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; color: #333333; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/h3&gt;&lt;h3 style=&quot;background-position: 0px 0px; border: 0px; box-sizing: border-box; line-height: 1.1; margin: 10px 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;
&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;Copyright &amp;copy; Techmemorise. This Content is Created By Techmemorise.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='https://techmemorise.blogspot.com/feeds/4914126431098914063/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='https://techmemorise.blogspot.com/2020/05/animated-sticky-navbar-on-scroll.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/4914126431098914063'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1208186832088695539/posts/default/4914126431098914063'/><link rel='alternate' type='text/html' href='https://techmemorise.blogspot.com/2020/05/animated-sticky-navbar-on-scroll.html' title='Animated Sticky Navigation bar on Scroll - Sticky Header on Scroll'/><author><name>Muhammad Abubakar</name><uri>http://www.blogger.com/profile/16482935525702232436</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz8-Hlh02KlC5M_aOHn7KVE-r23O0Hul2utEVZO4Cn3AY750PCQdt9NZ_BhhMLI_F8lz7fFMn2VjmU4CvgmDE2qflBganxfzemNOXktrTJNq01tU3uVpnCft6q3xsrw/s113/TM+CHANNEL+LOGO.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4SgjSO1eNMNT0RW7SyY_sfgXZXKMB2qGqPAUv2Jltr7J09BZjKZnao8qxIsQj7gcVg7Mh-18mho36xog7SFdrLot91_I6HonLD-lp3EHi-yRn3KhcGlDB9QeXetF-SCXGZ6VzHsLzuqk/s72-w640-c/animated-sticky-navigation-on-scroll-sticky-header-on-scroll.webp" height="72" width="72"/><thr:total>0</thr:total></entry></feed>