peeeep/javascript-without-javascript-wizardry
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>JavaScript Without JavaScript</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script>11 tailwind.config = {12 theme: {13 extend: {14 colors: {15 primary: '#3b82f6',16 secondary: '#10b981',17 dark: '#1e293b',18 light: '#f8fafc'19 }20 }21 }22 }23 </script>24 <style>25 .gradient-bg {26 background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);27 }28 .card-hover:hover {29 transform: translateY(-5px);30 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);31 }32 .nav-link.active {33 border-bottom: 2px solid #3b82f6;34 }35 </style>36</head>37<body class="bg-gray-50 font-sans">38 <!-- Hero Section -->39 <header class="gradient-bg text-white py-20">40 <div class="container mx-auto px-6 text-center">41 <div class="flex flex-col md:flex-row items-center justify-center">42 <div class="md:w-1/2 mb-10 md:mb-0">43 <img src="http://static.photos/technology/640x360/42" alt="JavaScript Konzepte" class="rounded-lg shadow-xl mx-auto">44 </div>45 <div class="md:w-1/2">46 <h1 class="text-5xl font-bold mb-6">JavaScript erklärt<br><span class="text-yellow-300">ohne JavaScript</span></h1>47 <p class="text-xl mb-8 max-w-2xl mx-auto">Lernen Sie die Magie von JavaScript mit reinen HTML und CSS Beispielen</p>48 <div class="flex justify-center space-x-4">49 <a href="/examples.html" class="bg-white text-primary px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition">Beispiele ansehen</a>50 <a href="mailto:info@jsnojs.de" class="border-2 border-white text-white px-8 py-3 rounded-full font-bold hover:bg-white hover:text-primary transition">Fragen stellen</a>51 </div>52 </div>53 </div>54 </div>55 </header>56 <!-- Features Section -->57 <section class="py-16 bg-white">58 <div class="container mx-auto px-6">59 <h2 class="text-3xl font-bold text-center mb-12 text-dark">Warum JavaScript lernen?</h2>60<div class="grid md:grid-cols-3 gap-8">61 <div class="bg-light p-8 rounded-xl shadow-md transition duration-300 card-hover">62 <div class="text-primary mb-4">63 <i data-feather="cpu" class="w-12 h-12"></i>64 </div>65 <h3 class="text-xl font-bold mb-3 text-dark">Web Interactivity</h3>66 <p class="text-gray-600">JavaScript powers dynamic content and interactive elements on 97% of all websites.</p>67 </div>68 <div class="bg-light p-8 rounded-xl shadow-md transition duration-300 card-hover">69 <div class="text-primary mb-4">70 <i data-feather="layers" class="w-12 h-12"></i>71 </div>72 <h3 class="text-xl font-bold mb-3 text-dark">Versatile</h3>73 <p class="text-gray-600">From front-end to back-end, mobile apps to games, JavaScript is everywhere.</p>74 </div>75 <div class="bg-light p-8 rounded-xl shadow-md transition duration-300 card-hover">76 <div class="text-primary mb-4">77 <i data-feather="trending-up" class="w-12 h-12"></i>78 </div>79 <h3 class="text-xl font-bold mb-3 text-dark">Career Growth</h3>80 <p class="text-gray-600">JavaScript developers are among the highest paid and most in-demand tech professionals.</p>81 </div>82 </div>83 </div>84 </section>85 <!-- Concept Preview -->86 <section class="py-16 bg-gray-100">87 <div class="container mx-auto px-6">88 <h2 class="text-3xl font-bold text-center mb-12 text-dark">Wichtige Konzepte</h2>89<div class="grid md:grid-cols-2 gap-8">90 <div class="bg-white p-8 rounded-xl shadow-md">91 <h3 class="text-xl font-bold mb-4 text-dark">Variables & Data Types</h3>92 <div class="bg-dark p-4 rounded-lg mb-4">93 <code class="text-green-400">let name = "Alice";</code><br>94 <code class="text-green-400">const age = 30;</code><br>95 <code class="text-green-400">let isProgrammer = true;</code>96 </div>97 <p class="text-gray-600">JavaScript variables store data that can be changed (let) or remain constant (const).</p>98 </div>99 <div class="bg-white p-8 rounded-xl shadow-md">100 <h3 class="text-xl font-bold mb-4 text-dark">Functions</h3>101 <div class="bg-dark p-4 rounded-lg mb-4">102 <code class="text-green-400">function greet(name) {</code><br>103 <code class="text-green-400 ml-4">return `Hello, ${name}!`;</code><br>104 <code class="text-green-400">}</code>105 </div>106 <p class="text-gray-600">Functions are reusable blocks of code that perform specific tasks.</p>107 </div>108 </div>109 </div>110 </section>111 <!-- Einfache Navigation -->112 <nav class="bg-white shadow-lg sticky top-0 z-10">113 <div class="container mx-auto px-6 py-4">114 <div class="flex justify-between items-center">115 <a href="/" class="text-2xl font-bold text-primary">JS<span class="text-secondary">NoJS</span></a>116 <div class="flex space-x-6">117 <a href="/" class="nav-link active text-dark font-medium">Start</a>118 <a href="/examples.html" class="nav-link text-gray-600 hover:text-dark font-medium">Beispiele</a>119 <a href="/tutorials.html" class="nav-link text-gray-600 hover:text-dark font-medium">Tutorials</a>120<a href="https://developer.mozilla.org/de/docs/Web/JavaScript" target="_blank" class="nav-link text-gray-600 hover:text-dark font-medium">MDN Docs</a>121 <a href="mailto:info@jsnojs.de" class="nav-link text-gray-600 hover:text-dark font-medium">Kontakt</a>122 </div>123 </div>124 </div>125 </nav>126<footer class="bg-dark text-white py-12">127 <div class="container mx-auto px-6">128 <div class="grid md:grid-cols-3 gap-8">129 <div>130 <h3 class="text-xl font-bold mb-4">JSNoJS</h3>131 <p class="text-gray-400">Learning JavaScript concepts without writing a single line of JavaScript code.</p>132 </div>133 <div>134 <h3 class="text-xl font-bold mb-4">Quick Links</h3>135 <ul class="space-y-2">136 <li><a href="/tutorials.html" class="text-gray-400 hover:text-white">Tutorials</a></li>137 <li><a href="/frameworks.html" class="text-gray-400 hover:text-white">Frameworks</a></li>138<li><a href="/examples.html" class="text-gray-400 hover:text-white">Examples</a></li>139 <li><a href="/frameworks.html" class="text-gray-400 hover:text-white">Frameworks</a></li>140 </ul>141 </div>142 <div>143 <h3 class="text-xl font-bold mb-4">Connect</h3>144 <div class="flex space-x-4">145 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>146 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="github"></i></a>147 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>148 </div>149 </div>150 </div>151 <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">152 <p>© 2023 JSNoJS. All rights reserved. No JavaScript was harmed in the making of this website.</p>153 </div>154 </div>155 </footer>156 157 <script>158 feather.replace();159 </script>160</body>161</html>162