Web Development Code via @like
هل تريد انشر لكم هذا الكورس مجاني
بخصوص الكورس ده ي شباب
هنشر ملف التورنت كل الي عليك هتحمل برنامج torrent وهضيف الملف الي هبعته وهيحمل الكورس
#JavaScript
هنشر ملف التورنت كل الي عليك هتحمل برنامج torrent وهضيف الملف الي هبعته وهيحمل الكورس
#JavaScript
This media is not supported in your browser
VIEW IN TELEGRAM
موقع اذكار اسلاميه برمجتة بواسطتي
Html/css/JavaScript
رابط الموقع :
https://azkar3.netlify.app/
@codedevelopment
Html/css/JavaScript
رابط الموقع :
https://azkar3.netlify.app/
@codedevelopment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: black;
}
h1{
color: white;
font-size: 4rem;
font-family:sans-serif ;
text-align: center;
line-height: 100vh;
}
span{
opacity: 0;
transition: all 0.8s ease;
transform: translateX(600px);
display: inline-block;
}
span.fade{
opacity: 1;
transform: translateX(30px);
color: rgb(121, 121, 233);
}
</style>
</head>
<body>
<h1 class="fan">Nour Eldin Taha</h1>
<script>
const text = document.querySelector(".fan")
const strText = text.textContent;
const splitText = strText.split("")
text.textContent = ""
for (let i = 0; i < splitText.length; i++) {
text.innerHTML += "<span>"+splitText[i]+"</span>"
}
let char = 0;
let timer = setInterval(onTick , 200)
function onTick(){
const span = text.querySelectorAll('span')[char]
span.classList.add("fade");
char++
if(char === splitText.length){
complete()
return;
}
}
function complete(){
clearInterval(timer)
timer= null
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: black;
}
h1{
color: white;
font-size: 4rem;
font-family:sans-serif ;
text-align: center;
line-height: 100vh;
}
span{
opacity: 0;
transition: all 0.8s ease;
transform: translateX(600px);
display: inline-block;
}
span.fade{
opacity: 1;
transform: translateX(30px);
color: rgb(121, 121, 233);
}
</style>
</head>
<body>
<h1 class="fan">Nour Eldin Taha</h1>
<script>
const text = document.querySelector(".fan")
const strText = text.textContent;
const splitText = strText.split("")
text.textContent = ""
for (let i = 0; i < splitText.length; i++) {
text.innerHTML += "<span>"+splitText[i]+"</span>"
}
let char = 0;
let timer = setInterval(onTick , 200)
function onTick(){
const span = text.querySelectorAll('span')[char]
span.classList.add("fade");
char++
if(char === splitText.length){
complete()
return;
}
}
function complete(){
clearInterval(timer)
timer= null
}
</script>
</body>
</html>
شركة #Google بتعمل عظمة ! #قدموا_علي_الدعم_المادي🚶🏻♂️
هتدرس تخصص كامل في 6 شهور بس وتتخصص فيه ! ❤️
Professional Certificate Training Programs - Grow With Google 🍀❤️
📍 التفاصيل :-
شركه Google من 5 شهور كانت أعلنت عن إطلاق برنامج جديد بالتعاون مع عدد كبير من الجامعات والمعاهد العالمية لأنها تعمل اول دبلومات متخصصه في اكتر المجالات المتاحة للعمل اون لاين بهدف إتاحة فرص عمل بعد التدريبات وامبارح أعلنت عنه 🍀❤️
المجالات المتاحة :-
- project management
- IT support
- Data Analytics
- UX Design
- Android Development
📍لينك التقديم :-
http://bit.ly/38upakf
حبيتتوا اوي وانا بترجمه .. لأن فعلا كل مجال فيهم احسن من التاني وكلهم بيجيبوا فلوووس كتييير $$$ 😍❤️
ملحوظه مهمه :-
الكورسات هتكون علي منصه كورسيرا وتقدروا تقدموا علي الدعم المادي وتاخدوها من غير فلوس تماما ودة مش صعب خالص ..
الفيديو ده فيه خطوات الحصول على الكورسات #مجانا تماما 🍀
https://youtu.be/3XxtgnAPPzE
#منشن_وشير_لاصحابك_المهتمين 😍
هتدرس تخصص كامل في 6 شهور بس وتتخصص فيه ! ❤️
Professional Certificate Training Programs - Grow With Google 🍀❤️
📍 التفاصيل :-
شركه Google من 5 شهور كانت أعلنت عن إطلاق برنامج جديد بالتعاون مع عدد كبير من الجامعات والمعاهد العالمية لأنها تعمل اول دبلومات متخصصه في اكتر المجالات المتاحة للعمل اون لاين بهدف إتاحة فرص عمل بعد التدريبات وامبارح أعلنت عنه 🍀❤️
المجالات المتاحة :-
- project management
- IT support
- Data Analytics
- UX Design
- Android Development
📍لينك التقديم :-
http://bit.ly/38upakf
حبيتتوا اوي وانا بترجمه .. لأن فعلا كل مجال فيهم احسن من التاني وكلهم بيجيبوا فلوووس كتييير $$$ 😍❤️
ملحوظه مهمه :-
الكورسات هتكون علي منصه كورسيرا وتقدروا تقدموا علي الدعم المادي وتاخدوها من غير فلوس تماما ودة مش صعب خالص ..
الفيديو ده فيه خطوات الحصول على الكورسات #مجانا تماما 🍀
https://youtu.be/3XxtgnAPPzE
#منشن_وشير_لاصحابك_المهتمين 😍
grow.google
Gain in-demand job skills
Learn job-ready skills for in-demand jobs with Google Career Certificates, online certificate programs offering flexible, professional-level training.
This media is not supported in your browser
VIEW IN TELEGRAM
Load Animation😁
<!DOCTYPE html>
<html>
<head>
<title>Load</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background:#879194;
width: 100%;
height: 600px;
}
.load {
position: relative;
width: 200px;
background: #fff;
padding: 17px 120px;
border-radius:25px;
top: 50%;
margin: 0 auto;
box-shadow: 0px 0px 5px 4px #94ff00;
}
.load span {
position: absolute;
top: 0;
left: 0;
border-radius: 25px;
background:#c3f676;
padding: 17px 3px;
filter:brightness(1000%);
animation: load 2s linear infinite ;
}
@keyframes load{
0% , 100%{
width: 3px;
filter:hue-rotate(90deg);
}
50%{
width: 240px;
filter:hue-rotate(360deg);
}
}
</style>
</head>
<body>
<div class="load">
<span></span>
</div>
</body>
</html>
<html>
<head>
<title>Load</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background:#879194;
width: 100%;
height: 600px;
}
.load {
position: relative;
width: 200px;
background: #fff;
padding: 17px 120px;
border-radius:25px;
top: 50%;
margin: 0 auto;
box-shadow: 0px 0px 5px 4px #94ff00;
}
.load span {
position: absolute;
top: 0;
left: 0;
border-radius: 25px;
background:#c3f676;
padding: 17px 3px;
filter:brightness(1000%);
animation: load 2s linear infinite ;
}
@keyframes load{
0% , 100%{
width: 3px;
filter:hue-rotate(90deg);
}
50%{
width: 240px;
filter:hue-rotate(360deg);
}
}
</style>
</head>
<body>
<div class="load">
<span></span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="style.css">
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: rgba(0,0,0, 0.5);
width: 100%;
}
.conta{
margin: 50% 0;
position: relative;
bottom: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 500px;
height: 500px;
background: #f6cf59;
border-radius: 50%;
border : 5px solid #fff;
}
.one , .two {
position: absolute;
background: #000;
padding: 25px;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
.one {
left: 30%;
top: 30%;
}
.two{
top: 30%;
left: 70%
}
.two:before , .one:before{
content: "";
position: absolute;
background: #89E1A0;
border-radius: 50%;
padding: 10px;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
box-shadow: 0 0 0 3px #74B27FAB;
animation: hh 2s linear infinite;
}
.one:after , .two:after{
content: " ";
background: #000;
position: absolute;
top: -25px;
left: 0px;
padding: 4px 25px;
border-radius: 100px 100px 0 0;
}
@keyframes hh {
0% ,100%{
top: 50%
}
15%{
top: 20%;
}
25%{
top: 50%
}
35%{
top: 70%
}
50%{
top: 50%;
left:50%;
}
65%{
left: 70%
}
75%{
left: 50%
}
90%{
left: 25%
}
}
.three {
position: absolute;
bottom: 25%;
background: #000;
padding: 50px 120px;
left:50%;
transform: translate(-50%);
border-radius:0 0 120px 130px;
}
.three:after{
content: " ";
position: absolute;
padding: 40px 130px 50px 130px;
background: #f6cf59;
left: -5px;
top: -5px;
border-radius:0 0 60% 60% ;
animation: animate 1s linear infinite;
}
@keyframes animate{
0% , 100%{
top: -5px;
}
50%{
top: -25px;
}
}
</style>
</head>
<body>
<div class="conta">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="style.css">
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: rgba(0,0,0, 0.5);
width: 100%;
}
.conta{
margin: 50% 0;
position: relative;
bottom: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 500px;
height: 500px;
background: #f6cf59;
border-radius: 50%;
border : 5px solid #fff;
}
.one , .two {
position: absolute;
background: #000;
padding: 25px;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
.one {
left: 30%;
top: 30%;
}
.two{
top: 30%;
left: 70%
}
.two:before , .one:before{
content: "";
position: absolute;
background: #89E1A0;
border-radius: 50%;
padding: 10px;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
box-shadow: 0 0 0 3px #74B27FAB;
animation: hh 2s linear infinite;
}
.one:after , .two:after{
content: " ";
background: #000;
position: absolute;
top: -25px;
left: 0px;
padding: 4px 25px;
border-radius: 100px 100px 0 0;
}
@keyframes hh {
0% ,100%{
top: 50%
}
15%{
top: 20%;
}
25%{
top: 50%
}
35%{
top: 70%
}
50%{
top: 50%;
left:50%;
}
65%{
left: 70%
}
75%{
left: 50%
}
90%{
left: 25%
}
}
.three {
position: absolute;
bottom: 25%;
background: #000;
padding: 50px 120px;
left:50%;
transform: translate(-50%);
border-radius:0 0 120px 130px;
}
.three:after{
content: " ";
position: absolute;
padding: 40px 130px 50px 130px;
background: #f6cf59;
left: -5px;
top: -5px;
border-radius:0 0 60% 60% ;
animation: animate 1s linear infinite;
}
@keyframes animate{
0% , 100%{
top: -5px;
}
50%{
top: -25px;
}
}
</style>
</head>
<body>
<div class="conta">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
</div>
</body>
</html>