ABC Clever: Aprende idiomas en línea

8 jhgtdfhgg

Abrir en el editor Video Publica tu código

Recomendado

5 July 2025

Panel de inicio de sesión moderno con borde animado y restablecimiento de contraseña de TheDoc

18 May 2025

escribiendo en la pantalla

20 June 2025

Tarjetas de enlaces de redes sociales HTML

HTML

<!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">
			
			
			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>

</body>
</html>

ABC Clever: Aprende idiomas en línea

Recomendado

Panel de inicio de sesión moderno con borde animado y restablecimiento de contraseña de TheDoc

escribiendo en la pantalla

Tarjetas de enlaces de redes sociales HTML

HTML

CSS

JS

Recomendado

Panel de inicio de sesión moderno con borde animado y restablecimiento de contraseña de TheDoc

escribiendo en la pantalla

Tarjetas de enlaces de redes sociales HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS