Layout Dark Elegante (sezione) by @Darkness977 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<li>Inserisce voci all'interno di una lista
<table>Tag primario per la creazione di tabelle
<blockquote>Inserisce citazioni in un documento HTML
<pre>Indica una parte di testo preformattato
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
_selfApre collegamenti ipertestuali nella stessa pagina del browser

Users

Log in to search for users

Explore

Find inspiration

My Anime Blog - Ninjas and Dragons(2)

Brawl Stars final

programma base Di lauro

Gesù nostro signore(2)

esercizio 02 pagina complessa

Scheda Tecnica Xiaomi 14 Ultra

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<section class="contact-section">
  <div class="contact-container">

    <div class="contact-info-card">
      <h2>Lets <span>Catch up Today</span></h2>
      <p>Here’s an invitation to reconnect, share stories, and strengthen bonds to achieve higher goals.</p>

      <ul class="info-list">
        <li><i class="icon email"></i> Contact@company.com</li>
        <li><i class="icon phone"></i> (123) 456 – 789 884</li>
        <li><i class="icon location"></i> 794 Mcallister 1220 St San Francisco, 94102</li>
      </ul>
    </div>

    <div class="contact-form-card">
      <form>
        <div class="row">
          <input type="text" placeholder="Name">
          <input type="email" placeholder="Email">
        </div>

        <div class="row">
          <input type="text" placeholder="Phone">
          <input type="text" placeholder="Company">
        </div>

        <textarea placeholder="Message"></textarea>

        <button type="submit" class="btn-primary">Send Message</button>
      </form>
    </div>

  </div>
</section>

body {
  background: #0b0b0c;
  font-family: "Inter", sans-serif;
  color: #eaeaea;
}

.contact-section {
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.contact-container {
  display: flex;
  gap: 40px;
  max-width: 1100px;
  width: 100%;
}

.contact-info-card,
.contact-form-card {
  background: #111114;
  padding: 40px;
  border-radius: 28px;
  box-shadow: 0 0 25px rgba(0,0,0,0.5);
  flex: 1;
}

.contact-info-card h2 {
  font-size: 2.3rem;
  margin-bottom: 20px;
  color: #fff;
}

.contact-info-card h2 span {
  background: linear-gradient(90deg, #7a2cff, #9b5cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.info-list {
  list-style: none;
  margin-top: 30px;
}

.info-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: #ccc;
}

.row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

input, textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #333;
  background: #1A1A1D;
  color: #eee;
  border-radius: 12px;
  font-size: 1rem;
}

textarea {
  height: 150px;
  margin-bottom: 20px;
}

.btn-primary {
  width: 100%;
  background: linear-gradient(90deg, #6A00FF, #8A2EFF);
  padding: 16px;
  border-radius: 16px;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}