README.md
Changed around line 1
+ # microvision.scroll.pub
+ Website generated from prompt: a site about microscopes. all the different kinds and a historical timeline of the smallest things that could be seen. links to where to buy. links to communities of micrscope users
index.html
Changed around line 1
+
+
+
+
+
+
+
+ MicroVision - Exploring the Microscopic World
+
+
+
+
+
+
MicroVision
+
+
+
+
+ Types
+ Timeline
+
+
+
+
+
+
+
Discover the Invisible World
+
+
+
+
+
+
+
Types of Microscopes
+
+
+
Optical Microscopes
+
+
Traditional light microscopes using visible light and lenses.
+
+ Compound
+ Stereo
+ Digital
+
+
+
+
+
Electron Microscopes
+
+
Using electron beams for ultra-high magnification.
+
+ TEM
+ SEM
+ STEM
+
+
+
+
+
Scanning Probe
+
+
Modern microscopes using physical probes.
+
+ AFM
+ STM
+ SNOM
+
+
+
+
+
+
+
+
Discovery Timeline
+
+
+
1665
+
First cell observed by Robert Hooke
+
+
+
1674
+
Bacteria discovered by van Leeuwenhoek
+
+
+
1931
+
First electron microscope
+
+
+
1981
+
Scanning tunneling microscope invented
+
+
+
2018
+
Individual atoms imaged in 3D
+
+
+
+
+
+
Where to Buy
+
+
+
+
+
+
Join the Community
+
+
Forums
+
Connect with enthusiasts
+
+
Gallery
+
Share your microscope images
+
+
Research
+
Latest microscopy papers
+
+
+
+
+
+
+
+
+
+
+
+
style.css
Changed around line 1
+ :root {
+ --primary-color: #2c3e50;
+ --secondary-color: #3498db;
+ --accent-color: #e74c3c;
+ --background-color: #f5f6fa;
+ --text-color: #2c3e50;
+ --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ --transition-speed: 0.3s;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ }
+
+ /* Header and Navigation */
+ header {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ padding: 1rem;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+ }
+
+ nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .logo {
+ color: white;
+ font-size: 1.5rem;
+ font-weight: bold;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ }
+
+ .nav-links {
+ display: flex;
+ list-style: none;
+ }
+
+ .nav-links li {
+ margin-left: 2rem;
+ }
+
+ .nav-links a {
+ color: white;
+ text-decoration: none;
+ transition: var(--transition-speed);
+ }
+
+ .nav-links a:hover {
+ color: var(--accent-color);
+ }
+
+ /* Hero Section */
+ .hero {
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .hero h1 {
+ font-size: 3.5rem;
+ color: white;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+ z-index: 2;
+ }
+
+ .parallax-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ }
+
+ .microscope-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.8) 100%);
+ }
+
+ /* Sections */
+ section {
+ padding: 5rem 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ h2 {
+ text-align: center;
+ margin-bottom: 3rem;
+ font-size: 2.5rem;
+ color: var(--primary-color);
+ }
+
+ /* Microscope Cards */
+ .microscope-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ }
+
+ .microscope-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: var(--card-shadow);
+ transition: var(--transition-speed);
+ }
+
+ .microscope-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+ }
+
+ /* Timeline */
+ .timeline {
+ position: relative;
+ max-width: 800px;
+ margin: 0 auto;
+ }
+
+ .timeline::before {
+ content: '';
+ position: absolute;
+ width: 2px;
+ background: var(--secondary-color);
+ top: 0;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ .timeline-item {
+ padding: 1rem;
+ position: relative;
+ width: 50%;
+ margin: 2rem 0;
+ }
+
+ .timeline-item:nth-child(odd) {
+ left: 0;
+ }
+
+ .timeline-item:nth-child(even) {
+ left: 50%;
+ }
+
+ .year {
+ font-weight: bold;
+ color: var(--secondary-color);
+ }
+
+ /* Community Section */
+ .community-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ }
+
+ .community-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ text-align: center;
+ text-decoration: none;
+ color: var(--text-color);
+ box-shadow: var(--card-shadow);
+ transition: var(--transition-speed);
+ }
+
+ .community-card:hover {
+ transform: scale(1.05);
+ box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+ }
+
+ /* Footer */
+ footer {
+ background: var(--primary-color);
+ color: white;
+ padding: 3rem 2rem;
+ }
+
+ .footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ }
+
+ .social-links a {
+ color: white;
+ text-decoration: none;
+ margin-right: 1rem;
+ }
+
+ .footer-bottom {
+ text-align: center;
+ margin-top: 2rem;
+ padding-top: 2rem;
+ border-top: 1px solid rgba(255,255,255,0.1);
+ }
+
+ /* Mobile Responsiveness */
+ .menu-toggle {
+ display: none;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .menu-toggle span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: white;
+ margin: 5px 0;
+ transition: var(--transition-speed);
+ }
+
+ @media (max-width: 768px) {
+ .menu-toggle {
+ display: block;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: var(--primary-color);
+ padding: 1rem;
+ flex-direction: column;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .nav-links li {
+ margin: 1rem 0;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .timeline::before {
+ left: 0;
+ }
+
+ .timeline-item {
+ width: 100%;
+ left: 0 !important;
+ padding-left: 2rem;
+ }
+ }
+
+ /* Animations */
+ @keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+ }
+
+ .microscope-card, .community-card {
+ animation: fadeIn 0.5s ease-in;
+ }