Complete Responsive Hospital Website Design [ HTML – CSS – JS – JQUERY – BOOTSTRAP ] Step By Step



how to make complete responsive hospital design website using html, css, javascript, jquery and bootstrap from scratch.
create an animated mobile first complete responsive hospital website design step by step.
simple responsive website design tutorial for beginners using html5 css3 javascript / few lines of jquery and simple bootstrap.

the main features of this website are:

✔ responsive header section with navbar / menu toggle effect
✔ responsive home section
✔ responsive about section
✔ responsive gallery / facility section with lightbox gallery / magnific popup effect.
✔ responsive review section
✔ responsive counter section
✔ responsive contact section
✔ responsive recent posts section
✔ responsive footer section.
✔ animation on scroll effect ( AOS Library )

* SOURCE CODE *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE:

download and edit svg ( home image ):

download the png ( about image ):

gallery ( facility and posts ) are from pixabay:

pic ( review image ) are from pexels:

bootstrap cdn link:

font awesome cdn link:

jquery cdn link:

magnific popup / lightbox gallery cdn link:

AOS cdn link:

AOS website link:

google fonts ” Roboto ” :

New To My Channel Subscribe Now And See More Stuff Like This:

timestamp:
0:00 demo
4:40 file structure
6:50 header / navbar section
15:07 home section
19:01 about section
22:56 facility section
28:19 review section
33:00 counter section
35:28 contact section
40:26 post section
44:17 footer section
47:53 Adding AOS / Animation On Scroll Effect
50:17 mobile first

#HospitalWebsite
#CompleteWebsite
#MobileFirst
#AnimatedWebsite
#BootstrapWebsite
#ResponsiveWebsite
#HTML5
#CSS3
#JQUERY
#JAVASCRIPT
#WebDesign
#WebDevelopment

40 comments

  1. Hey, it's not working.Can you help me?

    .button::before{
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(–black);
    z-index: -1;
    }

  2. sir please reply asap, sir home image 100% width m poore page pe show ho rhe h apke toh left m ho rhe thi aur stay safe wala text left m image k neeche show ho rha h chota sa same about image k sath bhi asa hi horha h

  3. Hey, i need these exact photos you've used in this landing page. Please upload them all to drive, i appreciate it 🙂

  4. Sir please help ! My image slider is not working..after opening images i am not to change or slide the image.

  5. menu bar(3 dots bar) not doing action of opening navigation bar when in narrow mobile view…please help

  6. how did that side scroll bar came? my website is not coming within a single webpage . I have to click on nav bar links

  7. Hello there man
    just wondering what is that UI tool that you are using?
    the one u keep switching back and look while doing css bit?
    suppose its called UI tool? haha.

  8. Description source codes html file is not working and the css fule and edit also not working only photos are showing and others text edits and file box,colors,links are also not working

Leave a comment

Your email address will not be published.