MediaWiki:Common.css - Revision history

Shivanshu at 15:41, 16 March 2026

2026-03-16T15:41:27Z

← Older revision		Revision as of 21:11, 16 March 2026
Line 1:		Line 1:
			/* mobile screen css */
			@media (max-width:768px){

			.mw-body{
			padding:10px;
			}

			.home-grid{
			flex-direction:column;
			}

			}

	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
	.home-hero{		.home-hero{

Shivanshu at 14:45, 16 March 2026

2026-03-16T14:45:10Z

← Older revision		Revision as of 20:15, 16 March 2026
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
			.home-hero{
			background:#2563eb;
			color:white;
			padding:60px;
			text-align:center;
			border-radius:10px;
			margin-bottom:30px;
			}

			.home-btn{
			background:white;
			color:#2563eb;
			padding:10px 20px;
			text-decoration:none;
			border-radius:6px;
			font-weight:bold;
			}

			.home-grid{
			display:flex;
			gap:20px;
			flex-wrap:wrap;
			}

			.home-card{
			background:#f5f5f5;
			padding:20px;
			border-radius:10px;
			flex:1;
			min-width:200px;
			}

			@media (max-width:768px){
			.home-grid{
			flex-direction:column;
			}
			}

Shivanshu: Replaced content with "/* CSS placed here will be applied to all skins */"

2026-02-20T15:52:42Z

Replaced content with "CSS placed here will be applied to all skins: "

← Older revision		Revision as of 21:22, 20 February 2026
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
	~~/* HERO */~~
	~~.hero-section {~~
	~~background: linear-gradient(-45deg, #0f172a, #1e3a8a, #2563eb, #0f172a);~~
	~~background-size: 400% 400%;~~
	~~animation: gradientBG 12s ease infinite;~~
	~~padding: 120px 20px;~~
	~~text-align: center;~~
	~~color: white;~~
	~~border-radius: 12px;~~
	}

	~~@keyframes gradientBG {~~
	~~0% { background-position: 0% 50%; }~~
	~~50% { background-position: 100% 50%; }~~
	~~100% { background-position: 0% 50%; }~~
	}

	~~.hero-title {~~
	~~font-size: 48px;~~
	~~font-weight: 700;~~
	~~animation: fadeDown 1.2s ease;~~
	}

	~~.hero-subtitle {~~
	~~font-size: 20px;~~
	~~margin-top: 15px;~~
	~~opacity: 0.9;~~
	}

	~~/* BUTTON */~~
	~~.hero-btn {~~
	~~display: inline-block;~~
	~~margin-top: 30px;~~
	~~padding: 14px 32px;~~
	~~background: white;~~
	~~color: #1e293b;~~
	~~border-radius: 8px;~~
	~~font-weight: bold;~~
	~~transition: 0.3s;~~
	}

	~~.hero-btn:hover {~~
	~~background: #e2e8f0;~~
	~~transform: translateY(-4px);~~
	}

	~~/* STATS */~~
	~~.stats-section {~~
	~~display: flex;~~
	~~justify-content: space-around;~~
	~~text-align: center;~~
	~~margin-top: 40px;~~
	}

	~~.stat-box h2 {~~
	~~font-size: 32px;~~
	~~color: #2563eb;~~
	}

	~~/* CARDS */~~
	~~.card-container {~~
	~~display: flex;~~
	~~justify-content: space-around;~~
	~~gap: 20px;~~
	}

	~~.card {~~
	~~flex: 1;~~
	~~padding: 25px;~~
	~~border-radius: 12px;~~
	~~background: white;~~
	~~box-shadow: 0 10px 25px rgba(0,0,0,0.08);~~
	~~transition: 0.3s;~~
	}

	~~.card:hover {~~
	~~transform: translateY(-8px);~~
	}

	~~/* ANIMATION */~~
	~~@keyframes fadeDown {~~
	~~from {opacity:0; transform:translateY(-20px);}~~
	~~to {opacity:1; transform:translateY(0);}~~
	}

Shivanshu at 15:32, 20 February 2026

2026-02-20T15:32:40Z

← Older revision		Revision as of 21:02, 20 February 2026
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
	/* ~~Hero Section~~ */		/* HERO */
	.hero-section {		.hero-section {
	background: linear-gradient(~~135deg~~, #0f172a, #~~1e293b~~, #2563eb);		background: linear-gradient(-45deg, #0f172a, #1e3a8a, #2563eb, #0f172a);
	background-size: ~~200~~% ~~200~~%;		background-size: 400% 400%;
	animation: ~~gradientMove 8s~~ ease infinite;		animation: gradientBG 12s ease infinite;
	padding: ~~100px~~ 20px;		padding: 120px 20px;
	text-align: center;		text-align: center;
	color: white;		color: white;
Line 11:		Line 11:
	}		}

	~~/* Gradient Animation */~~		@keyframes gradientBG {
	@keyframes ~~gradientMove~~ {
	0% { background-position: 0% 50%; }		0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }		50% { background-position: 100% 50%; }
Line 18:		Line 17:
	}		}

	~~/* Title Animation */~~
	.hero-title {		.hero-title {
	font-size: ~~42px~~;		font-size: 48px;
	font-weight: 700;		font-weight: 700;
	animation: ~~fadeInDown~~ 1.2s ease;		animation: fadeDown 1.2s ease;
	}		}

	~~/* Subtitle */~~
	.hero-subtitle {		.hero-subtitle {
	font-size: ~~18px~~;		font-size: 20px;
	margin-top: 15px;		margin-top: 15px;
	opacity: 0.9;		opacity: 0.9;
	~~animation: fadeInUp 1.5s ease;~~
	}		}

	/* ~~Button~~ */		/* BUTTON */
	.hero-btn {		.hero-btn {
	display: inline-block;		display: inline-block;
	margin-top: ~~25px~~;		margin-top: 30px;
	padding: ~~12px 28px~~;		padding: 14px 32px;
	background: white;		background: white;
	color: #1e293b;		color: #1e293b;
Line 47:		Line 43:
	.hero-btn:hover {		.hero-btn:hover {
	background: #e2e8f0;		background: #e2e8f0;
	transform: translateY(-~~3px~~);		transform: translateY(-4px);
	}		}

	/* ~~Fade Animations~~ */		/* STATS */
	~~@keyframes fadeInDown~~ {		.stats-section {
	~~from~~ { ~~opacity~~: 0; ~~transform~~: ~~translateY(~~-20px); }		display: flex;
	~~to { opacity~~: 1; transform: translateY(0); }		justify-content: space-around;
			text-align: center;
			margin-top: 40px;
			}

			.stat-box h2 {
			font-size: 32px;
			color: #2563eb;
			}

			/* CARDS */
			.card-container {
			display: flex;
			justify-content: space-around;
			gap: 20px;
			}

			.card {
			flex: 1;
			padding: 25px;
			border-radius: 12px;
			background: white;
			box-shadow: 0 10px 25px rgba(0,0,0,0.08);
			transition: 0.3s;
			}

			.card:hover {
			transform: translateY(-8px);
	}		}

	@keyframes ~~fadeInUp~~ {		/* ANIMATION */
	from { opacity: 0; transform: translateY(20px); }		@keyframes fadeDown {
	to { opacity: 1; transform: translateY(0); }		from {opacity:0; transform:translateY(-20px);}
			to {opacity:1; transform:translateY(0);}
	}		}

Shivanshu: Created page with "/* CSS placed here will be applied to all skins / / Hero Section / .hero-section { background: linear-gradient(135deg, #0f172a, #1e293b, #2563eb); background-size: 200% 200%; animation: gradientMove 8s ease infinite; padding: 100px 20px; text-align: center; color: white; border-radius: 12px; } / Gradient Animation */ @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { bac..."

2026-02-20T15:26:52Z

Created page with "CSS placed here will be applied to all skins: Hero Section: .hero-section { background: linear-gradient(135deg, #0f172a, #1e293b, #2563eb); background-size: 200% 200%; animation: gradientMove 8s ease infinite; padding: 100px 20px; text-align: center; color: white; border-radius: 12px; } Gradient Animation: @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { bac..."

New page

/* CSS placed here will be applied to all skins */
/* Hero Section */
.hero-section {
background: linear-gradient(135deg, #0f172a, #1e293b, #2563eb);
background-size: 200% 200%;
animation: gradientMove 8s ease infinite;
padding: 100px 20px;
text-align: center;
color: white;
border-radius: 12px;
}

/* Gradient Animation */
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

/* Title Animation */
.hero-title {
font-size: 42px;
font-weight: 700;
animation: fadeInDown 1.2s ease;
}

/* Subtitle */
.hero-subtitle {
font-size: 18px;
margin-top: 15px;
opacity: 0.9;
animation: fadeInUp 1.5s ease;
}

/* Button */
.hero-btn {
display: inline-block;
margin-top: 25px;
padding: 12px 28px;
background: white;
color: #1e293b;
border-radius: 8px;
font-weight: bold;
transition: 0.3s;
}

.hero-btn:hover {
background: #e2e8f0;
transform: translateY(-3px);
}

/* Fade Animations */
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}