separacao com o css

2026-06-09 00:24:16 -03:00
parent f741a3b564
commit c9060863a2
2 changed files with 183 additions and 51 deletions
--- a/teste.html
+++ b/teste.html
@@ -3,55 +3,8 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Documento Inicial</title>
-  <style>
-    * {
-      box-sizing: border-box;
-    }
-
-    body {
-      margin: 0;
-      min-height: 100vh;
-      font-family: Arial, sans-serif;
-      color: #1f2937;
-      background: #f3f4f6;
-      display: grid;
-      place-items: center;
-    }
-
-    main {
-      width: min(720px, 92vw);
-      padding: 32px;
-      background: #ffffff;
-      border: 1px solid #e5e7eb;
-      border-radius: 8px;
-      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
-    }
-
-    .page-header {
-      display: flex;
-      align-items: center;
-      gap: 18px;
-      margin-bottom: 12px;
-    }
-
-    .oracle-logo {
-      width: 132px;
-      height: auto;
-      flex: 0 0 auto;
-      display: block;
-    }
-
-    h1 {
-      margin: 0;
-      font-size: 2rem;
-    }
-
-    p {
-      margin: 0;
-      line-height: 1.6;
-    }
-  </style>
+  <title>Oracle Exadata</title>
+  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
  <main>
@@ -61,9 +14,40 @@
        src="https://www.oracle.com/a/ocom/img/oracle-logo.svg"
        alt="Oracle"
      >
-      <h1>Pagina inicial</h1>
+      <span class="header-title">Infraestrutura de dados</span>
    </header>
-    <p>Este e um arquivo HTML inicial pronto para receber seu conteudo.</p>
+    <section class="hero" aria-labelledby="page-title">
+      <p class="eyebrow">Banco de dados para cargas críticas</p>
+      <h1 id="page-title">Oracle Exadata</h1>
+      <p class="lead">
+        Oracle Exadata é uma plataforma integrada de hardware e software criada
+        para executar bancos de dados Oracle com alta performance,
+        disponibilidade e segurança, tanto em ambientes locais quanto na nuvem.
+      </p>
+      <div class="actions" aria-label="Acoes principais">
+        <a class="button button-primary" href="https://www.oracle.com/br/engineered-systems/exadata/" target="_blank" rel="noopener">
+          Conhecer Exadata
+        </a>
+        <a class="button button-secondary" href="https://www.oracle.com/br/database/" target="_blank" rel="noopener">
+          Ver soluções Oracle Database
+        </a>
+      </div>
+    </section>
+
+    <section class="benefits" aria-label="Beneficios do Oracle Exadata">
+      <article class="benefit">
+        <h2>Performance extrema</h2>
+        <p>Processamento otimizado para transações, analytics e workloads mistos de missão crítica.</p>
+      </article>
+      <article class="benefit">
+        <h2>Alta disponibilidade</h2>
+        <p>Arquitetura preparada para continuidade, escalabilidade e recuperação em ambientes corporativos.</p>
+      </article>
+      <article class="benefit">
+        <h2>Gestão simplificada</h2>
+        <p>Recursos integrados reduzem complexidade operacional e ajudam equipes a entregar mais valor ao negócio.</p>
+      </article>
+    </section>
  </main>
 </body>
 </html>