Full responsive Educational website using HTML CSS & JavaScript.
This website will have 7 different pages. Like Home page, About section, team section, Portfolio section, Services section, Review Section, Contact Section. I have covered all the parts in this section.
We will create this fully responsive website design for the online course website. It is a Simple Education website with HTML& CSS and Some JavaScript.
Let's Talk about the interface that's in the above image.
You can see that there on the left side we have a beautiful logo with beautiful navigation links, a Search button with Get started button in which when you click on the get started button then you'll redirect to the login page. After filling out the login or register form it says 'great' and you'll redirect to again home page. I also apply an amazing hover effect on the navigation link as well as on the get started button.
After that, you can see it on the homepage's right side I have inserted a vector image and give a shadow that looks like going outwards. On the other hand left side, I have written a heading with some paragraphs and also created a watch now button where you can add your link to the video. when you click on navigation links then it took you to that section.
After that, The next section is the About section where I used the javascript function when you scroll down on the about section then it will come with an amazing transition looking like the door opens. Where on the left side I have inserted an image on the left side I have written some paragraphs about the section.
Forwarding Next, The portfolio section in which first of all I have inserted a background image called the parallax scrolling effect. At first, I have written a paragraph after that I created four boxes in which I have shown how much data increases every year.
Next, there is a Team section, in which I have created two cards and inserted an image on the circle and there was an amazing hover effect when you hover on the image and card also on the button(Follow+).
Forwarding Next, there is a service section in which I inserted a background image that is blurry after creating some boxes in which I have provided some courses. When you hover on the small boxes it will scale and gets a white shadow on them.
After that, there is a Review Section, in which we have created cards that inserted an image in the circle and there is a hover effect on the image when you hover your mouse then the image come outwards with some border-radius. Also written some paragraphs about what people say about us.
Forwarding next, There is a Contact section where I have created a background gradient color using CSS it's not an image it has been created by the CSS.
The next section is the Feedback section after that I have given a slider using javascript in which I have written some paragraphs and it goes right side continuously when you hover your mouse on that slider then it will stop that time. and when you remove your mouse then it will be started previously.
After that, there is a footer section in which I have created a Newsletter, Main Logo, some social media icons, given credits, and Addresses.
1st part:
2nd Part:
3rd Part:
This part is mainly broken into three parts which I have uploaded on Youtube, I show there how to create an online course website step by step.
Make Sure to Subscribe + Like the video.
If you're a beginner you can use this Awesome design in your college project and websites. I believe this UI design code will help you a lot with your project. Or if you have some knowledge about PHP then you can add the Login page means that when anyone login or registers then you will get the email of that guy. ALso, you can use it according to your requirements. Like as changing the images of the website or changing the text according to you.
If you like this program and this post then share with your friends that they will also learn from you. If you want the source code of this program. So, to get source codes you just scroll down and wait for 20 seconds to download the codes.
When you download the codes then the file is in the zip file. At first, you have to extract the file and then open that with your editor.
For any doubts and queries go through the contact page or comment below.
or Email-me: info.codicgyan@gmail.com
Coders Never Quit...
it's great
ReplyDeleteThank You!
Delete