2s4uc3d/ResumeJTS
0
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}