Posts

Showing posts from June, 2021

Project 5 - Customized Scroll Animation

  About -         In this Blog, We will be designing  Customized Scroll Animation .   I am implementing this using simple Html, CSS and JavaScript , we are not using any frameworks.  In this , I took some random content and images to display , You guys can take data you want and images and customize design patters, styles and color by making changes in Classes - img, body and box in style.css files. You can find the source code for this below and I have attached the video of the output for reference. For images you can refer to my previous blog - 'https://bondasanathkumar.blogspot.com/2021/06/project-1-displaying-cards.html'. index.html -  <!DOCTYPE   html > <html   lang = "en" >    <head>      <meta   charset = "UTF-8"   />      <meta   name = "viewport"   content = "width=device-width, initial-scale=1.0"   />  ...
Post a Comment
Read more

Project 4 - Responsive Hidden Search Widget

About:      In this Blog, We will be designing Responsive Hidden Search Widget.   I am implementing this using simple Html, CSS and JavaScript , we are not using any frameworks. This is simple search button which is responsive and having hidden search widget. You can find the source code for this below and I have attached the video of the output for reference. index.html -  <!DOCTYPE   html > <html   lang = "en" >    <head>      <meta   charset = "UTF-8"   />      <meta   name = "viewport"   content = "width=device-width, initial-scale=1.0"   />      <link   rel = "stylesheet"   href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"   integrity = "sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="   crossorigin = "anonymous" ...
Post a Comment
Read more

Project 3 - Customized Rotating Navigation

  About: In this Blog, We will be designing Customized Navigation.    I am implementing this using simple Html, CSS and JavaScript , we are not using any frameworks. for this, I took my Blog name and Blog description, and also I took image of StoneHenge. You guys can use your own data, colors, styles and content you want. You can find the source code for this below and I have attached the video of the output for reference. index.html -  <!DOCTYPE   html > <html   lang = "en" >    <head>      <meta   charset = "UTF-8"   />      <meta   name = "viewport"   content = "width=device-width, initial-scale=1.0"   />      <link   rel = "stylesheet"   href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"   integrity = "sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe...
Post a Comment
Read more

Project 2 - Progress Steps

  About:      In this Blog , I will be designing Progress Steps. I am implementing this using simple Html, CSS and JavaScript , we are not using any frameworks. For this, I am using three files here, You can find the source for this and for output , you can refer to the video below. Initially I took numbers to show progress steps and we can also use images for this, I will be showing the implementation with both ways. If you want to use images, you have to create Assests folder and can save images in this folder. Source Code: index.html - <!DOCTYPE   html > <html   lang = "en" >    <head>      <meta   charset = "UTF-8"   />      <meta   name = "viewport"   content = "width=device-width, initial-scale=1.0"   />      <link   rel = "stylesheet"   href = "style.css"   />      <title> Pro...
1 comment
Read more

Project 1 - Displaying Cards

Image
 About:     In this Blog , I will be designing responsive cards. I am implementing this using simple Html, Css and JavaScript , we are not using any frameworks. For this, I took 5 images of Seven Wonders in the world. I am using three files here, You can find the source for this and for output , you can refer to the video below. I am attaching images I used for your reference, You have to create a Assests folder and have to place these images in it. Index.html - <!DOCTYPE   html > <html   lang = "en" >    <head>      <meta   charset = "UTF-8"   />      <meta   name = "viewport"   content = "width=device-width, initial-scale=1.0"   />      <link   rel = "stylesheet"   href = "style.css"   />      <title> Expanding Cards </title>    </head>    <body...
1 comment
Read more