Basic frontend pokemoncard

Front-end-Projects/Basic/Pokemon-Card/README.md

@@ -0,0 +1,71 @@
+<h1 align='center'><b>💥 Pokemon Abilities Card 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+
+  ![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)
+  <!-- ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) -->
+  <!-- ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) -->
+  <!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
+  <!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
+  <!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
+  <!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
+  <!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
+  <!-- ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
+  <!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
+  <!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
+  <!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
+  <!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
+  <!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>This is a basic introduction to profile cards and how they can be used to make fun card games.</p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+
+- 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 📸
+<!-- add the screenshot of the project (Mandatory) -->
+
+<img src='./screenshot.webp'>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Prachi Kansal</i></b></h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/prachi-kansal/'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/prachi-0319'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>

Front-end-Projects/Basic/Pokemon-Card/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title> Pokemon Card Example </title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+  <section class="main">
+
+  <div class="profile-card">
+
+    <div class="image">
+        <image src = "images/charizard_profile.png" class="profile-pic"></image>
+    </div>
+
+    <div class="data">
+      <h2>Charizard</h2>
+      <span>Stage 2 Pokémon</span>
+    </div>
+
+    <div class="row">
+      <div class="info">
+        <h3>HP (Fire)</h3>
+        <span>170</span>
+      </div>
+      <div class="info">
+        <h3>Ability</h3>
+        <span>Battle Sense</span>
+      </div>
+      <div class="info">
+        <h3>Royal Blaze</h3>
+        <span>100+</span>
+      </div>
+    </div>
+
+    <div class="buttons">
+      <a href="#" class="btn">Play</a>
+      <a href="#" class="btn">Draw</a>
+    </div>
+
+  </div>
+</section>
+</body>
+</html>

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);
+}