Harshit Pathak Blogs

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

body {
background-color: #0d0d0f;
color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
}

header {
background: #121214;
padding: 20px 50px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
}

header h1 {
color: #00b3ff;
font-size: 1.8em;
}

nav ul {
list-style: none;
display: flex;
gap: 20px;
}

nav ul li a {
text-decoration: none;
color: #ccc;
transition: color 0.3s;
}

nav ul li a:hover {
color: #00b3ff;
}

.hero {
text-align: center;
padding: 40px 20px;
background: linear-gradient(135deg, #0d0d0f 30%, #171722 100%);
}

.hero h2 {
font-size: 2.2em;
color: #00b3ff;
margin-bottom: 10px;
}

.upload-section {
text-align: center;
margin: 20px auto;
}

.upload-btn {
background: #00b3ff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-size: 1em;
cursor: pointer;
transition: 0.3s;
}

.upload-btn:hover {
background: #0088cc;
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
padding: 40px;
}

.card {
background: #1a1a1d;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
transform: translateY(-8px);
box-shadow: 0 0 20px rgba(0, 179, 255, 0.4);
}

.card video {
width: 100%;
height: 200px;
display: block;
background: #000;
}

.card-content {
padding: 15px;
text-align: center;
}

.card-content h3 {
color: #00b3ff;
margin-bottom: 8px;
font-size: 1.1em;
}

footer {
text-align: center;
padding: 20px;
background: #121214;
color: #777;
border-top: 1px solid #222;
margin-top: auto;
}

Harshit Pathak Blogs

• Home


• Videos


• About


• Contact

Welcome to Harshit Pathak Blogs

Upload and watch your own videos right here!

Upload Videos

© 2025 Harshit Pathak Blogs | Designed by Harshit with ❤️

const input = document.getElementById('videoInput');
const grid = document.getElementById('videoGrid');

input.addEventListener('change', (event) => {
const files = event.target.files;
for (let file of files) {
const card = document.createElement('div');
card.className = 'card';

const video = document.createElement('video');
video.controls = true;
video.src = URL.createObjectURL(file);

const content = document.createElement('div');
content.className = 'card-content';
content.innerHTML = `<h3>${file.name}</h3>`;

card.appendChild(video);
card.appendChild(content);
grid.appendChild(card);
}
});