WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
ABC Clever: Learn Languages Online
4
jhgtdfhgg
Open In Editor
Video
Publish Your Code
0
Recommended
3 January 2025
HTML E-Learning Website Template
1 November 2025
Cards Online Shop
12 January 2026
HTML NES Emulator: Play Mega Man 3 Online
HTML
Copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ABC CLEVER - The smart ABC</title> <style type="text/css"> <!-- @import url("stilos.css"); body { background-image: url(img/12.gif); background-repeat: repeat; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin: 0px; padding: 0px; text-align:center; /* hack para o IE */ } .style41 {color: #3399FF} .style42 { font-size: 18px; color: #6699FF; } .style43 {color: #99CCFF} --> a:link,a:active,a:visited{ color:#FFFFFF; text-decoration:none; } a:hover{ color:#FFCC00; text-decoration:none; } </style> <body> <p align="center"> </p> <div align="center" class="menu" id="menuPricipal"> <img src="img/menu.png" width="985" height="59" border="0" usemap="#Map" /> <map name="Map" id="Map"><area shape="rect" coords="12,9,105,52" href="index.php" target="_self" /> <area shape="rect" coords="113,3,220,52" href="quem.php" target="_self" /> <area shape="rect" coords="228,4,404,51" href="html5/" target="_blank" /> <area shape="rect" coords="412,3,523,47" href="produtos.php" target="_self" /> <area shape="rect" coords="530,5,696,50" href="jogos.php" target="_self" /> <area shape="rect" coords="710,5,831,53" href="idiomas.php" target="_self" /> <area shape="rect" coords="842,4,975,55" href="contato.php" target="_self" /> </map> </div> <div align="center" class="DivTotal" id=" DivPricipal" > <p align="center"><br /> </p> <div align="left" style="margin-top: 0px;"> <table width="800" border="0" align="center"> <tr> <td width="300"><p align="center"><a href="html5/" target="_blank"><img src="img/bt1.png" width="237" height="275" /></a></p> </td> <td width="300"><div align="center"><a href="html5/" target="_blank"><img src="img/Bt2.png" alt="Acesso Discado" width="237" height="275" class="corBorda" /></a></div></td> </tr> </table> </div> <div align="center" style="margin-top: 5px;"> <table> <tr> <td height="150" valign="bottom"><div align="center"> <table width="520" border="0"> <tr> <td><div align="center"><a href="http://www.abcclever.com.br" target="_blank"><img src="img/usa.jpg" width="96" height="56" class="corBorda" /></a></div></td> <td><div align="center"><a href="http://www.bebele.com.br" target="_blank"><img src="img/brazil.jpg" alt="ABC Português" width="96" height="56" class="corBorda" /></a></div></td> <td><div align="center"><a href="https://www.bebele.com.br/Html5/MAIUSCULAS%20ESPANHOL%20INSTRUMENTAL/" target="_blank"><img src="img/spanha.jpg" alt="Alfabeto Español" width="96" height="56" class="corBorda" /></a></div></td> <td><div align="center"><a href="http://www.abcintelligent.com/" target="_blank"><img src="img/ifranca.jpg" alt="ABC Français" width="96" height="56" class="corBorda" /></a></div></td> </tr> </table> </div> </td> </tr> </table> </div> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-4802703-4"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ABC Clever Languages: Japanese</title> <style> :root { --primary-red: #bc002d; --soft-white: #f4f4f4; --dark-text: #333; } body { font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; line-height: 1.6; color: var(--dark-text); background-color: var(--soft-white); margin: 0; padding: 20px; } .container { max-width: 800px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } header { text-align: center; border-bottom: 4px solid var(--primary-red); margin-bottom: 30px; padding-bottom: 10px; } h1 { margin: 0; color: var(--primary-red); font-size: 2.5em; text-transform: uppercase; letter-spacing: 2px; } .subtitle { font-size: 1.2em; color: #666; margin-top: 5px; } .lesson-section { margin-bottom: 40px; } h2 { border-left: 5px solid var(--primary-red); padding-left: 15px; color: #222; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; } .card { background: #f9f9f9; padding: 20px; border: 1px solid #ddd; border-radius: 5px; text-align: center; } .jp-char { font-size: 3em; display: block; color: var(--primary-red); margin-bottom: 10px; } .romaji { font-weight: bold; display: block; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { text-align: left; padding: 12px; border-bottom: 1px solid #ddd; } th { background-color: var(--primary-red); color: white; } footer { text-align: center; margin-top: 50px; font-size: 0.9em; color: #888; } </style> </head> <body> <div class="container"> <header> <h1>ABC Clever Languages</h1> <div class="subtitle">Japanese Module: Level 1</div> </header> <section class="lesson-section"> <h2>The Three Writing Systems</h2> <p>Japanese uses a unique combination of three scripts to express ideas and sounds:</p> <div class="grid"> <div class="card"> <span class="jp-char">あ</span> <span class="romaji">Hiragana</span> <small>Native Japanese words & grammar</small> </div> <div class="card"> <span class="jp-char">ア</span> <span class="romaji">Katakana</span> <small>Foreign loanwords & names</small> </div> <div class="card"> <span class="jp-char">木</span> <span class="romaji">Kanji</span> <small>Adopted Chinese characters (Ideograms)</small> </div> </div> </section> <section class="lesson-section"> <h2>Essential Greetings</h2> <table> <thead> <tr> <th>English</th> <th>Japanese</th> <th>Romaji</th> </tr> </thead> <tbody> <tr> <td>Good morning</td> <td>おはようございます</td> <td>Ohayō gozaimasu</td> </tr> <tr> <td>Hello (Daytime)</td> <td>こんにちは</td> <td>Konnichiwa</td> </tr> <tr> <td>Thank you</td> <td>ありがとうございます</td> <td>Arigatō gozaimasu</td> </tr> <tr> <td>Excuse me / Sorry</td> <td>すみません</td> <td>Sumimasen</td> </tr> </tbody> </table> </section> <footer> <p>© 2023 ABC Clever Languages. All rights reserved.</p> </footer> </div> </body> </html>
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
