diff --git a/.github/ISSUE_TEMPLATE/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 0000000..e0fc6bb --- /dev/null +++ b/.github/ISSUE_TEMPLATE/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,28 @@ +--- +name: Bug Report 🐞 +about: Reporting for any bug in the project. +title: '🐛: ' +labels: ["Up-for-Grabs ✋", "bug 🐛"] +assignees: + - '' + +--- + +:red_circle: **Title** : +:red_circle: **Bug** : +:red_circle: **Changes** : + + +### Screenshots 📷 + + + +*********************************************************************** +:white_check_mark: **To be Mentioned while taking the issue :** +- Full name : +- What is your participant role? (Mention the Open Source Program name. Eg. GSOC, GSSOC, SSOC, JWOC, etc.) + +*********************************************************************** +Happy Contributing 🚀 + +All the best. Enjoy your open source journey ahead. 😎 \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/ISSUE_TEMPLATE/enhancement-request.md b/.github/ISSUE_TEMPLATE/ISSUE_TEMPLATE/enhancement-request.md new file mode 100644 index 0000000..4c6e080 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/ISSUE_TEMPLATE/enhancement-request.md @@ -0,0 +1,28 @@ +--- +name: Enhancement Request 🧑‍💻 +about: Improving any styling or documentation of the project. +title: '🧑‍💻: ' +labels: ["Up-for-Grabs ✋", "enhancement 🧑‍💻"] +assignees: + - '' + +--- + +:red_circle: **Title** : +:red_circle: **Enhancement Aim** : +:red_circle: **Changes** : + + +### Screenshots 📷 + + + +*********************************************************************** +:white_check_mark: **To be Mentioned while taking the issue :** +- Full name : +- What is your participant role? (Mention the Open Source Program name. Eg. GSOC, GSSOC, SSOC, JWOC, etc.) + +*********************************************************************** +Happy Contributing 🚀 + +All the best. Enjoy your open source journey ahead. 😎 \ No newline at end of file diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..8674c4e --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,49 @@ +# Pull Request for Resum-Resume 💡 + + +## Issue Title : + +- **Info about the related issue (Aim of the project)** : +- **Name:** +- **GitHub ID:** +- **Email ID:** + + + + +Closes: #issue number that will be closed through this PR + +### Describe the add-ons or changes you've made 📃 + +Give a clear description of what have you added or modifications made + +## Type of change ☑️ + +What sort of change have you made: + +- [ ] Bug fix (non-breaking change which fixes an issue) +- [ ] New feature (non-breaking change which adds functionality) +- [ ] Code style update (formatting, local variables) +- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) +- [ ] This change requires a documentation update + +## How Has This Been Tested? ⚙️ + +Describe how it has been tested +Describe how have you verified the changes made + +## Checklist: ☑️ + +- [ ] My code follows the guidelines of this project. +- [ ] I have performed a self-review of my own code. +- [ ] I have commented my code, particularly wherever it was hard to understand. +- [ ] I have made corresponding changes to the documentation. +- [ ] My changes generate no new warnings. +- [ ] I have added things that prove my fix is effective or that my feature works. +- [ ] Any dependent changes have been merged and published in downstream modules. \ No newline at end of file diff --git a/.github/workflows/workflows/greetings.yml b/.github/workflows/workflows/greetings.yml new file mode 100644 index 0000000..e7b6968 --- /dev/null +++ b/.github/workflows/workflows/greetings.yml @@ -0,0 +1,15 @@ +name: Greetings 🐦‍🔥 +on: [pull_request_target, issues] + +jobs: + greeting: + runs-on: ubuntu-latest + permissions: + issues: write + pull-requests: write + steps: + - uses: actions/first-interaction@v1 + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + issue-message: "Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible." + pr-message: "Thank you, ${{ github.actor }}, for creating this pull request and contributing to Resum-Resume! 💗\n\n The maintainers will review this Pull Request and provide feedback as soon as possible! 😇\nWe appreciate your patience and contribution, Keep up the great work! 😀" \ No newline at end of file diff --git a/about.html b/about.html index 78c4fe4..9b71de5 100644 --- a/about.html +++ b/about.html @@ -5,6 +5,12 @@ About Us - LinkedIn Resume Builder + + + + + + @@ -257,14 +314,18 @@
@@ -301,13 +362,52 @@

Why Use LinkedIn Resume Builder?

-
+ + + + - + +
+
+

Contact US

+
+
+
+
+

Find Us

+

Email: example@gmail.com

+

Phone:1234567891

+
+
+
+
+
+ + +
+ +
+ + +
+ + +
+
+ + \ No newline at end of file diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..e2df1be Binary files /dev/null and b/images/logo.png differ diff --git a/images/logo.png.jpeg b/images/logo.png.jpeg new file mode 100644 index 0000000..3ef3f80 Binary files /dev/null and b/images/logo.png.jpeg differ diff --git a/index.html b/index.html index e740146..a16819b 100644 --- a/index.html +++ b/index.html @@ -1,56 +1,66 @@ - - - - - LinkedIn Resume Builder - Home - - - - - - - - - - + + + + - /* Footer Styles */ - .footer { - background-color: #aca7eb; - color: #ffffff; - padding: 40px 0; - } - - .footer-content { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; - } - - .footer-section { - flex: 1; - margin-bottom: 20px; - min-width: 200px; - } - - .text { - padding-right: 20px; - max-width: 50%; - } - - .image { - max-width: 50%; - } - - .image img { - width: 100%; - height: auto; - border-radius: 5px; - } - - .footer-section h3 { - font-size: 18px; - font-weight: 700; - margin-bottom: 15px; - color: #ffffff; - } - - .footer-section ul { - list-style-type: none; - padding: 0; - } - - .footer-section ul li { - margin-bottom: 8px; - - } - - .footer-section ul li a { - color: #e0e0e0; - text-decoration: none; - transition: color 0.3s ease; - } - - .footer-section ul li a:hover { - color: #ffffff; - text-decoration: underline; - } - - .social-icons { - margin-top: 15px; - } - - .social-icons a { - color: #ffffff; - font-size: 20px; - margin-right: 15px; - transition: color 0.3s ease; - } - - .social-icons a:hover { - color: #e0e0e0; - } - - .footer-bottom { - text-align: center; - padding-top: 20px; - margin-top: 20px; - border-top: 1px solid rgba(255, 255, 255, 0.1); - } - - - /* Responsive Styles */ - @media (max-width: 768px) { - .navbar { - flex-direction: column; - align-items: flex-start; - } - - .navbar ul { - flex-direction: column; - gap: 10px; - margin-top: 10px; - } - - .hero-content { - flex-direction: column; - } - - .hero-text { - padding-right: 0; - margin-bottom: 30px; - } - - .features-card, - .testimonial-card { - width: 100%; - } - - .footer-content { - flex-direction: column; - } - - .footer-section { - margin-bottom: 30px; - } - } - - /* Scroll to Top Button */ - .scroll-to-top { - position: fixed; - bottom: 30px; - right: 30px; - background-color: #0073b1; - color: white; - border: none; - border-radius: 50%; - width: 50px; - height: 50px; - display: none; - /* Hidden by default */ - align-items: center; - justify-content: center; - cursor: pointer; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); - transition: background-color 0.3s, transform 0.3s; - } - - .scroll-to-top:hover { - background-color: #005580; - transform: scale(1.1); - } - - .scroll-to-top i { - font-size: 20px; - } - - - - + + + + - + + +
+ + + + + + + + +
+ + + +
+
+ + + + + +
+
+

Build Your Resume in Seconds from LinkedIn

+

+ Easily generate a professional resume using your LinkedIn profile. + Select a template, enter your LinkedIn URL, and get a downloadable + resume in a few clicks. Save time and create a resume that stands out. +

+ Get Started +
+
+ + + + +
+

Our Features

+
+
+ Easy to Use +

Easy to Use

+

+ Create a professional resume effortlessly with our user-friendly + interface. +

+
+
+ Instant Resume +

Instant Resume

+

+ Generate a polished resume in seconds using your LinkedIn profile + data. +

+
+
+ Secure Data +

Secure Data

+

+ Your personal information is safe with our secure and encrypted + platform. +

+
+
+ 24/7 Support +

24/7 Support

+

+ Our dedicated support team is available round the clock to assist + you. +

+
+
+
+ + +
+

What Our Users Say

+ +
+
+ User 1 +

Jane Doe

+

+ "This resume builder transformed my LinkedIn profile into a + professional resume effortlessly. Highly recommended!" +

+
+
+ User 2 +

John Smith

+

+ "I was amazed at how quickly I was able to generate a resume. The + process was smooth and the result was perfect." +

+
+
+ User 3 +

Emily Johnson

+

+ "The platform is user-friendly and secure. I felt confident that my + data was protected. Great service!" +

+
+
+
+ + + + + + +
+ + + + + + + + + +
+ + + +
+ +
+ + + + + + +
+ +
+

Build Your Resume in Seconds from LinkedIn

+

Easily generate a professional resume using your LinkedIn profile. Select a template, enter your LinkedIn URL, + and get a downloadable resume in a few clicks. Save time and create a resume that stands out.

+ Get Started +
+ +
+ + + + +
+

Our Features

+
+
+ Easy to Use +

Easy to Use

+

Create a professional resume effortlessly with our user-friendly interface.

+
+
+ Instant Resume +

Instant Resume

+

Generate a polished resume in seconds using your LinkedIn profile data.

+
+
+ Secure Data +

Secure Data

+

Your personal information is safe with our secure and encrypted platform.

+
+
+ 24/7 Support +

24/7 Support

+

Our dedicated support team is available round the clock to assist you.

+
+
+
+ + +
+

What Our Users Say

+
+
+ User 1 +

Jane Doe

+

"This resume builder transformed my LinkedIn profile into a professional resume effortlessly. Highly recommended!"

+
+
+ User 2 +

John Smith

+

"I was amazed at how quickly I was able to generate a resume. The process was smooth and the result was perfect."

+
+
+ User 3 +

Emily Johnson

+

"The platform is user-friendly and secure. I felt confident that my data was protected. Great service!"

+
+
+
+ + + + @@ -635,6 +1030,11 @@ + + + + +
@@ -645,12 +1045,24 @@
+ +
diff --git a/login.html b/login.html index bb58989..bcc42ab 100644 --- a/login.html +++ b/login.html @@ -31,7 +31,7 @@ text-transform: capitalize; transition: .2s linear; } - +/* body { background-color: var(--off-white); margin: 0; @@ -40,8 +40,13 @@ justify-content: center; align-items: center; height: 100vh; - flex-direction: column; - } + flex-direction: column; */ + + body { + background-color: var(--off-white); /* Updated background color */ + margin: 0; + padding: 0; +} .container { background-color: white; @@ -50,7 +55,9 @@ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); max-width: 400px; width: 100%; + margin-top: 10px; text-align: center; + margin-bottom:40px; position: relative; /* Allow footer positioning */ } @@ -58,10 +65,9 @@ font-size: 2rem; /* Adjusted size for single line */ color: var(--deep-teal); font-weight: 600; - margin-bottom: 20px; + margin-bottom:20px; cursor: pointer; /* Change cursor to pointer */ } - .logo:hover { color: var(--soft-gold); /* Change color on hover */ } @@ -105,43 +111,187 @@ background-color: var(--deep-teal); } - .footer { - margin-top: 20px; /* Space between container and footer */ - text-align: center; - width: 100%; /* Ensure the footer takes full width */ - background-color: var(--deep-teal); /* Background color for the footer */ - color: white; /* Text color */ - padding: 13px 0; /* Padding for spacing */ - position: absolute; /* Positioning at the bottom */ - bottom: 0; /* Align to the bottom */ - } + /* footer section styles starts */ - .footer p { - color: #fff; /* Text color for footer */ - font-size: 14px; - padding-top: 1rem; - } + :root { + --deep-teal: #003d4d; + --off-white: #f8f9fa; + --dark-slate: #2f4f4f; + --soft-gold: #d9c79e; + } + .footer { + width: 100%; + background-color: var(--deep-teal); + color: white; + padding: 13px 0; + } + .footer-content { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + } + + .ul { + padding: 0; + list-style: none; + font-family: Verdana, Geneva, Tahoma, sans-serif; + text-align: center; + } + .footer-bottom { + text-align: center; + color: #fff; + font-size: 14px; + margin: 0px; + margin-top: 3px; + } + .footer-bottom p{ + margin:0 0 10px; + } - .footer a { - color: var(--soft-gold); - text-decoration: none; - } .footer a:hover { text-decoration: underline; } + /* mine */ + + .navbar { + background-color: var(--deep-teal); /* Updated navbar background color */ + padding: 31px 20px; /* Increased top and bottom padding */ + display: flex; + justify-content: space-between; + align-items: center; +} + +.navbar h1 { + color: var(--off-white); /* Changed to use off-white for better contrast */ + margin: 0; + font-size: 2rem; + margin-left: 15px; /* Adjust this value to move the logo right */ + transition: color 0.3s ease; /* Smooth transition for color change */ +} + +.navbar h1:hover { + color: var(--soft-gold); /* Color change on hover */ +} + +.navbar ul { + list-style-type: none; + margin: 0; + padding: 0; + display: flex; + gap: 20px; + margin-right: 30px; /* Adjust this value to move the items left */ +} + +.navbar ul li { + display: inline; +} + +.navbar ul li a { + color: var(--off-white); /* Updated navbar link color */ + text-decoration: none; + font-size: 18px; +} + +.navbar ul li a:hover { + color: var(--soft-gold); /* Updated hover color to Soft Gold */ + text-decoration: none; + transition: color 0.3s ease; +} + + .footer a { + color: var(--soft-gold); + text-decoration: none; + font-size: 16px; + } + + .social-icons { + display: flex; + justify-content: space-between; + margin-top: 20px; + } + .social-icons a:hover { + color: var(--light-grey); + transform: scale(1.2) translateY(-5px); + } + + .footer a:hover { + text-decoration: underline; + } + + .footer-section h3 { + margin-bottom: 14px; + font-size: 28px; + } + /* footer section style ends */ + + @media (max-width: 768px) { + .footer-section h3 { + font-size: 18px; + } + + .footer a { + font-size: 13px; + } + + .footer-section { + margin-bottom: 0; + gap:18px; + } + + .footer-bottom{ + font-size: 12px; + margin: 0px; + margin-top:8px; + } +} + +@media (max-width:450px){ + + .footer-section h3 { + font-size: 14px; + } + + .footer a { + font-size: 11px; + } + + .footer-section { + margin-bottom: 0; + + } + + .footer-bottom{ + font-size: 10px; + margin: 0px; + margin-top:5px; + } +} + + + +

Log In to Your Account

-
+ @@ -151,14 +301,47 @@

Log In to Your Account

- - - - - - + + - + diff --git a/script.js b/script.js index d70de2e..3e27193 100644 --- a/script.js +++ b/script.js @@ -83,6 +83,91 @@ document.addEventListener('DOMContentLoaded', () => { }); +// animations.js + +// Navbar Animation +gsap.from(".navbar", { + duration: 1, + y: -50, + opacity: 0, + ease: "power2.out", + delay: 0.5 +}); + +// Header Logo Animation +gsap.from(".logo", { + duration: 1, + opacity: 0, + x: -50, + ease: "power2.out", + delay: 0.7 +}); + +// Header Icons Animation +gsap.from(".icons a", { + duration: 1, + opacity: 0, + scale: 0, + stagger: 0.2, + ease: "back.out(1.7)", + delay: 0.9 +}); + +// Home Section Content Animation +gsap.from(".home .content h3", { + duration: 1, + opacity: 0, + y: 30, + ease: "power2.out", + delay: 1.2 +}); + +gsap.from(".home .content p", { + duration: 1, + opacity: 0, + y: 20, + ease: "power2.out", + delay: 1.4 +}); + +// Get Started Button Animation +gsap.from(".home .content .btn", { + duration: 1, + opacity: 0, + scale: 0, + ease: "back.out(1.7)", + delay: 1.6 +}); + +// Features Cards Animation +gsap.from(".features-card", { + scrollTrigger: { + trigger: ".features", + start: "top 75%", + toggleActions: "play none none reverse" + }, + duration: 1, + opacity: 0, + y: 20, + stagger: 0.2, + ease: "power2.out" +}); + +// Testimonials Animation +gsap.from(".testimonial-card", { + scrollTrigger: { + trigger: ".testimonials", + start: "top 75%", + toggleActions: "play none none reverse" + }, + duration: 1, + opacity: 0, + y: 20, + stagger: 0.2, + ease: "power2.out" +}); + + // var typed = new Typed('#newlogo', { // strings: ['EnhanCV.'], @@ -94,3 +179,4 @@ document.addEventListener('DOMContentLoaded', () => { + diff --git a/signup.html b/signup.html index da84df5..2d1c179 100644 --- a/signup.html +++ b/signup.html @@ -5,6 +5,27 @@ Sign Up - LinkedIn Resume Builder + + + + + + + + + + + + + + +

Create Your Account

-
+ + + @@ -149,55 +353,96 @@

Create Your Account

- + + + \ No newline at end of file diff --git a/style.css b/style.css index 000d08b..13c9a1a 100644 --- a/style.css +++ b/style.css @@ -97,6 +97,12 @@ header .logo { font-weight: bolder; } +.logo img{ + width: 100px; + padding: 0px 6px; + margin-right: -14px; +} + header .logo:hover { font-size: 3rem; color: var(--soft-gold); /* Soft Gold on hover for logo */ @@ -296,98 +302,102 @@ body { } } -/* Footer Styles */ +/* footer section styles */ + +:root { + --deep-teal: #003d4d; + --off-white: #f8f9fa; + --dark-slate: #2f4f4f; + --soft-gold: #d9c79e; +} .footer { - background-color: #242d45; - color: #fff; - padding: 40px 0; - font-size: 14px; + width: 100%; + background-color: var(--deep-teal); + color: white; + padding: 13px 0; } - - -.footer .footer-content { +.footer-content{ display: flex; - justify-content: space-between; flex-wrap: wrap; - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; -} + justify-content: space-around; -.footer .footer-section { - flex-basis: 23%; - margin-bottom: 20px; } + .footer .footer-section h3 { font-size: 18px; margin-bottom: 20px; font-weight: 600; color: #fff; - border-bottom: 2px solid #00c6ff; + border-bottom: 2px solid #3f10ea; padding-bottom: 10px; -} -.footer .footer-section ul { - list-style: none; - padding: 0; -} +.ul{ + padding: 0; + list-style: none; + font-family: Verdana, Geneva, Tahoma, sans-serif; + text-align: center; -.footer .footer-section ul li { - margin-bottom: 10px; } +.footer-bottom{ + text-align: center; + color: #fff; + font-size: 14px; + margin: 0px; + margin-top:10px; +} + .footer .footer-section ul li a { - color: #ccc; + color: #2f4f4f; text-decoration: none; transition: color 0.3s ease; } .footer .footer-section ul li a:hover { - color: #00c6ff; + color: #3f10ea; } .footer .footer-section .social-icons a { margin-right: 10px; - color: #ccc; + color: #2f4f4f; text-decoration: none; font-size: 18px; transition: color 0.3s ease; } .footer .footer-section .social-icons a:hover { - color: #00c6ff; + color: #3f10ea; } -.footer-bottom { - text-align: center; - padding: 20px 0; - background-color: #111; - font-size: 12px; +.footer a { + color: var(--soft-gold); + text-decoration: none; + font-size: 16px; } -.footer-bottom p { - margin: 0; - color: #ccc; -} + .social-icons{ + display: flex; + justify-content: space-between; + margin-top:20px + } + .social-icons a:hover{ + color: var(--light-grey); + transform: scale(1.2) translateY(-5px); + } -/* Responsive Footer */ -@media (max-width: 768px) { - .footer .footer-content { - flex-direction: column; - align-items: center; - } - .footer .footer-section { - flex-basis: 100%; - text-align: center; - } - .footer .footer-section ul li { - margin-bottom: 8px; - } +.footer a:hover { + text-decoration: underline; } +.footer-section h3{ + margin-bottom: 14px; + font-size: 28px; +} +/* footer section style ends */ + /* media queries */ @media (max-width: 991px) { @@ -456,6 +466,25 @@ body { .icons-container .icons span { font-size: 1.7rem; } + + .footer-section h3 { + font-size: 18px; + } + + .footer a { + font-size: 13px; + } + + .footer-section { + margin-bottom: 0; + gap:18px; + } + + .footer-bottom{ + font-size: 12px; + margin: 0px; + margin-top:8px; + } } @@ -469,6 +498,74 @@ body { font-size: 3rem; } + + .footer-section h3 { + font-size: 14px; + } + + .footer a { + font-size: 11px; + } + + .footer-section { + margin-bottom: 0; + + } + + .footer-bottom{ + font-size: 10px; + margin: 0px; + margin-top:5px; + } +} + + +.tab:hover { + background-color: rgba(0, 0, 0, 0.8); + color: blue; +} + + +.tab.active { + color: blue; + font-weight: bold; +} +.navbar { + position: relative; +} + +#tabs { + padding: 0; + margin: 0; + list-style: none; + display: flex; +} + +.tab { + position: relative; + cursor: pointer; + padding: 10px 20px; + font-size: 19px; + color: black; + + + border-radius: 4px; + transition: background-color 0.3s; +} + +.tab:hover { + background-color: black; +} + +.cursor { + position: absolute; + height: 24px; + width: 24px; + background: black; + border-radius: 50%; + pointer-events: none; + transition: all 0.3s ease; + opacity: 0; } /* Features section */ @@ -503,6 +600,7 @@ body { } .testimonial-card p{ color: grey; + } /* Footer section */ @@ -531,3 +629,5 @@ body { justify-content: center; align-content: center; } + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..33cfc2a --- /dev/null +++ b/styles.css @@ -0,0 +1,134 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + background-color: rgb(174, 168, 168); +} +.contact h2,h3{ + max-width: 50rem; + margin: 0 auto; + text-align: center; + margin-bottom: 2rem; +} +.top_header{ + background-color: #aca7eb; + height: 8rem +} +.top_header h2{ + font-size: 4rem; + font-weight: 490; + padding-top: 30px; +} + +.col{ + max-width: 50rem; + margin: 0 auto; + text-align: center; + margin-bottom: 1.5rem; +} +.contact_info{ + margin-top: 7rem; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 20px 30px; + width: 52vw; + height:22vh; + background-color:black; + border-radius: 0.8rem; + border: 0.5px solid white; + overflow: hidden; + cursor: pointer; +} +.contact_info>h2{ + margin-bottom: 20px; + color: white; +} +.contact_info>p{ + display: flex; + align-items: center; + gap:10px; + margin-block: 5px; + cursor:auto; + color: white; +} +.contact_info p>i{ + font-weight: 600; +} +.contact_info p>a{ + color:white; +} +.contact_info::after{ + content: ""; + position: absolute; + bottom: -100%; + background: #aca7eb; + width:100%; + height: 100%; + transition: 0.4s; + z-index: 1; +} +.contact_info:hover.contact_info::after{ + bottom: 0; +} +.contact_info:hover.contact_info h2, +.contact_info:hover.contact_info p, +.contact_info:hover.contact_info i, +.contact_info:hover.contact_info a{ + color: black; + z-index: 2; +} + +.contact form{ + max-width: 50rem; + margin: 0.9rem auto; + text-align: center; + margin-bottom: 2rem; +} +.contact form .input_box{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +.contact form .input_box input, +.contact form textarea{ + width: 100%; + padding: 1.2rem; + font-size: 1rem; + color: white; + background-color:black; + border-radius: .8rem; + margin: 0.5rem 0; +} +.contact form .input_box input{ + width: 49%; +} +.contact form textarea{ + resize: none; +} + +.contact form .btn{ + text-align: center; + margin-top: 2rem; + cursor: pointer; + width: 10rem; + border-radius: 25px; + border: 0.5px solid white; + height: 2.5rem; + font-size: 1.5rem; + font-weight: 400; + background-color: #111; + color: white; + transition: 0.5s; +} +.contact form .btn:hover{ + background-color:blue; + color: black; + border: black; + box-shadow: 0 0 5px 4px black; + font-weight: 600; +} \ No newline at end of file