File Manager

✏️ Edit File: /home/rla105zs937x/public_html/sairamfoodproducts.com/contact.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Contact Us | SAIRAM Cottage Industries</title>
<meta name="description" content="Contact SAIRAM Cottage Industries for orders, wholesale enquiries and product details.">
<meta name="viewport" content="width=device-width, initial-scale=1">

:root {
  --dark:   #2c1206;
  --mid:    #7c3a10;
  --gold:   #c8881a;
  --gold-lt:#f0c060;
  --cream:  #fdf6ed;
  --white:  #ffffff;
  --nav-h:  78px;
}

body {
  font-family: 'Lato', sans-serif;
  background: #f5ede0;
  color: var(--dark);
}

/* ─── NAVBAR ─── */
.sairam-nav {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--white);
  height: var(--nav-h);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 3px 20px rgba(44,18,6,.12);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LOGO — THE FIX */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-ring {
  /* Fixed container — logo never overflows */
  width:  60px;
  height: 60px;
  border-radius: 50%;
  border: 2.5px solid var(--gold);
  overflow: hidden;          /* clips image inside circle */
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(200,136,26,.30);
  transition: box-shadow .25s, transform .25s;
}

.logo-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* fills circle, no overflow, no stretch */
  object-position: center;
  display: block;
}

.nav-brand:hover .logo-ring {
  transform: scale(1.06);
  box-shadow: 0 4px 20px rgba(200,136,26,.45);
}

.brand-text .name {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  display: block;
  letter-spacing: .5px;
}
.brand-text .sub {
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-top: 2px;
}

/* NAV LINKS */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}

.nav-links a {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--dark);
  text-decoration: none;
  padding: 10px 16px;
  position: relative;
  transition: color .2s;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 16px; right: 16px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
  border-radius: 2px;
}

.nav-links a:hover,
.nav-links li.active a { color: var(--mid); }
.nav-links a:hover::after,
.nav-links li.active a::after { transform: scaleX(1); }

/* HAMBURGER */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 25px; height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: all .3s;
}

/* ─── PAGE HERO ─── */
.page-hero {
  background: linear-gradient(135deg, var(--dark) 0%, #5a220a 100%);
  padding: 56px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8881a' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero h1 {
  font-family: 'Cinzel', serif;
  font-size: 38px;
  color: var(--cream);
  font-weight: 700;
  position: relative;
}
.page-hero h1 span { color: var(--gold-lt); }
.page-hero p {
  color: #c0a888;
  font-size: 15px;
  margin-top: 12px;
  position: relative;
  letter-spacing: .5px;
}
.hero-divider {
  width: 60px; height: 3px;
  background: var(--gold);
  margin: 18px auto 0;
  border-radius: 2px;
  position: relative;
}

/* ─── CONTACT SECTION ─── */
.contact-section {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
  align-items: start;
}

/* INFO CARD */
.info-card {
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(44,18,6,.09);
}
.info-card-header {
  background: var(--dark);
  padding: 28px 32px;
}
.info-card-header h3 {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  color: var(--gold-lt);
  letter-spacing: 1px;
}
.info-card-header p {
  color: #9a8070;
  font-size: 13px;
  margin-top: 6px;
}

.info-items { padding: 8px 0; }

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 32px;
  border-bottom: 1px solid #f0e8dc;
  transition: background .2s;
}
.info-item:last-child { border-bottom: none; }
.info-item:hover { background: #fdf6ed; }

.info-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--gold), #e8a830);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 17px;
  color: var(--white);
  box-shadow: 0 2px 10px rgba(200,136,26,.35);
}

.info-body h4 {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.info-body p {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
}
.info-body a {
  color: var(--mid);
  text-decoration: none;
}
.info-body a:hover { color: var(--gold); }

/* FORM CARD */
.form-card {
  background: var(--white);
  border-radius: 4px;
  padding: 40px 40px;
  box-shadow: 0 4px 30px rgba(44,18,6,.09);
}
.form-card h3 {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  color: var(--dark);
  margin-bottom: 6px;
}
.form-card .sub {
  font-size: 13px;
  color: #999;
  margin-bottom: 28px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 8px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #e8ddd0;
  border-radius: 2px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: var(--dark);
  background: var(--cream);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,136,26,.12);
  background: #fff;
}
.form-group textarea { resize: vertical; min-height: 120px; }

.btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--dark);
  color: var(--gold-lt);
  border: 2px solid var(--gold);
  padding: 14px 36px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: all .25s;
}
.btn-submit:hover {
  background: var(--gold);
  color: var(--dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200,136,26,.35);
}

/* ─── FOOTER ─── */
footer {
  background: var(--dark);
  color: #888;
  padding: 28px;
  text-align: center;
  font-size: 13px;
  margin-top: 60px;
  letter-spacing: .5px;
}
footer span { color: var(--gold); }

/* ─── MOBILE ─── */
@media (max-width: 900px) {
  .contact-section { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 680px) {
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 28px 22px; }
  .page-hero h1 { font-size: 26px; }

.sairam-nav { height: auto; min-height: var(--nav-h); }
  .nav-inner { flex-wrap: wrap; padding: 14px 20px; height: auto; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 10px 0 6px;
    border-top: 1px solid #f0e0c8;
    margin-top: 10px;
    gap: 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 11px 4px; font-size: 13px; }
  .nav-links a::after { left: 4px; right: 4px; }
  .logo-ring { width: 50px; height: 50px; }
  .brand-text .name { font-size: 15px; }
}
</style>
</head>
<body>

<nav class="sairam-nav">
  <div class="nav-inner">

<a class="nav-brand" href="index.html">
      <div class="logo-ring">
        <img src="images/logo.png" alt="Sairam Logo">
      </div>
      <div class="brand-text">
        <span class="name">Sairam</span>
        <span class="sub">Cottage Industries</span>
      </div>
    </a>

<ul class="nav-links" id="navLinks">
      <li><a href="index.html">Home</a></li>
      <li><a href="index.html#about-us">About</a></li>
      <li><a href="index.html#blog">Products</a></li>
      <li><a href="index.html#price">Product Range</a></li>
      <li><a href="index.html#subscribe">Updates</a></li>
      <li class="active"><a href="contact.html">Contact</a></li>
    </ul>

</div>
</nav>

<div class="page-hero">
  <h1>Get in <span>Touch</span></h1>
  <p>We welcome retail, wholesale and distributor enquiries.</p>
  <div class="hero-divider"></div>
</div>

<section class="contact-section">

<div class="info-card">
    <div class="info-card-header">
      <h3>Contact Information</h3>
      <p>Reach us through any of these channels</p>
    </div>
    <div class="info-items">

<div class="info-item">
        <div class="info-icon">📞</div>
        <div class="info-body">
          <h4>Phone</h4>
          <p>
            <a href="tel:+918124287520">+91 81242 87520</a><br>
            <a href="tel:+919380460803">+91 93804 60803</a>
          </p>
        </div>
      </div>

<div class="info-item">
        <div class="info-icon">✉️</div>
        <div class="info-body">
          <h4>Email</h4>
          <p><a href="mailto:sairamcottageindustries@gmail.com">sairamcottageindustries@gmail.com</a></p>
        </div>
      </div>

<div class="info-item">
        <div class="info-icon">📍</div>
        <div class="info-body">
          <h4>Address</h4>
          <p>No.32, Ranjan Nagar,<br>Kilpauk,<br>Thiruvallur District,<br>Tamil Nadu, India</p>
        </div>
      </div>

<div class="info-item">
        <div class="info-icon">🕐</div>
        <div class="info-body">
          <h4>Business Hours</h4>
          <p>Mon – Sat: 9:00 AM – 6:00 PM<br>Sunday: Closed</p>
        </div>
      </div>

</div>
  </div>

<div class="form-card">
    <h3>Send Us a Message</h3>
    <p class="sub">We'll get back to you within 24 hours</p>

<div class="form-row">
        <div class="form-group">
          <label>Full Name</label>
          <input type="text" name="name" placeholder="Your full name" required>
        </div>
        <div class="form-group">
          <label>Phone Number</label>
          <input type="tel" name="phone" placeholder="+91 XXXXX XXXXX">
        </div>
      </div>

<div class="form-group">
        <label>Email Address</label>
        <input type="email" name="email" placeholder="yourmail@example.com" required>
      </div>

<div class="form-group">
        <label>Enquiry Type</label>
        <select name="enquiry">
          <option value="">Select enquiry type...</option>
          <option>Retail Order</option>
          <option>Wholesale Enquiry</option>
          <option>Distributor Partnership</option>
          <option>General Question</option>
        </select>
      </div>

<div class="form-group">
        <label>Message</label>
        <textarea name="message" placeholder="Write your message here..." required></textarea>
      </div>

<button type="submit" class="btn-submit">
        Send Message &rarr;
      </button>

</form>
  </div>

</section>

</body>
</html>

Batal

⬅ Naik ke public_html 16 item

Nama	Tipe	Ukuran	Diubah	Aksi
📁.well-known	dir	—	2026-03-02 09:53	📂 Buka
📁css	dir	—	2026-03-25 06:08	📂 Buka
📁fonts	dir	—	2026-02-24 21:42	📂 Buka
📁images	dir	—	2026-03-09 16:20	📂 Buka
📁js	dir	—	2026-02-24 21:42	📂 Buka
📁less	dir	—	2026-02-24 21:42	📂 Buka
📁shop	dir	—	2026-07-17 19:56	📂 Buka
📄.DS_Store	ds_store	6 KB	2015-06-19 18:49	✏️ Edit 👁️ View
🌐contact.html	html	13.6 KB	2026-03-02 10:21	✏️ Edit 👁️ View
🌐contact1.html	html	3.1 KB	2026-02-24 21:52	✏️ Edit 👁️ View
🗜️food.zip	zip	3.1 MB	2026-03-02 09:45	✏️ Edit 👁️ View
🌐index.html	html	36.3 KB	2026-04-03 20:32	✏️ Edit 👁️ View
🌐index1.html	html	13.4 KB	2026-03-02 09:46	✏️ Edit 👁️ View
🌐indexnew.html	html	25.5 KB	2026-03-10 05:51	✏️ Edit 👁️ View
🌐indexrecentold.html	html	15.3 KB	2026-03-02 12:28	✏️ Edit 👁️ View
📝readme.md	md	506 B	2015-06-19 18:49	✏️ Edit 👁️ View