commit e47cace6603deba8368404b9617677bd4e6cf400
Author: root <root@hub.scroll.pub>
Date: 2025-01-01 10:56:29 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..031f934
--- /dev/null
+++ b/body.html
@@ -0,0 +1,86 @@
+<header class="header">
+ <nav class="nav">
+ <ul>
+ <li><a href="#home">Home</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#skills">Skills</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="home" class="hero">
+ <div class="container">
+ <h1 class="glitch" data-text="Hello, I'm [Your Name]">Hello, I'm [Your Name]</h1>
+ <p class="subtitle">Web Developer & Digital Creator</p>
+ <div class="scroll-indicator"></div>
+ </div>
+ </section>
+
+ <section id="about" class="about">
+ <div class="container">
+ <h2>About Me</h2>
+ <div class="about-content">
+ <div class="about-text">
+ <p>I'm a passionate web developer with a keen eye for design and a love for creating seamless user experiences. With expertise in modern web technologies, I transform ideas into beautiful, functional websites.</p>
+ </div>
+ <div class="about-image">
+ <div class="image-frame"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="skills" class="skills">
+ <div class="container">
+ <h2>Skills & Expertise</h2>
+ <div class="skills-grid">
+ <div class="skill-card" data-skill="HTML5">
+ <div class="skill-level" data-level="90"></div>
+ <h3>HTML5</h3>
+ </div>
+ <div class="skill-card" data-skill="CSS3">
+ <div class="skill-level" data-level="85"></div>
+ <h3>CSS3</h3>
+ </div>
+ <div class="skill-card" data-skill="JavaScript">
+ <div class="skill-level" data-level="80"></div>
+ <h3>JavaScript</h3>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <div class="container">
+ <h2>Get In Touch</h2>
+ <form id="contact-form" class="contact-form">
+ <div class="form-group">
+ <input type="text" id="name" required>
+ <label for="name">Name</label>
+ </div>
+ <div class="form-group">
+ <input type="email" id="email" required>
+ <label for="email">Email</label>
+ </div>
+ <div class="form-group">
+ <textarea id="message" required></textarea>
+ <label for="message">Message</label>
+ </div>
+ <button type="submit" class="submit-btn">Send Message</button>
+ </form>
+ </div>
+ </section>
+</main>
+
+<footer class="footer">
+ <div class="container">
+ <p>Created with passion by [Your Name]</p>
+ <div class="social-links">
+ <a href="#" aria-label="GitHub">GitHub</a>
+ <a href="#" aria-label="LinkedIn">LinkedIn</a>
+ <a href="#" aria-label="Twitter">Twitter</a>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..81e4522
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://intro.scroll.pub
+metaTags
+ description "Personal introduction and portfolio website showcasing my professional background, skills, and achievements"
+ keywords "personal website, portfolio, professional profile, web developer"
+ author "Your Name"
+editButton /edit.html
+title Welcome to My World
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..cc8b5a7
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01V9QDFRnJYsYxPbTXNKM7hb",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a personal introduction website with a clean, professional design.\n\n---domain---\nintro.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://intro.scroll.pub\nmetaTags\n description \"Personal introduction and portfolio website showcasing my professional background, skills, and achievements\"\n keywords \"personal website, portfolio, professional profile, web developer\"\n author \"Your Name\"\neditButton /edit.html\ntitle Welcome to My World\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header class=\"header\">\n <nav class=\"nav\">\n <ul>\n <li><a href=\"#home\">Home</a></li>\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#skills\">Skills</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"home\" class=\"hero\">\n <div class=\"container\">\n <h1 class=\"glitch\" data-text=\"Hello, I'm [Your Name]\">Hello, I'm [Your Name]</h1>\n <p class=\"subtitle\">Web Developer & Digital Creator</p>\n <div class=\"scroll-indicator\"></div>\n </div>\n </section>\n\n <section id=\"about\" class=\"about\">\n <div class=\"container\">\n <h2>About Me</h2>\n <div class=\"about-content\">\n <div class=\"about-text\">\n <p>I'm a passionate web developer with a keen eye for design and a love for creating seamless user experiences. With expertise in modern web technologies, I transform ideas into beautiful, functional websites.</p>\n </div>\n <div class=\"about-image\">\n <div class=\"image-frame\"></div>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"skills\" class=\"skills\">\n <div class=\"container\">\n <h2>Skills & Expertise</h2>\n <div class=\"skills-grid\">\n <div class=\"skill-card\" data-skill=\"HTML5\">\n <div class=\"skill-level\" data-level=\"90\"></div>\n <h3>HTML5</h3>\n </div>\n <div class=\"skill-card\" data-skill=\"CSS3\">\n <div class=\"skill-level\" data-level=\"85\"></div>\n <h3>CSS3</h3>\n </div>\n <div class=\"skill-card\" data-skill=\"JavaScript\">\n <div class=\"skill-level\" data-level=\"80\"></div>\n <h3>JavaScript</h3>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"contact\" class=\"contact\">\n <div class=\"container\">\n <h2>Get In Touch</h2>\n <form id=\"contact-form\" class=\"contact-form\">\n <div class=\"form-group\">\n <input type=\"text\" id=\"name\" required>\n <label for=\"name\">Name</label>\n </div>\n <div class=\"form-group\">\n <input type=\"email\" id=\"email\" required>\n <label for=\"email\">Email</label>\n </div>\n <div class=\"form-group\">\n <textarea id=\"message\" required></textarea>\n <label for=\"message\">Message</label>\n </div>\n <button type=\"submit\" class=\"submit-btn\">Send Message</button>\n </form>\n </div>\n </section>\n</main>\n\n<footer class=\"footer\">\n <div class=\"container\">\n <p>Created with passion by [Your Name]</p>\n <div class=\"social-links\">\n <a href=\"#\" aria-label=\"GitHub\">GitHub</a>\n <a href=\"#\" aria-label=\"LinkedIn\">LinkedIn</a>\n <a href=\"#\" aria-label=\"Twitter\">Twitter</a>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2a2a2a;\n --accent-color: #64ffda;\n --text-color: #e6e6e6;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: 'Inter', sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--primary-color);\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n}\n\n/* Header & Navigation */\n.header {\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n background: rgba(42, 42, 42, 0.95);\n backdrop-filter: blur(10px);\n}\n\n.nav ul {\n display: flex;\n justify-content: flex-end;\n list-style: none;\n padding: 1.5rem 0;\n}\n\n.nav a {\n color: var(--text-color);\n text-decoration: none;\n padding: 0.5rem 1rem;\n margin: 0 0.5rem;\n transition: var(--transition);\n position: relative;\n}\n\n.nav a::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: 0;\n left: 50%;\n background: var(--accent-color);\n transition: var(--transition);\n}\n\n.nav a:hover::after {\n width: 100%;\n left: 0;\n}\n\n/* Hero Section */\n.hero {\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n position: relative;\n}\n\n.glitch {\n font-size: 4rem;\n font-weight: bold;\n position: relative;\n text-shadow: 0.05em 0 0 rgba(255,0,0,0.75),\n -0.025em -0.05em 0 rgba(0,255,0,0.75),\n 0.025em 0.05em 0 rgba(0,0,255,0.75);\n animation: glitch 500ms infinite;\n}\n\n@keyframes glitch {\n 0% {\n text-shadow: 0.05em 0 0 rgba(255,0,0,0.75),\n -0.025em -0.05em 0 rgba(0,255,0,0.75),\n 0.025em 0.05em 0 rgba(0,0,255,0.75);\n }\n 14% {\n text-shadow: 0.05em 0 0 rgba(255,0,0,0.75),\n -0.05em -0.025em 0 rgba(0,255,0,0.75),\n -0.025em 0.05em 0 rgba(0,0,255,0.75);\n }\n 15% {\n text-shadow: -0.05em -0.025em 0 rgba(255,0,0,0.75),\n 0.025em 0.025em 0 rgba(0,255,0,0.75),\n -0.05em -0.05em 0 rgba(0,0,255,0.75);\n }\n}\n\n.subtitle {\n font-size: 1.5rem;\n margin-top: 1rem;\n color: var(--accent-color);\n}\n\n/* About Section */\n.about {\n padding: 8rem 0;\n}\n\n.about-content {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem;\n align-items: center;\n}\n\n.image-frame {\n width: 100%;\n padding-bottom: 100%;\n position: relative;\n border: 2px solid var(--accent-color);\n border-radius: 10px;\n overflow: hidden;\n transform: rotate(-5deg);\n transition: var(--transition);\n}\n\n.image-frame:hover {\n transform: rotate(0);\n}\n\n/* Skills Section */\n.skills {\n padding: 8rem 0;\n background: #1a1a1a;\n}\n\n.skills-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 3rem;\n}\n\n.skill-card {\n background: var(--primary-color);\n padding: 2rem;\n border-radius: 10px;\n position: relative;\n overflow: hidden;\n}\n\n.skill-level {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 4px;\n background: var(--accent-color);\n transition: width 1s ease-in-out;\n}\n\n/* Contact Section */\n.contact {\n padding: 8rem 0;\n}\n\n.contact-form {\n max-width: 600px;\n margin: 0 auto;\n}\n\n.form-group {\n position: relative;\n margin-bottom: 2rem;\n}\n\n.form-group input,\n.form-group textarea {\n width: 100%;\n padding: 1rem;\n background: transparent;\n border: none;\n border-bottom: 2px solid var(--text-color);\n color: var(--text-color);\n font-size: 1rem;\n}\n\n.form-group label {\n position: absolute;\n left: 0;\n top: 1rem;\n transition: var(--transition);\n pointer-events: none;\n}\n\n.form-group input:focus + label,\n.form-group input:valid + label,\n.form-group textarea:focus + label,\n.form-group textarea:valid + label {\n top: -20px;\n font-size: 0.8rem;\n color: var(--accent-color);\n}\n\n.submit-btn {\n background: transparent;\n color: var(--accent-color);\n border: 2px solid var(--accent-color);\n padding: 1rem 2rem;\n font-size: 1rem;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.submit-btn:hover {\n background: var(--accent-color);\n color: var(--primary-color);\n}\n\n/* Footer */\n.footer {\n padding: 2rem 0;\n text-align: center;\n background: #1a1a1a;\n}\n\n.social-links {\n margin-top: 1rem;\n}\n\n.social-links a {\n color: var(--text-color);\n text-decoration: none;\n margin: 0 1rem;\n transition: var(--transition);\n}\n\n.social-links a:hover {\n color: var(--accent-color);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .glitch {\n font-size: 2.5rem;\n }\n \n .about-content {\n grid-template-columns: 1fr;\n }\n \n .nav ul {\n justify-content: center;\n }\n}\n\n@media (max-width: 480px) {\n .container {\n padding: 0 1rem;\n }\n \n .nav a {\n padding: 0.5rem;\n margin: 0 0.25rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Initialize skill level animations\n const skillCards = document.querySelectorAll('.skill-card');\n \n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const skillLevel = entry.target.querySelector('.skill-level');\n const level = entry.target.dataset.level;\n skillLevel.style.width = `${level}%`;\n }\n });\n }, { threshold: 0.5 });\n\n skillCards.forEach(card => observer.observe(card));\n\n // Smooth scrolling for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n });\n });\n\n // Form handling\n const contactForm = document.getElementById('contact-form');\n if (contactForm) {\n contactForm.addEventListener('submit', (e) => {\n e.preventDefault();\n // Add your form submission logic here\n alert('Thank you for your message! I will get back to you soon.');\n contactForm.reset();\n });\n }\n\n // Add parallax effect to hero section\n const hero = document.querySelector('.hero');\n window.addEventListener('scroll', () => {\n const scrolled = window.pageYOffset;\n hero.style.transform = `translateY(${scrolled * 0.5}px)`;\n });\n\n // Add animation class to elements when they come into view\n const animateOnScroll = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('animate');\n }\n });\n });\n\n document.querySelectorAll('section').forEach(section => {\n animateOnScroll.observe(section);\n });\n});\n\n---end---\n\nThis website features:\n1. Modern, clean design with a dark theme\n2. Glitch animation effect on the main title\n3. Smooth scrolling navigation\n4. Animated skill bars\n5. Floating label form inputs\n6. Parallax scrolling effect\n7. Responsive design for all screen sizes\n8. Interactive hover effects\n9. Accessibility features\n10. Performance optimized animations\n\nTo use this website:\n1. Replace [Your Name] with your actual name\n2. Add your photo to the about section\n3. Update the skills and their levels\n4. Add your social media links\n5. Customize the color scheme by modifying the CSS variables\n6. Add your form submission logic in the JavaScript file\n\nThe website is SEO-friendly, mobile-responsive, and follows modern web development best practices while maintaining a professional yet creative appearance."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 279,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3723
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..1b6c948
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# intro.scroll.pub
+Website generated by Claude from prompt: I want to create a website for self introduction
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..a382342
--- /dev/null
+++ b/script.js
@@ -0,0 +1,59 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Initialize skill level animations
+ const skillCards = document.querySelectorAll('.skill-card');
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ const skillLevel = entry.target.querySelector('.skill-level');
+ const level = entry.target.dataset.level;
+ skillLevel.style.width = `${level}%`;
+ }
+ });
+ }, { threshold: 0.5 });
+
+ skillCards.forEach(card => observer.observe(card));
+
+ // Smooth scrolling for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function(e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ target.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
+ });
+ });
+
+ // Form handling
+ const contactForm = document.getElementById('contact-form');
+ if (contactForm) {
+ contactForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+ // Add your form submission logic here
+ alert('Thank you for your message! I will get back to you soon.');
+ contactForm.reset();
+ });
+ }
+
+ // Add parallax effect to hero section
+ const hero = document.querySelector('.hero');
+ window.addEventListener('scroll', () => {
+ const scrolled = window.pageYOffset;
+ hero.style.transform = `translateY(${scrolled * 0.5}px)`;
+ });
+
+ // Add animation class to elements when they come into view
+ const animateOnScroll = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('animate');
+ }
+ });
+ });
+
+ document.querySelectorAll('section').forEach(section => {
+ animateOnScroll.observe(section);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..9a7059a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,278 @@
+:root {
+ --primary-color: #2a2a2a;
+ --accent-color: #64ffda;
+ --text-color: #e6e6e6;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ font-family: 'Inter', sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--primary-color);
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 2rem;
+}
+
+/* Header & Navigation */
+.header {
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+ background: rgba(42, 42, 42, 0.95);
+ backdrop-filter: blur(10px);
+}
+
+.nav ul {
+ display: flex;
+ justify-content: flex-end;
+ list-style: none;
+ padding: 1.5rem 0;
+}
+
+.nav a {
+ color: var(--text-color);
+ text-decoration: none;
+ padding: 0.5rem 1rem;
+ margin: 0 0.5rem;
+ transition: var(--transition);
+ position: relative;
+}
+
+.nav a::after {
+ content: '';
+ position: absolute;
+ width: 0;
+ height: 2px;
+ bottom: 0;
+ left: 50%;
+ background: var(--accent-color);
+ transition: var(--transition);
+}
+
+.nav a:hover::after {
+ width: 100%;
+ left: 0;
+}
+
+/* Hero Section */
+.hero {
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ position: relative;
+}
+
+.glitch {
+ font-size: 4rem;
+ font-weight: bold;
+ position: relative;
+ text-shadow: 0.05em 0 0 rgba(255,0,0,0.75),
+ -0.025em -0.05em 0 rgba(0,255,0,0.75),
+ 0.025em 0.05em 0 rgba(0,0,255,0.75);
+ animation: glitch 500ms infinite;
+}
+
+@keyframes glitch {
+ 0% {
+ text-shadow: 0.05em 0 0 rgba(255,0,0,0.75),
+ -0.025em -0.05em 0 rgba(0,255,0,0.75),
+ 0.025em 0.05em 0 rgba(0,0,255,0.75);
+ }
+ 14% {
+ text-shadow: 0.05em 0 0 rgba(255,0,0,0.75),
+ -0.05em -0.025em 0 rgba(0,255,0,0.75),
+ -0.025em 0.05em 0 rgba(0,0,255,0.75);
+ }
+ 15% {
+ text-shadow: -0.05em -0.025em 0 rgba(255,0,0,0.75),
+ 0.025em 0.025em 0 rgba(0,255,0,0.75),
+ -0.05em -0.05em 0 rgba(0,0,255,0.75);
+ }
+}
+
+.subtitle {
+ font-size: 1.5rem;
+ margin-top: 1rem;
+ color: var(--accent-color);
+}
+
+/* About Section */
+.about {
+ padding: 8rem 0;
+}
+
+.about-content {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 4rem;
+ align-items: center;
+}
+
+.image-frame {
+ width: 100%;
+ padding-bottom: 100%;
+ position: relative;
+ border: 2px solid var(--accent-color);
+ border-radius: 10px;
+ overflow: hidden;
+ transform: rotate(-5deg);
+ transition: var(--transition);
+}
+
+.image-frame:hover {
+ transform: rotate(0);
+}
+
+/* Skills Section */
+.skills {
+ padding: 8rem 0;
+ background: #1a1a1a;
+}
+
+.skills-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 3rem;
+}
+
+.skill-card {
+ background: var(--primary-color);
+ padding: 2rem;
+ border-radius: 10px;
+ position: relative;
+ overflow: hidden;
+}
+
+.skill-level {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 4px;
+ background: var(--accent-color);
+ transition: width 1s ease-in-out;
+}
+
+/* Contact Section */
+.contact {
+ padding: 8rem 0;
+}
+
+.contact-form {
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+.form-group {
+ position: relative;
+ margin-bottom: 2rem;
+}
+
+.form-group input,
+.form-group textarea {
+ width: 100%;
+ padding: 1rem;
+ background: transparent;
+ border: none;
+ border-bottom: 2px solid var(--text-color);
+ color: var(--text-color);
+ font-size: 1rem;
+}
+
+.form-group label {
+ position: absolute;
+ left: 0;
+ top: 1rem;
+ transition: var(--transition);
+ pointer-events: none;
+}
+
+.form-group input:focus + label,
+.form-group input:valid + label,
+.form-group textarea:focus + label,
+.form-group textarea:valid + label {
+ top: -20px;
+ font-size: 0.8rem;
+ color: var(--accent-color);
+}
+
+.submit-btn {
+ background: transparent;
+ color: var(--accent-color);
+ border: 2px solid var(--accent-color);
+ padding: 1rem 2rem;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.submit-btn:hover {
+ background: var(--accent-color);
+ color: var(--primary-color);
+}
+
+/* Footer */
+.footer {
+ padding: 2rem 0;
+ text-align: center;
+ background: #1a1a1a;
+}
+
+.social-links {
+ margin-top: 1rem;
+}
+
+.social-links a {
+ color: var(--text-color);
+ text-decoration: none;
+ margin: 0 1rem;
+ transition: var(--transition);
+}
+
+.social-links a:hover {
+ color: var(--accent-color);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .glitch {
+ font-size: 2.5rem;
+ }
+
+ .about-content {
+ grid-template-columns: 1fr;
+ }
+
+ .nav ul {
+ justify-content: center;
+ }
+}
+
+@media (max-width: 480px) {
+ .container {
+ padding: 0 1rem;
+ }
+
+ .nav a {
+ padding: 0.5rem;
+ margin: 0 0.25rem;
+ }
+}