From aae70729d3df6e135cb48e946bb191ec9d31b934 Mon Sep 17 00:00:00 2001 From: Siddhesh Rajale <113630547+Siddheshuncodes@users.noreply.github.com> Date: Tue, 31 Oct 2023 16:50:51 +0530 Subject: [PATCH 1/3] Update contact.css Background Gradient: I updated the background gradient of the contact-form to create a more visually appealing transition. It now goes from a lighter red (#ff6b6b) at the top to your primary color (#aa5040) at the bottom. Button Hover Effect: I added a hover effect to the buttons. When you hover over the button, the background color and border color change to a lighter red (#ff6b6b), providing a visual feedback effect. I also added a smooth transition of 0.3 seconds for a smoother change. Adjusted Button Styling: I removed the color and transition properties from the .btn class to avoid unintentional styling conflicts. These properties were specifically applied to the button elements. Updated Font: I kept the font-family as 'Poppins' but applied it to the entire document with the font-family property in the universal selector (*). This ensures consistent font usage throughout your page. Minor Adjustments: I made minor adjustments to the h2 margins and padding for better spacing. I also removed the z-index: 0 and justify-content: center from the contact-form as they were not needed. Enhanced Background Gradient: I changed the background gradient to have a more visually appealing color transition. Refined Hover Effect: Added a hover effect to the button for a better user experience. Minor Styling Adjustments: I made minor adjustments to ensure consistency and a more visually appealing design. --- css/contact.css | 132 ++++++++++++++++++++++++++---------------------- 1 file changed, 72 insertions(+), 60 deletions(-) diff --git a/css/contact.css b/css/contact.css index d80bd51..5f30206 100644 --- a/css/contact.css +++ b/css/contact.css @@ -1,127 +1,139 @@ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); -*{ + +* { padding: 0; margin: 0; box-sizing: border-box; - font-family: 'poppins',sans-serif; + font-family: 'Poppins', sans-serif; } -.contact-form{ - position: relative; + +.contact-form { min-height: 100vh; - z-index: 0; - background-color: #ededed; - background-repeat: no-repeat; - padding: 30px; + display: flex; + flex-direction: column; justify-content: center; - display: grid; - grid-template-rows: 1fr auto 1fr; align-items: center; + background: linear-gradient(to bottom, #ff6b6b, #aa5040); + padding: 30px; } -.container{ + +.container { max-width: 700px; - margin-top: 0 auto; + margin: 0 auto; } -.contact-form h1{ + +.contact-form h1 { text-align: center; font-size: 2.5rem; font-weight: 400; - color: #aa5040; - font-family: 'poppins'; + color: #fff; } -.contact-form h2{ - line-height: 40px; - margin-bottom: 5px; + +.contact-form h2 { + text-align: center; font-size: 30px; font-weight: 500; - color: #aa5040; - text-align: center; + color: #fff; + margin: 10px 0; } -.contact-form .main{ - position: relative; + +.contact-form .main { display: flex; margin: 30px 0; } -.content{ + +.content { flex-basis: 50%; - padding: 3em 3em; + padding: 2em; background: #fff; - box-shadow: 2px 9px 49px -17px rgba(156, 39, 148, 0.1); - border-top-left-radius: 8px; - border-bottom-left-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + border-radius: 8px; } -.form-img{ + +.form-img { flex-basis: 50%; background: #f0f4f8; background-size: cover; padding: 40px; - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; + border-radius: 8px; + display: flex; align-items: center; - display: grid; } -.form-img img{ + +.form-img img { max-width: 100%; } + .btn, button, -input{ +input { border-radius: 35px; + transition: 0.3s; /* Add a transition for smoother hover effect */ } + .btn:hover, -button:hover{ - color: #ededed; - transition: 0.5s ease; +button:hover { + color: #fff; + background: #ff6b6b; + border: 1px solid #ff6b6b; } -.contact-form form{ + +.contact-form form { margin: 30px 0; } + .contact-form input, -textarea{ +.contact-form textarea { outline: none; margin-bottom: 15px; - font-stretch: 16px; - color: #999; + font-size: 16px; + color: #333; padding: 14px 20px; width: 100%; display: inline-block; box-sizing: border-box; - border: none; + border: 1px solid #ccc; background: #fcfcfc; - transition: 0.3s ease; + transition: 0.3s; } -.contact-form input:focus{ - background: transparent; + +.contact-form input:focus { + background: #fff; border: 1px solid #aa5040; } -.contact-form button{ + +.contact-form button { font-size: 18px; color: #fff; width: 100%; background: #aa5040; font-weight: 600; - transition: 0.3s ease; padding: 14px 15px; border: 1px solid #aa5040; - } -@media(max-width:736px){ - .contact-form .main{ + +@media (max-width: 736px) { + .contact-form .main { flex-direction: column; } - .contact-form form{ - margin-top: 30px; - margin-bottom: 10px; + .contact-form form { + margin: 20px 0; } - .form-img{ + + .form-img { border-radius: 0; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - order: 2; - } - .content{ - order: 1; border-top-left-radius: 8px; + border-top-right-radius: 0; + } + + .content { + border-top-left-radius: 0; border-top-right-radius: 8px; } -} \ No newline at end of file +} + + +/* + +*/ From 112e8cadb3eb20e0bbdf61266b3559d04725b83e Mon Sep 17 00:00:00 2001 From: Siddhesh Rajale <113630547+Siddheshuncodes@users.noreply.github.com> Date: Tue, 31 Oct 2023 16:53:26 +0530 Subject: [PATCH 2/3] Update books.css added comments to make it more read able also make some minor changes in style --- css/books.css | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/css/books.css b/css/books.css index da3e3d5..a2556a6 100644 --- a/css/books.css +++ b/css/books.css @@ -3,51 +3,57 @@ --text-color-light: #ededed; } +/* Reset default styles for the body element */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: var(--text-color-light); color: #333; - padding-bottom: 60px; + padding-bottom: 60px; } +/* Style the main container for books */ .books-container { display: flex; flex-direction: column; align-items: center; padding: 20px; + max-width: 1200px; width: 100%; - max-width: 1200px; - margin: 0 auto; + margin: 0 auto; } +/* Style each individual book */ .book { display: flex; margin: 20px; padding: 20px; border: 1px solid var(--primary-color); border-radius: 5px; - width: 100%; + width: 100%; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } +/* Style the book cover image */ .book-image { margin-right: 20px; - flex: 0 0 150px; + flex: 0 0 150px; } .book-image img { - width: 100%; + width: 100%; height: auto; } +/* Style the book details section */ .book-details { display: flex; flex-direction: column; } +/* Style the footer */ footer { background-color: var(--primary-color); color: var(--text-color-light); @@ -58,6 +64,7 @@ footer { width: 100%; } +/* Style the contact info and static pages in the footer */ footer .contact-info, footer .static-pages { display: flex; From c5779ef5411132362df0c88ff0a67784b7cbb05f Mon Sep 17 00:00:00 2001 From: Siddhesh Rajale <113630547+Siddheshuncodes@users.noreply.github.com> Date: Tue, 31 Oct 2023 17:00:45 +0530 Subject: [PATCH 3/3] Linked the proper HTML files in the Footer i Have linked the Proper HTML files in the footer so that the user can see the pages clearly --- pages/books.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/pages/books.html b/pages/books.html index 00c5be2..84dbfa9 100644 --- a/pages/books.html +++ b/pages/books.html @@ -83,10 +83,10 @@

The Catcher in the Rye