Best Health Care Website Create Using HTML,CSS.
This is a health care website which I have designed and developed and this website is very beautiful in appearance.
Friends, I want to tell you that in this website I have also used a photo which I cannot put here, you can take that photo from my telegram or if you can replace the photo in it then you can do it. yes
I have given the complete file of this code together whose button is at the bottom and have also explained it step by step. If you want notes then you can join Telegram.
Health Care Web HTML Code
Document
Love You Health
Trust You Health to The Best Specialist
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nobis possimus, qui reiciendis
ducimus tempora.
180+
Years experience
10+
Expert Doctor
15k
Expert Doctor
350+
Expert Doctor
3 QUICK STEPS
Claime You Better Health
Choose Doctor
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia, molestias.
Follow The Insights
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia, molestias.
Become Healthier
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia, molestias.
Love You Health
Why People Choose HealthCare
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nobis possimus, qui reiciendis
ducimus tempora.
Love You Health
We Always Provide Best Service
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nobis possimus, qui reiciendis
ducimus tempora.
Our Specialist Doctor Team
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur praesentium accusantium
mollitia, non eum possimus?
Dentist
Dr.Name Example
Example Hospital
5.0
(1k+)
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, vitae?
Dentist
Dr.Name Example
Example Hospital
5.0
(1k+)
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, vitae?
Dentist
Dr.Name Example
Example Hospital
5.0
(1k+)
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, vitae?
It's Time To Change Your Life To Day
Lorem ipsum dolor, sit amet consectetur adipisicing elit. In unde exercitationem corporis et tempora deserunt
quia corrupti porro eveniet totam?
Health Care Web CSS Code
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
background-color: white;
padding: 10px 50px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.navbar .logo p {
font-size: 30px;
color: rgb(0, 174, 255);
font-weight: bold;
padding-left: 15px;
}
.navbar .item {
display: flex;
column-gap: 20px;
}
.navbar .item .home-btn {
color: rgb(0, 174, 255);
}
.navbar .item a {
text-decoration: none;
color: black;
cursor: pointer;
}
.navbar .btn input {
padding: 10px 30px;
cursor: pointer;
background-color: rgb(0, 174, 255);
border: none;
border-radius: 30px;
transition: all 0.4s ease-in-out;
}
.navbar .btn input:hover {
box-shadow: rgb(0, 174, 255) 0px 5px 15px;
}
.hero-sec {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 50px;
}
.hero-sec .main-sec {
display: flex;
align-items: center;
margin-top: 30px;
margin-bottom: 30px;
justify-content: center;
}
.hero-sec .main-sec .left {
display: flex;
flex-direction: column;
padding: 20px;
row-gap: 20px;
}
.hero-sec .main-sec .left .txt1 {
color: rgb(0, 174, 255);
}
.hero-sec .main-sec .left .txt2 {
font-size: 55px;
font-weight: 700;
}
.hero-sec .main-sec .left .txt3 {
color: darkgray;
}
.hero-sec .main-sec .left .btn {
display: flex;
column-gap: 20px;
}
.hero-sec .main-sec .left .btn .btn1 {
padding: 10px 30px;
cursor: pointer;
background-color: rgb(0, 174, 255);
border: none;
border-radius: 30px;
transition: all 0.4s ease-in-out;
}
.hero-sec .main-sec .left .btn .btn2 {
padding: 10px 30px;
border: none;
background: white;
font-weight: bold;
cursor: pointer;
border: none;
}
.hero-sec .main-sec .left .btn .btn1:hover {
box-shadow: rgb(0, 174, 255) 0px 5px 15px;
}
.hero-sec .main-sec .left .btn .more {
display: flex;
justify-content: center;
align-items: center;
}
.hero-sec .main-sec .left .btn .more i {
position: absolute;
margin-left: 90px;
}
.hero-sec .main-sec .right img {
border-radius: 10px;
}
.plat-sec {
background-image: linear-gradient(140deg, #00223e, #0b1a18);
height: 200px;
padding: 10px 50px;
display: flex;
justify-content: center;
align-items: center;
}
.plat-sec .main-box {
display: flex;
justify-content: center;
column-gap: 50px;
}
.plat-sec .main-box .box {
color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
row-gap: 10px;
background: white;
padding: 20px;
height: 100px;
width: 158px;
border-radius: 10px;
transition: all 0.4s ease-in-out;
}
.plat-sec .main-box .box:hover {
margin-top: -20px;
cursor: pointer;
}
.plat-sec .main-box .box .txt1 {
font-size: 40px;
font-weight: 600;
}
.health-sec {
height: auto;
margin-top: 30px;
margin-bottom: 30px;
padding: 10px 40px;
}
.health-sec .txt {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 10px;
}
.health-sec .txt .txt1 {
color: rgb(0, 174, 255);
}
.health-sec .txt .txt2 {
font-weight: 700;
font-size: 3rem;
}
.health-sec .main-box .box {
width: 350px;
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
row-gap: 15px;
}
.health-sec .main-box {
display: flex;
justify-content: center;
column-gap: 60px;
margin-top: 30px;
}
.health-sec .main-box .box i {
background: rgb(0, 174, 255);
color: rgb(237 237 237);
font-size: 3rem;
border-radius: 50%;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.health-sec .main-box .box .txt1 {
font-size: 30px;
font-weight: 600;
}
.health-sec .main-box .box .txt2 {
color: darkgray;
}
.hero-sec2 {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 50px;
}
.hero-sec2 .main-sec {
display: flex;
align-items: center;
margin-top: 30px;
margin-bottom: 30px;
justify-content: center;
}
.hero-sec2 .main-sec .right {
display: flex;
flex-direction: column;
row-gap: 20px;
padding: 20px;
}
.hero-sec2 .main-sec .right .txt1 {
color: rgb(0, 174, 255);
}
.hero-sec2 .main-sec .right .txt2 {
font-size: 55px;
font-weight: 700;
}
.hero-sec2 .main-sec .right .txt3 {
color: darkgray;
}
.hero-sec2 .main-sec .right .btn {
display: flex;
column-gap: 20px;
}
.hero-sec2 .main-sec .right .btn .btn1 {
padding: 10px 30px;
cursor: pointer;
background-color: rgb(0, 174, 255);
border: none;
border-radius: 30px;
transition: all 0.4s ease-in-out;
}
.hero-sec2 .main-sec .right .btn .btn2 {
padding: 10px 30px;
border: none;
background: white;
font-weight: bold;
cursor: pointer;
border: none;
}
.hero-sec2 .main-sec .right .btn .btn1:hover {
box-shadow: rgb(0, 174, 255) 0px 5px 15px;
}
.hero-sec2 .main-sec .right .btn .more {
display: flex;
justify-content: center;
align-items: center;
}
.hero-sec2 .main-sec .right .btn .more i {
position: absolute;
margin-left: 90px;
}
.hero-sec2 .main-sec .left img {
border-radius: 10px;
height: 417px;
width: 626px;
}
.team-sec {
height: auto;
padding: 10px 40px;
}
.team-sec .txt {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 10px;
}
.team-sec .txt .txt1 {
font-weight: 700;
font-size: 3rem;
}
.team-sec .txt .txt2 {
color: darkgray;
}
.team-sec .main-box {
display: flex;
justify-content: center;
column-gap: 20px;
margin-top: 30px;
}
.team-sec .main-box .box {
background: white;
width: 375px;
display: flex;
flex-direction: column;
padding: 15px;
border-radius: 10px;
row-gap: 15px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.team-sec .main-box .box .work{
position: absolute;
margin-top: 15.2%;
background-color: white;
width: 165px;
height: 45px;
display: flex;
align-items: center;
border-top-right-radius: 70px;
justify-content: center;
background-color: rgb(0, 174, 255);
font-size: 1.8rem;
}
.team-sec .main-box .box .name{
font-size: 2rem;
}
.team-sec .main-box .box .rat {
display: flex;
column-gap: 157px;
}
.team-sec .main-box .box .rat .star{
display: flex;
column-gap: 10px;
}
.team-sec .main-box .box .rat i{
color: #ff4700;
}
.team-sec .main-box .box button {
padding: 10px 30px;
cursor: pointer;
background-color: rgb(0, 174, 255);
border: none;
border-radius: 30px;
transition: all 0.4s ease-in-out;
width: fit-content;
}
.team-sec .main-box .box button:hover {
box-shadow: rgb(0, 174, 255) 0px 5px 15px;
}
.cnt-sec{
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
row-gap: 20px;
}
.cnt-sec .txt1{
font-weight: 700;
font-size: 3rem;
}
.cnt-sec .btn{
column-gap: 20px;
display: flex;
}
.cnt-sec .btn .btn1{
padding: 15px 35px;
border: none;
border-radius: 30px;
transition: all 0.4s ease-in-out;
cursor: pointer;
border: 2px solid rgb(0, 174, 255);
}
.cnt-sec .btn .btn2{
padding: 15px 35px;
border: none;
border-radius: 30px;
cursor: pointer;
transition: all 0.4s ease-in-out;
background-color: rgb(0, 174, 255);
}
.cnt-sec .btn .btn1:hover{
box-shadow: rgb(0, 174, 255) 0px 5px 15px;
}
.cnt-sec .btn .btn2:hover{
box-shadow: rgb(0, 174, 255) 0px 5px 15px;
}
.foot-sec {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 30px;
height: 300px;
background-color: black;
}
.foot-sec .main-box {
display: flex;
column-gap: 130px;
align-items: baseline;
justify-content: center;
}
.foot-sec .main-box .box1 h1 {
color: white;
}
.foot-sec .main-box .box1 .social {
display: flex;
column-gap: 20px;
}
.foot-sec .main-box .box1 i {
color: black;
font-size: 20px;
background: rgb(0, 174, 255);
cursor: pointer;
padding: 10px;
border-radius: 30px;
}
.foot-sec .main-box .box2 h1 {
color: white;
}
.foot-sec .main-box .box2 i {
color: white;
}
.foot-sec .main-box .box1 {
display: flex;
flex-direction: column;
row-gap: 24px;
justify-content: center;
align-items: center;
}
.foot-sec .main-box .box2 .btn {
display: flex;
flex-direction: column;
row-gap: 15px;
padding-top: 20px;
}
.foot-sec .main-box .box2 .btn a {
text-decoration: none;
color: rgb(141, 137, 137);
}
.foot-sec .main-box .box4 {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.foot-sec .main-box .box4 .add {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.foot-sec .main-box .box4 h1 {
color: white;
}
.foot-sec .main-box .box4 .add p {
color: rgb(141, 137, 137);
}
.foot-sec .copy {
margin-top: 57px;
/* background: red; */
width: 100%;
padding: 20px;
justify-content: center;
align-items: center;
display: flex;
margin-bottom: -30px;
}
.foot-sec .copy p{
color: white;
}
.foot-sec .copy p span{
color: rgb(0, 174, 255);
}
This is my codepen, from this you can also see live projects and also you can join me on codepen, there you will get to see different types of projects.
See the Pen Untitled by Developergtm (@developergtm) on CodePen.