diff --git a/.vscode/settings.json b/.vscode/settings.json index f673a71..2f83612 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5502 -} \ No newline at end of file + "liveServer.settings.port": 5503 +} diff --git a/Blog_page.html b/Blog_page.html index 713d11a..a84e5f3 100644 --- a/Blog_page.html +++ b/Blog_page.html @@ -1,113 +1,313 @@ - + Blog Section - - - + - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - + + + + + +
+
-

Design and create stunning visuals effortlessly!

+

Design and create stunning visuals effortlessly!

+
-

LOG IN

+

LOG IN

@@ -332,4 +335,4 @@

LOG IN

- \ No newline at end of file + diff --git a/logo4.png b/logo4.png new file mode 100644 index 0000000..bcd6c05 Binary files /dev/null and b/logo4.png differ diff --git a/privacy.html b/privacy.html index 043139e..67ce84a 100644 --- a/privacy.html +++ b/privacy.html @@ -301,120 +301,240 @@

Join Our Community

- - - - - - - - - - + + + + + + Enhanced Footer + + + + + + + +
+ + + + + + \ No newline at end of file diff --git a/repo_structure.txt b/repo_structure.txt index c3c6930..36e209d 100644 --- a/repo_structure.txt +++ b/repo_structure.txt @@ -1,4 +1,5 @@ ├── Blog_page.html +├── CODE_OF_CONDUCT.md ├── Contributing.md ├── Faq.html ├── LICENSE @@ -15,6 +16,7 @@ ├── hacktoberfest.png ├── index.html ├── login.html +├── logo4.png ├── privacy.html ├── repo_structure.txt ├── repreviewfix.html @@ -24,6 +26,9 @@ ├── review.html ├── signup.html ├── src/ +│ ├── Contributor.css +│ ├── Contributor.html +│ ├── Contributor.js │ ├── Scripts/ │ │ ├── BacktoTop.js │ │ ├── Canvas.js @@ -89,4 +94,6 @@ │ └── blog-p-6.jpg ├── testimonial.html ├── tutorial.html +├── visi.css +├── visi.js └── welcome.html \ No newline at end of file diff --git a/review.html b/review.html index cf25e3a..b27376a 100644 --- a/review.html +++ b/review.html @@ -21,8 +21,13 @@ margin: auto; color: black; } +*, *::before, *::after { + box-sizing: border-box; +} + body { font-family: "Open Sans", sans-serif; + overflow-x: hidden; } h2 { color: #000; @@ -45,6 +50,11 @@ right: 0; bottom: -20px; } +img, .container, section { + max-width: 100%; + width: 100%; +} + .carousel .carousel-item { color: #999; overflow: hidden; @@ -99,7 +109,7 @@ #BacktoTop { position: fixed; /* Stay in fixed position */ bottom: 50px; /* Positioned above the chatbot */ - right: 5px; /* Aligned to the right */ + right: 15px; /* Aligned to the right */ width: 55px; height: 55px; background-color: #007bff; /* Button background */ @@ -239,26 +249,7 @@
-
-
- -
-
- -
+

What our customers are saying

@@ -353,9 +344,9 @@

What our customers are saying

-
+

SERVICES LOVED THE MOST

-
+
@@ -384,7 +375,7 @@
Text
-
+
diff --git a/signup.html b/signup.html index 5e5c458..5f3050e 100644 --- a/signup.html +++ b/signup.html @@ -152,23 +152,9 @@ color: #302f2f; } } - - - - /* Circle styles */ - .circle { - height: 24px; - width: 24px; - border-radius: 50%; - background-color: black; - position: fixed; - top: 0; - left: 0; - pointer-events: none; - z-index: 99999999; - transition: transform 0.1s ease-out; - } + + @@ -334,7 +320,7 @@

CREATE YOUR ACCOUNT

src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/GitHub_Invertocat_Logo.svg/640px-GitHub_Invertocat_Logo.svg.png">
-

Already have an account? Log in

+

Already have an account?
Log in

diff --git a/src/Contributor.css b/src/Contributor.css new file mode 100644 index 0000000..f5234fc --- /dev/null +++ b/src/Contributor.css @@ -0,0 +1,567 @@ +{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + } + .container { + text-align: center; + background-color: #dbd0ff; + } + + .title { + display: inline-block; + font-size: 3em; + margin-bottom: 20px; + padding: 10px; + color: #fffdff; + text-shadow: 1px 1px 2px rgb(11, 11, 11), 0 0 1em rgba(27, 3, 239, 0.617), + 0 0 0.2em rgba(114, 125, 231, 0.623); + /* border-radius: 20px; */ + /* background-color: rgba(209, 209, 255, 0.8); */ + } + + .theme-switch::before { + content: ""; + position: absolute; + top: 3px; + left: 3px; + width: 24px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + transition: left 0.3s ease-in-out, background-image 0.3s ease-in-out; + background-image: url("../Assets/moon.png"); + } + + .theme-switch.dark-theme::before { + left: 33px; + background-image: url("../Assets/sun.png"); + } + + .contributors-grid { + + width: 100vw; + flex-wrap: wrap; + gap: 40px; + padding: 20px; + display: grid; + grid-template-columns: repeat(7, minmax(100px,5fr)); + } + + .contributor-card { + /* width: auto; + height: auto; */ + min-width: 200px; + min-height: 300px; + display: flex; + justify-content: center; + position: relative; + overflow: hidden; + max-width: calc(55% - 16px); + display: flex; + flex-direction: column; + align-items: center; + background-color: #b8d9ff; + border: 1px solid #ca74cf; + border-radius: 8px; + box-shadow: 0 0px 8px rgba(0, 0, 0, 1); + padding: 16px; + transition: transform 0.5s ease-in-out, box-shadow 0.3s ease; + text-decoration: none; + color: inherit; + /* margin-bottom: 16px; */ + word-wrap: wrap; + transition: transform 0.5s ease-in-out, box-shadow 0.3s ease; + + } + + #contributors { + perspective: 1000px; /* This adds depth for 3D transformations */ + } + + /* .contributor-card:hover { + transform: scale(1.02); + box-shadow: 1px 1px 23px rgba(14, 6, 14, 0.915); + border: none; + cursor: pointer; + transform: translateZ(50px); /* Moves the card forward in 3D space */ + + } + */ + .contributor-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(132deg, #76ABAE 50%, rgb(206, 206, 206) 51%); + /* background: linear-gradient(130deg, #3b89ff 50%, #eef6ff 50%); */ + transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; + transform: translate(-100%, -100%); + opacity: 0; + z-index: -1; + } + + .contributor-card:hover::before { + transform: translate(0, 0); + opacity: 1; + } + + .contributor-card img { + border-radius: 50%; + width: 100px; + height: 100px; + object-fit: cover; + margin-bottom: 10px; + transition: box-shadow 0.3s ease-in-out, border 0.1s ease-in-out; + } + + .contributor-card:hover img { + border: 2px solid rgb(255, 234, 0); + box-shadow: -1px 2px 27px rgb(0, 217, 255); + } + + /* + .contributor-card h2 { + margin: 0 0 10px; + } */ + /* + .contributor-card p { + } */ + + .contributor-card h2 { + color: #040404; + position: relative; + z-index: 1; + transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out; + } + + .contributor-card p { + font-size: 1.2em; + color: #040404; + position: relative; + z-index: 1; + transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out; + margin: 0 0 10px; + } + + .contributor-card:hover h2 { + text-shadow: 1px 1px 2px rgb(0, 108, 108), 0 0 0.2em rgb(0, 14, 108), + 0 0 0.8em rgb(0, 14, 108); + color: white; + } + + .contributor-card:hover p { + text-shadow: 1px 1px 2px rgba(4, 0, 127, 0.715), 0 0 0.2em rgb(5, 18, 168), + 0 0 0.3em rgb(134, 136, 250); + color: white; + + /* font-weight: 400; */ + } + + body { + background-color: #f8f9fa; + color: #212529; + } + + header { + height: 100px; + } + + .logo { + margin: 30px 0 0 0; + } + + footer { + background-color: #333; + color: white; + text-align: center; + padding: 20px 0; + margin-top: auto; + } + + .footer-container { + max-width: 800px; + margin: auto; + padding: 0 20px; + } + + /* .footer-links, + .footer-socials, + .footer-contact { + margin: 10px 0; + } + + .footer-links a, + .footer-socials a { + color: white; + text-decoration: none; + margin: 0 10px; + transition: color 0.3s; + } + + .footer-links a:hover, + .footer-socials a:hover { + color: #007bff; + } */ + + /* .footer-socials a { + font-size: 24px; + margin: 0 15px; + } */ + + .footer-contact a { + color: white; + } + + header { + height: 100px; + } + body { + min-height: 100vh; + max-width: 100vw; + } + .logo { + margin: 5px 0px 0px 0px; + } + + footer { + background: #333; + color: white; + text-align: center; + padding: 20px 0; + margin-top: auto; + } + + .footer-container { + max-width: 800px; + margin: auto; + padding: 0 20px; + } + + /* .footer-links, + .footer-socials { + margin: 10px 0; + } + + .footer-links a, + .footer-socials a { + color: white; + text-decoration: none; + margin: 0 10px; + transition: color 0.3s; + } + + .footer-links a:hover, + .footer-socials a:hover { + color: #007bff; + } + + .footer-contact { + margin: 10px 0; + } */ + + @media (max-width: 900px) { + header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 0.5rem; + /* Adjust padding to reduce overall height */ + } + + header nav { + flex-direction: column; + align-items: flex-start; + max-width: 100vw; + } + + header nav .hamburger { + display: block; + font-size: 28px; + cursor: pointer; + color: #fff; + padding: 1rem; /* Adjust padding for hamburger icon */ + position: absolute; + top: 0; + right: 1rem; /* Adjust right position as needed */ + } + + header nav ul { + flex-direction: column; + align-items: flex-start; + display: none; /* Hide the navbar items */ + max-height: 100vw; /* Full width for mobile view */ + position: absolute; + top: 100%; + right: 0; + background-color: #333; /* Background color for the floating menu */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a box shadow */ + padding: 1rem; /* Add padding */ + border-radius: 0 0 8px 8px; /* Rounded corners at the bottom */ + } + + header nav ul.show { + display: flex; /* Show the navbar items when the hamburger is clicked */ + align-items: flex-start; + } + + header nav ul li { + margin: 0.5rem 1rem; /* Adjust margin for vertical spacing */ + } + header nav ul li a:hover { + color: #00c6ff; + + border-bottom: 2px solid #00c6ff; + + /* color: #000; */ + /* border-radius: .75rem; Rounded corners for active link */ + } + } + + /* Styles for larger screens */ + @media (min-width: 901px) { + header { + height: auto; + } + header nav .hamburger { + display: none; + } + + header nav ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + } + + /* header nav ul li { + margin: 0 0.5rem; /* Reduce margin between items */ + } + */ header nav ul li a:hover { + background-color: #00c6ff; + color: #000; + border-radius: 0.75rem; /* Rounded corners for active link */ + } + + footer { + background-color: #1a1a1a; + color: white; + padding: 40px 0; + text-align: center; + } + + footer p { + margin: 10px 0; + } + + footer p a { + color: #00c6ff; + text-decoration: none; + } + + footer p a:hover { + text-decoration: underline; + } + + /* Footer Styles */ + footer { + background-color: #1a1a1a; + color: white; + padding: 40px 0; + text-align: center; + } + + footer p { + margin: 10px 0; + } + + footer p a { + color: #00c6ff; + text-decoration: none; + } + + footer p a:hover { + text-decoration: underline; + } + + footer { + background: #333; + color: white; + text-align: center; + padding: 20px 0; + margin-top: auto; + } + + .footer-container { + max-width: 800px; + margin: auto; + padding: 0 20px; + } + + /* .footer-links, + .footer-socials { + margin: 10px 0; + } + + .footer-links a, + .footer-socials a { + color: white; + text-decoration: none; + margin: 0 10px; + transition: color 0.3s; + } + + .footer-links a:hover, + .footer-socials a:hover { + color: #007bff; + } */ + + .footer-contact { + margin: 10px 0; + } + + + + + + html { + scroll-behavior: smooth; + max-width: 100vw; + max-height: 100vh; + } + + body { + background-color: #FBC1B7; + overflow-x: hidden; + margin: 0; + + + } + + header { + background-color: #1a1a1a; + padding: 0px 20px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + position: sticky; + top: 0; + z-index: 1000; + border-bottom: 3px solid #00c6ff; + display: flex; + justify-content: space-between; + align-items: center; + } + + header nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 1rem; + } + + header nav ul { + list-style: none; + display: flex; + gap: 30px; + } + + header nav ul li a { + color: #fff; + text-decoration: none; + font-weight: 600; + font-size: 18px; + transition: color 0.3s, border-bottom 0.3s; + background-color: rgb(72, 71, 71); + padding: 15px; + } + + header nav ul li a:hover { + background-color: #00c6ff; + color: #000; + border-radius: 0.75rem; + } + + @media (max-width: 900px) { + header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 1rem; + } + + header nav { + flex-direction: column; + align-items: flex-start; + width: 100%; + } + + header nav .hamburger { + display: block; + font-size: 28px; + cursor: pointer; + color: #fff; + padding: 1rem; + position: absolute; + top: 0; + right: 1rem; + } + + header nav ul { + flex-direction: column; + display: none; + width: 100%; + height: 100vh; + background-color: #333; + padding: 1rem; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 0 0 8px 8px; + } + + header nav ul.show { + display: flex; + } + } + + @media (min-width: 901px) { + header nav .hamburger { + display: none; + } + + header nav ul { + display: flex; + flex-direction: row; + align-items: center; + } + } + + header .logo h1 { + color: #fff; + font-weight: 700; + font-size: 28px; + margin: 0; + } + + +.homeBtn{ + text-decoration: none; + color: #000; + top: 20px; + left: 20px; + position: absolute; + background-color: #0e99ea; + width: 60px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 40px; + border: #000 2px solid; + } +.homeBtn:hover{ + background-color: #00c6ff; + color: #000; + border: #00c6ff 2px solid; +} \ No newline at end of file diff --git a/src/Contributor.html b/src/Contributor.html new file mode 100644 index 0000000..734e46d --- /dev/null +++ b/src/Contributor.html @@ -0,0 +1,40 @@ + + + + + + + + + + + Canvas-Editor + + + + + + + + + + + + + + + + +
+

Our Contributors

+
+
+ + + + + \ No newline at end of file diff --git a/src/Contributor.js b/src/Contributor.js new file mode 100644 index 0000000..7ef7b84 --- /dev/null +++ b/src/Contributor.js @@ -0,0 +1,52 @@ +document.addEventListener("DOMContentLoaded", () => { + const contributorsContainer = document.getElementById("contributors"); + + async function fetchContributors() { + let contributors = []; + let page = 1; + let perPage = 100; // Max per page is 100 + let moreContributors = true; + + while (moreContributors) { + try { + const response = await fetch( + `https://api.github.com/repos/vishanurag/Canvas-Editor/contributors?page=${page}&per_page=${perPage}` + ); + const data = await response.json(); + + // If no more contributors, stop fetching + if (data.length === 0) { + moreContributors = false; + } else { + contributors = contributors.concat(data); + page++; + } + } catch (error) { + console.error("Error fetching contributors:", error); + break; // Exit loop if there's an error + } + } + + displayContributors(contributors); + } + + function displayContributors(contributors) { + contributorsContainer.innerHTML = ""; + contributors.forEach((contributor) => { + const contributorCard = document.createElement("div"); + contributorCard.className = "contributor-card"; + + contributorCard.innerHTML = ` + + ${contributor.login} + +

${contributor.login}

+

Contributions: ${contributor.contributions}

+ `; + + contributorsContainer.appendChild(contributorCard); + }); + } + + fetchContributors(); + }); \ No newline at end of file diff --git a/src/Styles/Style.css b/src/Styles/Style.css index 5ff10fc..48e2d2d 100644 --- a/src/Styles/Style.css +++ b/src/Styles/Style.css @@ -11,34 +11,39 @@ background: linear-gradient(135deg,#cf9aff,#95c0ff); color: #fff; padding-top: 5%; - padding-left: 9%; + /* padding-left: 9%; */ padding-bottom: 0; } .container h4{ display: flex; align-items: center; - font-size: 60px; + justify-content: center; + font-size: 40px; font-weight: 600; - color: white; } .container h4 span{ display: flex; align-items: center; - font-size: 60px; + justify-content: center; + font-size: 40px; font-weight: 600; color: #571094; } -.container button{ +.col-md-8 button{ display: flex; align-items: center; + justify-content: center; background: linear-gradient(#9418fd,#571094); color: #fff; - font-size: 18px; + font-size: 16px; outline: 0; border: 0; - border-radius: 40px; + border-radius: 12px; padding: 15px 25px; margin: 30px 0 20px; + width: 80%; + /* border-radius: 40px; */ + padding: 5px 15px; cursor: pointer; } @@ -53,11 +58,13 @@ body { } + /* button styles 1 */ .wrapper{ display: flex; /* background-color: #72abffe0; */ min-height: 5%; + /* justify-content: center; align-items: center; */ } @@ -71,24 +78,24 @@ body { display: inline-block; padding: 15px 20px; /* text-transform: uppercase; */ - letter-spacing: 4px; + border-radius: 12px; + letter-spacing: 2px; background-color: black; border: none; outline: none; - color: #03e9f4; + color: #F9E400; font-size: 1rem; - font-weight: bold; transition: .5s; overflow: hidden; margin-right: 30px; } .wrapper button:hover{ - background-color: #03e9f4; + background-color: #7C00FE; color: #050801; - box-shadow: 0 0 5px #03e9f4, - 0 0 25px #03e9f4, - 0 0 50px #03e9f4, - 0 0 200px #03e9f4; + box-shadow: 0 0 5px #F9E400, + 0 0 25px #F9E400, + 0 0 50px #F9E400, + 0 0 200px #F9E400; -webkit-box-reflect: below 1px linear-gradient(transparent, #0005); } .wrapper button:first-child{ @@ -106,7 +113,7 @@ body { left: 0; width: 100%; height: 2px; - background: linear-gradient(90deg, transparent, #03e9f4); + background: linear-gradient(90deg, transparent, #F9E400); animation: animate1 1s infinite; animation-delay: 0s; } @@ -123,7 +130,7 @@ body { right: 0; width: 2px; height: 100%; - background: linear-gradient(180deg, transparent, #03e9f4); + background: linear-gradient(180deg, transparent, #F9E400); animation: animate2 1s infinite; animation-delay: .25s; } @@ -140,7 +147,7 @@ body { right: 0; width: 100%; height: 2px; - background: linear-gradient(270deg, transparent, #03e9f4); + background: linear-gradient(270deg, transparent, #F9E400); animation: animate3 1s infinite; animation-delay: .5s; } @@ -157,7 +164,7 @@ body { left: 0; width: 2px; height: 100%; - background: linear-gradient(360deg, transparent, #03e9f4); + background: linear-gradient(360deg, transparent, #F9E400); animation: animate4 1s infinite; animation-delay: .75s; } @@ -179,6 +186,7 @@ body { display: flex; /* background-color: #72abffe0; */ min-height: 5%; + /* justify-content: center; align-items: center; */ } @@ -187,13 +195,13 @@ body { display: inline-block; padding: 15px 20px; /* text-transform: uppercase; */ - letter-spacing: 4px; + letter-spacing: 2px; background-color: #000; - color: #ec0fc7; - border: 3px solid #ec0fc7; + border-radius: 12px; + color: #F9E400; + border: 2px solid #F5004F; outline: none; font-size: 1rem; - font-weight: bold; transition: .5s; overflow: hidden; margin-right: 30px; @@ -205,9 +213,9 @@ body { display: block; } .tStyle button:hover{ - color: #fff; + color:black; background-color: #000; - border: 3px solid #ec0fc7; + border: 3px solid #F9E400; transition: 1s; } #capital:hover{ @@ -229,7 +237,7 @@ body { left: -40px; width: 0; height: 100%; - background: #ec0fc7; + background: #F9E400; transform: skewX(35deg); z-index: -1; transition: 1s; @@ -251,11 +259,12 @@ body { position: relative; display: inline-block; padding: 15px 20px; + width:auto ; - letter-spacing: 4px; + letter-spacing: 2px; background-color: #000; - color: rgb(2, 217, 233); - border: 3px solid rgb(2, 217, 233); + color: #F9E400; + border: 2px solid #F5004F; outline: none; font-size: 1rem; font-weight: bold; @@ -270,9 +279,9 @@ body { display: block; } .rclStyle button:hover{ - color: #fff; + color: black; background-color: #000; - border: 3px solid rgb(2, 217, 233); + border: 2px solid #F5004F; transition: 1s; } .rclStyle button::before{ @@ -282,7 +291,7 @@ body { left: -40px; width: 0; height: 100%; - background: rgb(2, 217, 233); + background: #F9E400; transform: skewX(35deg); z-index: -1; transition: 1s; @@ -293,8 +302,12 @@ body { - - +#save, +#clear, +#download { + padding-right:50px; + +} @@ -491,13 +504,14 @@ html { /* Main canvas styles */ #mainCanvas { + width: 96%; + padding: 10px; + /* max-height: 500px; */ + /* margin: 68px; */ + background-color: #ffffffa8; + border: 1px solid rgba(216, 94, 202, 0.41); + box-shadow: 0 4px 8px rgba(216, 94, 202, 0.41); - width: 83% !important; - height: auto; - max-height: 500px; - margin: 68px; - border: 1px solid gray; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 5px; } @@ -518,7 +532,6 @@ html { justify-content: space-between; align-items: center; gap: 10px; - margin-top: 20px; } /* Shape Palette */ @@ -541,6 +554,7 @@ html { /* width: 100px; */ /* padding: 5px; */ text-align: center; + border-radius: 12px; } /* Button Styles */ @@ -554,7 +568,7 @@ html { border: 1px solid gray; background-color: #ced4da; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - border-radius: 5px; + border-radius: 12px; } /* .logo { @@ -577,9 +591,19 @@ html { display: flex; justify-content: center; align-items: center; + + gap: 3rem; /* Spacing between links */ + flex-wrap: wrap; + border-bottom: none; } +ul{ + display: flex; + justify-content: center; + align-items: center; + gap: 0.6rem; +} /* Styling individual links in the navbar */ .navbar a { @@ -591,7 +615,7 @@ html { transition: background-color 0.3s ease; /* Smooth hover transition */ } -.nav-links { +/* .nav-links { display: flex; justify-content: center; align-items: center; @@ -600,28 +624,83 @@ html { } +.nav-links a { + position: relative; + text-decoration: none; + letter-spacing: 0.5px; + color: #a0a0a0; +} +.nav-links a:after { + content: ""; + position: absolute; + background-color: white; + height: 3px; + width: 0; + left: 0; + bottom: -10px; + transition: 0; +} .nav-links a:hover { - color: #ffffff;s + color: #ffffff; +} +.nav-links a:hover:after { + width: 100%; +} */ +.nav-link{ + text-decoration: none; + list-style: none; + color: #e645d0; +} +.gt_container-unisv1 a.glink span{ + text-decoration: none; + list-style: none; + color: #e645d0; +} +.nav-link:hover{ + color: #fff; + background-color: #e645d0; + border: none; +} +.nav-link.active{ + color: #e12ac9 !important; + background-color: #ffffff; +.nav-links a:hover { + color: #ffffff; } /* navbar styling ends */ /* Style for input field */ #textData { + height: 45px; padding: 10px 20px; font-size: 1rem; border: 2px solid #ced4da; border-radius: 30px; margin-right: 15px; + } +.title-container { + margin-top: 30px; + padding: 20px 0; + font-weight: 550; + font-size: 40px; + color: rgb(50, 50, 50); + position: relative; /* Needed for absolute positioning of pseudo-elements */ + display: flex; /* Use flexbox to align items */ + align-items: center; /* Vertically center the content */ +} + + + .canvas-palette { - border: 2px solid #a5a5a5; /* Adding a border for definition */ + border: 2px solid rgba(216, 94, 202, 0.41); /* Adding a border for definition */ border-radius: 10px; /* Rounded corners */ - background: #ffffff; /* White background for clarity */ + background: #ffffffa8; /* White background for clarity */ padding: 20px; /* Padding around content */ - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */ + box-shadow: 0 4px 10px rgba(207, 91, 194, 0.1); /* Subtle shadow for depth */ margin-top: 20px; /* Space above the palette */ } @@ -647,12 +726,13 @@ html { font-size: 1rem; } + .canvas-palette .btn { - border-radius: 5px; /* Rounded button corners */ + border-radius: 12px; /* Rounded button corners */ padding: 10px 15px; /* Ample padding for buttons */ - font-weight: bold; /* Bold text for buttons */ } + .canvas-palette .btn:hover { transform: translateY(-2px); /* Subtle lift on hover */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow on hover */ @@ -666,11 +746,12 @@ html { margin: 5px; /* Space between shape buttons */ } + /* Style for the Save button */ .btn-primary { padding: 10px 20px; font-size: 1rem; - border-radius: 5px; + border-radius: 12px; transition: background-color 0.3s; } @@ -681,17 +762,22 @@ html { } /* Flex container adjustments */ -.d-flex { - display: flex; +.cal.d-flex { + /* display: flex; */ gap: 1rem; + border: 1px solid #f87affad; + background-color: #ffffffa8; + border-radius: 20px; } button { margin: 5px; + } .btn { margin: 10px 15px; + } .btn:hover { @@ -730,6 +816,10 @@ input[type="text"], .input-group { margin-bottom: 10px; } +.container.mt-5.contact-container{ + background-color: transparent; +} + /* Elegant Button */ .boton-elegante { @@ -798,7 +888,7 @@ button#small:hover::after { background-color: #000; color: #fff; padding: 5px 10px; - border-radius: 5px; + border-radius: 12px; font-size: 12px; transform: translateY(-30px); white-space: nowrap; @@ -820,7 +910,7 @@ button#small:hover::after { background-color: #000; color: #fff; padding: 5px 10px; - border-radius: 5px; + border-radius: 12px; font-size: 12px; transform: translateY(-30px); white-space: nowrap; @@ -846,9 +936,9 @@ button#download:hover::after { } /* Center Alignment */ -.d-md-flex.justify-content-center { +/* .d-md-flex.justify-content-center { margin-top: 15px; -} +} */ .footer { background: black; @@ -918,7 +1008,7 @@ footer .credit { /* Contact Us Section */ .contact-section { background-color: #f9f9f9; - padding: 50px; + padding: 20px; text-align: center; max-width: 650px; border-radius: 15px; @@ -930,7 +1020,7 @@ footer .credit { font-weight: bold; font-size: 36px; margin-bottom: 20px; - color: #333; + color: #fff; } .contact-section form { @@ -975,8 +1065,10 @@ footer .credit { justify-content: space-evenly; } .link-img{ - margin-left: 20px; font-size: 30px; + border: 1px solid #f87affad; + padding: 2px; + border-radius: 6px; } /* Back to Top Button */ @@ -1004,3 +1096,224 @@ footer .credit { transform: scale(1.1); } +#contactSubmit{ + background-color: #03e9f4; +} + + +/* General Button Styling */ +button { + padding: 12px 20px; + font-size: 16px; + font-weight: bold; + letter-spacing: 2px; + border-radius: 30px; /* Rounded edges */ + border: 2px solid transparent; + cursor: pointer; + position: relative; + overflow: hidden; + transition: all 0.4s ease; +} + +/* Button Wrapper Styles */ +.wrapper, .tStyle, .rclStyle { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 20px; + margin-bottom: 20px; +} + +.space { + height: 20px; +} + +/* Button Styles 1 - Pink and Blue Theme */ +.wrapper button { + background-color: #F9CEFF; /* Primary Pink */ + color: #805D93; /* Lighter Purple/Soft Mauve */ + border-radius: 50px; /* More roundness for soft look */ + border: 2px solid #F9CEFF; +} + +.wrapper button:hover { + background-color: #D8F9FF; /* Primary Blue */ + color: #518FBA; /* Softer Blue */ + box-shadow: 0 0 10px #D8F9FF, 0 0 20px #D8F9FF, 0 0 40px #D8F9FF; +} + +.wrapper button:first-child { + background-color: #D8F9FF; /* Alternate Blue */ + color: #518FBA; + border-color: #AEEAFF; +} + +.wrapper button:last-child { + background-color: #F9CEFF; /* Pink for last button */ + color: #805D93; /* Soft Purple */ + border-color: #F4A3FF; +} + +/* Soft Border Animation */ +.wrapper button span { + position: absolute; + display: block; +} + +.wrapper button span:nth-child(1) { + top: 0; + left: 0; + width: 100%; + height: 2px; + background: linear-gradient(90deg, transparent, #D8F9FF); /* Soft Blue Gradient */ + animation: animate1 1s infinite; +} + +@keyframes animate1 { + 0% { + left: -100%; + } + 100% { + left: 100%; + } +} + +.wrapper button span:nth-child(2), +.tStyle button span:nth-child(2), +.rclStyle button span:nth-child(2) { + top: -100%; + right: 0; + width: 2px; + height: 100%; + background: linear-gradient(180deg, transparent, #F9CEFF); /* Soft Pink Gradient */ + animation: animate2 1s infinite 0.25s; +} + +@keyframes animate2 { + 0% { + top: -100%; + } + 100% { + top: 100%; + } +} + +/* Button Styles 2 - Pastel Pink and Blue Theme */ +.tStyle button { + background-color: #F9CEFF; /* Primary Pink */ + color: #805D93; /* Softer Purple */ + border-radius: 50px; + border: 2px solid #F9CEFF; +} + +.tStyle button:hover { + background-color: #D8F9FF; /* Primary Blue on Hover */ + color: #518FBA; /* Softer Blue */ + box-shadow: 0 0 10px #D8F9FF, 0 0 20px #D8F9FF, 0 0 40px #D8F9FF; +} + +.tStyle button::before { + content: ''; + position: absolute; + top: 0; + left: -40px; + width: 0; + height: 100%; + background: #D8F9FF; /* Light Blue before effect */ + transform: skewX(35deg); + transition: 0.5s; + z-index: -1; +} + +.tStyle button:hover::before { + width: 120%; +} + +#capital:hover { + text-transform: uppercase; +} + +#small:hover { + text-transform: lowercase; +} + +#bold:hover { + font-weight: 900; +} + +#italic:hover { + font-style: italic; +} + +/* Button Styles 3 - Soft Pink and Blue Theme */ +.rclStyle button { + background-color: #D8F9FF; /* Soft Blue */ + color: #518FBA; /* Soft Blue Accent */ + border-radius: 50px; + border: 2px solid #AEEAFF; +} + +.rclStyle button:hover { + background-color: #F9CEFF; /* Switch to Pink */ + color: #805D93; /* Soft Mauve Accent */ + box-shadow: 0 0 10px #F9CEFF, 0 0 20px #F9CEFF, 0 0 40px #F9CEFF; +} + +.rclStyle button::before { + content: ''; + position: absolute; + top: 0; + left: -40px; + width: 0; + height: 100%; + background: #F9CEFF; /* Pink before effect */ + transform: skewX(35deg); + transition: 0.5s; + z-index: -1; +} + +.rclStyle button:hover::before { + width: 120%; +} + +/* Other border animations remain the same */ +.wrapper button span:nth-child(3), +.tStyle button span:nth-child(3), +.rclStyle button span:nth-child(3) { + bottom: 0; + right: 0; + width: 100%; + height: 2px; + background: linear-gradient(270deg, transparent, #F9CEFF); /* Pink */ + animation: animate3 1s infinite 0.5s; +} + +@keyframes animate3 { + 0% { + right: -100%; + } + 100% { + right: 100%; + } +} + +.wrapper button span:nth-child(4), +.tStyle button span:nth-child(4), +.rclStyle button span:nth-child(4) { + bottom: -100%; + left: 0; + width: 2px; + height: 100%; + background: linear-gradient(360deg, transparent, #D8F9FF); /* Blue */ + animation: animate4 1s infinite 0.75s; +} + +@keyframes animate4 { + 0% { + bottom: -100%; + } + 100% { + bottom: 100%; + } +} + diff --git a/src/Styles/contact_us_style.css b/src/Styles/contact_us_style.css index 0344382..55c4c4a 100644 --- a/src/Styles/contact_us_style.css +++ b/src/Styles/contact_us_style.css @@ -6,6 +6,7 @@ border-radius: 0.25rem; box-shadow: none; } + input[type="text"], input[type="email"], textarea { appearance: none; @@ -33,21 +34,28 @@ outline: none; box-shadow: none; } - + #contact h2{ + margin-top: 0; + color: black; + + } .contact-us-page{ display:flex; + margin-top: 40px; + justify-content: center; align-items:center; -} -.contact-container{ + + + width:100%; - background: #000000; + background: #f579d4; } #contact{ width:100%; - background: rgb(0, 0, 0); + background: rgb(248, 193, 248) } #contactForm textarea{ @@ -59,4 +67,4 @@ margin-left:6em; text-align: center; padding:9rem; -} \ No newline at end of file +} diff --git a/src/Styles/contributor.css b/src/Styles/contributor.css index 3f1df8c..a9a9d04 100644 --- a/src/Styles/contributor.css +++ b/src/Styles/contributor.css @@ -265,3 +265,22 @@ body.dark-mode .contributor-card p { body.dark-mode .contributor-card h2 { color: white; } + +/* Mobile-specific adjustments: One large card per row */ +@media (max-width: 768px) { + .contributor-container { + flex-direction: column; + align-items: center; + } + + .contributor-card { + flex-basis: 30%; + max-width: 80%; + padding: 24px; + } + + .contributor-card img { + width: 90px; + height: 90px; + } +} diff --git a/testimonial.html b/testimonial.html index f3ba03b..8adc914 100644 --- a/testimonial.html +++ b/testimonial.html @@ -238,6 +238,7 @@

Canvas Editor

Sign Up Login
+