From 2a310d2f775f8afe7fe9302c51ea20ba509d46ca Mon Sep 17 00:00:00 2001 From: Vivy Vuong Date: Wed, 18 Oct 2023 21:29:53 +0000 Subject: [PATCH 01/10] Add package, gitignore, yaml to use prettier --- .github/workflow/format.yaml | 23 +++++++++++++++++++++++ .gitignore | 2 ++ package.json | 29 +++++++++++++++++++++++++++++ 3 files changed, 54 insertions(+) create mode 100644 .github/workflow/format.yaml create mode 100644 .gitignore create mode 100644 package.json diff --git a/.github/workflow/format.yaml b/.github/workflow/format.yaml new file mode 100644 index 0000000..e48647e --- /dev/null +++ b/.github/workflow/format.yaml @@ -0,0 +1,23 @@ +name: Format +on: + pull_request: + branches: + - master + push: + branches: + - master + +jobs: + format: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + ref: ${{ github.head_ref }} + - run: npm ci + - run: npm run format-code + - name: Commit code after format + uses: stefanzweifel/git-auto-commit-action@v4 + with: + commit_message: Apply formatting changes + branch: ${{ github.head_ref }} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ccb2c80 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +package-lock.json \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..552f5a1 --- /dev/null +++ b/package.json @@ -0,0 +1,29 @@ +{ + "name": "profile-card-generator", + "version": "1.0.0", + "description": "An application help to generate a profile card", + "main": "index.html", + "scripts": { + "format-code": "npx prettier . --write", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/piyushkdas0611/Profile-Card-Generator.git" + }, + "keywords": [ + "profile", + "card", + "web", + "application" + ], + "author": "Piyush K. Das", + "license": "ISC", + "bugs": { + "url": "https://github.com/piyushkdas0611/Profile-Card-Generator/issues" + }, + "homepage": "https://github.com/piyushkdas0611/Profile-Card-Generator#readme", + "devDependencies": { + "prettier": "^3.0.3" + } +} From 6f7ce69a14b66b337140042e09c248f69a211f22 Mon Sep 17 00:00:00 2001 From: Vivy Vuong Date: Wed, 18 Oct 2023 21:32:46 +0000 Subject: [PATCH 02/10] change from master to main in yaml file --- .github/workflow/format.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflow/format.yaml b/.github/workflow/format.yaml index e48647e..4584a28 100644 --- a/.github/workflow/format.yaml +++ b/.github/workflow/format.yaml @@ -2,10 +2,10 @@ name: Format on: pull_request: branches: - - master + - main push: branches: - - master + - main jobs: format: From 92fb3b1df2817fc9f6ba366f7d45095314187af3 Mon Sep 17 00:00:00 2001 From: Vivy Vuong Date: Wed, 18 Oct 2023 21:36:54 +0000 Subject: [PATCH 03/10] remove main branch only feature to test --- .github/workflow/format.yaml | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/.github/workflow/format.yaml b/.github/workflow/format.yaml index 4584a28..39a5fd9 100644 --- a/.github/workflow/format.yaml +++ b/.github/workflow/format.yaml @@ -1,11 +1,11 @@ name: Format -on: - pull_request: - branches: - - main - push: - branches: - - main +on: [pull_request, push] + # pull_request: + # branches: + # - main + # push: + # branches: + # - master jobs: format: From 1fd02130e777327620c937547f3759fd2d13389f Mon Sep 17 00:00:00 2001 From: Vivy Vuong Date: Wed, 18 Oct 2023 21:39:18 +0000 Subject: [PATCH 04/10] testing github action flow --- .github/workflow/format.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflow/format.yaml b/.github/workflow/format.yaml index 39a5fd9..718577d 100644 --- a/.github/workflow/format.yaml +++ b/.github/workflow/format.yaml @@ -1,5 +1,5 @@ name: Format -on: [pull_request, push] +on: ["push", "pull_request"] # pull_request: # branches: # - main From 4600e30dd1232af8cdcb9098a10c8c3c9ff7ec39 Mon Sep 17 00:00:00 2001 From: Vivy Vuong Date: Wed, 18 Oct 2023 21:41:27 +0000 Subject: [PATCH 05/10] fixed the folder name to workflows --- .github/workflows/format.yaml | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 .github/workflows/format.yaml diff --git a/.github/workflows/format.yaml b/.github/workflows/format.yaml new file mode 100644 index 0000000..08e8b02 --- /dev/null +++ b/.github/workflows/format.yaml @@ -0,0 +1,23 @@ +name: Format +on: + pull_request: + branches: + - main + push: + branches: + - master + +jobs: + format: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + ref: ${{ github.head_ref }} + - run: npm ci + - run: npm run format-code + - name: Commit code after format + uses: stefanzweifel/git-auto-commit-action@v4 + with: + commit_message: Apply formatting changes + branch: ${{ github.head_ref }} \ No newline at end of file From 82b4ecc2c8532a0a3ace180ba3f2cac5697aeae3 Mon Sep 17 00:00:00 2001 From: Vivy Vuong Date: Wed, 18 Oct 2023 21:42:06 +0000 Subject: [PATCH 06/10] change the folder to workflows --- .github/workflow/format.yaml | 23 ----------------------- .github/workflows/format.yaml | 2 +- 2 files changed, 1 insertion(+), 24 deletions(-) delete mode 100644 .github/workflow/format.yaml diff --git a/.github/workflow/format.yaml b/.github/workflow/format.yaml deleted file mode 100644 index 718577d..0000000 --- a/.github/workflow/format.yaml +++ /dev/null @@ -1,23 +0,0 @@ -name: Format -on: ["push", "pull_request"] - # pull_request: - # branches: - # - main - # push: - # branches: - # - master - -jobs: - format: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - with: - ref: ${{ github.head_ref }} - - run: npm ci - - run: npm run format-code - - name: Commit code after format - uses: stefanzweifel/git-auto-commit-action@v4 - with: - commit_message: Apply formatting changes - branch: ${{ github.head_ref }} \ No newline at end of file diff --git a/.github/workflows/format.yaml b/.github/workflows/format.yaml index 08e8b02..4584a28 100644 --- a/.github/workflows/format.yaml +++ b/.github/workflows/format.yaml @@ -5,7 +5,7 @@ on: - main push: branches: - - master + - main jobs: format: From ba94e0decfb0af7b724bd01b9e18ca79f8d541ec Mon Sep 17 00:00:00 2001 From: Vivy Vuong Date: Wed, 18 Oct 2023 17:44:53 -0400 Subject: [PATCH 07/10] Create github action workflow --- .github/workflows/format.yml | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 .github/workflows/format.yml diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml new file mode 100644 index 0000000..f7235b9 --- /dev/null +++ b/.github/workflows/format.yml @@ -0,0 +1,23 @@ +name: Format +on: + pull_request: + branches: + - main + push: + branches: + - main + +jobs: + format: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + ref: ${{ github.head_ref }} + - run: npm ci + - run: npm run format-code + - name: Commit code after format + uses: stefanzweifel/git-auto-commit-action@v4 + with: + commit_message: Apply formatting changes + branch: ${{ github.head_ref }} From fb3cc44caf0cd7995cf6b60840dc4d57ef6e606e Mon Sep 17 00:00:00 2001 From: Vivy Vuong Date: Wed, 18 Oct 2023 21:49:35 +0000 Subject: [PATCH 08/10] fixed the yml file --- .github/workflows/format.yaml | 23 ----------------------- .github/workflows/format.yml | 2 +- 2 files changed, 1 insertion(+), 24 deletions(-) delete mode 100644 .github/workflows/format.yaml diff --git a/.github/workflows/format.yaml b/.github/workflows/format.yaml deleted file mode 100644 index 4584a28..0000000 --- a/.github/workflows/format.yaml +++ /dev/null @@ -1,23 +0,0 @@ -name: Format -on: - pull_request: - branches: - - main - push: - branches: - - main - -jobs: - format: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - with: - ref: ${{ github.head_ref }} - - run: npm ci - - run: npm run format-code - - name: Commit code after format - uses: stefanzweifel/git-auto-commit-action@v4 - with: - commit_message: Apply formatting changes - branch: ${{ github.head_ref }} \ No newline at end of file diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml index f7235b9..a3444f8 100644 --- a/.github/workflows/format.yml +++ b/.github/workflows/format.yml @@ -14,7 +14,7 @@ jobs: - uses: actions/checkout@v3 with: ref: ${{ github.head_ref }} - - run: npm ci + - run: npm install --ci - run: npm run format-code - name: Commit code after format uses: stefanzweifel/git-auto-commit-action@v4 From fff59813508f33972ebe8da4f19fff347dfaf1e1 Mon Sep 17 00:00:00 2001 From: Vivy Vuong Date: Wed, 18 Oct 2023 21:50:50 +0000 Subject: [PATCH 09/10] fixed the prettier format error --- test.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/test.html b/test.html index fa4856f..6ededa1 100644 --- a/test.html +++ b/test.html @@ -24,7 +24,5 @@

Aditya Singh

- - From 00bb3d58ab5d7c363891062158ac2797edc585c0 Mon Sep 17 00:00:00 2001 From: Vivy24 Date: Wed, 18 Oct 2023 21:51:07 +0000 Subject: [PATCH 10/10] Apply formatting changes --- README.md | 10 ++ form.html | 177 +++++++++++++++++++++--------------- index.html | 63 ++++++++----- script.js | 14 +-- stylesheets/cards/card.css | 6 +- stylesheets/cards/card1.css | 159 ++++++++++++++++---------------- stylesheets/cards/card3.css | 34 ++++--- stylesheets/cards/card4.css | 5 +- stylesheets/cards/card5.css | 173 ++++++++++++++++++----------------- stylesheets/index.css | 47 +++++----- stylesheets/styles.css | 117 +++++++++++++++++++----- test.html | 107 ++++++++++++++++------ 12 files changed, 541 insertions(+), 371 deletions(-) diff --git a/README.md b/README.md index c04905b..d30d7ee 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,17 @@ # Profile-Card-Generator + A Profile Card Generator for generating profile cards to display on websites. + # Fork, Clone, Make Changes, and Create a Pull Request + This guide will walk you through the process of contributing to this repository by forking it, cloning your fork, making changes, checking out a new branch, committing those changes, pushing them to your fork, and finally, creating a pull request to suggest your changes to the original repository. ## Fork the Repository + Click the "Fork" button at the top right corner of this repository's page. This action will create a copy of the repository under your GitHub account. + ## Clone Your Fork + Open your terminal (command prompt or Git Bash on Windows, or a terminal on macOS and Linux). Navigate to the directory where you want to store the project (use cd to change directories). @@ -23,6 +29,7 @@ cd repository-name ``` ## Make Changes + Create a new branch for your changes, giving it a meaningful name related to the issue or feature you're working on: ``` @@ -32,6 +39,7 @@ git checkout -b feature-or-fix-name Make your desired changes to the project using your preferred code editor or IDE. ## Commit Your Changes + Add the changes you made to the staging area: ``` @@ -47,6 +55,7 @@ git commit -m "Add a brief description of your changes" ``` ## Push Your Changes + Push your changes to your fork on GitHub: ``` @@ -54,6 +63,7 @@ git push origin feature-or-fix-name ``` ## Create a Pull Request + Visit the original repository on GitHub. You will see a green "Compare & pull request" button. Click it. diff --git a/form.html b/form.html index 1aeeb2c..d33e412 100644 --- a/form.html +++ b/form.html @@ -1,71 +1,103 @@ - + - - - - - - - - - - - - - - Profile Card Generator - - - -
- -
-
-

Profile Card Generator

-
- - - - - - - - - - - - - - - - - - - - - - -
-
- -
-
- + + + + + + + + + + + + + + Profile Card Generator + + + +
+
- -
- +
+

Profile Card Generator

+
+ + + + + + + + + + + + + + + + + + + + + + +
-
- -
+
+
+ +
-
- -
+
+ +
+ +
+ +
+ +
+ +
@@ -74,14 +106,11 @@

Profile Card Generator

-
-

This project is participating in Hacktoberfest.

-

© 2023

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

This project is participating in Hacktoberfest.

+

© 2023

+
+ + + + diff --git a/index.html b/index.html index 687cdf1..d4f59b6 100644 --- a/index.html +++ b/index.html @@ -1,34 +1,49 @@ - + - - + Profile Card Generator - - - + + + - +
-

Welcome to Our Profile Card Generator

-

Create your own customized profile card with just a click of the button below.

- +

Welcome to Our Profile Card Generator

+

+ Create your own customized profile card with just a click of the button + below. +

+
-

This project is participating in Hacktoberfest.

-

© 2023

+

This project is participating in Hacktoberfest.

+

© 2023

- - - - \ No newline at end of file + + + diff --git a/script.js b/script.js index b0a6ee5..d0fa340 100644 --- a/script.js +++ b/script.js @@ -119,8 +119,8 @@ function generateCard() {
`; - //card 5 - const cardHTML5 = ` + //card 5 + const cardHTML5 = `
image

${name}

@@ -135,7 +135,6 @@ function generateCard() {
`; - card.innerHTML = cardHTML; @@ -227,9 +226,7 @@ function generateCard() {
`; - - - const copyHTML5 = ` + const copyHTML5 = `
image

${name}

@@ -260,7 +257,7 @@ function generateCard() { function getCssFileContents(filePath) { return new Promise((resolve, reject) => { const linkElement = document.querySelector( - `link[rel="stylesheet"][href="${filePath}"]` + `link[rel="stylesheet"][href="${filePath}"]`, ); if (linkElement) { @@ -439,9 +436,6 @@ function generateCard() { alert("Card HTML copied to clipboard!"); }); - - - const copyButtonHTML5 = document.getElementById("copy4"); copyButtonHTML5.addEventListener("click", function () { // Create a textarea element to hold the card HTML diff --git a/stylesheets/cards/card.css b/stylesheets/cards/card.css index 218ff6f..2adfba4 100644 --- a/stylesheets/cards/card.css +++ b/stylesheets/cards/card.css @@ -7,7 +7,7 @@ align-items: center; padding: 1rem; /* background: rgba(255, 255, 255, 0.2); */ - background-image: linear-gradient(to bottom, #9d9cb4, #eea2a2); + background-image: linear-gradient(to bottom, #9d9cb4, #eea2a2); /* backdrop-filter: blur(7px); */ border-radius: 15px; height: 100%; @@ -22,13 +22,13 @@ border-radius: 50%; margin: 1rem; object-fit: cover; -} +} .card h2 { margin: 1rem; } .card:hover { - transform: scale(1.1); + transform: scale(1.1); } .card p { font-size: 18px; diff --git a/stylesheets/cards/card1.css b/stylesheets/cards/card1.css index fbc2ad7..a17912d 100644 --- a/stylesheets/cards/card1.css +++ b/stylesheets/cards/card1.css @@ -1,82 +1,81 @@ .card_1 { - width: 300px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 1rem; - /* background: rgba(255, 255, 255, 0.2); */ - background-image: linear-gradient(to bottom, #acaad2, #453a3a); - backdrop-filter: blur(7px); - border-radius: 15px; - height: 100%; - border: 2px solid #74B72E; - transition: transform 0.4s ease-in-out; - font-family: 'Montserrat'; - } - .profile_1 { - max-width: 150px; - max-height: 150px; - width: 100%; - height: auto; - border-radius: 50%; - margin: 1rem; - object-fit: cover; - } - - .card_1 h2 { - margin: 1rem; - } - .card_1 p { - font-size: 18px; - margin: 1rem 0.5rem; - text-align: center; - } - .card_1:hover { - transform: scale(1.1); - } + width: 300px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 1rem; + /* background: rgba(255, 255, 255, 0.2); */ + background-image: linear-gradient(to bottom, #acaad2, #453a3a); + backdrop-filter: blur(7px); + border-radius: 15px; + height: 100%; + border: 2px solid #74b72e; + transition: transform 0.4s ease-in-out; + font-family: "Montserrat"; +} +.profile_1 { + max-width: 150px; + max-height: 150px; + width: 100%; + height: auto; + border-radius: 50%; + margin: 1rem; + object-fit: cover; +} - .links_1 { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - } - - .links_1 a img { - width: 2.5rem; - border-radius: 50%; - margin: 1rem 0.5rem; - transition: background 0.5s; - } - - .links_1 a { - fill: white; - transition: fill 0.5s; - margin: 1rem 0.5rem; - } - - .links_1 a:hover { - fill: #74B72E; - } - .card_1 a { - width: 100%; - } - .btn2_1 { - padding: 0.7rem; - border-radius: 25px; - background: transparent; - width: 100%; - align-self: center; - border: 1px solid #74B72E; - color: white; - margin-bottom: 1rem; - box-shadow: none; - } - .btn2_1:hover { - background-color: #74B72E; - box-shadow: none; - font-weight: bold; - color: white; - } - \ No newline at end of file +.card_1 h2 { + margin: 1rem; +} +.card_1 p { + font-size: 18px; + margin: 1rem 0.5rem; + text-align: center; +} +.card_1:hover { + transform: scale(1.1); +} + +.links_1 { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.links_1 a img { + width: 2.5rem; + border-radius: 50%; + margin: 1rem 0.5rem; + transition: background 0.5s; +} + +.links_1 a { + fill: white; + transition: fill 0.5s; + margin: 1rem 0.5rem; +} + +.links_1 a:hover { + fill: #74b72e; +} +.card_1 a { + width: 100%; +} +.btn2_1 { + padding: 0.7rem; + border-radius: 25px; + background: transparent; + width: 100%; + align-self: center; + border: 1px solid #74b72e; + color: white; + margin-bottom: 1rem; + box-shadow: none; +} +.btn2_1:hover { + background-color: #74b72e; + box-shadow: none; + font-weight: bold; + color: white; +} diff --git a/stylesheets/cards/card3.css b/stylesheets/cards/card3.css index 364f348..4dbfe9a 100644 --- a/stylesheets/cards/card3.css +++ b/stylesheets/cards/card3.css @@ -7,19 +7,19 @@ justify-content: center; align-items: center; letter-spacing: 1px; - background-image: linear-gradient(to bottom, #9590ee, #ffffff); + background-image: linear-gradient(to bottom, #9590ee, #ffffff); border-radius: 15px; border: 2px solid #b2e5e6; backdrop-filter: blur(7px); height: 100%; overflow: hidden; - box-shadow: 0 0 10px rgba(135, 177, 241, 0.7); + box-shadow: 0 0 10px rgba(135, 177, 241, 0.7); transition: transform 0.4s ease-in-out; - font-family: 'Poppins', sans-serif; + font-family: "Poppins", sans-serif; } .card_3:hover { - transform: scale(1.1); + transform: scale(1.1); } .profile_3 { @@ -32,7 +32,7 @@ .card_3 h2 { margin: 1rem; - color: black; + color: black; } .card_3 p { @@ -63,9 +63,11 @@ height: 40px; color: #121212; border-radius: 35%; - box-shadow: 6px 6px 12px #97c3c4, -6px -6px 12px #cdffff; + box-shadow: + 6px 6px 12px #97c3c4, + -6px -6px 12px #cdffff; transition: all 0.4s; - font-family: 'Poppins', sans-serif; + font-family: "Poppins", sans-serif; } .card_3 .links_3 ul li a:hover { @@ -100,21 +102,23 @@ border-radius: 25px; width: 100%; align-self: center; - background: #4e54c8; - background: -webkit-linear-gradient(to right, #8f94fb, #4e54c8); - background: linear-gradient(to right, #8f94fb, #4e54c8); + background: #4e54c8; + background: -webkit-linear-gradient(to right, #8f94fb, #4e54c8); + background: linear-gradient(to right, #8f94fb, #4e54c8); width: 90%; color: white; margin-bottom: 1rem; - border: none; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); - transition: background-color 0.3s, transform 0.2s; + border: none; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); + transition: + background-color 0.3s, + transform 0.2s; cursor: pointer; - font-family: 'Poppins', sans-serif; + font-family: "Poppins", sans-serif; } .btn2_3:hover { - background: #9796f0; + background: #9796f0; background: -webkit-linear-gradient(to top, #fbc7d4, #9796f0); background: linear-gradient(to top, #fbc7d4, #de96f0); transform: scale(1.05); diff --git a/stylesheets/cards/card4.css b/stylesheets/cards/card4.css index 4220662..03959b6 100644 --- a/stylesheets/cards/card4.css +++ b/stylesheets/cards/card4.css @@ -21,7 +21,7 @@ } .card_4:hover { - transform: scale(1.1); + transform: scale(1.1); } .profile_4 { @@ -74,11 +74,10 @@ color: rgb(255, 255, 255); margin: 0.5rem; background-color: #6884f4; - } .btn2_4:hover { - background: #9796f0; + background: #9796f0; background: -webkit-linear-gradient(to top, #fbc7d4, #9796f0); background: linear-gradient(to top, #fbc7d4, #de96f0); transform: scale(1.05); diff --git a/stylesheets/cards/card5.css b/stylesheets/cards/card5.css index ca8822f..e5287f2 100644 --- a/stylesheets/cards/card5.css +++ b/stylesheets/cards/card5.css @@ -1,88 +1,87 @@ .card_5 { - width: 300px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 1rem; - background: rgba(255, 255, 255, 0.2); - box-shadow: 0 0 10px rgb(190, 255, 129); - /* / backdrop-filter: blur(7px); */ - border-radius: 15px; - border: 2px solid #28ff87; - font-family: "Rajdhani"; - height: 100%; - overflow: hidden; - background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); - transition: transform 0.4s ease-in-out; - } - - .profile_5 { - max-width: 150px; - max-height: 150px; - width: 100%; - height: auto; - border-radius: 50%; - margin: 1rem; - object-fit: cover; - } - - .card_5 h2 { - margin: 1rem; - color: white; - } - .card_5 p { - font-size: 18px; - margin: 1rem 0.5rem; - text-align: center; - font-style: italic; - color: aliceblue; - } - .card_5:hover { - transform: scale(1.1); - } - .links_5 { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - } - .links_5 a img { - width: 2.5rem; - border-radius: 50%; - margin: 1rem 0.5rem; - } - .links_5 a { - fill: white; - transition: fill 0.5s; - margin: 1rem 0.5rem; - } - .links_5 a:hover { - fill: #00ffff; - } - - .card_5 a { - width: 100%; - } - - .btn2_5 { - padding: 0.7rem; - border-radius: 25px; - background: transparent; - width: 100%; - align-self: center; - border: 1px solid #28ff87; - color: white; - margin-bottom: 1rem; - box-shadow: none; - height: 50px; - } - .btn2_5:hover { - background-color: #28ff87; - box-shadow: none; - font-weight: bolder; - color: #333333; - font-family: "Rajdhani"; - font-size: medium; - } - \ No newline at end of file + width: 300px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 1rem; + background: rgba(255, 255, 255, 0.2); + box-shadow: 0 0 10px rgb(190, 255, 129); + /* / backdrop-filter: blur(7px); */ + border-radius: 15px; + border: 2px solid #28ff87; + font-family: "Rajdhani"; + height: 100%; + overflow: hidden; + background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); + transition: transform 0.4s ease-in-out; +} + +.profile_5 { + max-width: 150px; + max-height: 150px; + width: 100%; + height: auto; + border-radius: 50%; + margin: 1rem; + object-fit: cover; +} + +.card_5 h2 { + margin: 1rem; + color: white; +} +.card_5 p { + font-size: 18px; + margin: 1rem 0.5rem; + text-align: center; + font-style: italic; + color: aliceblue; +} +.card_5:hover { + transform: scale(1.1); +} +.links_5 { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +.links_5 a img { + width: 2.5rem; + border-radius: 50%; + margin: 1rem 0.5rem; +} +.links_5 a { + fill: white; + transition: fill 0.5s; + margin: 1rem 0.5rem; +} +.links_5 a:hover { + fill: #00ffff; +} + +.card_5 a { + width: 100%; +} + +.btn2_5 { + padding: 0.7rem; + border-radius: 25px; + background: transparent; + width: 100%; + align-self: center; + border: 1px solid #28ff87; + color: white; + margin-bottom: 1rem; + box-shadow: none; + height: 50px; +} +.btn2_5:hover { + background-color: #28ff87; + box-shadow: none; + font-weight: bolder; + color: #333333; + font-family: "Rajdhani"; + font-size: medium; +} diff --git a/stylesheets/index.css b/stylesheets/index.css index 00ec0a0..3323aa0 100644 --- a/stylesheets/index.css +++ b/stylesheets/index.css @@ -1,5 +1,5 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@300;400;500;600;700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@300;400;500;600;700&display=swap"); * { margin: 0; @@ -7,12 +7,12 @@ box-sizing: border-box; } -.dark-mode{ +.dark-mode { --background-image: url(images/background1.svg); --text-color: #fff; --button-color: #000; } -:root{ +:root { --background-image: url(images/background2.svg); --text-color: #000; --button-color: #fff; @@ -32,20 +32,18 @@ body { padding: 2rem; /* Increased padding for better spacing */ text-align: center; - font-family: 'Poppins', sans-serif; + font-family: "Poppins", sans-serif; /* Choose an appropriate font */ } -#dark-mode-toggle{ +#dark-mode-toggle { position: absolute; top: 1rem; right: 1rem; cursor: pointer; z-index: 100; - } - h1 { margin: 50px auto 30px; font-size: 32px; @@ -60,7 +58,11 @@ h1 { width: 100%; padding: 50px 70px; border-radius: 20px; - background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%); + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.12) 0%, + rgba(255, 255, 255, 0.04) 100% + ); backdrop-filter: blur(20px); box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.37); margin-bottom: 4rem; @@ -74,7 +76,7 @@ form { text-align: left; justify-content: center; font-size: 1.3em; - font-family: 'sofia sans', sans-serif; + font-family: "sofia sans", sans-serif; margin-left: 70px; margin-right: 70px; } @@ -82,7 +84,7 @@ form { input { padding: 0.9rem; border-radius: 4px; - border: 1px solid ; + border: 1px solid; border-color: var(--text-color); margin-top: 6px; margin-bottom: 20px; @@ -90,28 +92,29 @@ input { /* Lighter input background */ color: #fff; font-size: 0.9em; - font-family: 'sofia sans', sans-serif; + font-family: "sofia sans", sans-serif; /* Darker text color for input */ } -input[type=text]{ +input[type="text"] { color: var(--text-color); } button { padding: 0.9rem; border-radius: 4px; - background: rgba(131, 90, 220, 0.80); + background: rgba(131, 90, 220, 0.8); color: var(--button-color); border: none; font-size: 16px; justify-content: center; font-weight: 600; - font-family: 'sofia sans', sans-serif; - transition: background-color 0.3s, color 0.3s ease-out; + font-family: "sofia sans", sans-serif; + transition: + background-color 0.3s, + color 0.3s ease-out; backdrop-filter: blur(20px); } - #generate { margin-top: 2rem; } @@ -139,7 +142,6 @@ button:hover { } } - .card-container { max-width: 100%; /* Allow cards to take full width */ @@ -150,9 +152,8 @@ button:hover { padding: 1rem; } - -@media (max-width : 728px) { - body{ +@media (max-width: 728px) { + body { padding: 0; } .input-form { @@ -163,7 +164,7 @@ button:hover { padding: 20px 0; border-radius: 0 0 20px 20px; } - form{ + form { margin: 0 5%; } @@ -172,4 +173,4 @@ button:hover { width: 100%; margin-top: 1rem; } -} \ No newline at end of file +} diff --git a/stylesheets/styles.css b/stylesheets/styles.css index 5380f37..e53ff78 100644 --- a/stylesheets/styles.css +++ b/stylesheets/styles.css @@ -1,12 +1,12 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@300;400;500;600;700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@300;400;500;600;700&display=swap"); -.dark-mode{ +.dark-mode { --background-image: url(images/background1.svg); --text-color: #fff; --button-color: #000; } -:root{ +:root { --background-image: url(images/background2.svg); --text-color: #000; --button-color: #fff; @@ -26,7 +26,6 @@ body { height: 100vh; } - .container { padding-top: 200px; text-align: center; @@ -35,25 +34,69 @@ body { } h1 { - font-family: ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: + ui-sans-serif, + system-ui, + -apple-system, + system-ui, + "Segoe UI", + Roboto, + "Helvetica Neue", + Arial, + "Noto Sans", + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji"; font-size: 40px; color: #ffffff; - text-shadow: 3px 3px 4px #512B81; + text-shadow: 3px 3px 4px #512b81; } - p { - font-family: ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: + ui-sans-serif, + system-ui, + -apple-system, + system-ui, + "Segoe UI", + Roboto, + "Helvetica Neue", + Arial, + "Noto Sans", + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji"; font-size: 15px; - color: #EEEEEE; + color: #eeeeee; } -.form-button,button { +.form-button, +button { color: #fff; padding: 15px 25px; - background-color: #512B81; - background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%); - box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2); + background-color: #512b81; + background-image: radial-gradient( + 93% 87% at 87% 89%, + rgba(0, 0, 0, 0.23) 0%, + transparent 86.18% + ), + radial-gradient( + 66% 66% at 26% 20%, + rgba(255, 255, 255, 0.55) 0%, + rgba(255, 255, 255, 0) 69.79%, + rgba(255, 255, 255, 0) 100% + ); + box-shadow: + inset -3px -3px 9px rgba(255, 255, 255, 0.25), + inset 0px 3px 9px rgba(255, 255, 255, 0.3), + inset 0px 1px 1px rgba(255, 255, 255, 0.6), + inset 0px -8px 36px rgba(0, 0, 0, 0.3), + inset 0px 1px 5px rgba(255, 255, 255, 0.6), + 2px 19px 31px rgba(0, 0, 0, 0.2); border-radius: 14px; font-weight: bold; font-size: 16px; @@ -66,14 +109,30 @@ p { } .form-button:hover { - background-color: #18122B; + background-color: #18122b; } .topnav { display: flex; justify-content: space-between; - background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%); - box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2); + background-image: radial-gradient( + 93% 87% at 87% 89%, + rgba(0, 0, 0, 0.23) 0%, + transparent 86.18% + ), + radial-gradient( + 66% 66% at 26% 20%, + rgba(255, 255, 255, 0.55) 0%, + rgba(255, 255, 255, 0) 69.79%, + rgba(255, 255, 255, 0) 100% + ); + box-shadow: + inset -3px -3px 9px rgba(255, 255, 255, 0.25), + inset 0px 3px 9px rgba(255, 255, 255, 0.3), + inset 0px 1px 1px rgba(255, 255, 255, 0.6), + inset 0px -8px 36px rgba(0, 0, 0, 0.3), + inset 0px 1px 5px rgba(255, 255, 255, 0.6), + 2px 19px 31px rgba(0, 0, 0, 0.2); border-radius: 14px; overflow: hidden; width: 100%; @@ -92,15 +151,19 @@ p { font-size: 17px; } - .topnav a.active { - background-color: #512B81; - box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2); + background-color: #512b81; + box-shadow: + inset -3px -3px 9px rgba(255, 255, 255, 0.25), + inset 0px 3px 9px rgba(255, 255, 255, 0.3), + inset 0px 1px 1px rgba(255, 255, 255, 0.6), + inset 0px -8px 36px rgba(0, 0, 0, 0.3), + inset 0px 1px 5px rgba(255, 255, 255, 0.6), + 2px 19px 31px rgba(0, 0, 0, 0.2); border-radius: 20px; color: white; } - .topnav a.gitlink { float: right; color: #ffffff; @@ -111,9 +174,15 @@ p { } .topnav a.gitlink:hover { - background-color: #512B81; - box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2); + background-color: #512b81; + box-shadow: + inset -3px -3px 9px rgba(255, 255, 255, 0.25), + inset 0px 3px 9px rgba(255, 255, 255, 0.3), + inset 0px 1px 1px rgba(255, 255, 255, 0.6), + inset 0px -8px 36px rgba(0, 0, 0, 0.3), + inset 0px 1px 5px rgba(255, 255, 255, 0.6), + 2px 19px 31px rgba(0, 0, 0, 0.2); border-radius: 14px; color: white; transition: background-color 0.3s ease; -} \ No newline at end of file +} diff --git a/test.html b/test.html index 6ededa1..337cff9 100644 --- a/test.html +++ b/test.html @@ -1,28 +1,79 @@ -
- image -

André Oliveira

-

This is my profile

-
- - - -
- -
- - -
-
-
-
-
-
- image -

Aditya Singh

-

In a paradise filled with nothing but irrecoverable things.

-
- - - - - +
+ image +

André Oliveira

+

This is my profile

+
+ + + +
+ +
+ + +
+
+
+
+
+
+ image +

Aditya Singh

+

In a paradise filled with nothing but irrecoverable things.

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