Skip to content

Commit

Permalink
Feature1 (#2819)
Browse files Browse the repository at this point in the history
* art added by Amrutha

* deleted additional files

* requested changes editted

* requested changes editted -2

* Update meta.json

---------

Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com>
  • Loading branch information
AMRUTHA-BYSANI and LaurelineP authored Oct 31, 2024
1 parent 140e5bd commit b65dd07
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 0 deletions.
25 changes: 25 additions & 0 deletions Art/AMRUTHA-BYSANI-LoadingColoursAnimation/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>turning circle</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="coin"></div>
</div>
<div class="box">
<div class="coin"></div>
</div>
<div class="box">
<div class="coin"></div>
</div><div class="box">
<div class="coin"></div>

</div>

</body>
</html>
4 changes: 4 additions & 0 deletions Art/AMRUTHA-BYSANI-LoadingColoursAnimation/meta.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"artName": "Loading Colours",
"githubHandle": "AMRUTHA-BYSANI"
}
37 changes: 37 additions & 0 deletions Art/AMRUTHA-BYSANI-LoadingColoursAnimation/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
body {
background-color: #000000;
}
.box{
perspective: 120px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.container{
display: flex;
flex-direction: row;
gap: 10px;
justify-content: center;
align-items: center;
height: 100hv;
}

.coin {
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(135deg, #FF5F6D, #FFC371, #36D1DC, #5B86E5, #A1FFCE);
;
animation: twist 2s ease-in-out alternate infinite;
}

@keyframes twist {

to{
transform: rotateX(360deg) scale(0.5);
}

}

0 comments on commit b65dd07

Please sign in to comment.