Skip to content

Commit 387581d

Browse files
author
mohammed
committed
edited the readme file and added new project
1 parent b3c93a2 commit 387581d

23 files changed

+435
-1
lines changed

‎3dot-loader/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title></title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link href="style.css" rel="stylesheet">
8+
</head>
9+
<body>
10+
<div class="loader">
11+
<div class="dot d1"></div>
12+
<div class="dot d2"></div>
13+
<div class="dot d3"></div>
14+
</div>
15+
</body>
16+
</html>

‎3dot-loader/style.css

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
2+
* {
3+
font-family: Arial, Helvetica, sans-serif;
4+
}
5+
6+
.loader {
7+
background-color: whitesmoke;
8+
position: absolute;
9+
width: 100vw;
10+
height: 100vh;
11+
/* position: relative; */
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
transition: opacity 1s ease-in-out;
16+
}
17+
18+
.dot {
19+
background: #111;
20+
width: 25px;
21+
height: 25px;
22+
margin: 0 7px;
23+
border-radius: 50%;
24+
animation: load infinite 0.3s alternate ;
25+
}
26+
27+
.d2 {
28+
animation-delay: 0.05s;
29+
}
30+
.d3 {
31+
animation-delay: 0.1s;
32+
}
33+
@keyframes load {
34+
100% {
35+
transform: translateY(-30px);
36+
}
37+
}

‎copy/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<title>HTML</title>
9+
10+
<!-- HTML -->
11+
12+
13+
<!-- Custom Styles -->
14+
<link rel="stylesheet" href="style.css">
15+
</head>
16+
17+
<body>
18+
<ul>
19+
<li><a href="/">Home</a></li>
20+
<li><a href="/Help">Help</a></li>
21+
<li><a href="/about">About</a></li>
22+
<li><a href="/add">Add</a></li>
23+
<li><a href="/contact">contact</a></li>
24+
</ul>
25+
26+
<p id="t">hellow yikncff</p>
27+
<button id="btn">copy</button>
28+
<textarea rows="8" cols="40"></textarea>
29+
<script src="main.js"></script>
30+
</body>
31+
</html>

‎copy/main.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
const btn = document.getElementById('btn')
3+
const t = document.getElementById('t')
4+
5+
btn.addEventListener('click', () => {
6+
navigator.clipboard.writeText(t.innerText)
7+
alert('done')
8+
})

‎copy/package.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "copy",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "main.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC"
12+
}

‎copy/style.css

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
* { font-family: sans-serif;
2+
3+
}
4+
5+
.btn {
6+
border-radius: 4px;
7+
padding: 7px 10px;
8+
background-color: dodgerblue;
9+
cursor: pointer;
10+
position: relative;
11+
left: 100px;
12+
top:50px;
13+
color: white;
14+
font-size: 20px;
15+
16+
}

‎frost/img/bears.jpg

148 KB
Loading

‎frost/index.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title></title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link href="style.css" rel="stylesheet">
8+
</head>
9+
<body>
10+
<div class="home">
11+
<div class="container">
12+
<button id="btn" type="button">Hello</button>
13+
</div>
14+
</div>
15+
<script>
16+
const btn = document.getElementById('btn')
17+
18+
btn.addEventListener('click', () => {
19+
// navigator.clipboard.writeText(t.innerText)
20+
alert('done')
21+
})
22+
</script>
23+
</body>
24+
</html>

‎frost/main.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
const btn = document.getElementById('btn')
3+
4+
btn.addEventListener('click', () => {
5+
// navigator.clipboard.writeText(t.innerText)
6+
alert('done')
7+
})

‎frost/style.css

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
.home {
8+
background: url("./img/bears.jpg");
9+
height: 100vh;
10+
width: 100vw;
11+
background-repeat: no-repeat;
12+
background-position: center;
13+
background-attachment: fixed;
14+
background-size: cover;
15+
}
16+
17+
.container {
18+
width: 250px;
19+
height: 200px;
20+
background: inherit;
21+
box-shadow:0 0 10px rgba(0, 0, 0, 0.4);
22+
margin: 0 auto;
23+
border-radius: 5px;
24+
position: relative;
25+
top: 100px;
26+
z-index: 1;
27+
display: flex;
28+
justify-content: center;
29+
align-items: center;
30+
}
31+
.container::before {
32+
content: '';
33+
position: absolute;
34+
background: inherit;
35+
z-index: -1;
36+
inset: 0;
37+
filter: blur(10px);
38+
margin: -10px;
39+
}
40+
.container button {
41+
background: dodgerblue;
42+
cursor: pointer;
43+
border-radius: 4px;
44+
border: none;
45+
color: white;
46+
font-family: sans-serif;
47+
font-size: 20px;
48+
letter-spacing: 1px;
49+
font-weight: 500;
50+
padding: 5px 10px;
51+
}

‎glassmorphism/img/bears.jpg

148 KB
Loading

‎glassmorphism/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title></title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link href="style.css" rel="stylesheet">
8+
</head>
9+
<body>
10+
<div class="glass"></div>
11+
</body>
12+
</html>

‎glassmorphism/style.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
* { background: url("./img/bears.jpg");
2+
background-repeat: no-repeat;
3+
background-size: cover;
4+
5+
}
6+
7+
.glass {
8+
width: 200px;
9+
height: 150px;
10+
position: absolute;
11+
top: 200px;
12+
left: 100px;
13+
/* glassmorphism */
14+
background: rgba( 0, 0, 0, 0.25 );
15+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
16+
backdrop-filter: blur( 20px );
17+
-webkit-backdrop-filter: blur( 20px );
18+
border-radius: 10px;
19+
border: 1px solid rgba( 255, 255, 255, 0.18 );
20+
}

‎package.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "learn",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC"
12+
}

‎readme.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
#hello this my first concious rep
1+
#hello this my first concious repo
2+
3+
#trying update the the readmd file

‎scroll/index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title></title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link href="style.css" rel="stylesheet">
8+
</head>
9+
<body>
10+
<div id="progress"></div>
11+
<button class="top hidden"><svg class='svg'
12+
xmlns="http://www.w3.org/2000/svg"
13+
fill="none"
14+
viewBox="0 0 24 24"
15+
stroke="currentColor"
16+
>
17+
<path
18+
stroke-linecap="round"
19+
stroke-linejoin="round"
20+
stroke-width="2"
21+
d="M7 11l5-5m0 0l5 5m-5-5v12"
22+
/>
23+
</svg></button>
24+
<script src="main.js">
25+
</script>
26+
</body>
27+
</html>

‎scroll/main.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const scrolls = 700
2+
3+
const tops = document.querySelector('.top')
4+
const progress = document.getElementById('progress')
5+
6+
const goTop = () => {
7+
document.body.scrollIntoView({
8+
behavior: 'smooth'
9+
})
10+
}
11+
const scrollContainer = () => {
12+
return document.documentElement || document.body
13+
}
14+
15+
document.addEventListener('scroll', () => {
16+
const scrollPrecenge = (scrollContainer().scrollTop / (scrollContainer().scrollHeight - scrollContainer().clientHeight)) * 100
17+
18+
progress.style.width = `${scrollPrecenge}%`
19+
if (scrollContainer().scrollTop > scrolls) {
20+
tops.classList.remove('hidden')
21+
} else {
22+
tops.classList.add('hidden')
23+
}
24+
})
25+
26+
tops.addEventListener('click', goTop)

‎scroll/style.css

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
* {
2+
height: 5000px;
3+
4+
}
5+
6+
.top {
7+
position: fixed;
8+
padding: .2rem;
9+
border-radius: 100%;
10+
background: dodgerblue;
11+
bottom: 20px;
12+
border: none;
13+
right: 20px;
14+
width: 3rem;
15+
height: 3rem;
16+
opacity: 100%;
17+
transition: opacity 1s;
18+
}
19+
20+
.top:hover {
21+
opacity: 60%;
22+
}
23+
.svg {
24+
width: 2rem;
25+
height: 2rem;
26+
color: wheat;
27+
}
28+
29+
.hidden {
30+
display: none;
31+
opacity: 0%;
32+
}
33+
34+
#progress {
35+
height: 2px;
36+
border-radius: 2px;
37+
position: fixed;
38+
background: cyan;
39+
top: 0;
40+
left: 0;
41+
}

‎spread/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title></title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link href="style.css" rel="stylesheet">
8+
</head>
9+
<body>
10+
<button>click</button>
11+
</body>
12+
</html>

‎spread/style.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
* { background: black;}
2+
button {
3+
position: absolute;
4+
top: 50%;
5+
left: 50%;
6+
width: 100px;
7+
height: 100px;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
border: none;
12+
border-radius: 50%;
13+
background: dodgerblue;
14+
box-shadow: 0 0 0 0 #fff;
15+
font-size: 20px;
16+
animation: anim 1s infinite;
17+
}
18+
19+
20+
21+
@keyframes anim {
22+
to {
23+
box-shadow: 0 0 0 16px rgb(255, 255, 255, 0.01);
24+
}
25+
}

0 commit comments

Comments
 (0)