1804 Code Soweto

Simple homepage using HTML, CSS and JS.
Request code in inbox, lets teach and learn.

Copy the code and save it as HTML.





I Love Coding Animation

body {
margin: 0;
padding: 0;
background: ;
color: ;
font-family: 'Arial', sans-serif;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}

h1 {
font-size: 4rem;
color: ;
text-align: center;
animation: pulse 1s infinite alternate;
}

pulse {
0% {
transform: scale(1);
color: ;
}
50% {
transform: scale(1.1);
color: ;
}
100% {
transform: scale(1);
color: ;
}
}

.symbol {
position: absolute;
font-size: 1.5rem;
color: ;
opacity: 0.8;
animation: float 5s linear infinite;
user-select: none;
pointer-events: none;
}

float {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0.8;
}
50% {
opacity: 1;
}
100% {
transform: translateY(-10vh) rotate(360deg);
opacity: 0;
}
}




I ❤️ Coding


const symbols = ['{', '}', '', '/', ';', '=', '+', '-', '*', '%'];
const body = document.body;

function createSymbol() {
const span = document.createElement('span');
span.classList.add('symbol');
span.innerText = symbols[Math.floor(Math.random() * symbols.length)];

span.style.left = Math.random() * 100 + 'vw';
span.style.fontSize = (Math.random() * 20 + 15) + 'px';
span.style.animationDuration = (Math.random() * 5 + 5) + 's';

body.appendChild(span);

setTimeout(() => {
span.remove();
}, 10000); // remove after animation
}

setInterval(createSymbol, 200);

Send a message to learn more

Welcome you all those that have liked the page.

Invite your friends to check the page out, it's new and there's lots of content and projects coming y'all way.

Simple Registration Page.

Resources used:
1. Html
2. CSS
3. JS
4. PHP and MySQL

Follow page for more content and source code on all things web development.