From 471a1cd55522c4df1924fe4014d8004865497bc4 Mon Sep 17 00:00:00 2001 From: KOMAL Date: Sat, 20 Jan 2024 17:15:43 +0530 Subject: [PATCH] blog page ui change --- css/style.css | 4 +- index.html | 1391 +++++++++++++++++++---------------------- pages/blogs/blog.css | 224 ++++++- pages/blogs/blog.html | 86 ++- 4 files changed, 899 insertions(+), 806 deletions(-) diff --git a/css/style.css b/css/style.css index dbb31a8..69afa13 100644 --- a/css/style.css +++ b/css/style.css @@ -11,7 +11,7 @@ /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ body { - font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: "Quicksand", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; background-color: #fff; height: 50vh; position: relative; @@ -2788,7 +2788,7 @@ html .group-middle { margin-left: -16px; } -.unit-spacing-sm>* { +.unit-spacing-sm { margin-bottom: 10px; margin-left: 16px; } diff --git a/index.html b/index.html index 5faada3..d14941d 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,15 @@ FirstSpot - Your Dream Tours Await! - + - + - + @@ -18,8 +20,9 @@ - - + + @@ -27,840 +30,704 @@ - + - + -
- You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today. -
-
-
-
-
-
-

Loading...

-
+
+ You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today. +
+
+
+
+
+
+

Loading...

-
- -
- +
+
+ +
+ -
- -

+
  • + Home +
    • +
  • + Explore +
    • +
  • + Guide +
    • +
  • + Blogs +
    • + + +
    +
    - + +

    +
    + + + + + +
    +
    - - - -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    - Enjoy the Best Destinations with Our Travel Agency -
    -

    - Explore The World -

    +
    +
    +
    +
    +
    +
    +
    +
    + Enjoy the Best Destinations with Our Travel Agency +
    +

    + Explore The World +

    - - + +
    -
    -
    -
    -
    -
    -
    - A team of professional Travel Experts -
    -

    - Trust Our Experience -

    +
    +
    +
    +
    +
    +
    +
    + A team of professional Travel Experts +
    +

    + Trust Our Experience +

    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - Build your Next Holiday Trip with Us -
    -

    - Create Your Tour -

    - -
    - -
    -
    - -
    -
    -
    -
    -
    -
    -
      -
    • - -
      Balloon Flights
      -
      • -
    -
    -
    -
      -
    • - -
      Mountain Holiday
      -
      • -
    -
    -
    -
      -
    • - -
      Beach Holidays
      -
      • -
    -
    -
    -
    -
    - Other Tours - -
    -
    - -
    +
    +
    -
    -
    - -
    -
    -
    -

    Discover New Horizons

    - -
    - - - -
    -
    -

    - Wonder Tour is committed to bringing our clients the - best in value and quality travel arrangements. We are - passionate about travel and sharing the world's wonders - with you. -

    -
    - Get in TouchRead More -
    -
    -
    -

    - We are proud to offer excellent quality and value for - money in our tours, which give you the chance to - experience your chosen destination in an authentic and - exciting way. -

    -
    - Get in TouchRead More -
    -
    -
    -

    - Our mission is to provide the ultimate travel planning - experience while becoming a one-stop shop for every - travel service available in the industry. -

    -
    - Get in TouchRead More -
    -
    +
    +
    +
    + Build your Next Holiday Trip with Us +
    +

    + Create Your Tour +

    + + +
    -
    - -
    -
    -

    Our Services

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - Personalized Matching -
    -

    - Our unique matching system lets you find just the tour you want for your next holiday. -

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - Wide Variety of Tours -
    -

    - We offer a wide variety of personally picked tours with destinations all over the globe. -

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - Highly Qualified Service -
    -

    - Our tour managers are qualified, skilled, and friendly to bring you the best service. -

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - 24/7 Support -
    -

    - You can always get professional support from our staff 24/7 and ask any question you have. -

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - Handpicked Hotels -
    -

    - Our team offers only the best selection of affordable and luxury hotels to our clients. -

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - Best Price Guarantee -
    -

    - If you find tours that are cheaper than ours, we will compensate the difference. -

    -
    -
    -
    -
    -
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
      +
    • + +
      Balloon Flights
      +
      • +
    +
    +
    +
      +
    • + +
      Mountain Holiday
      +
      • +
    +
    +
    +
      +
    • + +
      Beach Holidays
      +
      • +
    +
    -
    - -
    -
    -

    - Hot Tours -

    -
    -
    - -
    -
    -
    - -
    -
    -
    -
    - Benidorm, Spain -
    -
    -
    - -
    - 4 customer reviews -
    -

    - Benidorm is a buzzing resort with a big reputation for - beach holidays. Situated in sunny Costa Blanca, the town - is one of the original Spanish beach resorts... -

    - Buy This Tour -
    - ₹12,000 -
    +
    +
    + Other Tours + +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +

    Discover New Horizons

    + +
    + + + +
    +
    +

    + Wonder Tour is committed to bringing our clients the + best in value and quality travel arrangements. We are + passionate about travel and sharing the world's wonders + with you. +

    +
    + Get in + TouchRead More
    -
    - -
    -
    - -
    -
    -
    - -
    -
    -
    -
    - Mauritius Island, Africa -
    -
    -
    - -
    - 5 customer reviews -
    -

    - The beautiful and inviting island nation of Mauritius is - an ideal ‘flop and drop’ at the conclusion of your - safari. Indulge in the delightful scents of the - fragrant... -

    - Buy This Tour -
    - ₹10,000 -
    +
    +

    + We are proud to offer excellent quality and value for + money in our tours, which give you the chance to + experience your chosen destination in an authentic and + exciting way. +

    +
    + Get in + TouchRead More
    -
    -
    -
    -
    -
    -
    - -
    -
    -

    - Our Team -

    -
    -
    - - -
    - -
    +
    +

    + Our mission is to provide the ultimate travel planning + experience while becoming a one-stop shop for every + travel service available in the industry. +

    +
    + Get in + TouchRead More +
    -
    - -
    -
    -
    -
    -

    - FirstSpotis Waiting for You! -

    -

    - Our agency offers travelers various tours and excursions with - destinations all over the world. Browse our website to find your - dream tour! -

    - Book a Tour Now +
    +
    -
    - -
    -
    -
    Gallery
    - -
    - -
    -
    - -
    -
    - +
    +
    + +
    +
    +

    Our Services

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Personalized Matching +
    +

    + Our unique matching system lets you find just the tour you want for your next holiday. +

    +
    - -
    -
    - -
    -
    - +
    +
    +
    +
    +
    +
    +
    +
    +
    + Wide Variety of Tours +
    +

    + We offer a wide variety of personally picked tours with destinations all over the globe. +

    +
    - -
    -
    - -
    -
    - +
    +
    +
    +
    +
    +
    +
    +
    +
    + Highly Qualified Service +
    +

    + Our tour managers are qualified, skilled, and friendly to bring you the best service. +

    +
    - -
    -
    - -
    -
    - +
    +
    +
    +
    +
    +
    +
    +
    +
    + 24/7 Support +
    +

    + You can always get professional support from our staff 24/7 and ask any question you have. +

    +
    - -
    -
    - +
    +
    +
    +
    +
    +
    +
    +
    +
    + Handpicked Hotels +
    +

    + Our team offers only the best selection of affordable and luxury hotels to our clients. +

    +
    -
    - +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Best Price Guarantee +
    +

    + If you find tours that are cheaper than ours, we will compensate the difference. +

    +
    - -
    -
    - +
    +
    +
    +
    + +
    +
    +

    + Hot Tours +

    +
    +
    + +
    +
    +
    + +
    +
    +
    +
    + Benidorm, Spain +
    +
    +
    + +
    + 4 customer reviews +
    +

    + Benidorm is a buzzing resort with a big reputation for + beach holidays. Situated in sunny Costa Blanca, the town + is one of the original Spanish beach resorts... +

    + Buy This Tour +
    + ₹12,000 +
    +
    +
    -
    - +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +
    + Mauritius Island, Africa +
    +
    +
    + +
    + 5 customer reviews +
    +

    + The beautiful and inviting island nation of Mauritius is + an ideal ‘flop and drop’ at the conclusion of your + safari. Indulge in the delightful scents of the + fragrant... +

    + Buy This Tour +
    + ₹10,000 +
    +
    +
    - -
    -
    - +
    +
    +
    +
    + +
    +
    +

    + Our Team +

    +
    +
    + +
    +
    -
    - - + + +
    + + + + + + \ No newline at end of file diff --git a/pages/blogs/blog.css b/pages/blogs/blog.css index be15e58..b62b550 100644 --- a/pages/blogs/blog.css +++ b/pages/blogs/blog.css @@ -1,21 +1,92 @@ - body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; - background-color: #4158D0; -background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); + background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); + height: 100%; + width: 100%; + margin-top: 50px; + +} + +.ie-panel { + display: none; + background: #212121; + padding: 10px 0; + box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3); + clear: both; + text-align: center; + position: relative; + z-index: 1; +} +html.ie-10 .ie-panel, +html.lt-ie-10 .ie-panel { + display: block; } -.head{ - background-color:#555; +.head { + color: white; text-align: center; - padding: 1em; + padding: 20px; + border-radius: 5px; + font-size: 30px; + +} + +.navbar-main { + height: 75px; + position: fixed; + width: 100%; + top: 0; + display: flex; + justify-content: center; + background-color: #002a43; + padding-top: 0px; +} + + + +.nav-links { + width: 40%; + height: 70px; + padding-right: 50px; + padding-left: 50px; +} + +.nav-menu { + display: flex; + height: 70px; + align-items: center; + justify-content: space-around; + text-decoration: none; + list-style-type: none; + margin-top: 4px; +} + +.nav-item:hover{ + font-size: larger; + transition: 0.5s; + transform: scale(1); + +} + +.hover-link { + font-size: larger; + color: white; + text-decoration: none; +} + +.contact-btn{ + background-color: #01b3a7; + padding: 8px 4px 8px 4px; + align-items: center; + border-radius: 5px; } -#blog-list { + +.blog-list { display: flex; flex-wrap: wrap; justify-content: space-around; @@ -53,28 +124,146 @@ background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); font-size: 0.9rem; color: #555; } - -#add-blog { +.box{ + padding:10px 0 50px 0; +} +.box h1{ + text-align: center; + padding: 20px; + color:#002a43; + text-shadow: 1px 1px 4px #035889; +} +.add-blog { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - padding: 20px; - margin: 20px; + padding: 20px 0 50px 0; + width: 50%; + margin: 0 510px 0 510px; + border-radius: 20px; + background: #ecf0f3; + box-shadow: 12px 12px 15px #cbced1, -8px -8px 10px white; } -#add-blog h2 { + + +.form { + display: flex; + justify-content: center; + width: 100%; +} + +.form-title { font-size: 1.5rem; - color: #333; + font-weight: bolder; margin-bottom: 15px; + text-align: center; + color:#002a43; + text-shadow: 1px 1px 4px #223846; } +/* #blog-form { display: grid; grid-gap: 15px; } +*/ -label { +.blog-form { + text-align: left; +} +label{ + font-weight: bolder; +} +label, +input { display: block; + width: 100%; + padding: 0; + border: none; + outline: none; + box-sizing: border-box; +} + +label { + margin-bottom: 4px; +} + +label:nth-of-type(2) { + margin-top: 12px; +} + +input::placeholder { + color: gray; +} + +input, +textarea { + background: #ecf0f3; + padding: 10px; + padding-left: 20px; + width: 500px; + font-size: 14px; + border-radius: 50px; + box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white; +} + +input { + height: 60px; +} +textarea{ + width: 470px; + border: none; +} +button { + color: white; + margin-top: 20px; + background-color: #555; + height: 40px; + width: 150px; + border-radius: 20px; + cursor: pointer; + font-weight: 900; + box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white; + box-sizing: border-box; + transition: 0.5s; +} + +button:hover { + box-shadow: none; + + background: #002a43; +} + +.copyright-footer{ + display: flex; + justify-content: center; + align-items: center; + padding: 18px; + +} + +.copyright-footer h3{ + font-size: 20px; + color: rgb(33, 28, 28); +} +.copyright-footer h3 a{ + + color: rgb(34, 91, 184); + text-decoration: none; +} +.copyright-footer h3 a:hover{ + + transition: 0.5s; + transform: scale(1.1); +} +/* +label { + display: flex; font-size: 1rem; margin-bottom: 5px; color: #555; @@ -85,7 +274,7 @@ textarea { width: 100%; padding: 10px; font-size: 1rem; - border: 1px solid #ddd; + border: 2px solid #ddd; border-radius: 4px; } @@ -99,7 +288,4 @@ button { font-size: 1rem; transition: background-color 0.3s; } - -button:hover { - background-color: #555; -} +*/ \ No newline at end of file diff --git a/pages/blogs/blog.html b/pages/blogs/blog.html index 2a5d30d..f711f08 100644 --- a/pages/blogs/blog.html +++ b/pages/blogs/blog.html @@ -1,40 +1,80 @@ + - Document + FirstSpot - Your Dream Tours Await! + - -
    -

    Travel Blog

    -
    - -
    - - -
    - -
    -

    Add a Blog

    -
    + + +
    + +
    + +
    + + + +
    + +
    +

    Travel Blog

    +
    + +
    + + +
    +
    +

    Hey! Want to share your travel experience. You can add your blogs here...

    +
    +
    Add a Blog
    +
    +
    - + - - + + - + - -
    - - - + + + + + +
    +

    Copyright © 2024 First Spot | All rights reserved | Developed By Jayesh Somani

    +
    + + + + \ No newline at end of file