Untitled

avatar
unknown
plain_text
a year ago
4.5 kB
8
Indexable
```
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Tebogo Graphics Design and Media Solutions</title>
	<link rel="stylesheet" href="styles.css">
	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
		}
		header {
			background-color: #333;
			color: #fff;
			padding: 1em;
			text-align: center;
		}
		nav ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: space-between;
		}
		nav li {
			margin-right: 20px;
		}
		nav a {
			color: #fff;
			text-decoration: none;
		}
		main {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 2em;
		}
		section {
			background-color: #f7f7f7;
			padding: 2em;
			margin-bottom: 20px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}
		h2 {
			color: #333;
		}
		.gallery {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		.gallery img {
			width: 200px;
			height: 200px;
			margin: 10px;
			border-radius: 10px;
		}
		#services ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		#services li {
			margin-bottom: 10px;
		}
		#contact form {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		#contact input, #contact textarea {
			width: 100%;
			padding: 10px;
			margin-bottom: 20px;
			border: none;
			border-radius: 10px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}
		#contact button {
			background-color: #333;
			color: #fff;
			padding: 10px 20px;
			border: none;
			border-radius: 10px;
			cursor: pointer;
		}
		#signup form {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		#signup input, #signup textarea {
			width: 100%;
			padding: 10px;
			margin-bottom: 20px;
			border: none;
			border-radius: 10px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}
		#signup button {
			background-color: #333;
			color: #fff;
			padding: 10px 20px;
			border: none;
			border-radius: 10px;
			cursor: pointer;
		}
		#comments form {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		#comments input, #comments textarea {
			width: 100%;
			padding: 10px;
			margin-bottom: 20px;
			border: none;
			border-radius: 10px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}
		#comments button {
			background-color: #333;
			color: #fff;
			padding: 10px 20px;
			border: none;
			border-radius: 10px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<header>
		<nav>
			<ul>
				<li><a href="#home">Home</a></li>
				<li><a href="#portfolio">Portfolio</a></li>
				<li><a href="#services">Services</a></li>
				<li><a href="#contact">Contact</a></li>
				<li><a href="#signup">Sign Up</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<section id="home">
			<h1>Welcome to Tebogo Graphics Design and Media Solutions</h1>
			<p>Located in Phokwane, Nebo, South Africa</p>
```

``</section>
		<section id="portfolio">
			<h2>Our Work</h2>
			<div class="gallery">
				<img src="image1.jpg" alt="Graphic Design Work">
				<img src="image2.jpg" alt="Media Solutions Work">
			</div>
		</section>
		<section id="services">
			<h2>Our Services</h2>
			<ul>
				<li>Branding</li>
				<li>Logo Design</li>
				<li>Graphic Design</li>
				<li>Media Solutions</li>
				<li>Web Design</li>
				<li>Print Design</li>
				<li>Digital Marketing</li>
			</ul>
		</section>
		<section id="contact">
			<h2>Get in Touch</h2>
			<p>Phone: +27 71 030 9963</p>
			<p>Email: tebogostenly@outlook.com</p>
			<p>Physical Address: Phokwane, Nebo, South Africa, 1059</p>
			<form>
				<input type="name" placeholder="Name">
				<input type="email" placeholder="Email">
				<textarea placeholder="Message"></textarea>
				<button>Send</button>
			</form>
			<h2>Help Line</h2>
			<p>Call us at +27 71 030 9963 for assistance</p>
		</section>
		<section id="signup">
			<h2>Sign Up</h2>
			<form>
				<input type="name" placeholder="Name">
				<input type="email" placeholder="Email">
				<input type="password" placeholder="Password">
				<button>Sign Up</button>
			</form>
		</section>
		<section id="comments">
			<h2>Comments</h2>
			<form>
				<input type="name" placeholder="Name">
				<textarea placeholder="Comment"></textarea>
				<button>Post Comment</button>
			</form>
			<div class="comments">
				<!-- comments will be displayed here -->
			</div>
		</section>
	</main>
	<footer>
		<p>&copy; 2024 Tebogo Graphics Design and Media Solutions</p>
	</footer>
</body>
</html>
```
Editor is loading...
Leave a Comment