diff --git a/Front-end-Projects/Basic/Pokemon-Card/README.md b/Front-end-Projects/Basic/Pokemon-Card/README.md new file mode 100644 index 00000000..9aaf1941 --- /dev/null +++ b/Front-end-Projects/Basic/Pokemon-Card/README.md @@ -0,0 +1,71 @@ +

๐Ÿ’ฅ Pokemon Abilities Card ๐Ÿ’ฅ

+ + + +

Tech Stack Used ๐ŸŽฎ

+ + +
+ + ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) + ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) + + + + + + + + + + + + + +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description ๐Ÿ“ƒ + +
+ +

This is a basic introduction to profile cards and how they can be used to make fun card games.

+
+ + + + +## :zap: How to run it? ๐Ÿ•น๏ธ + + + +- Clone the repository to your local machine. +- Navigate to the directory. Front-end-Projects -> Basic -> Pokemon-Card +- Run the `index.html` to see the magic. Alternatively, you can use "Go Live" if using Visual Studio Code. + + + +## :zap: Screenshots ๐Ÿ“ธ + + + + + + +

Developed By Prachi Kansal

+

+ + + + + + +

+ +

Happy Coding ๐Ÿง‘โ€๐Ÿ’ป

+ +

Show some  โค๏ธ  by  ๐ŸŒŸ  this repository!

diff --git a/Front-end-Projects/Basic/Pokemon-Card/images/background.jpg b/Front-end-Projects/Basic/Pokemon-Card/images/background.jpg new file mode 100644 index 00000000..f4a45d5c Binary files /dev/null and b/Front-end-Projects/Basic/Pokemon-Card/images/background.jpg differ diff --git a/Front-end-Projects/Basic/Pokemon-Card/images/charizard_profile.png b/Front-end-Projects/Basic/Pokemon-Card/images/charizard_profile.png new file mode 100644 index 00000000..55cf8d73 Binary files /dev/null and b/Front-end-Projects/Basic/Pokemon-Card/images/charizard_profile.png differ diff --git a/Front-end-Projects/Basic/Pokemon-Card/index.html b/Front-end-Projects/Basic/Pokemon-Card/index.html new file mode 100644 index 00000000..e4d5f374 --- /dev/null +++ b/Front-end-Projects/Basic/Pokemon-Card/index.html @@ -0,0 +1,48 @@ + + + + + + + Pokemon Card Example + + + + +
+ +
+ +
+ +
+ +
+

Charizard

+ Stage 2 Pokรฉmon +
+ +
+
+

HP (Fire)

+ 170 +
+
+

Ability

+ Battle Sense +
+
+

Royal Blaze

+ 100+ +
+
+ +
+ Play + Draw +
+ +
+
+ + \ No newline at end of file diff --git a/Front-end-Projects/Basic/Pokemon-Card/screenshot.webp b/Front-end-Projects/Basic/Pokemon-Card/screenshot.webp new file mode 100644 index 00000000..03e8ee14 Binary files /dev/null and b/Front-end-Projects/Basic/Pokemon-Card/screenshot.webp differ diff --git a/Front-end-Projects/Basic/Pokemon-Card/styles.css b/Front-end-Projects/Basic/Pokemon-Card/styles.css new file mode 100644 index 00000000..200b32d6 --- /dev/null +++ b/Front-end-Projects/Basic/Pokemon-Card/styles.css @@ -0,0 +1,92 @@ +@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Arial', sans-serif; +} + +.main{ + width: 100%; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background-image: url(images/background.jpg); + background-position: center; + background-size: cover; +} + +.profile-card{ + display: flex; + flex-direction: column; + align-items: center; + max-width: 400px; + width: 100%; + border-radius: 25px; + padding: 30px; + border: 1px solid #ffffff40; + box-shadow: 0 5px 20px rgba(0,0,0,0.4); +} + +.image{ + position: relative; + height: 150px; + width: 150px; +} + +.image .profile-pic{ + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 80%; + box-shadow: 0 5px 20px rgba(0,0,0,0.7); +} + +.data{ + display: flex; + flex-direction: column; + align-items: center; + margin-top: 15px; +} + +.data h2{ + font-size: 33px; + font-weight: 600; +} + +span{ + font-size: 18px; +} + +.row{ + display: flex; + align-items: center; + margin-top: 30px; +} + +.row .info{ + text-align: center; + padding: 0 20px; +} + +.buttons{ + display: flex; + align-items: center; + margin-top: 30px; +} + +.buttons .btn{ + color: #080707; + text-decoration: none; + margin: 0 20px; + padding: 8px 25px; + border-radius: 25px; + font-size: 18px; + white-space: nowrap; + background: linear-gradient(to left, #ebf858 0%, #f3a647 100%); +} + +.buttons .btn:hover{ + box-shadow: inset 0 5px 20px rgba(0,0,0,0.6); +} \ No newline at end of file diff --git a/Front-end-Projects/README.md b/Front-end-Projects/README.md index dc36b476..9c6300c0 100644 --- a/Front-end-Projects/README.md +++ b/Front-end-Projects/README.md @@ -44,9 +44,9 @@ #### :zap: Row 6 -| | | | +| | | | |:--:|:--:|:--:| -| [Amazon Clone](./Basic/Amazon-Clone) | | | +| [Amazon Clone](./Basic/Amazon-Clone) | [Pokemon Card](./Basic/Pokemon-Card) | | ---