diff --git a/img/about-img.png b/img/about-img.png new file mode 100644 index 0000000..0276265 Binary files /dev/null and b/img/about-img.png differ diff --git a/img/blog-1.jpg b/img/blog-1.jpg new file mode 100644 index 0000000..786b4f5 Binary files /dev/null and b/img/blog-1.jpg differ diff --git a/img/blog-2.jpg b/img/blog-2.jpg new file mode 100644 index 0000000..770aa02 Binary files /dev/null and b/img/blog-2.jpg differ diff --git a/img/blog-3.jpg b/img/blog-3.jpg new file mode 100644 index 0000000..089395c Binary files /dev/null and b/img/blog-3.jpg differ diff --git a/img/book-img.png b/img/book-img.png new file mode 100644 index 0000000..ae24112 Binary files /dev/null and b/img/book-img.png differ diff --git a/img/doc-1.jpg b/img/doc-1.jpg new file mode 100644 index 0000000..25d5daa Binary files /dev/null and b/img/doc-1.jpg differ diff --git a/img/doc-2.jpg b/img/doc-2.jpg new file mode 100644 index 0000000..6a9e3e7 Binary files /dev/null and b/img/doc-2.jpg differ diff --git a/img/doc-3.jpg b/img/doc-3.jpg new file mode 100644 index 0000000..0218330 Binary files /dev/null and b/img/doc-3.jpg differ diff --git a/img/doc-4.jpg b/img/doc-4.jpg new file mode 100644 index 0000000..cb1d176 Binary files /dev/null and b/img/doc-4.jpg differ diff --git a/img/doc-5.jpg b/img/doc-5.jpg new file mode 100644 index 0000000..2427a57 Binary files /dev/null and b/img/doc-5.jpg differ diff --git a/img/doc-6.jpg b/img/doc-6.jpg new file mode 100644 index 0000000..e272847 Binary files /dev/null and b/img/doc-6.jpg differ diff --git a/img/home-img.png b/img/home-img.png new file mode 100644 index 0000000..aca9ae1 Binary files /dev/null and b/img/home-img.png differ diff --git a/img/pic-1.jpg b/img/pic-1.jpg new file mode 100644 index 0000000..73cad85 Binary files /dev/null and b/img/pic-1.jpg differ diff --git a/img/pic-2.jpg b/img/pic-2.jpg new file mode 100644 index 0000000..3474634 Binary files /dev/null and b/img/pic-2.jpg differ diff --git a/img/pic-3.jpg b/img/pic-3.jpg new file mode 100644 index 0000000..7979017 Binary files /dev/null and b/img/pic-3.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..ace49c4 --- /dev/null +++ b/index.html @@ -0,0 +1,333 @@ + + + + + + + MedCare + + + + +
+ + + +
+
+
+ doctor caracter +
+
+

Stay safe, stay healthy

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque consequuntur dolorem atque molestias accusantium eius, facilis!

+ Contact us +
+
+
+
+ +

140+

+

doctors at work

+ +
+
+ +

1040+

+

satisfied patients

+ +
+
+ +

500+

+

bed facility

+ +
+
+ +

80+

+

available hospitals

+
+
+
+

our services

+
+
+ +

free checkups

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur porro et minus

+ learn more +
+
+ +

24/7 ambulance

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur porro et minus

+ learn more +
+
+ +

expert doctors

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur porro et minus

+ learn more +
+
+ +

medicines

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur porro et minus

+ learn more +
+
+ +

bed facility

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur porro et minus

+ learn more +
+
+ +

total care

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur porro et minus

+ learn more +
+
+
+
+

about us

+
+
+ doctors caracter +
+
+

we take care of your healthy life

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed voluptatum minima quidem, ipsam consectetur voluptatibus temporibus iste illo corporis eaque ullam vel illum? Enim itaque totam nemo eligendi autem. Libero!

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed voluptatum minima quidem, ipsam consectetur voluptatibus temporibus iste illo corporis eaque ullam vel illum? Enim itaque totam nemo eligendi autem. Libero!

+ Learn more +
+
+
+
+

our doctors

+
+
+ doctor +

john deo

+ expert doctor + +
+
+ doctor +

john deo

+ expert doctor + +
+
+ doctor +

john deo

+ expert doctor + +
+
+ doctor +

john deo

+ expert doctor + +
+
+ doctor +

john deo

+ expert doctor + +
+
+ doctor +

john deo

+ expert doctor + +
+
+
+
+

book now

+
+
+ doctor in a big cellphone +
+
+

book appointment

+ + + + + +
+
+
+
+

client's review

+
+
+ client +

john deo

+
+ + + + + +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odio consequatur! Itaque asperiores delectus nam explicabo et. Excepturi cupiditate dignissimos labore? Dolor at quia natus necessitatibus porro vel! Mollitia, in!

+
+
+ client +

john deo

+
+ + + + + +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odio consequatur! Itaque asperiores delectus nam explicabo et. Excepturi cupiditate dignissimos labore? Dolor at quia natus necessitatibus porro vel! Mollitia, in!

+
+
+ client +

john deo

+
+ + + + + +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odio consequatur! Itaque asperiores delectus nam explicabo et. Excepturi cupiditate dignissimos labore? Dolor at quia natus necessitatibus porro vel! Mollitia, in!

+
+
+
+
+

our blogs

+
+
+
+ medicinal treatment +
+
+
+ 1st may, 2024 + by admin +
+

blog title goes here

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid labore soluta corrupti.

+ learn more +
+
+
+
+ medicinal treatment +
+
+
+ 1st may, 2024 + by admin +
+

blog title goes here

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid labore soluta corrupti.

+ learn more +
+
+
+
+ medicinal treatment +
+
+
+ 1st may, 2024 + by admin +
+

blog title goes here

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid labore soluta corrupti.

+ learn more +
+
+
+ +
+
+
+
+

quick links

+ home + services + about + doctors + book + review + blogs +
+
+

our services

+ dental care + message therapy + cardioloty + diagnosis + ambulance service +
+
+

contact info

+ +123-786-8652 + +123-792-8082 + aaaaa@gmail.com + bbbbb@gmail.com + mumbai, india - 866 +
+
+

follow us

+ facebook + twitter + instagram + linkedin + pinterest +
+
created by maria eduarda de Sales | all rights reserved
+
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..dc9694f --- /dev/null +++ b/script.js @@ -0,0 +1,11 @@ +let menu = document.querySelector('#menu-btn'); +let navbar = document.querySelector('.navbar'); + +menu.onclick = () =>{ + menu.classList.toggle('fa-times'); + navbar.classList.toggle('active'); +} +window.onscroll = () =>{ + menu.classList.remove('fa-times'); + navbar.classList.remove('active'); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5a4cb47 --- /dev/null +++ b/style.css @@ -0,0 +1,487 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap'); + +:root{ + --green: #569a9e; + --black: #444; + --light-color: #777; + --box-shadow: .5rem .5rem 0 rgba(22, 160, 133, .2); + --text-shadow: .4rem .4rem 0 rgba(00, 0, 0, .2); + --border: .2rem solid var(--green); +} + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; + outline: none; + border: none; + text-transform: capitalize; /*usado para deixar sempre a primeira letra maiúscula de cada palavra*/ + transition: all .2s ease-out; + text-decoration: none; +} +section{ + padding: 2rem 9%; +} +section:nth-child(even){ + background: #f5f5f5; +} +.heading{ + text-align: center; + padding-bottom: 2rem; + text-shadow: var(--text-shadow); + text-transform: uppercase; + color: var(--black); + font-size: 5rem; + letter-spacing: .4rem; +} +.heading span{ + text-transform: uppercase; + color: var(--green); +} +html{ + font-size: 62.5%; + overflow-x: hidden; + scroll-padding-top: 7rem; + scroll-behavior: smooth; +} +.btn{ + margin-top: 1rem; + padding: .5rem; + padding-left: 1rem; + border: var(--border); + border-radius: .5rem; + display: inline-block; + box-shadow: var(--box-shadow); + color: var(--green); + cursor: pointer; + font-size: 1.7rem; +} +.btn span{ + padding: .7rem 1rem; + border-radius: .5rem; + background: var(--green); + color: #fff; + margin-left: .5rem; +} +.btn:hover{ + background: var(--green); + color: #fff; +} +.btn span:hover{ + background: #fff; + color: var(--green); + margin-left: 1rem; +} +.header{ + padding: 2rem 9%; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + box-shadow: 0 .5rem 1.5rem rgba(00, 0, 0, .1); + display: flex; + align-items: center; + justify-content: space-between; + background: #fff; +} +.header .logo{ + font-size: 2.5rem; + color: var(--black); +} +.header .logo i{ + color: var(--green); +} +.header .navbar a{ + font-size: 1.7rem; + color: var(--light-color); + margin-left: 2rem; +} +.header .navbar a:hover{ + color: var(--green); +} +#menu-btn{ + font-size: 2.5rem; + border-radius: .5rem; + background: #eee; + color: var(--green); + padding: 1rem 1.5rem; + cursor: pointer; + display: none; +} +.home{ + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 1.5rem; + padding-top: 10rem; +} +.home .image{ + flex: 1 1 40rem; +} +.home .image img{ + width: 100%; +} +.home .content{ + flex: 1 1 45rem; +} +.home .content h3{ + font-size: 4.5rem; + color: var(--black); + line-height: 1.8; + text-shadow: var(--text-shadow); +} +.home .content p{ + font-size: 1.7rem; + color: var(--light-color); + line-height: 1.8; + padding: 1rem 0; +} +.icons-container{ + display: grid; + gap: 2rem; + grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); + padding-top: 5rem; + padding-bottom: 5rem; +} +.icons-container .icons{ + border: var(--border); + box-shadow: var(--box-shadow); + border-radius: .5rem; + text-align: center; + padding: 2.5rem; +} +.icons-container .icons i{ + font-size: 4.5rem; + color: var(--green); + padding-bottom: .7rem; +} +.icons-container .icons h3{ + font-size: 4.5rem; + color: var(--black); + padding: .5rem 0; + text-shadow: var(--text-shadow); +} +.icons-container .icons p{ + font-size: 1.7rem; + color: var(--light-color); +} +.services .box-container{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr)); + gap: 2rem; +} +.services .box-container .box{ + background: #fff; + border-radius: .5rem; + box-shadow: var(--box-shadow); + border: var(--border); + padding: 2.5rem; +} +.services .box-container .box i{ + color: var(--green); + font-size: 5rem; +} +.services .box-container .box h3{ + color: var(--black); + font-size: 2.5rem; + padding: 1rem 0; +} +.services .box-container .box p{ + color: var(--light-color); + font-size: 1.4rem; + line-height: 2; +} +.about .row{ + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 2rem; +} +.about .row .image{ + flex: 1 1 45rem; +} +.about .row .image img{ + width: 100%; +} +.about .row .content{ + flex: 1 1 45rem; +} +.about .row .content h3{ + color: var(--black); + text-shadow: var(--text-shadow); + line-height: 1.8; + font-size: 4rem; +} +.about .row .content p{ + color: var(--light-color); + text-align: justify; + padding: 1rem 0; + font-size: 1.5rem; + line-height: 1.8; +} +.doctors .box-container{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr)); + gap: 2rem; +} +.doctors .box-container .box{ + text-align: center; + background: #fff; + border-radius: .5rem; + border: var(--border); + box-shadow: var(--box-shadow); + padding: 2rem; +} +.doctors .box-container .box img{ + height: 20rem; + border: var(--border); + border: var(--border); + margin-bottom: 1rem; + margin-top: 1rem; +} +.doctors .box-container .box h3{ + color: var(--black); + font-size: 2.5rem; +} +.doctors .box-container .box span{ + color: var(--green); + font-size: 1.5rem; +} +.doctors .box-container .box .share{ + padding-top: 2rem; +} +.doctors .box-container .box .share a{ + height: 5rem; + width: 5rem; + line-height: 4.5rem; + font-size: 2rem; + color: var(--green); + border-radius: .5rem; + border: var(--border); + margin: .3rem; +} +.doctors .box-container .box .share a:hover{ + background: var(--green); + color: #fff; + box-shadow: var(--box-shadow); +} +.book .row{ + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 2rem; +} +.book .row .image{ + flex: 1 1 45rem; +} +.book .row .image img{ + width: 100%; +} +.book .row form{ + flex: 1 1 45rem; + background: #fff; + border: var(--border); + box-shadow: var(--box-shadow); + text-align: center; + padding: 2rem; + border-radius: .5rem; +} +.book .row form h3{ + color: var(--black); + padding-bottom: 1rem; + font-size: 3rem; +} +.book .row form .box{ + width: 100%; + margin: .7rem 0; + border-radius: .5rem; + border: var(--border); + font-size: 1.6rem; + color: var(--black); + text-transform: none; + padding: 1rem; +} +.book .row form .btn{ + padding: 1rem 4rem; +} +.review .box-container{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr)); + gap: 2rem; +} +.review .box-container .box{ + border: var(--border); + box-shadow: var(--box-shadow); + border-radius: .5rem; + padding: 2.5rem; + background: var(--green); + text-align: center; + overflow: hidden; + z-index: 0; +} +.review .box-container .box img{ + height: 10rem; + width: 10rem; + border-radius: 50%; + object-fit: cover; + border: .5rem solid #fff; +} +.review .box-container .box h3{ + color: #fff; + font-size: 2.2rem; + padding: .5rem 0; +} +.review .box-container .box .stars i{ + color: #fff; + font-size: 1.5rem; +} +.review .box-container .box .text{ + color: #fff; + font-size: 1.6rem; + line-height: 1.8; + padding-top: 4rem; + text-align: justify; +} +.blogs .box-container{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); + gap: 2rem; +} +.blogs .box-container .box{ + border: var(--border); + box-shadow: var(--box-shadow); + border-radius: .5rem; + padding: 2rem; +} +.blogs .box-container .box .image{ + height: 20rem; + overflow: hidden; + border-radius: .5rem; +} +.blogs .box-container .box .image img{ + height: 100%; + width: 100%; + object-fit: cover; +} +.blogs .box-container .box:hover .image img{ + transform: scale(1.2); +} +.blogs .box-container .box .content{ + padding-top: 1rem; +} +.blogs .box-container .box .content .icon{ + padding: 1rem 0; + display: flex; + align-items: center; + justify-content: space-between; +} +.blogs .box-container .box .content .icon a{ + font-size: 1.4rem; + color: var(--light-color); +} +.blogs .box-container .box .content .icon a:hover{ + color: var(--green); +} +.blogs .box-container .box .content .icon a i{ + padding-right: .5rem; + color: var(--green); +} +.blogs .box-container .box .content h3{ + color: var(--black); + font-size: 3rem; +} +.blogs .box-container .box .content p{ + color: var(--light-color); + font-size: 1.5rem; + line-height: 1.8; + padding: 1rem 0; +} +.footer .box-container{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); + gap: 2rem; +} +.footer .box-container .box h3{ + font-size: 2.5rem; + color: var(--black); + padding: 1rem 0; +} +.footer .box-container .box a{ + display: block; + font-size: 1.5rem; + color: var(--light-color); + padding: 1rem 0; +} +.footer .box-container .box a i{ +padding-right: .5rem; +color: var(--green); +} +.footer .box-container .box a:hover i{ + padding-right: 2rem; +} +.credit{ + padding: 1rem; + padding-top: 2rem; + margin-top: 2rem; + font-size: 1.5rem; + display: flexbox; + text-align: center; + color: var(--light-color); + border-top: .1rem solid rgba(0, 0, 0, .1); + +} +.footer .credit span{ + color: var(--green); +} + + + +@media (max-width:991px){ + html{ + font-size: 55%; + } + .header{ + padding: 2rem; + } + section{ + padding: 2rem; + } +} + +@media (max-width:768px){ + #menu-btn{ + display: initial; + } + .header .navbar{ + position: absolute; + top: 115%; + right: 2rem; + border-radius: .5rem; + box-shadow: var(--box-shadow); + width: 30rem; + background: #fff; + border: var(--border); + transform: scale(0); + opacity: 0; + transform-origin: top right; + transition: none; + } + .header .navbar.active{ + transform: scale(1); + opacity: 1; + transition: .2s ease-out; + } + .header .navbar a{ + font-size: 2rem; + display: block; + margin: 2.5rem; + } +} + +@media (max-width:450px) { + html{ + font-size: 50%; + } +} \ No newline at end of file