Skip to content

Commit

Permalink
Aligned the services page properly
Browse files Browse the repository at this point in the history
  • Loading branch information
@PradnyaGaitonde
PradnyaGaitonde committed Jul 29, 2024
1 parent 7a5ae41 commit a4fbae1
Showing 1 changed file with 138 additions and 13 deletions.
151 changes: 138 additions & 13 deletions dex.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,128 @@
background-color: #3fbcc0;
z-index: 9999;
}

.custom-button {
position: relative;
background-color: #3fbcc0a6;
color: white;
border: 2px solid #000;
border-radius: 10px;
overflow: hidden;
transition: color 0.3s ease;
z-index: 1;
padding: 10px 15px; /* Adjust padding to make the button bigger */
font-size: 14px;
margin-top: -10px;
}

.custom-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #55a5ea;
transition: width 0.3s ease;
z-index: -1;
}

.custom-button:hover {
color: #fff;
}

.custom-button:hover::before {
width: 100%;
}

.home__container {
display: flex;
justify-content: flex-end;
align-items: center;
}

.home__image {
width: 50%;
}

.home__data {
text-align: left;
flex: 1;
}


.about__container {
display: flex;
justify-content: space-between;
align-items: center;
}

.imt {
width: 40%;
}

.about__data {
text-align: left;
flex: 1; /* Allow text content to expand */
color: #fff; /* Set a default text color */
font-size: 16px; /* Set a default font size */
z-index: 1;
margin-left: 20px;
}

.security__container {
display: flex;
justify-content: space-between;
align-items: center;
}

.security__image {
width: 40%; /* Adjust image width as needed */
}

.security__data {
text-align: left;
flex: 1;
}



.services__data {
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
text-align: center; /* Center text */
}

.services__data .button-link {
margin: 20px auto 0; /* Center button and add spacing */
}

.app__container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px 0;
}

.app__data {
text-align: left;
flex-grow: 1; /* Allow the content to expand to fill available space */
}

.section__title-center {
text-align: center;
margin-right: 10px; /* Adjust the margin value as needed */
}

.imt {
width: 30%;
padding-right: 60px; /* Add padding to the right */
margin-top: 20px; /* Move the image down */
}


.contact__container {
display: flex;
justify-content: space-between;
Expand All @@ -77,7 +199,8 @@
}

.section__title-center {
padding-left: 10px;
position: relative;
right: 20px;
}

.contact__description {
Expand All @@ -87,8 +210,13 @@

.contact__map {
flex: 1;
max-width: 45%;
max-width: 70%;
margin-left: 10px;
margin-top: 20px;
}

.contact__map iframe {
width: 85%; /* Ensure iframe takes full width of its container */
}

.contact__address {
Expand Down Expand Up @@ -212,7 +340,7 @@
<li><a href="index.html#doctors"><i class="bi bi-person-circle"></i> Doctor</a></li>
<li><a href="index.html#contact"><i class="bi bi-telephone"></i>Contact us</a></li>

<a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a>
<a href="./Html-Files/Doctor Experience.html"><button class="custom-button">Find a Doctor</button></a>
</ul>
<div class="hamburger">
<div class="line"></div>
Expand Down Expand Up @@ -249,7 +377,7 @@ <h1 class="home__title">RAPIDOC|Delivery <br />Order Medicines</h1>
</p>

<a href="medicine.html" class="button">Get Started</a>
<img src="assets/img/rd.png" alt="home" class="imt"/>
<img src="assets/img/rd.png" alt="home" class="home__image" style="display: block;" />
</div>
</div>
</section>
Expand All @@ -259,8 +387,7 @@ <h1 class="home__title">RAPIDOC|Delivery <br />Order Medicines</h1>
<div class="about__container grid">
<div class="about__data">
<h2 class="section__title-center">
Find Out A Little More <br />
About Us
Find Out A Little More About Us
</h2>
<p class="about__description">
We are a company dedicated to the distribution of products by
Expand All @@ -277,8 +404,7 @@ <h2 class="section__title-center">
<div class="security__container grid">
<div class="security__data">
<h2 class="section__title-center">
Your Safety Is <br />
Important
Your Safety Is Important
</h2>
<p class="security__description">
When your order reaches you, we have the health safety protocols,
Expand All @@ -303,7 +429,7 @@ <h3 class="services__subtitle">Payment Done</h3>
<p class="services__description">
Pay with a Visa or PayPal card and without much ado.
</p>
<div>
<div class="button-container">
<a href="#" class="button button-link">Learn More</a>
</div>
</div>
Expand All @@ -314,7 +440,7 @@ <h3 class="services__subtitle">Find Your Product</h3>
<p class="services__description">
We offer sale of products through the Internet.
</p>
<div>
<div class="button-container">
<a href="#" class="button button-link">Learn More</a>
</div>
</div>
Expand All @@ -325,7 +451,7 @@ <h3 class="services__subtitle">Product Received</h3>
<p class="services__description">
In our app you can see the delay time of your order.
</p>
<div>
<div class="button-container">
<a href="#" class="button button-link">Learn More</a>
</div>
</div>
Expand All @@ -337,8 +463,7 @@ <h3 class="services__subtitle">Product Received</h3>
<div class="app__container grid">
<div class="app__data">
<h2 class="section__title-center">
Watch Your Delivery <br />
At Any Time
Watch Your Delivery At Any Time
</h2>
<p class="app__description">
With our app you can view the route of your order, from our local
Expand Down

0 comments on commit a4fbae1

Please sign in to comment.