Skip to content

Instantly share code, notes, and snippets.

@Veraticus
Created June 14, 2013 05:10
Show Gist options
  • Select an option

  • Save Veraticus/5779594 to your computer and use it in GitHub Desktop.

Select an option

Save Veraticus/5779594 to your computer and use it in GitHub Desktop.
<!Doctype HTML>
<html>
<head>
<title>Google</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="logo"><img src="logo4w.png" height="95" width="275"/>
</div>
<form name="input" action="html_form_action.asp" method="get">
<input type="text" name="search">
<input type="submit" value="Submit">
</form>
<div class="footer">
<div id="search">Google Search
</div>
<div id="lucky">I'm feeling lucky
</div>
<div id="ads">Advertising Programs
</div>
<div id="business">Business Solutions
</div>
<div id="privacy">Privacy & Terms
</div>
<div id="google+">+Google
</div>
<div id="about">About Google
</div>
</div>
</body>
</html>
<?php
/**
* PHP ERRORS
*
* The php error reporting level. We want all significant errors to
* be shown, including E_STRICT. We exclude E_DEPRECATED through,
* because we need to use some deprecated functions to disable
* certain PHP features that are deprecated but still work (think
* magic_quotes).
*/
if (defined('E_DEPRECATED'))
{
error_reporting((E_ALL | E_STRICT) & ~E_DEPRECATED);
}
else
{
error_reporting(E_ALL | E_STRICT);
}
/**
* CONSTANTS
*
* Mission-critical application and system constants are the first
* thing to set up. These constants include:
*
* ROOTPATH - The full server path to the root folder
* EXT - The file extension. Typically ".php"
* SYSPATH - The full server path to the "system" folder
* APPPATH - The full server path to the "application" folder
* VENPATH - The full server path to the "vendors" folder
*/
define('ROOTPATH', dirname(__FILE__) . '/');
define('EXT', '.php');
define('SYSPATH', ROOTPATH . 'sys/');
define('APPPATH', ROOTPATH . 'app/');
define('VENPATH', ROOTPATH . 'vendors/');
if (!defined('CONTROLLERS')) // May already be set by test.php
{
define('CONTROLLERS', 'controllers/');
}
if (defined('DEPLOY_CUSTOM_PATH'))
{
define('CUSPATH', DEPLOY_CUSTOM_PATH);
}
else
{
define('CUSPATH', ROOTPATH . 'custom/');
}
if (defined('DEPLOY_EXPORT_PATH'))
{
define('EXPPATH', DEPLOY_EXPORT_PATH);
}
else
{
define('EXPPATH', ROOTPATH . 'exports/');
}
if (!defined('DEPLOY_RESOURCE_URL'))
{
define('DEPLOY_RESOURCE_URL', '');
}
/**
* CORE HELPERS
*
* The next thing we do is to include some helpers that are required
* during the boot process (and elsewhere in the framework or app)
* or do some initializing work (setting up the PHP environment, for
* instance).
*/
require_once(SYSPATH . 'boot/core.php');
require_once(SYSPATH . 'boot/errors.php');
require_once(SYSPATH . 'boot/str.php');
require_once(SYSPATH . 'boot/env.php');
require_once(SYSPATH . 'boot/os.php');
require_once(SYSPATH . 'boot/support.php');
/**
* APP-SPECIFIC
*
* If the application-specific file exists, we load it and the app
* can check its required dependencies, load and validate its config
* file and so on.
*/
$application = APPPATH . 'boot/index.php';
if (file_exists($application))
{
require_once $application;
}
/**
* GIZMO
*
* After initializing the framework and letting the application check
* its requirements, we load the actual Gizmo framework.
*/
require_once(SYSPATH . 'core/gizmo.php');
<!Doctype HTML>
<html>
<head>
<title>Google</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="blackmenu">
+Justine
Search
Images
Maps
Play
YouTube
News
Gmail
Drive
Calendar
More
</div>
<div id="login">
[email protected]
</div>
<div id="logo"><img src="logo4w.png" height="95" width="275"/>
</div>
<div id="searchForm">
<div class="row">
<form name="input" action="html_form_action.asp" method="get">
<input type="text" name="search">
</form>
</div>
</div>
<div id="underSearch">
<div class="row">
<div id="search"><input type="submit" class="google" value="Google Search">
</div>
<div id="lucky"><input type="submit" class="lucky" value="I'm Feeling Lucky">
</div>
</div>
<div id="text">
<div class="row">Heard about The Internship? <a href="http://www.google.com/students">Meet the real Google interns.</a></div>
</div>
</div>
<div id="footer">
<div class="row">
<div id="ads">Advertising Programs
</div>
<div id="business">Business Solutions
</div>
<div id="privacy">Privacy & Terms
</div>
<div id="google+">+Google
</div>
<div id="about">About Google
</div>
</div>
</div>
</body>
</html>
@belal551
Copy link

belal551 commented Oct 1, 2025

Uploading Screenshot_٢٠٢٥٠٩٢٦_٠٢٥٨١٩_Gallery.jpg…

@wv5mq8zhcf-create
Copy link

index.htm1

@abhitranjandas68-arch
Copy link

<title>AromaNest — Handcrafted Candles</title>
<nav class="nav">
  <a href="#products">Candles</a>
  <a href="#about">About</a>
  <a href="#instagram">Instagram</a>
  <a href="#contact">Contact</a>
</nav>

<div class="header-right">
  <button id="themeToggle" class="icon-btn" aria-label="Toggle dark mode">🌓</button>
  <button id="cartBtn" class="icon-btn" aria-label="Open cart">🛒 <span id="cartCount">0</span></button>
</div>

Your Cart

Total: ₹0
Checkout
  <div class="hero-overlay">
    <h1>Hand-poured Soy Candles</h1>
    <p class="lead">Minimal • Aesthetic • Natural — crafted for cozy corners.</p>
    <div class="hero-cta">
      <a href="#products" class="btn primary">Shop Bestsellers</a>
      <button id="heroShopAll" class="btn ghost">View All Candles</button>
    </div>
  </div>
</section>

<!-- PRODUCTS -->
<section id="products" class="section products reveal">
  <div class="section-head">
    <h2>Our Collection</h2>
    <p>Eco-friendly soy wax, cotton wicks, and thoughtfully blended fragrances.</p>
  </div>

  <div id="productGrid" class="grid">
    <!-- Product cards inserted by JS. There are 6 products by default. -->
  </div>
</section>

<!-- ABOUT -->
<section id="about" class="section about reveal">
  <div class="two-col">
    <div>
      <h2>About AromaNest</h2>
      <p>
        AromaNest started as a tiny bedside experiment — now we pour small-batch, non-toxic soy candles with
        calming scent blends made from essential oils. We focus on minimal design and intentional moments.
      </p>
      <ul class="features">
        <li>100% Soy Wax</li>
        <li>Phthalate-free Fragrances</li>
        <li>Hand-poured in small batches</li>
      </ul>
    </div>

    <div class="about-image" aria-hidden="true">
      <img src="https://i.imgur.com/o5T8kUX.png" alt="Candles styled" />
    </div>
  </div>
</section>

<!-- INSTAGRAM FEED (simple grid) -->
<section id="instagram" class="section instagram reveal">
  <h2>From Our Instagram</h2>
  <p>Follow @aromanest_candles for behind-the-scenes and styling ideas.</p>

  <div class="ig-grid" id="igGrid">
    <!-- grid populated by JS (images link to Instagram) -->
  </div>
  <div class="ig-cta">
    <a href="https://instagram.com" target="_blank" class="btn ghost">Follow on Instagram</a>
  </div>
</section>

<!-- NEWSLETTER -->
<section class="section newsletter reveal">
  <div class="newsletter-card">
    <div>
      <h3>Join our cozy list</h3>
      <p>Get exclusive early releases and 10% off your first order.</p>
    </div>

    <form id="newsletterForm" class="newsletter-form" novalidate>
      <input id="newsletterEmail" type="email" placeholder="Your email" required />
      <button type="submit" class="btn primary">Subscribe</button>
    </form>

    <p class="newsletter-note" id="newsletterNote" aria-live="polite"></p>
  </div>
</section>

<!-- CONTACT / FOOTER -->
<section id="contact" class="section contact reveal">
  <div class="two-col">
    <div>
      <h2>Contact</h2>
      <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
      <p>Instagram: <a href="https://instagram.com/aromanest_candles" target="_blank">@aromanest_candles</a></p>
    </div>

    <div>
      <h3>Quick Questions?</h3>
      <form id="contactForm" class="contact-form" novalidate>
        <input id="contactName" type="text" placeholder="Your name" required />
        <input id="contactEmail" type="email" placeholder="Email" required />
        <textarea id="contactMessage" placeholder="Message" rows="4" required></textarea>
        <button type="submit" class="btn primary">Send</button>
        <p class="form-note" id="contactNote" aria-live="polite"></p>
      </form>
    </div>
  </div>
</section>

<!-- CHECKOUT MODAL -->
<div id="checkoutModal" class="modal" aria-hidden="true">
  <div class="modal-content">
    <button id="closeCheckout" class="close-btn">✕</button>
    <h3>Checkout</h3>

    <div id="checkoutSummary" class="checkout-summary">
      <!-- populated by JS -->
    </div>

    <form id="checkoutForm" class="checkout-form" novalidate>
      <div class="form-row">
        <input id="custName" name="name" type="text" placeholder="Full name" required />
        <input id="custEmail" name="email" type="email" placeholder="Email" required />
      </div>

      <div class="form-row">
        <input id="custPhone" name="phone" type="tel" placeholder="Phone" required />
        <input id="custPostal" name="postal" type="text" placeholder="Pincode / ZIP" required />
      </div>

      <textarea id="custAddress" name="address" placeholder="Shipping address" rows="3" required></textarea>

      <div class="payment-methods">
        <label><input type="radio" name="payment" value="cod" checked /> Cash on Delivery</label>
        <label><input type="radio" name="payment" value="upi" /> UPI (mock)</label>
        <label><input type="radio" name="payment" value="card" /> Card (mock)</label>
      </div>

      <div class="checkout-actions">
        <button type="submit" class="btn primary">Place Order</button>
        <button id="checkoutCancel" type="button" class="btn ghost">Cancel</button>
      </div>

      <p id="checkoutNote" class="form-note" aria-live="polite"></p>
    </form>
  </div>
</div>

© AromaNest — Hand-poured soy candles

<script src="script.js"></script>

@kauanrocha02670-dotcom
Copy link

index.html

<title>ChatPlay</title>
ChatPlay

ChatPlay

Home + Perfil

Avatar

username

Post

❤️ 💬 📤

0 curtidas

username legenda

    <script src="js/app.js"></script>

    css/style.css

    :root {
    --bg: #fafafa;
    --border: #dbdbdb;
    --primary: #ff0050;
    --text: #262626;
    }

    • { margin: 0; padding: 0; box-sizing: border-box; }
      body {
      font-family: Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      }
      header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.5rem 1rem;
      border-bottom: 1px solid var(--border);
      background: #fff;
      position: sticky;
      top: 0;
      z-index: 9;
      }
      .logo { display:flex; align-items:center; gap:.4rem; }
      .logo img { height: 28px; }
      .search { padding:.4rem .6rem; border:1px solid var(--border); border-radius:4px; }
      nav { display:flex; gap:.5rem; }
      nav button { background:var(--primary); color:#fff; border:none; padding:.5rem 1rem; border-radius:4px; cursor:pointer; }

    #feed { max-width: 600px; margin: 1rem auto; }
    .post {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 1rem;
    }
    .post-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem;
    }
    .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
    .post-img { width: 100%; display: block; }
    .actions { display: flex; gap: .8rem; padding: .5rem .7rem; }
    .actions button { background: none; border: none; font-size: 1.3rem; cursor: pointer; }
    .likes, .caption, .comments { padding: 0 .7rem 0.5rem; font-size: 0.9rem; }
    .addComment {
    width: 100%;
    border: none;
    border-top: 1px solid var(--border);
    padding: .7rem;
    }

    footer { text-align:center; padding:1rem; font-size:.8rem; color:#999; }

    js/app.js

    const feed = document.getElementById('feed');
    const tpl = document.getElementById('postTemplate');

    // dados fake
    const posts = [
    {
    user: 'aninha_fit',
    avatar: 'img/avatar1.jpg',
    img: 'img/post1.jpg',
    caption: 'Treino concluído! 💪',
    likes: 137,
    comments: ['Arrasou!', 'Top demais']
    }
    ];

    // renderizar posts
    posts.forEach(p => {
    const clone = tpl.content.cloneNode(true);
    clone.querySelector('.avatar').src = p.avatar;
    clone.querySelector('.username').textContent = p.user;
    clone.querySelector('.post-img').src = p.img;
    clone.querySelector('.caption').innerHTML = <strong>${p.user}</strong> ${p.caption};
    clone.querySelector('.likes').textContent = ${p.likes} curtidas;

    const ul = clone.querySelector('.comments');
    p.comments.forEach(c => {
    const li = document.createElement('li');
    li.textContent = c;
    ul.appendChild(li);
    });

    // curtir
    clone.querySelector('.likeBtn').addEventListener('click', e => {
    const likesEl = e.target.closest('.post').querySelector('.likes');
    let num = parseInt(likesEl.textContent);
    likesEl.textContent = ${++num} curtidas;
    });

    // comentar (live)
    const input = clone.querySelector('.addComment');
    input.addEventListener('keydown', e => {
    if (e.key === 'Enter' && input.value.trim()) {
    const li = document.createElement('li');
    li.textContent = input.value.trim();
    ul.appendChild(li);
    input.value = '';
    }
    });

    feed.appendChild(clone);
    });

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment