commit 0af8e15f447d21859c7da42aa566335191068cc0 Author: dadgam3er Date: Fri Sep 12 02:18:41 2025 +0000 first assignment diff --git a/README.MD b/README.MD new file mode 100644 index 0000000..6d008de --- /dev/null +++ b/README.MD @@ -0,0 +1,14 @@ +# CS104 Repository + +Welcome to the CS104 repository! This will the first assigmnet of CS104. + +## Overview + +This repo contains code, and html file, a css file, and README file. + + +## How to Use + +1. Clone the repo: + `git clone https://gitea.zacksolutions.dev/Zakaria/CS104_Assignment_1` ( I host my own git instance with GITEA, an open-source, private and pain free alternative to github) +2. open the html file with any browser. \ No newline at end of file diff --git a/images/1757630393.png b/images/1757630393.png new file mode 100644 index 0000000..fd45766 Binary files /dev/null and b/images/1757630393.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..64c8e8c --- /dev/null +++ b/index.html @@ -0,0 +1,53 @@ + + + + + Global Tea Emporium - Premium Authentic Teas Worldwide + + + +
+
+ +
+ +
+ +
+ + +
+

About Our Tea Journey

+

Welcome to Global Tea Emporium, your premier destination for authentic, premium teas sourced directly from traditional tea gardens across the globe. With over 15 years of experience in the tea industry, we have built relationships with artisan farmers and tea masters in the world's most renowned tea-growing regions.

+

Our mission is to bring you the finest quality teas while supporting sustainable farming practices and preserving traditional tea-making techniques that have been passed down through generations.

+
+ +
+

Our Premium Tea Collections

+
    +
  • Asian Green Teas: Delicate sencha from Japan, dragon well from China, and matcha varieties
    • +
  • Indian Black Teas: Authentic Assam, Darjeeling, and Nilgiri teas from renowned estates
    • +
  • Oolong Selections: Traditional Taiwanese and Chinese oolongs with complex flavor profiles
    • +
  • Herbal Infusions: Caffeine-free blends from Egypt, South Africa, and South America
    • +
  • White Tea Collection: Rare silver needle and white peony from China's Fujian province
    • +
  • Pu-erh & Fermented Teas: Aged teas from Yunnan with unique earthy characteristics
    • +
+
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..e69de29 diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..4634bf0 --- /dev/null +++ b/styles.css @@ -0,0 +1,178 @@ +/* Global Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Georgia', serif; + line-height: 1.6; + color: #5d4037; + background-color: #faf0e6; + background-image: linear-gradient(to bottom, #faf0e6 0%, #f5e1c4 100%); +} + +/* Header Styles */ +header { + background-color: #8b4513; + color: white; + padding: 20px 0; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +.logo-container { + text-align: center; + margin-bottom: 20px; +} + +.logo { + width: 150px; + height: 150px; + border-radius: 50%; + overflow: hidden; + object-fit: cover; + transition: opacity 0.3s; + border: 3px solid #daa520; +} + +.logo:hover { + opacity: 0.7; +} + +/* Navigation Styles */ +.main-nav ul { + list-style: none; + display: flex; + justify-content: center; + gap: 30px; +} + +.main-nav a { + color: #faf0e6; + text-decoration: none; + font-size: 18px; + padding: 10px 15px; + border-radius: 5px; + transition: background-color 0.3s; +} + +.main-nav a:hover { + background-color: #daa520; +} + +/* Main Content Styles */ +main { + max-width: 1000px; + margin: 0 auto; + padding: 40px 20px; +} + +section { + margin-bottom: 50px; + background-color: #fffaf0; + padding: 30px; + border-radius: 10px; + box-shadow: 0 3px 10px rgba(139, 69, 19, 0.1); +} + +/* Hero Section */ +.banner { + text-align: center; + background-color: #daa520; + color: #5d4037; +} + +.banner h1 { + font-size: 48px; + margin-bottom: 15px; + text-shadow: 2px 2px 4px rgba(255,255,255,0.3); +} + +.tagline { + font-size: 24px; + font-style: italic; +} + +/* Introduction Section */ +.introduction h2 { + color: #8b4513; + font-size: 32px; + margin-bottom: 20px; + border-bottom: 3px solid #daa520; + padding-bottom: 10px; +} + +.introduction p { + margin-bottom: 15px; + font-size: 18px; + line-height: 1.8; +} + +/* Services Section */ +.services h2 { + color: #8b4513; + font-size: 32px; + margin-bottom: 25px; + border-bottom: 3px solid #daa520; + padding-bottom: 10px; +} + +.services-list { + list-style: none; + padding-left: 0; +} + +.services-list li { + background-color: #f5e1c4; + margin-bottom: 15px; + padding: 15px; + border-left: 5px solid #daa520; + border-radius: 5px; + font-size: 16px; +} + +.services-list strong { + color: #8b4513; +} + +/* Footer Styles */ +footer { + background-color: #8b4513; + color: white; + text-align: center; + padding: 30px 20px; +} + +footer p { + margin-bottom: 10px; +} + +footer a { + color: #daa520; + text-decoration: none; +} + +footer a:hover { + text-decoration: underline; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .main-nav ul { + flex-direction: column; + gap: 10px; + } + + .hero h1 { + font-size: 36px; + } + + .tagline { + font-size: 18px; + } + + section { + padding: 20px; + } +}