Skip to content

Commit

Permalink
add favicon projects
Browse files Browse the repository at this point in the history
  • Loading branch information
@Matheus1714
Matheus1714 committed Sep 9, 2023
1 parent 010c501 commit e34554a
Show file tree
Hide file tree
Showing 15 changed files with 1,264 additions and 1,186 deletions.
31 changes: 18 additions & 13 deletions tutorials/3D Book Hover Effects/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
<section>
<div class="book">
<img src="cover.jpg">
</div>
</section>
</body>
</html>
<head>
<meta charset="uft-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" type="text/css" />
<link
rel="shortcut icon"
href="../../assets/logo-online-tutorials.jpg"
type="image/x-icon"
/>
</head>
<body>
<section>
<div class="book">
<img src="cover.jpg" />
</div>
</section>
</body>
</html>
35 changes: 20 additions & 15 deletions tutorials/3D Rotation/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<div class="box">
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="./index.css" />
<link
rel="shortcut icon"
href="../../assets/logo-online-tutorials.jpg"
type="image/x-icon"
/>
</head>
<body>
<div class="box">
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
53 changes: 29 additions & 24 deletions tutorials/Animate M Wave/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./index.css" type="text/css">
</head>
<body>
<div class="loader">
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="./index.css" type="text/css" />
<link
rel="shortcut icon"
href="../../assets/logo-online-tutorials.jpg"
type="image/x-icon"
/>
</head>
<body>
<div class="loader">
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>

<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>

<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
</div>
</body>
</html>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
</div>
</body>
</html>
47 changes: 26 additions & 21 deletions tutorials/Animated Background Image Loop Animation/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./index.css" type="text/css">
</head>
<body>
<section>
<h2>I Love Coffee</h2>
<div class="banner">
<div class="blocks"></div>
</div>
</section>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="./index.css" type="text/css" />
<link
rel="shortcut icon"
href="../../assets/logo-online-tutorials.jpg"
type="image/x-icon"
/>
</head>
<body>
<section>
<h2>I Love Coffee</h2>
<div class="banner">
<div class="blocks"></div>
</div>
</section>

<script>
const banner = document.getElementsByClassName('banner')[0];
const blocks = document.getElementsByClassName('blocks');
<script>
const banner = document.getElementsByClassName("banner")[0]
const blocks = document.getElementsByClassName("blocks")

for(let i = 1; i < 400; i++){
banner.innerHTML += "<div class='blocks'></div>";
blocks[i].style.animationDelay = `${i * 0.05}s`;
}
</script>
</body>
</html>
for (let i = 1; i < 400; i++) {
banner.innerHTML += "<div class='blocks'></div>"
blocks[i].style.animationDelay = `${i * 0.05}s`
}
</script>
</body>
</html>
81 changes: 43 additions & 38 deletions tutorials/Anime JS Background Animation Effects/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" href="./index.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2><span>Enterprise</span><br>Dingo</h2>
</div>
<head>
<meta charset="utf-8" />
<link type="text/css" href="./index.css" rel="stylesheet" />
<link
rel="shortcut icon"
href="../../assets/logo-online-tutorials.jpg"
type="image/x-icon"
/>
</head>
<body>
<div class="container">
<h2><span>Enterprise</span><br />Dingo</h2>
</div>

<script src="anime.min.js"></script>
<script src="anime.min.js"></script>

<script>
const container = document.querySelector('.container');
for(let i = 0; i <= 50; i++ ){
const blocks = document.createElement('div');
blocks.classList.add('block');
container.appendChild(blocks);
}
<script>
const container = document.querySelector(".container")
for (let i = 0; i <= 50; i++) {
const blocks = document.createElement("div")
blocks.classList.add("block")
container.appendChild(blocks)
}

function animateBlocks(){
anime({
targets: '.block',
translateX: function(){
return anime.random(-700, 700);
},
translateY: function(){
return anime.random(-500, 500);
},
scale: function(){
return anime.random(1, 5);
},
easing:'linear',
duration: 3000,
delay: anime.stagger(10),
loop: true
})
}
function animateBlocks() {
anime({
targets: ".block",
translateX: function () {
return anime.random(-700, 700)
},
translateY: function () {
return anime.random(-500, 500)
},
scale: function () {
return anime.random(1, 5)
},
easing: "linear",
duration: 3000,
delay: anime.stagger(10),
loop: true,
})
}

animateBlocks();
</script>
</body>
</html>
animateBlocks()
</script>
</body>
</html>
71 changes: 38 additions & 33 deletions tutorials/Clock/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="./index.css" rel="stylesheet">
</head>
<body>
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
<head>
<meta charset="utf-8" />
<link href="./index.css" rel="stylesheet" />
<link
rel="shortcut icon"
href="../../assets/logo-online-tutorials.jpg"
type="image/x-icon"
/>
</head>
<body>
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>

<script type="text/javascript">
const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');
<script type="text/javascript">
const deg = 6
const hr = document.querySelector("#hr")
const mn = document.querySelector("#mn")
const sc = document.querySelector("#sc")

setInterval(()=>{
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
setInterval(() => {
let day = new Date()
let hh = day.getHours() * 30
let mm = day.getMinutes() * deg
let ss = day.getSeconds() * deg

hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${(mm)}deg)`;
sc.style.transform = `rotateZ(${(ss)}deg)`;
});
</script>
</body>
</html>
hr.style.transform = `rotateZ(${hh + mm / 12}deg)`
mn.style.transform = `rotateZ(${mm}deg)`
sc.style.transform = `rotateZ(${ss}deg)`
})
</script>
</body>
</html>
5 changes: 5 additions & 0 deletions tutorials/Dark Neumorphism Cards/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dark Neumorphism Cards</title>
<link rel="stylesheet" href="./index.css" />
<link
rel="shortcut icon"
href="../../assets/logo-online-tutorials.jpg"
type="image/x-icon"
/>
</head>
<body>
<div class="container">
Expand Down
Loading

0 comments on commit e34554a

Please sign in to comment.