Jump to content

MediaWiki:Common.css: Difference between revisions

From Ourwiki
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..."
 
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* mobile screen css */
/* Hero Section */
@media (max-width:768px){
.hero-section {
 
    background: linear-gradient(135deg, #0f172a, #1e293b, #2563eb);
.mw-body{
    background-size: 200% 200%;
padding:10px;
    animation: gradientMove 8s ease infinite;
    padding: 100px 20px;
    text-align: center;
    color: white;
    border-radius: 12px;
}
}


/* Gradient Animation */
.home-grid{
@keyframes gradientMove {
flex-direction:column;
    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 */
/* CSS placed here will be applied to all skins */
.hero-subtitle {
.home-hero{
    font-size: 18px;
background:#2563eb;
    margin-top: 15px;
color:white;
    opacity: 0.9;
padding:60px;
    animation: fadeInUp 1.5s ease;
text-align:center;
border-radius:10px;
margin-bottom:30px;
}
}


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


.hero-btn:hover {
.home-grid{
    background: #e2e8f0;
display:flex;
    transform: translateY(-3px);
gap:20px;
flex-wrap:wrap;
}
}


/* Fade Animations */
.home-card{
@keyframes fadeInDown {
background:#f5f5f5;
    from { opacity: 0; transform: translateY(-20px); }
padding:20px;
    to { opacity: 1; transform: translateY(0); }
border-radius:10px;
flex:1;
min-width:200px;
}
}


@keyframes fadeInUp {
@media (max-width:768px){
    from { opacity: 0; transform: translateY(20px); }
.home-grid{
    to { opacity: 1; transform: translateY(0); }
flex-direction:column;
}
}
}

Latest revision as of 21:11, 16 March 2026

/* 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 */
.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;
}
}
Retrieved from "https://ourwiki.in/index.php?title=MediaWiki:Common.css&oldid=62"