first assignment
This commit is contained in:
commit
0af8e15f44
14
README.MD
Normal file
14
README.MD
Normal file
@ -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.
|
||||
BIN
images/1757630393.png
Normal file
BIN
images/1757630393.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 392 KiB |
53
index.html
Normal file
53
index.html
Normal file
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Global Tea Emporium - Premium Authentic Teas Worldwide</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo-container">
|
||||
<img src="images/1757630393.png" class="logo" alt="Global Tea Emporium Logo" />
|
||||
</div>
|
||||
<nav class="main-nav">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">Our Story</a></li>
|
||||
<li><a href="teas.html">Our Teas</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="banner">
|
||||
<h1>Global Tea Emporium</h1>
|
||||
<p class="tagline">Authentic Teas from Around the World</p>
|
||||
</section>
|
||||
|
||||
<section class="introduction">
|
||||
<h2>About Our Tea Journey</h2>
|
||||
<p>Welcome to <strong>Global Tea Emporium</strong>, your premier destination for <em>authentic, premium teas</em> sourced directly from traditional tea gardens across the globe. With over <strong>15 years of experience</strong> in the tea industry, we have built relationships with <em>artisan farmers</em> and <em>tea masters</em> in the world's most renowned tea-growing regions.</p>
|
||||
<p>Our mission is to bring you the <strong>finest quality teas</strong> while supporting sustainable farming practices and preserving traditional tea-making techniques that have been passed down through <strong>generations</strong>.</p>
|
||||
</section>
|
||||
|
||||
<section class="services">
|
||||
<h2>Our Premium Tea Collections</h2>
|
||||
<ul class="services-list">
|
||||
<li><strong>Asian Green Teas:</strong> Delicate sencha from Japan, dragon well from China, and matcha varieties</li>
|
||||
<li><strong>Indian Black Teas:</strong> Authentic Assam, Darjeeling, and Nilgiri teas from renowned estates</li>
|
||||
<li><strong>Oolong Selections:</strong> Traditional Taiwanese and Chinese oolongs with complex flavor profiles</li>
|
||||
<li><strong>Herbal Infusions:</strong> Caffeine-free blends from Egypt, South Africa, and South America</li>
|
||||
<li><strong>White Tea Collection:</strong> Rare silver needle and white peony from China's Fujian province</li>
|
||||
<li><strong>Pu-erh & Fermented Teas:</strong> Aged teas from Yunnan with unique earthy characteristics</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 Global Tea Emporium. All rights reserved.</p>
|
||||
<p>Visit our <a href="about.html">Our Story page</a> to learn more about our tea journey.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
178
styles.css
Normal file
178
styles.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user