CoolFace
Apppublic

Alexvatti/Earn-Money-With-Python

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
style.css279 linesDownload Raw Back to root
1* {2    margin: 0;3    padding: 0;4    box-sizing: border-box;5}6 7body {8    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;9    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);10    color: #fff;11    line-height: 1.6;12    min-height: 100vh;13    padding: 20px;14}15 16.container {17    max-width: 1200px;18    margin: 0 auto;19}20 21header {22    text-align: center;23    margin-bottom: 40px;24    background: rgba(255, 255, 255, 0.15);25    backdrop-filter: blur(15px);26    padding: 30px;27    border-radius: 20px;28    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);29    border: 1px solid rgba(255, 255, 255, 0.2);30}31 32h1 {33    color: #fff;34    font-size: 2.5rem;35    margin-bottom: 10px;36    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);37}38 39.tagline {40    color: #f0f0f0;41    font-size: 1.2rem;42    margin-bottom: 20px;43    font-weight: bold;44}45 46.python-king {47    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);48    color: white;49    padding: 20px;50    border-radius: 15px;51    font-size: 1.3rem;52    font-weight: bold;53    margin: 25px 0;54    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);55    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);56    text-align: center;57}58 59.main-links {60    display: flex;61    gap: 20px;62    justify-content: center;63    flex-wrap: wrap;64    margin: 25px 0;65}66 67.main-link {68    background: linear-gradient(45deg, #ff4757, #ff6b6b);69    color: white;70    padding: 15px 30px;71    text-decoration: none;72    border-radius: 30px;73    font-weight: bold;74    font-size: 1.1rem;75    transition: all 0.3s ease;76    display: inline-flex;77    align-items: center;78    gap: 10px;79    box-shadow: 0 8px 20px rgba(255, 71, 87, 0.4);80    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);81}82 83.main-link:hover {84    background: linear-gradient(45deg, #ff3838, #ff5252);85    transform: translateY(-3px);86    box-shadow: 0 12px 30px rgba(255, 71, 87, 0.6);87}88 89.table-section {90    background: rgba(255, 255, 255, 0.98);91    padding: 35px;92    border-radius: 15px;93    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);94    border: 1px solid rgba(255, 255, 255, 0.3);95    margin-top: 30px;96}97 98.section-title {99    color: #2c3e50;100    font-size: 1.8rem;101    margin-bottom: 25px;102    text-align: center;103    border-bottom: 4px solid #ff6b6b;104    padding-bottom: 15px;105    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);106    -webkit-background-clip: text;107    -webkit-text-fill-color: transparent;108    background-clip: text;109    font-weight: bold;110}111 112.learning-table {113    width: 100%;114    border-collapse: collapse;115    margin-top: 20px;116    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);117    border-radius: 10px;118    overflow: hidden;119}120 121.learning-table th {122    background: linear-gradient(45deg, #2c3e50, #34495e);123    color: white;124    padding: 18px 15px;125    font-weight: bold;126    font-size: 1.1rem;127    text-align: left;128    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);129}130 131.learning-table td {132    padding: 15px;133    border-bottom: 1px solid #ecf0f1;134    background: #fff;135    color: #2c3e50;136    vertical-align: middle;137}138 139.learning-table tr:hover td {140    background: #f8f9fa;141    transform: scale(1.01);142    transition: all 0.2s ease;143}144 145.level-cell {146    text-align: center;147    font-weight: bold;148    width: 80px;149}150 151.level-badge {152    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);153    color: white;154    padding: 8px 15px;155    border-radius: 25px;156    font-weight: bold;157    font-size: 1rem;158    text-align: center;159    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);160    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);161    display: inline-block;162    min-width: 40px;163}164 165.title-cell {166    font-weight: 600;167    font-size: 1.1rem;168    color: #2c3e50;169}170 171.link-cell {172    text-align: center;173    width: 120px;174}175 176.video-btn {177    background: linear-gradient(45deg, #ff4757, #ff6b6b);178    color: white;179    padding: 8px 16px;180    text-decoration: none;181    border-radius: 20px;182    font-weight: 500;183    font-size: 0.9rem;184    display: inline-flex;185    align-items: center;186    gap: 6px;187    transition: all 0.3s ease;188    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);189    margin: 2px;190}191 192.video-btn:hover {193    background: linear-gradient(45deg, #ff3838, #ff5252);194    transform: scale(1.1);195    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.6);196}197 198.doc-btn {199    background: linear-gradient(45deg, #2c3e50, #34495e);200    color: white;201    padding: 8px 16px;202    text-decoration: none;203    border-radius: 20px;204    font-weight: 500;205    font-size: 0.9rem;206    display: inline-flex;207    align-items: center;208    gap: 6px;209    transition: all 0.3s ease;210    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.4);211    margin: 2px;212}213 214.doc-btn:hover {215    background: linear-gradient(45deg, #34495e, #4a6ba3);216    transform: scale(1.1);217    box-shadow: 0 6px 20px rgba(44, 62, 80, 0.6);218}219 220.roadmap-sections {221    display: grid;222    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));223    gap: 20px;224    margin: 30px 0;225}226 227.roadmap-item {228    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 255, 0.95));229    padding: 25px;230    border-radius: 12px;231    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);232    border-left: 5px solid #ff6b6b;233    transition: all 0.3s ease;234}235 236.roadmap-item:hover {237    transform: translateY(-5px);238    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);239    border-left-color: #4ecdc4;240}241 242.roadmap-item h3 {243    color: #2c3e50;244    margin-bottom: 10px;245    font-size: 1.2rem;246}247 248.roadmap-item p {249    color: #34495e;250    font-weight: 500;251}252 253@media (max-width: 768px) {254    .container {255        padding: 10px;256    }257    258    h1 {259        font-size: 2rem;260    }261    262    .main-links {263        flex-direction: column;264        align-items: center;265    }266 267    .learning-table {268        font-size: 0.9rem;269    }270 271    .learning-table th,272    .learning-table td {273        padding: 10px 8px;274    }275 276    .roadmap-sections {277        grid-template-columns: 1fr;278    }279}