Scribd
Upload
5 views5 pages

Tugas Unjuk Keterampilan Membuat Web

The document contains the HTML and CSS code for a T-Shirt Store website, featuring sections for home, products, about, and contact. It includes product listings with images, descriptions, and an 'Add to Cart' button. The CSS styles provide a clean and responsive design for the website layout.

Uploaded by

ekkyfirmansyah10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views5 pages

Tugas Unjuk Keterampilan Membuat Web

The document contains the HTML and CSS code for a T-Shirt Store website, featuring sections for home, products, about, and contact. It includes product listings with images, descriptions, and an 'Add to Cart' button. The CSS styles provide a clean and responsive design for the website layout.

Uploaded by

ekkyfirmansyah10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

NAMA: DEA LESTARI

Ui.html
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>T-Shirt Store</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>T-Shirt Store</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section id="home">
<h2>Welcome to T-Shirt Store</h2>
<p>Find the perfect t-shirt for you!</p>
</section>

<section id="products">
<h2>Our Products</h2>
<div class="product">
<img src="kaos1.png" alt="T-Shirt 1">
<h3>T-Shirt 1</h3>
<p>Description of T-Shirt 1.</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="kaos2.png" alt="T-Shirt 2">
<h3>T-Shirt 2</h3>
<p>Description of T-Shirt 2.</p>
<button>Add to Cart</button>
</div>
<!-- Add more products as needed -->
</section>

<section id="about">
<h2>About Us</h2>
<p>Information about the T-Shirt Store.</p>
</section>

<section id="contact">
<h2>Contact Us</h2>
<p>Contact information.</p>
</section>
</main>

<footer>
<p>&copy; 2024 T-Shirt Store</p>
</footer>
</body>
</html>

Styles.css

/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Global styles */
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
}

header {
background-color: #333;
color: #fff;
padding: 20px;
}

nav ul {
list-style-type: none;
text-align: center;
}

nav ul li {
display: inline;
margin-right: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

main {
padding: 20px;
}

section {
margin-bottom: 40px;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}

/* Product styles */
.product {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
text-align: center;
margin-bottom: 20px;
}

.product img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}

.product h3 {
margin-bottom: 10px;
}

.product p {
margin-bottom: 10px;
}

.product button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

.product button:hover {
background-color: #45a049;
}

You might also like