Skip to content

Commit

Permalink
Merge pull request #485 from apu52/Web-Animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Shreyarajpal12
Shreyarajpal12 authored Jul 15, 2023
2 parents 44ffb4b + 7de498f commit 4f6df66
Show file tree
Hide file tree
Showing 7 changed files with 345 additions and 1 deletion.
12 changes: 11 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,16 @@ <h3 class="card__heading">Tic Tac Toe</h3>
<h3 class="card__heading">Top 10 rated Netflix Series of 2023</h3>
</div>
</a>

<a class="card" href="projects/Web Animation/index.html">
<div class="card__background" style="background-image: url(projects/Web Animation/Web Animation.png)"></div>
<div class="card__content">
<p class="card__category">Web Animation</p>
<h3 class="card__heading">Coffee Machine</h3>
</div>
</a>


<a class="card" href="projects/Candy_Crush/index.html">
<div class="card__background" style="background-image: url(projects/Candy_Crush/candy-crush-background-2.png)">
</div>
Expand Down Expand Up @@ -466,5 +476,5 @@ <h4>IEEE SSIT VIT © 2023</h4>
<script src="script.js"></script>
<script src="assets/to_top.js"></script>
</body>

</html>

Empty file added projects/Web Animation/Contributing.md
View file
Empty file.
Empty file added projects/Web Animation/Contributors.md
View file
Empty file.
21 changes: 21 additions & 0 deletions projects/Web Animation/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
**Describe the project you want to add with tech stack**
<!-- A clear and concise description of what the bug is. -->
### Hello Sir/Ma'am👋,
I am Arpan Chowdhury, a web developer, here is my front-end project of Web animation of a Coffee Machine ☕using HTML & CSS.


**Expected behavior**
### Description
<!-- A clear and concise description of what you expected to happen. -->
It is a simple Coffee-maker where you can see the one cup holding coffee, the coffee releasing point, button.☕


**Screenshots (optional)**
<!-- If applicable, add screenshots to help explain your problem. -->
https://github.com/apu52/Webanimation/assets/114172928/973a4001-8e02-408c-939b-8fe9e1d2d522



**Additional context (optional )**
<!-- Add any other context about the problem here. -->
Please **Assign** me the issue🙏under GSSOC'23.
Binary file added projects/Web Animation/Web Animation.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
281 changes: 281 additions & 0 deletions projects/Web Animation/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,281 @@
.container {
width: 300px;
height: 280px;
position: absolute;
top: calc(50% - 140px);
left: calc(50% - 150px);
border: 1px solid white;
}

.coffee-header {
width: 100%;
height: 80px;
position: absolute;
top: 0;
left: 0;
background-color: #ddcfcc;
border-radius: 10px;
}
.coffee-header_buttons {
width: 25px;
height: 25px;
position: absolute;
top: 25px;
background-color: #282323;
border-radius: 50%;
}
.coffee-header_buttons::after {
content: "";
width: 8px;
height: 8px;
position: absolute;
bottom: -8px;
left: calc(50% - 4px);
background-color: #615e5e;
}
.coffee-header_button-one {
left: 15px;
}

.coffee-header_button-two {
left: 50px;
}

.coffee-header_display {
width: 50px;
height: 50px;
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
border-radius: 50%;
background-color: #9acfc5;
border: 5px solid #43beae;
box-sizing: border-box;
}
.coffee-header_details {
width: 8px;
height: 20px;
position: absolute;
top: 10px;
right: 10px;
background-color: #9b9091;
box-shadow: -12px 0 0 #9b9091, -24px 0 0 #9b9091;
}

/*
/////////////////////medium section */

.coffee-medium {
width: 90%;
height: 160px;
position: absolute;
top: 80px;
left: calc(50% - 45%);
background-color: #bcb0af;
}

.coffee-medium::before {
content: "";
width: 90%;
height: 100px;
background-color: #776f6e;
position: absolute;
bottom: 0;
left: calc(50% - 45%);
border-radius: 20px 20px 0 0;
}

.coffee-medium_exit {
width: 60px;
height: 20px;
position: absolute;
top: 0;
left: calc(50% - 30px);
background-color: #231f20;
}

.coffee-medium_exit::before {
content: "";
width: 50px;
height: 20px;
border-radius: 0 0 50% 50%;
position: absolute;
bottom: -20px;
left: calc(50% - 25px);
background-color: #231f20;
}

.coffee-medium_exit::after {
content: "";
width: 10px;
height: 10px;
position: absolute;
bottom: -30px;
left: calc(50% - 5px);
background-color: #231f20;
}
.coffee-medium_arm {
content: "";
width: 70px;
height: 20px;
position: absolute;
top: 15px;
right: 25px;
background-color: #231f20;
}

.coffee-medium_arm::before {
content: "";
width: 15px;
height: 5px;
position: absolute;
top: 7px;
left: -15px;
background-color: #9e9495;
}

.coffee-medium_cup {
width: 80px;
height: 47px;
position: absolute;
bottom: 0;
left: calc(50% - 40px);
background-color: #fff;
border-radius: 0 0 70px 70px / 0 0 110px 110px;
}
.coffee-medium_cup::after {
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 6px;
right: -13px;
border: 5px solid #fff;
border-radius: 50%;
}

@keyframes liquid {
0% {
height: 0px;
opacity: 1;
}

5% {
height: 0px;
opacity: 1;
}
20% {
height: 62px;
opacity: 1;
}
95% {
height: 62px;
opacity: 1;
}
100% {
height: 62px;
opacity: 1;
}
}

.coffee-medium_liquid {
width: 6px;
height: 63px;
opacity: 0;
position: absolute;
top: 50px;
left: calc(50% - 3px);
background-color: #74372b;
animation: liquid 4s 4s linear infinite;
}

.coffee-medium_smoke {
width: 8px;
height: 20px;
position: absolute;
border-radius: 5px;
background-color: #b3aeae;
}
@keyframes smokeone {
0% {
bottom: 40px;
opacity: 0;
}

40% {
bottom: 70px;
opacity: 5;
}
80% {
bottom: 80px;
opacity: 3;
}
100% {
bottom: 80px;
opacity: 0;
}
}

@keyframes smoketwo {
0% {
bottom: 40px;
opacity: 0;
}

40% {
bottom: 70px;
opacity: 5;
}
80% {
bottom: 80px;
opacity: 3;
}
100% {
bottom: 80px;
opacity: 0;
}
}

.coffee-medium_smoke-one {
opacity: 0;
bottom: 50px;
left: 102px;
animation: smokeone 3s 4s linear infinite;
}
.coffee-medium_smoke-two {
opacity: 0;
bottom: 70px;
left: 118px;
animation: smoketwo 3s 4s linear infinite;
}
.coffee-medium_smoke-three {
opacity: 0;
bottom: 50px;
left: 140px;
animation: smoketwo 3s 4s linear infinite;
}
.coffee-medium_smoke-four {
opacity: 0;
bottom: 70px;
left: 157px;
animation: smoketwo 4s 5s linear infinite;
}
.coffee-footer {
width: 95%;
height: 15px;
position: absolute;
bottom: 25px;
left: calc(50% - 47.5%);
background-color: #41bdab;
border-radius: 10px;
}

.coffee-footer::after {
content: "";
width: 106%;
height: 26px;
position: absolute;
bottom: -25px;
left: -8px;
background-color: #000;
}
32 changes: 32 additions & 0 deletions projects/Web Animation/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="coffee-header">
<div class="coffee-header_buttons coffee-header_button-one"></div>
<div class="coffee-header_buttons coffee-header_button-two"></div>
<div class="coffee-header_display"></div>
<div class="coffee-header_details"></div>
</div>
<div class="coffee-medium">
<div class="coffee-medium_exit"></div>
<div class="coffee-medium_arm"></div>
<div class="coffee-medium_liquid"></div>
<div class="coffee-medium_smoke"></div>
<div class="coffee-medium_smoke coffee-medium_smoke-one"></div>
<div class="coffee-medium_smoke coffee-medium_smoke-two"></div>
<div class="coffee-medium_smoke coffee-medium_smoke-three"></div>
<div class="coffee-medium_smoke coffee-medium_smoke-four"></div>
<div class="coffee-medium_cup"></div>
</div>
<div class="coffee-footer"></div>
</div>
</body>
</html>

0 comments on commit 4f6df66

Please sign in to comment.