Skip to content

Commit 2dd108f

Browse files
shivamsisodia07shivamsisodia07
committed
added avatar generator project
1 parent e4af971 commit 2dd108f

File tree

6 files changed

+215
-0
lines changed

6 files changed

+215
-0
lines changed

‎AvatarGenerator/shivamsisodia07/avatar.css

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
font-family: 'Luckiest Guy', cursive;
6+
7+
}
8+
9+
section{
10+
width: 100%;
11+
height: 100vh;
12+
display: flex;
13+
justify-content: center;
14+
flex-direction: column;
15+
align-items: center;
16+
background: linear-gradient(to bottom, #33ccff 0%, #f10bf1 100%);
17+
}
18+
section h1{
19+
word-spacing: 10px;
20+
margin-bottom: 14px;
21+
font-size: 1.9rem;
22+
text-transform: uppercase;
23+
letter-spacing: 2px;
24+
padding-left: 30px;
25+
}
26+
27+
.centerDiv{
28+
width: 60%;
29+
height: 450px;
30+
box-shadow:2px 2px 2px 5px white;
31+
display: flex;
32+
flex-direction: column;
33+
align-items: center;
34+
justify-content: center;
35+
background: linear-gradient(to left top, #ec0d97 0%,#1c2bf3 90%);
36+
color: white;
37+
}
38+
39+
40+
.details{
41+
text-align: center;
42+
text-transform: uppercase;
43+
}
44+
45+
.details label{
46+
font-size: 1.4rem;
47+
48+
}
49+
.details input {
50+
padding: 10px;
51+
background-color: #fafaf5;
52+
color: black;
53+
text-align: center;
54+
}
55+
section h1,.details label{
56+
text-shadow: 0 0 2px rgb(0, 0, 0), 0 0 3px white;
57+
color: rgb(255, 5, 109);}
58+
59+
section h1:hover,.details label:hover{
60+
text-shadow: 2px 5px 5px #2f3542;
61+
color: white;}
62+
63+
.details input[type=text]:focus {
64+
background-color: #c6eaf3;
65+
border: 3px solid #555;
66+
}
67+
68+
.imgdiv {
69+
margin: 30px 0;
70+
}
71+
72+
.clickme{
73+
background: #3498db;
74+
width: 180px;
75+
padding: 4px 0;
76+
border-radius: 3px;
77+
color:white;
78+
font-size: 1.2rem;
79+
letter-spacing: 2px;
80+
background-color: darken(#f1c40f, 20%);
81+
}
82+
83+
84+
.clickme:hover {
85+
cursor: pointer;
86+
background: rgb(35, 21, 231);
87+
color: rgb(243, 7, 97);
88+
text-shadow: 0 0 3px #f7eded, 0 0 10px #faf7f9;
89+
}
90+
/* .gender{
91+
width: 20%;
92+
height: 5%;
93+
font-size: 0.9rem;
94+
background-color: #fafaf5;
95+
color: black;
96+
text-align: center;
97+
border: 2px solid black;
98+
border-radius: 10%;
99+
text-size-adjust: auto;
100+
101+
} */
102+
103+
.dark{
104+
display:block;
105+
visibility: visible;
106+
background: #f70475;
107+
width: 100px;
108+
padding: 4px 0;
109+
border-radius: 3px;
110+
color:rgb(3, 3, 3);
111+
font-size: 0.8rem;
112+
letter-spacing: 2px;
113+
background-color: darken(#f1c40f, 20%);
114+
}
115+
116+
.light{
117+
display: block;
118+
visibility:hidden;
119+
background: #ff016b;
120+
width: 100px;
121+
padding: 4px 0;
122+
border-radius: 3px;
123+
color:white;
124+
font-size: 0.8rem;
125+
letter-spacing: 2px;
126+
background-color: darken(#f1c40f, 20%);
127+
}
128+
129+
.light:hover,.dark:hover{
130+
cursor: pointer;
131+
background: rgb(0, 0, 0);
132+
color: rgb(243, 7, 97);
133+
text-shadow: 0 0 2px #fffefe, 0 0 5px #faf7f9;
134+
}
135+
136+
footer{
137+
display: flex;
138+
height: 20vh;
139+
background: linear-gradient(to top, #1c2bf3 0%,#f10bf1 95%);
140+
justify-content: flex-end;
141+
vertical-align:bottom;
142+
padding-top: 100px;
143+
color: rgb(15, 226, 226);
144+
}

‎AvatarGenerator/shivamsisodia07/avatar.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>avatar</title>
6+
<link rel="stylesheet" type="text/css" href="avatar.css">
7+
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
8+
9+
</head>
10+
11+
<body>
12+
13+
<section>
14+
<h1>ENTER YOUR NAME AND PRESS "CLICK Me" BUTTON TO GENERATE A AVATAR THAT DESCRIBE YOUR PERSONALITY.</h1>
15+
16+
<div class="centerDiv">
17+
<div class="details">
18+
<label>ENTER YOUR NAME</label><br>
19+
<input type="text" name="" id="nameid">
20+
</div>
21+
22+
<div class="imgdiv">
23+
<img src="https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/21760012/original/d4c0c142f91f012c9a8a9c9aeef3bac28036f15b/create-your-cartoon-style-flat-avatar-or-icon.jpg"
24+
width="200" height="200" class="imgchange">
25+
</div>
26+
27+
<button class="clickme"> Click Me</button>
28+
<br>
29+
30+
<button class="light">light mode</button>
31+
<button class="dark">dark mode</button>
32+
</div>
33+
</section>
34+
35+
<footer>made by shivam sisodia</footer>
36+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
37+
<script src="avatar.js"></script>
38+
39+
40+
</body>
41+
42+
</html>
43+
44+
45+

‎AvatarGenerator/shivamsisodia07/avatar.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
$(document).ready(function(){
3+
$('.clickme').click(function(){
4+
const name = $('#nameid').val();
5+
alert(name);
6+
$('.imgchange').attr('src'
7+
,`https://joeschmoe.io/api/v1/${name}`);
8+
const b = $('.imgchange');
9+
console.log(b);
10+
11+
});
12+
});
13+
14+
$(".light").on("click", function () {
15+
$("section").css("background","linear-gradient(to bottom, #33ccff 0%, #ff66ff 100%)");
16+
$(".centerDiv").css("background","linear-gradient(to left top, #ec0d97 0%,#1c2bf3 90%)")
17+
$(".dark").css("visibility","visible");
18+
$(".light").css("visibility","hidden");
19+
});
20+
21+
$(".dark").on("click", function () {
22+
$("section").css("background","rgb(6 10 12 / 98%)");
23+
$(".centerDiv").css("background","rgb(62 6 6 / 45%)")
24+
$(".dark").css("visibility","hidden");
25+
$(".light").css("visibility","visible");
26+
});

‎AvatarGenerator/shivamsisodia07/screenshot of project/Screenshot (3).png

162 KB
Loading

‎AvatarGenerator/shivamsisodia07/screenshot of project/Screenshot (4).png

152 KB
Loading

‎AvatarGenerator/shivamsisodia07/screenshot of project/Screenshot (5).png

607 KB
Loading

0 commit comments

Comments
 (0)