Changes made in font style,size & alignment, Contact us area and prin…

…t button (#232)

<!-- ISSUE & PR TITLE SHOULD BE SAME-->
## Description
Changed the font style and size of the text above the cover image making
it more readable and visually appealing.
The contact area (textbox) was not fitting properly for the mobile users
which now well aligned and fitted.
The headings like(For best discounts..... , our pages, exclusive offer
etc.) are not well aligned.
The print button for the website is now looking better.


## Related Issues

None
#107 Closes

## Type of PR
- [Making the website more appealing by changing fonts and fixing
contact area and print button. ]

## Screenshots / videos (if applicable)
![Screenshot 2024-10-05
202518](https://github.com/user-attachments/assets/3e5a7914-12bf-4851-8ca0-8874c6e4f455)
![Screenshot 2024-10-05
202532](https://github.com/user-attachments/assets/d4a88df5-feb2-4851-9eb4-6ec9f2abcdc7)
![Screenshot 2024-10-05
202623](https://github.com/user-attachments/assets/8027ef71-9d3d-4bd1-939e-c1d06a5bf838)



## Checklist
<!-- [X] - put a cross/X inside [] to check the box -->
- [X] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [X] I have updated my branch and synced it with project `main` branch
before making this PR
- [X] I have performed a self-review of my code
- [X] I have tested the changes thoroughly before submitting this pull
request.
- [X] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [X] I have commented my code, particularly in hard-to-understand
areas.

Kindly assign it to me at level 2.

index.html

@@ -445,7 +445,7 @@
 
  <section class="intro_container">
  <h1 style="font-family: var(--ff-philosopher);color: brown;z-index: 99;">Welcome to Retro!</h1>
- <p style="font-family: var(--ff-poppins);z-index: 99;color: white;">Step back in time and experience the nostalgic charm of days gone by. 
+ <p style="font-family: cursive;z-index: 99;color: white;font-size: x-large;">Step back in time and experience the nostalgic charm of days gone by. 
  Immerse yourself in the world of vintage tech, classic designs, and timeless memories. 
  Get ready to embark on a journey through the ages, where innovation meets tradition, and the past inspires the future.</p>
  <button class="btn" id="openButton" style="z-index: 99;">Order Now</button>
@@ -709,7 +709,7 @@ <h2 class="accordion-header" id="headingSix">
  <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Free Delivery!</h4>
  <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Download the App now!</h2>
  <br>
- <p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">For best discounts and free delivery download the app now from your Google Play Store or App Store.</p>
+ <p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);text-align:left;">For best discounts and free delivery download the app now from your Google Play Store or App Store.</p>
  <a href="https://play.google.com/store/games?device=windows"><img src="./Images/get_it_on_google_play_store.png" class="app-download-img"
  alt="Get it on Google Play Store"></a>
  <a href="https://www.apple.com/in/app-store/"><img src="./Images/download-on-the-app-store.png" class="app-download-img"
@@ -721,15 +721,15 @@ <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Downlo
  <footer>
  <div class="foot-panel2" style="background-color:hsl(20, 43%, 93%);font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
  <ul>
- <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);">Our Pages</p>
+ <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);text-align: left;">Our Pages</p>
  <a href="#" style="color: black;">Home</a>
  <a href="Html-files/menu.html" style="color: black;">About</a>
  <a href="Html-files/services.html" style="color: black;">Services</a>
  <a href="Html-files/contact.html" style="color: black;">Contact us</a>
  <a href="Html-files/cart.html" style="color: black;">Cart</a>
  </ul>
  <ul>
- <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);"> Exclusive Offers</p>
+ <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher); text-align:left"> Exclusive Offers</p>
  <a href="#" style="color: black;">Retro Discounts</a>
  <a href="#" style="color: black;">Limited-Time Promotions</a>
  <a href="#" style="color: black;">Special Event Packages</a>
@@ -740,7 +740,7 @@ <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Downlo
 
  </ul>
  <ul>
- <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);">Payment Products</p>
+ <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);text-align:left">Payment Products</p>
  <a href="./Html-files/payment2.html" style="color: black;">Secure Checkout</a>
  <a href="./Html-files/payment2.html" style="color: black;">Credit/Debit Cards</a>
  <a href="./Html-files/payment2.html" style="color: black;">Online Payment</a>
@@ -754,7 +754,7 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);font-fami
 
  <textarea id="message" name="message" placeholder="Your Message" required></textarea>
 
- <button id="butt" type="submit" style="font-family: Garamond;">Send Message</button>
+ <button id="butt" type="submit" style="font-family: ui-serif;">Send Message</button>
  </form>
 
  </div>
@@ -790,7 +790,7 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
  </div>
  </div>
  </footer>
- <button onclick="window.print()">Print this page</button>
+ <button onclick="window.print()" style="font-family:Georgia; font-size:medium; line-height: inherit;border-radius:5px ;background-color: #f9e2c4;padding:5px 5px;">Print this page</button>
  </div>
 </body>
 <script>

style.css

@@ -1055,11 +1055,13 @@ padding-left:2px;
  margin: 5px;
  border-radius: 10px;
  border: none;
+ background-color: #f9e2c4;
 }
 
 #contactForm h3 {
  height: 30px;
  color: #141414;
+ font-size: calc(1.0rem + .6vw);
 }
 #contactForm textarea {
  height: 100px;
@@ -1074,4 +1076,5 @@ padding-left:2px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 5px;
-}
+ width: 60%;
+}