CoolFace
Apppublic

2s4uc3d/ResumeJTS

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
styles.css309 linesDownload Raw Back to root
1* {2    margin: 0;3    padding: 0;4    box-sizing: border-box;5}6 7:root {8    --primary: #ff6b6b;9    --secondary: #4ecdc4;10    --dark: #1a1a2e;11    --light: #f8f9fa;12    --accent: #ffd166;13}14 15body {16    font-family: 'Open Sans', sans-serif;17    background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);18    color: var(--dark);19    line-height: 1.6;20}21 22.container {23    width: 90%;24    max-width: 1200px;25    margin: 0 auto;26    padding: 0 20px;27}28 29header {30    background: var(--dark);31    color: white;32    padding: 1rem 0;33    position: sticky;34    top: 0;35    z-index: 100;36}37 38header .container {39    display: flex;40    justify-content: space-between;41    align-items: center;42}43 44.logo img {45    height: 50px;46}47 48.hire-badge {49    background: var(--primary);50    color: white;51    padding: 0.5rem 1rem;52    border-radius: 30px;53    font-weight: bold;54    animation: pulse 2s infinite;55}56 57@keyframes pulse {58    0% { transform: scale(1); }59    50% { transform: scale(1.1); }60    100% { transform: scale(1); }61}62 63.hero {64    text-align: center;65    padding: 5rem 0;66    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23ff6b6b" opacity="0.1"/></svg>');67    background-size: 50px 50px;68}69 70.glitch {71    font-family: 'Montserrat', sans-serif;72    font-size: 6rem;73    font-weight: 900;74    color: var(--primary);75    text-shadow: 2px 0 red, -2px 0 blue;76    margin-bottom: 1rem;77    position: relative;78    animation: glitch 5s infinite;79}80 81@keyframes glitch {82    0% { text-shadow: 2px 0 red, -2px 0 blue; }83    2% { text-shadow: -2px 0 red, 2px 0 blue; }84    4% { text-shadow: 2px 0 red, -2px 0 blue; }85    100% { text-shadow: none; }86}87 88.subtitle {89    font-size: 1.5rem;90    margin-top: 1rem;91}92 93.underline {94    text-decoration: underline;95    text-decoration-color: var(--primary);96    text-decoration-thickness: 3px;97}98 99.candidate-info {100    text-align: center;101    padding: 3rem 0;102    background: white;103}104 105.signature {106    margin: 0 auto 2rem;107    width: 200px;108}109 110.signature img {111    width: 100%;112    display: block;113}114 115.candidate-info h2 {116    font-family: 'Montserrat', sans-serif;117    font-size: 2.5rem;118    margin-bottom: 1rem;119    color: var(--dark);120}121 122.job-plea {123    font-size: 1.2rem;124    color: #666;125    max-width: 700px;126    margin: 0 auto;127}128 129.skills {130    padding: 4rem 0;131    background: linear-gradient(to bottom, #e4edf5, #f5f7fa);132}133 134.skills h2 {135    font-family: 'Montserrat', sans-serif;136    text-align: center;137    font-size: 2.8rem;138    margin-bottom: 3rem;139    color: var(--dark);140}141 142.highlight {143    color: var(--primary);144    position: relative;145}146 147.highlight::after {148    content: "";149    position: absolute;150    bottom: 5px;151    left: 0;152    width: 100%;153    height: 12px;154    background: var(--accent);155    z-index: -1;156    opacity: 0.7;157}158 159.skills-grid {160    display: grid;161    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));162    gap: 2rem;163}164 165.skill-card {166    background: white;167    border-radius: 15px;168    padding: 2rem;169    box-shadow: 0 10px 30px rgba(0,0,0,0.1);170    transition: transform 0.3s ease, box-shadow 0.3s ease;171    border-top: 4px solid var(--secondary);172}173 174.skill-card:hover {175    transform: translateY(-10px);176    box-shadow: 0 15px 40px rgba(0,0,0,0.15);177}178 179.skill-card h3 {180    font-family: 'Montserrat', sans-serif;181    color: var(--primary);182    margin-bottom: 1rem;183    font-size: 1.5rem;184}185 186.skill-card p {187    color: #555;188}189 190.testimonial {191    padding: 4rem 0;192    background: var(--dark);193    color: white;194    text-align: center;195}196 197.testimonial blockquote {198    font-family: 'Montserrat', sans-serif;199    font-size: 1.8rem;200    font-style: italic;201    max-width: 800px;202    margin: 0 auto 2rem;203    line-height: 1.4;204}205 206.testimonial-author {207    font-size: 1.2rem;208    color: var(--secondary);209}210 211.cta {212    padding: 5rem 0;213    text-align: center;214    background: linear-gradient(135deg, var(--primary) 0%, #ff8e8e 100%);215    color: white;216}217 218.cta h2 {219    font-family: 'Montserrat', sans-serif;220    font-size: 3rem;221    margin-bottom: 1.5rem;222}223 224.urgent {225    font-size: 1.5rem;226    margin-bottom: 2rem;227    font-weight: 600;228}229 230.hire-button {231    background: var(--dark);232    color: white;233    border: none;234    padding: 1.2rem 3rem;235    font-size: 1.3rem;236    font-weight: bold;237    border-radius: 50px;238    cursor: pointer;239    transition: all 0.3s ease;240    box-shadow: 0 10px 20px rgba(0,0,0,0.2);241}242 243.hire-button:hover {244    background: #0d0d1a;245    transform: scale(1.05);246    box-shadow: 0 15px 25px rgba(0,0,0,0.3);247}248 249footer {250    background: var(--dark);251    color: white;252    text-align: center;253    padding: 2rem 0;254}255 256footer p {257    margin: 0.5rem 0;258}259 260footer a {261    color: var(--secondary);262    text-decoration: none;263}264 265footer a:hover {266    text-decoration: underline;267}268 269/* Responsive Design */270@media (max-width: 768px) {271    .glitch {272        font-size: 4rem;273    }274    275    .subtitle {276        font-size: 1.2rem;277    }278    279    .skills h2 {280        font-size: 2.2rem;281    }282    283    .testimonial blockquote {284        font-size: 1.4rem;285    }286    287    .cta h2 {288        font-size: 2.2rem;289    }290    291    .urgent {292        font-size: 1.2rem;293    }294}295 296@media (max-width: 480px) {297    .glitch {298        font-size: 3rem;299    }300    301    .skills-grid {302        grid-template-columns: 1fr;303    }304    305    header .container {306        flex-direction: column;307        gap: 1rem;308    }309}