Profile Card Project

{"name":"CSS Demo Site","description":"Demo of CSS styling with HTML.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/qfywuwdnasy12czguosk","view_count":2,"fork_count":1,"expires_at":null,"created_at":"2025-10-26T03:37:12.217954Z","updated_at":"2025-10-26T03:37:12.217955Z","user_id":70,"status":"PRIVATE","parent_id":10317,"id":10318,"user":{"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active","photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":200},"code":{"script.js":"// Click on the index.html file above this!\n// We are currently in the script.js file - not much to see here.\n// You can add more dynamic and interactive features to your website with javascript.\n// But we aren't using any javascript in this template yet!","style.css":"/* Example of a custom font using @font-face (disabled placeholder) */\n/*\n@font-face {\n font-family: 'Playwrite';\n src: url(@asset(\"Playwrite\")) format('truetype');\n}\n*/\n\nbody {\n /* Basic page setup */\n background-color: #f0f0f0;\n font-family: Arial, sans-serif;\n /* or 'Playwrite' */\n margin: 0;\n padding: 20px;\n}\n\n/* Main card styling */\n.card {\n background-color: white;\n width: 400px;\n margin: 50px auto;\n padding: 30px;\n border: 2px solid #ccc;\n border-radius: 10px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n/* Hover effect */\n.card:hover {\n transform: scale(1.02);\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);\n}\n\n/* Header, content, and footer sections */\n.header {\n background-color: #0066cc;\n color: white;\n padding: 15px;\n margin-bottom: 20px;\n}\n\n.job-title {\n font-size: 0.9em;\n opacity: 0.9;\n}\n\n.content {\n margin-bottom: 20px;\n}\n\n.footer {\n background-color: #eee;\n padding: 10px;\n}\n\n/* Highlight box example */\n.highlight-box {\n background-color: yellow;\n border: 2px solid orange;\n padding: 15px;\n margin: 10px 0;\n}\n\n/* Skills section using Flexbox */\n.skills-container {\n display: flex;\n justify-content: space-between;\n gap: 10px;\n margin-top: 20px;\n}\n\n.skill {\n flex: 1;\n text-align: center;\n background-color: #d0eaff;\n border: 1px solid #99c2ff;\n padding: 10px;\n border-radius: 6px;\n}\n\n/* Text and spacing examples */\np {\n color: #333;\n line-height: 1.4;\n}\n\nspan {\n color: #0066cc;\n font-weight: bold;\n}","index.html":"\n\n\n\n \n \n Profile Card Project\n \n\n\n\n

CSS Coder

This scales up on hover.

Coding is a super power!

\n\n \n

This is the content area of the card. You can style it with padding, background colors, and borders!

This paragraph is highlighted with a special class.

\n \n\n

HTML

CSS

JavaScript

Design

\n\n\n"},"chat_history":[],"assets":[{"name":"CSS_cover","created_at":"2025-10-26T03:36:54.743984Z","resource_type":"image","tags":[],"project_id":10318,"creator":"","cloudinary_id":"qfywuwdnasy12czguosk","deleted":false,"id":87666}],"messages_sent":0,"comments":[],"steps":[]}