avatar

Avdhesh-Varshney · Nov 7, 2024 · 2a3a1ea · 2a3a1ea
1 parent c6d01f7
commit 2a3a1ea
Show file tree

Hide file tree

Showing 4 changed files with 285 additions and 0 deletions.
diff --git a/Front-end-Projects/Basic/Avatar generator/READMe.md b/Front-end-Projects/Basic/Avatar generator/READMe.md
@@ -0,0 +1,68 @@
+<h1 align='center'><b>💥 Avatar Generator💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+
+
+<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)
+
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <p>A modern, interactive CSS Avatar Generator that lets users customize colors, shapes, and sizes to create unique avatars.</p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<div>
+    <p>To run this project locally, follow these steps:
+
+1. Fork the repository.
+
+2. Clone the repository to your local machine:
+    git clone 
+
+3. Open the project folder in your preferred code editor, now you can view website in live.
+
+</p>
+</div>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+
+<img src='./screenshot.webp'>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Shriya</i></b></h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/khushi-pushkar-9029b8287/'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/shriyadindi'>
+    <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>
diff --git a/Front-end-Projects/Basic/Avatar generator/index.html b/Front-end-Projects/Basic/Avatar generator/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Avatar Generator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="main-container">
+        <h1>Avatar Customizer</h1>
+        <div class="avatar-container">
+            <div class="avatar">
+                <div class="face">
+                    <div class="eyes">
+                        <div class="eye left-eye"></div>
+                        <div class="eye right-eye"></div>
+                    </div>
+                    <div class="mouth"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="controls">
+            <h2>Customize Your Avatar</h2>
+
+            <div class="control-group">
+                <label for="skinColor">Skin Color</label>
+                <input type="color" id="skinColor" value="#ffcc99">
+            </div>
+
+            <div class="control-group">
+                <label for="eyeColor">Eye Color</label>
+                <input type="color" id="eyeColor" value="#000000">
+            </div>
+
+            <div class="control-group">
+                <label for="mouthSize">Mouth Size</label>
+                <input type="range" id="mouthSize" min="1" max="5" value="3">
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+    const skinColorPicker = document.getElementById("skinColor");
+    const eyeColorPicker = document.getElementById("eyeColor");
+    const mouthSizeSlider = document.getElementById("mouthSize");
+
+    const avatar = document.querySelector(".avatar");
+    const eyes = document.querySelectorAll(".eye");
+    const mouth = document.querySelector(".mouth");
+
+    // Update skin color
+    skinColorPicker.addEventListener("input", function() {
+        avatar.style.backgroundColor = skinColorPicker.value;
+    });
+
+    // Update eye color
+    eyeColorPicker.addEventListener("input", function() {
+        eyes.forEach(eye => {
+            eye.style.backgroundColor = eyeColorPicker.value;
+        });
+    });
+
+    // Update mouth size
+    mouthSizeSlider.addEventListener("input", function() {
+        const size = mouthSizeSlider.value * 8; // Adjust the size factor as desired
+        mouth.style.width = `${size}px`;
+        mouth.style.height = `${size / 2}px`;
+    });
+});
+    </script>
+</body>
+</html>
diff --git a/Front-end-Projects/Basic/Avatar generator/screenshot.webp b/Front-end-Projects/Basic/Avatar generator/screenshot.webp
diff --git a/Front-end-Projects/Basic/Avatar generator/styles.css b/Front-end-Projects/Basic/Avatar generator/styles.css
@@ -0,0 +1,142 @@
+/* Reset basic styling */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: linear-gradient(135deg, #f0f8ff, #add8e6);
+    font-family: Arial, sans-serif;
+}
+
+.main-container {
+    text-align: center;
+    max-width: 800px;
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+h1 {
+    font-size: 1.8rem;
+    color: #333;
+    margin-bottom: 15px;
+}
+
+.avatar-container {
+    margin-top: 20px;
+}
+
+.avatar {
+    width: 150px;
+    height: 150px;
+    background-color: #ffcc99;
+    border-radius: 50%;
+    position: relative;
+    border: 3px solid #e0e0e0;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    margin: auto;
+    transition: transform 0.3s ease;
+}
+
+.avatar:hover {
+    transform: scale(1.05);
+}
+
+.face {
+    position: relative;
+    top: 35%;
+}
+
+.eyes {
+    display: flex;
+    justify-content: space-around;
+    margin: 0 25px;
+}
+
+.eye {
+    width: 15px;
+    height: 15px;
+    background-color: #000;
+    border-radius: 50%;
+}
+
+.mouth {
+    width: 40px;
+    height: 20px;
+    background-color: red;
+    border-radius: 0 0 40px 40px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 55%;
+}
+
+.controls {
+    margin-top: 20px;
+    text-align: left;
+}
+
+h2 {
+    color: #333;
+    font-size: 1.4rem;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.control-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 15px;
+}
+
+.control-group label {
+    color: #555;
+    font-size: 0.9rem;
+    margin-bottom: 5px;
+}
+
+.control-group input[type="color"],
+.control-group input[type="range"] {
+    border: none;
+    outline: none;
+    height: 30px;
+    border-radius: 5px;
+    transition: box-shadow 0.2s ease;
+}
+
+.control-group input[type="color"]:hover,
+.control-group input[type="range"]:hover {
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+input[type="range"] {
+    width: 100%;
+    -webkit-appearance: none;
+    background: #ddd;
+    height: 5px;
+    border-radius: 5px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background-color: #333;
+    border-radius: 50%;
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+}
+
+input[type="range"]::-moz-range-thumb {
+    background-color: #333;
+    border-radius: 50%;
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+}