Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added a new project named Customizable CSS-Themed Avatar Generator under 'frontend' (Issue #1028) #1031

Closed
wants to merge 2 commits into from
Closed

Added a new project named Customizable CSS-Themed Avatar Generator under 'frontend' (Issue #1028) #1031

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2a3a1ea
avatar
shriyadindi Nov 7, 2024
b6ec998
Avatar
shriyadindi Nov 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions Front-end-Projects/Basic/Avatar customizer/READMe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
75 changes: 75 additions & 0 deletions Front-end-Projects/Basic/Avatar customizer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Binary file added Front-end-Projects/Basic/Avatar customizer/screenshot.webp
View file
Open in desktop
Binary file not shown.
142 changes: 142 additions & 0 deletions Front-end-Projects/Basic/Avatar customizer/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}