Last active
March 20, 2026 14:59
-
Star
(112)
You must be signed in to star a gist -
Fork
(164)
You must be signed in to fork a gist
-
-
Save isdaviddong/23cc140c1780828b44f79397f737b95e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <meta charset="utf-8" /> | |
| <script src="Scripts/jquery-1.9.1.min.js"></script> | |
| <link href="Content/bootstrap.min.css" rel="stylesheet" /> | |
| <script src="Scripts/isRockFx.js"></script> | |
| <script> | |
| $(function () { | |
| $('#ButtonCal').click( | |
| function () { | |
| //取得用戶輸入的參數 | |
| var para = { 'height': $('#txbHeight').val(), 'weight': $('#txbWeight').val() }; | |
| //呼叫API | |
| ExecuteAPI('Example', 'BMI', para, | |
| //呼叫WebAPI成功時運行的Call Back Function | |
| function (result) { | |
| alert(result.Data); | |
| } | |
| ); | |
| } | |
| ); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="row" style="margin:10px"> | |
| <div class="col-md-12"> | |
| <div class="form-group"> | |
| 身高: | |
| <input id="txbHeight" class="form-control" placeholder="請輸入身高" /> | |
| 體重: | |
| <input id="txbWeight" class="form-control" placeholder="請輸入體重" /> | |
| <br /> | |
| <button class="btn btn-primary" id="ButtonCal">計算</button> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Here's a thinking process that leads to the suggested HTML/CSS code:
-
Analyze the Request:
- Topic: Travel Agency Itinerary Seller (services for customers).
- Key Feature: Needs to show images.
- Design Style: Tones of Red (primary color scheme).
- Format: A website (HTML/CSS).
-
Determine the Structure:
- A standard landing page structure works best for this:
- Header: Logo, Navigation, Hero Section (Call to Action).
- About/Why Us: Brief introduction.
- Services/Destinations: The core product (Itineraries).
- Testimonials: Social proof.
- Contact/Footer: How to buy or inquire.
- A standard landing page structure works best for this:
-
Design & Color Palette (The "Red" Requirement):
- Primary: A deep, passionate red (e.g.,
#C0392Bor#E74C3C). - Secondary: A lighter, softer red/pink for backgrounds or hover states (e.g.,
#FFEBEEor#FADBD8). - Accent: White for text readability, Black/Dark Grey for contrast.
- Font: Clean sans-serif (Roboto or Open Sans) for modern appeal.
- Primary: A deep, passionate red (e.g.,
-
Drafting the HTML Content:
- Title: "Red Horizon Travels" (Sounds travel-related and uses the color).
- Hero: Background image of a scenic destination (placeholder), bold headline "Plan Your Perfect Trip," CTA button "View Itineraries."
- Features: Icons + text (Expert Planning, Best Prices, 24/7 Support).
- Destinations/Itineraries: Grid layout. Each card needs an image (placeholder), title, duration, price, and "Buy Now" button.
- Contact: Simple form.
-
Drafting the CSS (Styling):
- Reset: Standard box-sizing, margin/padding 0.
- Variables: Define the reds immediately for easy tweaking.
--primary-red: #D32F2F;--light-red: #FFEBEE;
- Header: Sticky or fixed? Let's keep it simple. Flexbox for layout. Red background, white text.
- Hero: High impact.
background-size: cover. Red overlay to ensure text pops. - Cards: White background, shadow for depth. Red borders or buttons.
- Buttons: The most important element. Bright red, white text, rounded corners. Hover effect: Darker red.
-
Selecting Images (Placeholders):
- Since I cannot generate real image files, I must use
source.unsplash.com(or similar placeholder services) with travel keywords (beach, mountains, city) to ensure the code renders visually appealing images immediately.
- Since I cannot generate real image files, I must use
-
Refining the Code (Self-Correction during drafting):
- Critique: Is it too red?
- Correction: Need plenty of white space and dark grey text so it doesn't look aggressive. Use the light red (
#FFEBEE) for section backgrounds to break up the white. - Responsiveness: Use Flexbox and Grid. Add a media query for mobile screens (stacking the cards).
-
Final Code Assembly (Mental Walkthrough):
- HTML: Header -> Hero -> About -> Grid -> Contact -> Footer.
- CSS: Global styles -> Header -> Hero -> Cards -> Form -> Footer.
- Functionality: Add simple hover effects to make it feel interactive.
-
Writing the Code (similar to the final output):
- Setup:
<!DOCTYPE html>,<html>,<head>,<body>. - Font: Import Google Font 'Poppins' for a sleek look.
- Implementation:
- Hero Image: URL for a generic travel image.
- Itinerary Cards: Paris, Bali, Kyoto (classic examples).
- CTA: "Book Now".
- Setup:
-
Final Polish: Check for syntax errors, ensure color contrast is readable, and verify that the "Red" theme is prominent but not overwhelming. (e.g., using a gradient from red to a darker shade).
-
Output Generation: Present the code in a single block for easy copying, along with instructions on how to use it. (This matches the provided good response).
(Self-Correction Note during the process): I initially thought about using a dark red for the background, but that makes reading text hard. Better to use White/Light Grey backgrounds with Red accents (buttons, headers, icons). I will stick to a "Crimson" and "Scarlet" palette.
- Final Output Generation (Proceed to generate the response).
Itinerary Seller.
It uses a modern design with a deep crimson and scarlet red color palette as requested. I have used high-quality placeholder images from Unsplash so you can see the visual effect immediately.
How to use this:
- Create a new file on your computer named
index.html. - Paste the code below into that file.
- Open the file in your web browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RedMap Itineraries | Custom Travel Plans</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
/* --- CSS VARIABLES (THE RED THEME) --- */
:root {
--primary-red: #D32F2F; /* Deep Red */
--bright-red: #FF5252; /* Bright Red for hovers */
--dark-red: #B71C1C; /* Dark Red for footer/gradients */
--light-red-bg: #FFEBEE; /* Very light red for section backgrounds */
--white: #ffffff;
--dark-grey: #333333;
--grey: #f4f4f4;
}
/* --- GLOBAL STYLES --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: var(--dark-grey);
background-color: var(--white);
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
img {
width: 100%;
display: block;
}
/* --- HEADER --- */
header {
background: var(--white);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 5%;
max-width: 1200px;
margin: 0 auto;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary-red);
display: flex;
align-items: center;
gap: 5px;
}
.logo span {
color: var(--dark-grey);
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-links a {
font-weight: 600;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--primary-red);
}
.btn-red {
background-color: var(--primary-red);
color: var(--white);
padding: 0.7rem 1.5rem;
border-radius: 50px;
font-weight: 600;
transition: background 0.3s;
}
.btn-red:hover {
background-color: var(--bright-red);
}
/* --- HERO SECTION --- */
.hero {
height: 90vh;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(183, 28, 28, 0.7)), url('https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white);
margin-top: 60px;
padding: 0 20px;
}
.hero-content h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.hero-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* --- FEATURES --- */
.features {
padding: 4rem 5%;
background-color: var(--light-red-bg);
text-align: center;
}
.section-title {
color: var(--primary-red);
font-size: 2rem;
margin-bottom: 3rem;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
display: block;
width: 50%;
height: 3px;
background: var(--primary-red);
margin: 5px auto 0;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.feature-card {
background: var(--white);
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: transform 0.3s;
}
.feature-card:hover {
transform: translateY(-10px);
}
.feature-icon {
font-size: 2.5rem;
color: var(--primary-red);
margin-bottom: 1rem;
}
/* --- ITINERARIES (PRODUCTS) --- */
.itineraries {
padding: 5rem 5%;
max-width: 1200px;
margin: 0 auto;
}
.itinerary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.trip-card {
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s;
background: var(--white);
position: relative;
}
.trip-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(211, 47, 47, 0.2);
}
.trip-image {
height: 220px;
overflow: hidden;
}
.trip-image img {
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.trip-card:hover .trip-image img {
transform: scale(1.1);
}
.trip-badge {
position: absolute;
top: 15px;
right: 15px;
background: var(--primary-red);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.trip-details {
padding: 1.5rem;
}
.trip-title {
font-size: 1.4rem;
margin-bottom: 0.5rem;
color: var(--dark-grey);
}
.trip-meta {
display: flex;
justify-content: space-between;
color: #777;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.trip-price {
font-size: 1.5rem;
color: var(--primary-red);
font-weight: 700;
margin-bottom: 1rem;
display: block;
}
.btn-outline {
display: block;
width: 100%;
text-align: center;
padding: 10px;
border: 2px solid var(--primary-red);
color: var(--primary-red);
border-radius: 5px;
font-weight: 600;
transition: all 0.3s;
}
.btn-outline:hover {
background: var(--primary-red);
color: var(--white);
}
/* --- NEWSLETTER --- */
.newsletter {
background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
color: var(--white);
padding: 4rem 5%;
text-align: center;
}
.newsletter h2 {
margin-bottom: 1rem;
}
.newsletter-form {
max-width: 500px;
margin: 2rem auto 0;
display: flex;
gap: 10px;
}
.newsletter-form input {
flex: 1;
padding: 15px;
border: none;
border-radius: 50px;
outline: none;
}
/* --- FOOTER --- */
footer {
background: #222;
color: #aaa;
padding: 3rem 5%;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.footer-col h4 {
color: var(--white);
margin-bottom: 1.2rem;
}
.footer-col ul li {
margin-bottom: 0.8rem;
}
.footer-col ul li a:hover {
color: var(--primary-red);
}
.copyright {
text-align: center;
margin-top: 3rem;
padding-top: 1rem;
border-top: 1px solid #444;
font-size: 0.9rem;
}
/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
.hero-content h1 { font-size: 2.5rem; }
.nav-links { display: none; } /* Simplified for demo */
.newsletter-form { flex-direction: column; }
}
</style>
</head>
<body>
<!-- NAVIGATION -->
<header>
<nav class="navbar">
<div class="logo">
Red<span>Map</span>
</div>
<div class="nav-links">
<a href="#home">Home</a>
<a href="#itineraries">Destinations</a>
<a href="#about">Why Us</a>
<a href="#contact">Contact</a>
</div>
<a href="#contact" class="btn-red">Book Consultation</a>
</nav>
</header>
<!-- HERO SECTION -->
<section class="hero" id="home">
<div class="hero-content">
<h1>See the World in Detail</h1>
<p>Premium, hand-crafted itineraries for the modern traveler. We handle the plan; you make the memories.</p>
<a href="#itineraries" class="btn-red">Explore Itineraries</a>
</div>
</section>
<!-- FEATURES -->
<section class="features" id="about">
<h2 class="section-title">Why Choose RedMap?</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">✈️</div>
<h3>Expert Planning</h3>
<p>Our local experts design every route to ensure you see the hidden gems, not just the tourist traps.</p>
</div>
<div class="feature-card">
<div class="feature-icon">⏰</div>
<h3>Save Time</h3>
<p>No more hours of research. Buy a ready-made PDF itinerary with daily schedules and bookings.</p>
</div>
<div class="feature-card">
<div class="feature-icon">💰</div>
<h3>Best Price Guarantee</h3>
<p>We leverage local connections to get you accommodation and activities at the best rates.</p>
</div>
</div>
</section>
<!-- ITINERARIES / PRODUCTS -->
<section class="itineraries" id="itineraries">
<div style="text-align: center;">
<h2 class="section-title">Featured Travel Plans</h2>
<p style="margin-bottom: 3rem; color: #666;">Choose from our most popular destinations</p>
</div>
<div class="itinerary-grid">
<!-- Card 1 -->
<div class="trip-card">
<div class="trip-image">
<img src="https://images.unsplash.com/photo-1499856871940-b09fe6902ca5?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Paris">
<span class="trip-badge">Bestseller</span>
</div>
<div class="trip-details">
<h3 class="trip-title">7 Days in Paris & The Loire Valley</h3>
<div class="trip-meta">
<span>🗓️ 7 Days</span>
<span>🚶 Mixed Pace</span>
</div>
<span class="
I want to weside for treval agency
Yeah
<title>Personalized Handmade Anniversary Gift | Eco-Friendly Soy Candles | CraftAura</title>
<style>
body{
margin:0;
font-family:'Poppins',sans-serif;
background:#fafafa;
color:#333;
}
header{
background:white;
padding:15px;
text-align:center;
border-bottom:1px solid #eee;
position:sticky;
top:0;
}
nav a{
margin:0 10px;
text-decoration:none;
color:#444;
font-weight:500;
}
.hero{
padding:60px 20px;
text-align:center;
background:#f6f3ef;
}
.section{
padding:40px 20px;
}
.grid{
display:grid;
grid-template-columns:1fr;
gap:20px;
}
.card{
background:white;
padding:15px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}
img{
width:100%;
border-radius:12px;
}
button{
background:#222;
color:white;
padding:12px;
border:none;
width:100%;
border-radius:8px;
cursor:pointer;
}
footer{
text-align:center;
padding:20px;
background:#111;
color:white;
margin-top:40px;
}
@media(min-width:768px){
.grid{
grid-template-columns:repeat(3,1fr);
}
}
</style>
<script type="application/ld+json">
{
"@context":"https://schema.org/",
"@type":"Product",
"name":"Eco-Friendly Soy Wax Candle for Relaxation",
"image":"https://example.com/soy-candle.jpg",
"description":"Handmade eco-friendly soy wax candle designed for stress relief and relaxation.",
"brand":{"@type":"Brand","name":"CraftAura"},
"offers":{
"@type":"Offer",
"priceCurrency":"USD",
"price":"24.99",
"availability":"https://schema.org/InStock"
},
"aggregateRating":{
"@type":"AggregateRating",
"ratingValue":"4.9",
"reviewCount":"187"
}
}
</script>
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"FAQPage",
"mainEntity":[
{
"@type":"Question",
"name":"Is this soy candle eco-friendly?",
"acceptedAnswer":{
"@type":"Answer",
"text":"Yes, it is made from 100% natural soy wax and essential oils."
}
},
{
"@type":"Question",
"name":"Can I personalize anniversary gifts?",
"acceptedAnswer":{
"@type":"Answer",
"text":"Yes, CraftAura offers personalized handmade anniversary gifts with custom engraving."
}
}
]
}
</script>
CraftAura
Home Decor Candles Jewelry Personalized GiftsHandmade With Love. Crafted For Memories.
Discover aesthetic, meaningful handmade products designed for gifting and home decor.
Eco-Friendly Soy Wax Candle for Relaxation
<p><strong>Experience calm and comfort.</strong> Our eco-friendly soy wax candle for relaxation is handcrafted to create a peaceful atmosphere perfect for self-care nights.</p>
<h3>Materials</h3>
<ul>
<li>100% Natural Soy Wax</li>
<li>Lavender Essential Oil</li>
<li>Reusable Glass Jar</li>
</ul>
<h3>Care Instructions</h3>
<p>Trim wick before each burn. Keep away from wind.</p>
<h3>Shipping</h3>
<p>Ships within 2-3 business days. Free shipping over $50.</p>
<h3>Customer Reviews</h3>
<p>⭐⭐⭐⭐⭐ 4.9/5 (187 Reviews)</p>
<button>Secure Checkout</button>
Personalized Handmade Anniversary Gift
<p>Celebrate love with a meaningful personalized handmade anniversary gift crafted uniquely for your partner. Custom names, dates, and heartfelt messages included.</p>
<button>Customize Now</button>
Boho Macrame Wall Decor for Living Room
<p>Add warmth and texture with our boho macrame wall decor for living room. Handmade with premium cotton rope for aesthetic interiors.</p>
<button>Shop Decor</button>
Handmade Minimalist Jewelry
<p>Elegant, lightweight, and timeless jewelry pieces handcrafted for everyday beauty.</p>
<button>Shop Jewelry</button>
© 2026 CraftAura | Handmade Crafts Store
<title>Personalized Handmade Anniversary Gift | Eco-Friendly Soy Candles | CraftAura</title>
<style>
body{
margin:0;
font-family:'Poppins',sans-serif;
background:#fafafa;
color:#333;
}
header{
background:white;
padding:15px;
text-align:center;
border-bottom:1px solid #eee;
position:sticky;
top:0;
}
nav a{
margin:0 10px;
text-decoration:none;
color:#444;
font-weight:500;
}
.hero{
padding:60px 20px;
text-align:center;
background:#f6f3ef;
}
.section{
padding:40px 20px;
}
.grid{
display:grid;
grid-template-columns:1fr;
gap:20px;
}
.card{
background:white;
padding:15px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}
img{
width:100%;
border-radius:12px;
}
button{
background:#222;
color:white;
padding:12px;
border:none;
width:100%;
border-radius:8px;
cursor:pointer;
}
footer{
text-align:center;
padding:20px;
background:#111;
color:white;
margin-top:40px;
}
@media(min-width:768px){
.grid{
grid-template-columns:repeat(3,1fr);
}
}
</style>
<script type="application/ld+json">
{
"@context":"https://schema.org/",
"@type":"Product",
"name":"Eco-Friendly Soy Wax Candle for Relaxation",
"image":"https://example.com/soy-candle.jpg",
"description":"Handmade eco-friendly soy wax candle designed for stress relief and relaxation.",
"brand":{"@type":"Brand","name":"CraftAura"},
"offers":{
"@type":"Offer",
"priceCurrency":"USD",
"price":"24.99",
"availability":"https://schema.org/InStock"
},
"aggregateRating":{
"@type":"AggregateRating",
"ratingValue":"4.9",
"reviewCount":"187"
}
}
</script>
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"FAQPage",
"mainEntity":[
{
"@type":"Question",
"name":"Is this soy candle eco-friendly?",
"acceptedAnswer":{
"@type":"Answer",
"text":"Yes, it is made from 100% natural soy wax and essential oils."
}
},
{
"@type":"Question",
"name":"Can I personalize anniversary gifts?",
"acceptedAnswer":{
"@type":"Answer",
"text":"Yes, CraftAura offers personalized handmade anniversary gifts with custom engraving."
}
}
]
}
</script>
CraftAura
Home Decor Candles Jewelry Personalized GiftsHandmade With Love. Crafted For Memories.
Discover aesthetic, meaningful handmade products designed for gifting and home decor.
Eco-Friendly Soy Wax Candle for Relaxation
<p><strong>Experience calm and comfort.</strong> Our eco-friendly soy wax candle for relaxation is handcrafted to create a peaceful atmosphere perfect for self-care nights.</p>
<h3>Materials</h3>
<ul>
<li>100% Natural Soy Wax</li>
<li>Lavender Essential Oil</li>
<li>Reusable Glass Jar</li>
</ul>
<h3>Care Instructions</h3>
<p>Trim wick before each burn. Keep away from wind.</p>
<h3>Shipping</h3>
<p>Ships within 2-3 business days. Free shipping over $50.</p>
<h3>Customer Reviews</h3>
<p>⭐⭐⭐⭐⭐ 4.9/5 (187 Reviews)</p>
<button>Secure Checkout</button>
Personalized Handmade Anniversary Gift
<p>Celebrate love with a meaningful personalized handmade anniversary gift crafted uniquely for your partner. Custom names, dates, and heartfelt messages included.</p>
<button>Customize Now</button>
Boho Macrame Wall Decor for Living Room
<p>Add warmth and texture with our boho macrame wall decor for living room. Handmade with premium cotton rope for aesthetic interiors.</p>
<button>Shop Decor</button>
Handmade Minimalist Jewelry
<p>Elegant, lightweight, and timeless jewelry pieces handcrafted for everyday beauty.</p>
<button>Shop Jewelry</button>
© 2026 CraftAura | Handmade Crafts Store
<title>Malik Salon | Hair & Grooming Studio</title>
<style>
body{
margin:0;
font-family:Arial;
background:#111;
color:white;
}
header{
background:black;
text-align:center;
padding:20px;
}
header h1{
color:gold;
margin:0;
}
nav{
background:#222;
text-align:center;
padding:10px;
}
nav a{
color:white;
text-decoration:none;
margin:15px;
font-weight:bold;
}
.hero{
background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
url('https://images.unsplash.com/photo-1517836357463-d25dfeac3438');
background-size:cover;
padding:120px 20px;
text-align:center;
}
.hero h2{
color:gold;
font-size:36px;
}
.section{
padding:50px 20px;
text-align:center;
}
.services{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.box{
background:#222;
margin:15px;
padding:25px;
width:250px;
border-radius:10px;
}
.price{
color:gold;
font-weight:bold;
}
button{
background:gold;
border:none;
padding:12px 20px;
font-weight:bold;
border-radius:5px;
cursor:pointer;
}
footer{
background:black;
text-align:center;
padding:15px;
margin-top:30px;
}
@media(max-width:768px){
.services{
flex-direction:column;
align-items:center;
}
}
</style>
Malik Salon
Professional Hair & Grooming Studio
Home Services Price ContactOur Services
Hair Cut
Trendy & Stylish Cutting
Beard Trim
Sharp & Clean Look
Facial
Glow & Skin Care
Price List
Hair Cut - ₹150
Beard Trim - ₹80
Facial - ₹300
Contact Us
📍 Shiamgir, India
📞 +91 9389782286
© 2026 Malik Salon | All Rights Reserved
<title>سياد - بوابت طنجة | Birkenstock Handmade</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f5f2;
color: #333;
line-height: 1.6;
}
/* Header */
header {
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
color: white;
padding: 30px 0;
text-align: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
header h1 {
font-size: 3em;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
header p {
font-size: 1.4em;
opacity: 0.95;
}
/* Navigation */
nav {
background-color: #1a252f;
padding: 15px;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
}
nav a {
color: white;
text-decoration: none;
margin: 0 20px;
font-size: 1.1em;
padding: 10px 20px;
border-radius: 5px;
transition: all 0.3s;
}
nav a:hover {
background-color: #3498db;
transform: translateY(-2px);
}
/* Hero Section */
.hero {
background: linear-gradient(rgba(44, 62, 80, 0.7), rgba(52, 152, 219, 0.7)), url('https://images.unsplash.com/photo-1549298916-b41d501d3772?w=1200');
background-size: cover;
background-position: center;
color: white;
padding: 150px 20px;
text-align: center;
}
.hero h2 {
font-size: 3.5em;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.hero p {
font-size: 1.6em;
margin-bottom: 30px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.cta-button {
background-color: #25D366;
color: white;
padding: 20px 60px;
text-decoration: none;
border-radius: 50px;
font-size: 1.4em;
font-weight: bold;
transition: all 0.3s;
display: inline-block;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}
.cta-button:hover {
transform: scale(1.1);
background-color: #128C7E;
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}
/* Products Section */
.container {
max-width: 1200px;
margin: 60px auto;
padding: 0 20px;
}
.section-title {
text-align: center;
font-size: 3em;
margin-bottom: 50px;
color: #2c3e50;
position: relative;
}
.section-title::after {
content: '';
display: block;
width: 120px;
height: 5px;
background: #3498db;
margin: 15px auto 0;
border-radius: 2px;
}
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
}
.product-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
transition: all 0.4s;
border: 3px solid transparent;
}
.product-card:hover {
transform: translateY(-15px);
box-shadow: 0 20px 50px rgba(0,0,0,0.25);
border-color: #3498db;
}
.product-card img {
width: 100%;
height: 300px;
object-fit: cover;
transition: transform 0.4s;
}
.product-card:hover img {
transform: scale(1.1);
}
.product-info {
padding: 30px;
text-align: center;
}
.product-info h3 {
font-size: 1.8em;
margin-bottom: 12px;
color: #2c3e50;
}
.product-info p {
color: #666;
margin-bottom: 15px;
font-size: 1.1em;
}
.price {
font-size: 2.5em;
color: #3498db;
font-weight: bold;
margin: 20px 0;
display: block;
}
.price span {
font-size: 1em;
color: #666;
}
.features {
list-style: none;
margin: 20px 0;
color: #555;
}
.features li {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.features i {
color: #25D366;
margin-left: 10px;
}
/* WhatsApp Button */
.whatsapp-btn {
background-color: #25D366;
color: white;
padding: 20px 40px;
text-decoration: none;
border-radius: 50px;
font-size: 1.3em;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.whatsapp-btn:hover {
background-color: #128C7E;
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}
/* About Section */
.about-section {
background: linear-gradient(135deg, #fff8f0 0%, #fff 100%);
padding: 80px 20px;
margin-top: 60px;
}
.about-content {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.about-content h2 {
font-size: 2.8em;
color: #2c3e50;
margin-bottom: 25px;
}
.about-content p {
font-size: 1.3em;
line-height: 1.8;
color: #555;
margin-bottom: 30px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 40px;
}
.feature-item {
background: white;
padding: 35px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: transform 0.3s;
}
.feature-item:hover {
transform: translateY(-5px);
}
.feature-item i {
font-size: 3.5em;
color: #3498db;
margin-bottom: 15px;
}
.feature-item h3 {
color: #2c3e50;
margin-bottom: 10px;
}
/* Tourist Section */
.tourist-section {
background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
color: white;
padding: 80px 20px;
text-align: center;
}
.tourist-section h2 {
font-size: 2.8em;
margin-bottom: 20px;
}
.tourist-section p {
font-size: 1.3em;
max-width: 800px;
margin: 0 auto 40px;
}
.tourist-features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}
.tourist-feature {
background: rgba(255,255,255,0.15);
padding: 30px;
border-radius: 15px;
min-width: 250px;
backdrop-filter: blur(10px);
}
.tourist-feature i {
font-size: 3em;
margin-bottom: 15px;
}
/* Contact Section */
.contact-section {
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
color: white;
padding: 70px 20px;
text-align: center;
}
.contact-section h2 {
font-size: 2.8em;
margin-bottom: 40px;
}
.contact-info {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
margin-top: 40px;
}
.contact-item {
background: rgba(255,255,255,0.15);
padding: 35px;
border-radius: 15px;
min-width: 280px;
backdrop-filter: blur(10px);
transition: all 0.3s;
}
.contact-item:hover {
background: rgba(255,255,255,0.25);
transform: translateY(-5px);
}
.contact-item i {
font-size: 3em;
margin-bottom: 20px;
}
.contact-item h3 {
margin-bottom: 15px;
font-size: 1.4em;
}
.contact-item p {
font-size: 1.2em;
}
/* Footer */
footer {
background-color: #1a252f;
color: white;
text-align: center;
padding: 40px;
}
footer p {
margin: 10px 0;
}
/* Floating WhatsApp Button */
.floating-whatsapp {
position: fixed;
bottom: 30px;
left: 30px;
background-color: #25D366;
color: white;
padding: 20px 35px;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
font-size: 1.2em;
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
z-index: 1000;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.3s;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.floating-whatsapp:hover {
transform: scale(1.1);
background-color: #128C7E;
}
/* Responsive */
@media (max-width: 768px) {
header h1 { font-size: 2em; }
.hero h2 { font-size: 2em; }
nav a { display: block; margin: 10px 0; }
.contact-info { flex-direction: column; }
.section-title { font-size: 2em; }
.floating-whatsapp { padding: 15px 20px; font-size: 0.9em; }
.products { grid-template-columns: 1fr; }
}
</style>
<!-- Header -->
<header>
<h1>👟 سياد - بوابت طنجة</h1>
<p>Birkenstock Handmade - Tangier Gate</p>
</header>
<!-- Navigation -->
<nav>
<a href="#home">الرئيسية</a>
<a href="#products">المنتجات</a>
<a href="#about">من نحن</a>
<a href="#tourists">للسياح</a>
<a href="#contact">تواصل معنا</a>
</nav>
<!-- Hero Section -->
<div class="hero" id="home">
<h2>أهلاً بكم في سياد - بوابت طنجة</h2>
<p>أحذية Birkenstock يدوية الصنع بجودة عالية - مثالية للسياح والزوار</p>
<a href="https://wa.me/2127656
<title>VIP Pro Max Shop</title>
Nos Promotions :
SALE
Vip Pro Max 2026
✔ In stock
599,00 د.م
320,00 د.م
SALE
Vip Pro Max 2026
✔ In stock
799,00 د.م
399,00 د.م
SALE
Vip Pro Max 2026
✔ In stock
699,00 د.م
350,00 د.م
<title>Gerador de CPF</title>
Gerador de CPF
Gerar CPF
<script src="script.js"></script>
<title>Rapport : Loi d'Unicité du Courant</title>
<style>
/* --- STYLE GÉNÉRAL --- */
:root {
--primary-color: #2c3e50;
--accent-color: #3498db;
--bg-color: #f4f7f6;
--paper-color: #ffffff;
--text-color: #333;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: var(--bg-color);
color: var(--text-color);
}
/* --- EN-TÊTE --- */
header {
background-color: var(--primary-color);
color: white;
padding: 2rem 0;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
header h1 {
margin: 0;
font-size: 2.5rem;
}
header p {
font-size: 1.2rem;
opacity: 0.9;
}
/* --- NAVIGATION --- */
nav {
background-color: #34495e;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
nav ul li {
margin: 0;
}
nav ul li a {
display: block;
padding: 15px 25px;
color: white;
text-decoration: none;
font-weight: bold;
transition: background 0.3s;
}
nav ul li a:hover {
background-color: var(--accent-color);
}
/* --- CONTENU PRINCIPAL --- */
main {
max-width: 900px;
margin: 40px auto;
padding: 0 20px;
}
/* --- STYLE DES "PAGES" --- */
.page-section {
background-color: var(--paper-color);
padding: 40px;
margin-bottom: 40px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
border-left: 5px solid var(--accent-color);
scroll-margin-top: 80px; /* Pour que le titre ne soit pas caché par le menu */
}
.page-number {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-color);
font-weight: bold;
margin-bottom: 10px;
display: block;
}
h2 {
color: var(--primary-color);
border-bottom: 2px solid #eee;
padding-bottom: 10px;
margin-top: 0;
}
h3 {
color: #444;
margin-top: 25px;
}
/* --- TABLEAUX --- */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 0.95rem;
}
table th, table td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
table th {
background-color: var(--primary-color);
color: white;
}
table tr:nth-child(even) {
background-color: #f9f9f9;
}
/* --- LISTES --- */
ul.content-list {
list-style-type: disc;
padding-left: 20px;
}
/* --- FOOTER --- */
footer {
text-align: center;
padding: 20px;
background-color: var(--primary-color);
color: white;
margin-top: 50px;
font-size: 0.9rem;
}
/* --- RESPONSIVE --- */
@media (max-width: 600px) {
nav ul {
flex-direction: column;
}
.page-section {
padding: 20px;
}
}
</style>
<header>
<h1>Loi d'Unicité du Courant</h1>
<p>Étude expérimentale et théorique des circuits en série</p>
</header>
<nav>
<ul>
<li><a href="#page1">1. Le Sujet</a></li>
<li><a href="#page2">2. Le Plan</a></li>
<li><a href="#page3">3. La Recherche</a></li>
<li><a href="#page4">4. Les Conclusions</a>
Print("link")
Print ("subconscient")
Print("dollor")
HI
Hi
<title>Sticker Store</title>
My Sticker Store
Download stickers here
Download
<title>Horror Game</title>
<style>
body {
background-color: black;
color: white;
font-family: Arial, sans-serif;
}
canvas {
display: block;
margin: 0 auto;
border: 1px solid white;
}
#menu {
display: none;
text-align: center;
}
</style>
<script>
let canvas = document.getElementById('gameCanvas');
let ctx = canvas.getContext('2d');
let level = 0;
let lives = 3;
let enemies = [];
function startGame() {
document.getElementById('menu').style.display = 'none';
requestAnimationFrame(gameLoop);
}
function gameLoop() {
updateGame();
drawGame();
requestAnimationFrame(gameLoop);
}
function updateGame() {
// Update game logic such as player movement, enemy AI, collision detection, etc.
}
function drawGame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw game elements such as player, enemies, background, effects, etc.
}
function collisionDetection() {
// Implement collision detection logic
}
function playSoundEffect() {
// Implement sound effect logic
}
// More functions for handling gameplay
</script>
<title>تسجيل قرآني - مع صدى المساجد</title>
🎙️ تسجيل قرآني
سجل قراءتك بجودة المساجد
<div class="controls">
<div class="record-section">
<button id="recordBtn" class="record-btn">
<span class="btn-text">ابدأ التسجيل</span>
<div class="recording-indicator"></div>
</button>
<div class="status" id="status">جاهز للتسجيل</div>
</div>
<div class="effects-section">
<h3>تأثيرات الصوت</h3>
<div class="effect-control">
<label>شدة الصدى:</label>
<input type="range" id="reverbAmount" min="0" max="100" value="70">
<span id="reverbValue">70%</span>
</div>
<div class="effect-control">
<label>الارتداد:</label>
<input type="range" id="delayAmount" min="0" max="100" value="50">
<span id="delayValue">50%</span>
</div>
</div>
<div class="playback-section">
<button id="playBtn" class="play-btn" disabled>تشغيل التسجيل</button>
<button id="downloadBtn" class="download-btn" disabled>تحميل MP3</button>
<button id="clearBtn" class="clear-btn">مسح التسجيل</button>
</div>
</div>
<div class="visualizer">
<canvas id="visualizer"></canvas>
</div>
<div class="info">
<p>💡 نصيحة: استخدم ميكروفون جيد للحصول على أفضل جودة</p>
</div>
</div>
<script src="script.js"></script>
<title>تسجيل قرآني - مع صدى المساجد</title>
🎙️ تسجيل قرآني
سجل قراءتك بجودة المساجد
<div class="controls">
<div class="record-section">
<button id="recordBtn" class="record-btn">
<span class="btn-text">ابدأ التسجيل</span>
<div class="recording-indicator"></div>
</button>
<div class="status" id="status">جاهز للتسجيل</div>
</div>
<div class="effects-section">
<h3>تأثيرات الصوت</h3>
<div class="effect-control">
<label>شدة الصدى:</label>
<input type="range" id="reverbAmount" min="0" max="100" value="70">
<span id="reverbValue">70%</span>
</div>
<div class="effect-control">
<label>الارتداد:</label>
<input type="range" id="delayAmount" min="0" max="100" value="50">
<span id="delayValue">50%</span>
</div>
</div>
<div class="playback-section">
<button id="playBtn" class="play-btn" disabled>تشغيل التسجيل</button>
<button id="downloadBtn" class="download-btn" disabled>تحميل MP3</button>
<button id="clearBtn" class="clear-btn">مسح التسجيل</button>
</div>
</div>
<div class="visualizer">
<canvas id="visualizer"></canvas>
</div>
<div class="info">
<p>💡 نصيحة: استخدم ميكروفون جيد للحصول على أفضل جودة</p>
</div>
</div>
<script src="script.js"></script>
``
<title>تسجيل قرآني - مع صدى المساجد</title>🎙️ تسجيل قرآني
سجل قراءتك بجودة المساجد
<div class="controls">
<div class="record-section">
<button id="recordBtn" class="record-btn">
<span class="btn-text">ابدأ التسجيل</span>
<div class="recording-indicator"></div>
</button>
<div class="status" id="status">جاهز للتسجيل</div>
</div>
<div class="effects-section">
<h3>تأثيرات الصوت</h3>
<div class="effect-control">
<label>شدة الصدى:</label>
<input type="range" id="reverbAmount" min="0" max="100" value="70">
<span id="reverbValue">70%</span>
</div>
<div class="effect-control">
<label>الارتداد:</label>
<input type="range" id="delayAmount" min="0" max="100" value="50">
<span id="delayValue">50%</span>
</div>
</div>
<div class="playback-section">
<button id="playBtn" class="play-btn" disabled>تشغيل التسجيل</button>
<button id="downloadBtn" class="download-btn" disabled>تحميل MP3</button>
<button id="clearBtn" class="clear-btn">مسح التسجيل</button>
</div>
</div>
<div class="visualizer">
<canvas id="visualizer"></canvas>
</div>
<div class="info">
<p>💡 نصيحة: استخدم ميكروفون جيد للحصول على أفضل جودة</p>
</div>
</div>
<script src="script.js"></script>
I want to build
I want to build police robote
html
<title>روبوت بوليسي</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body {
font-family: 'Segoe UI', Arial, sans-serif;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.robot-card {
background: rgba(10, 20, 40, 0.95);
backdrop-filter: blur(10px);
border-radius: 30px;
padding: 30px;
max-width: 550px;
width: 100%;
box-shadow: 0 25px 50px rgba(0,0,0,0.5);
border: 1px solid rgba(0, 168, 255, 0.5);
transition: transform 0.3s;
}
.robot-card:hover {
transform: scale(1.02);
}
h1 {
text-align: center;
color: #00a8ff;
font-size: 28px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.badge {
font-size: 40px;
}
.robot-face {
text-align: center;
font-size: 80px;
margin: 20px 0;
background: #1e2a3a;
border-radius: 60px;
padding: 20px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.status-box {
background: #000;
padding: 15px;
border-radius: 15px;
margin: 20px 0;
border-left: 4px solid #00a8ff;
}
.status-label {
color: #888;
font-size: 14px;
}
.status-value {
color: #0f0;
font-size: 20px;
font-weight: bold;
font-family: monospace;
}
.button-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin: 25px 0;
}
.btn {
padding: 14px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s;
color: white;
}
.btn-patrol { background: #00a8ff; }
.btn-arrest { background: #ff4757; }
.btn-scan { background: #2ed573; }
.btn-stop { background: #ffa502; }
.btn:hover {
transform: translateY(-2px);
filter: brightness(1.1);
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}
.btn:active {
transform: translateY(1px);
}
.log-box {
background: #0a0e1a;
border-radius: 15px;
padding: 15px;
height: 180px;
overflow-y: auto;
font-family: 'Courier New', monospace;
font-size: 13px;
color: #0f0;
border: 1px solid #2a3a4a;
}
.log-box p {
margin: 5px 0;
border-bottom: 1px solid #1e2a2a;
padding: 3px 0;
}
.siren {
animation: blink 0.5s infinite;
}
@keyframes blink {
0%, 100% { text-shadow: 0 0 5px red; }
50% { text-shadow: 0 0 20px red; }
}
footer {
text-align: center;
margin-top: 20px;
font-size: 12px;
color: #666;
}
</style>
🚔 روبوت بوليسي 🤖
<div class="robot-face">
👮♂️🤖🚔
</div>
<div class="status-box">
<div class="status-label">📡 الحالة الحالية</div>
<div class="status-value" id="statusValue">🟢 جاهز للخدمة</div>
</div>
<div class="button-grid">
<button class="btn btn-patrol" onclick="executeCommand('patrol')">🚶 دورية</button>
<button class="btn btn-arrest" onclick="executeCommand('arrest')">🔗 توقيف</button>
<button class="btn btn-scan" onclick="executeCommand('scan')">🔍 تفتيش</button>
<button class="btn btn-stop" onclick="executeCommand('stop')">⏹️ إيقاف</button>
</div>
<div class="log-box" id="logBox">
<p>🔹 [النظام] تم تفعيل روبوت الشرطة</p>
<p>🔹 [النظام] جاهز لتنفيذ الأوامر 🚔</p>
</div>
<footer>
🚨 روبوت بوليسي - الإصدار 1.0 🚨
</footer>
</div>
<script>
function executeCommand(command) {
const statusValue = document.getElementById('statusValue');
const logBox = document.getElementById('logBox');
const now = new Date().toLocaleTimeString();
let statusText = '';
let logMessage = '';
let sirenEffect = false;
switch(command) {
case 'patrol':
statusText = '🔵 في دورية';
logMessage = `🚶 [${now}] يقوم بالدورية... المنطقة آمنة ✓`;
break;
case 'arrest':
statusText = '🔴 توقيف مشتبه به';
logMessage = `🔗 [${now}] تم توقيف المشتبه به! جاري استدعاء الدعم 🚔🚔`;
sirenEffect = true;
break;
case 'scan':
statusText = '🟢 جاري التفتيش';
logMessage = `🔍 [${now}] فحص المنطقة... لا توجد تهديدات. كل شيء آمن ✓`;
break;
case 'stop':
statusText = '⚪ متوقف';
logMessage = `⏹️ [${now}] تم إيقاف الروبوت. انتظار الأوامر الجديدة`;
break;
default:
return;
}
// تحديث الحالة
statusValue.innerHTML = statusText;
// إضافة الرسالة للسجل
const newLog = document.createElement('p');
newLog.innerHTML = `🤖 ${logMessage}`;
logBox.appendChild(newLog);
// تمرير السجل للأسفل
logBox.scrollTop = logBox.scrollHeight;
// تأثير خاص للتوقيف
if (sirenEffect) {
const robotFace = document.querySelector('.robot-face');
robotFace.style.animation = 'blink 0.3s infinite';
setTimeout(() => {
robotFace.style.animation = 'float 3s ease-in-out infinite';
}, 2000);
}
// تحديث لون الحالة
if (command === 'arrest') {
statusValue.style.color = '#ff4757';
setTimeout(() => {
statusValue.style.color = '#0f0';
}, 2000);
} else {
statusValue.style.color = '#0f0';
}
}
// إضافة تأثير عند تحميل الصفحة
window.onload = function() {
console.log('روبوت بوليسي جاهز للخدمة! 🚔');
};
</script>
روبوت بوليسي
div style="background: #0a0f2a; padding: 20px; border-radius: 15px; color: white; font-family: Arial; max-width: 500px; margin: auto;">
🚔 روبوت بوليسي 🚔
🤖👮
📡 الحالة: جاهز للخدمة
🚶 دورية
🔗 توقيف
🔍 تفتيش
⏹️ وقف
> النظام: روبوت بوليسي جاهز 🚔
> 🤖 ${message}`; statusText.innerHTML = status; log.scrollTop = log.scrollHeight; } </script>
روبوت قوي يساعد في كل شيء
<title>Index.html</title>
This ia my first page.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
index.html