Untitled

avatar
unknown
plain_text
2 years ago
4.7 kB
3
Indexable
<!DOCTYPE html>
<html>
<head>
	<title>Ask Durex | Home</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<!-- Navigation bar -->
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Comic Strip</a></li>
			<li><a href="#">Articles</a></li>
			<li><a href="#">Crosswords</a></li>
			<li><a href="#">Infographics</a></li>
			<li><a href="#">Advice Columns</a></li>
			<li><a href="#">Quiz</a></li>
			<li><a href="#">Video</a></li>
			<li><a href="#">Simulation Game</a></li>
			<li><a href="#">Word Cloud</a></li>
			<li><a href="#">Podcasts</a></li>
			<li><a href="#">Trivia Notification</a></li>
			<li><a href="#">Community Page</a></li>
			<li><a href="#">Interviews</a></li>
		</ul>
	</nav>

	<!-- Hero section -->
	<section class="hero">
		<h1>Ask Durex</h1>
		<p>Join the community and get access to exclusive content, product information, and more!</p>
		<form>
			<input type="text" placeholder="Enter your email address">
			<button type="submit">Join now</button>
		</form>
	</section>

	<!-- Content section -->
	<section class="content">
		<h2>Latest Content</h2>
		<ul>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/250x150" alt="Comic Strip">
					<h3>Comic Strip</h3>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/250x150" alt="Article">
					<h3>Article</h3>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/250x150" alt="Crossword">
					<h3>Crossword</h3>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/250x150" alt="Infographic">
					<h3>Infographic</h3>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/250x150" alt="Advice Column">
					<h3>Advice Column</h3>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/250x150" alt="Quiz">
					<h3>Quiz</h3>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/250x150" alt="Video">
					<h3>Video</h3>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https
<!-- Simulation section -->
<section class="simulation">
	<h2>Try our Simulation Game</h2>
	<p>Experience the pleasure and excitement of using Durex products in a virtual setting.</p>
	<a href="#">Play now</a>
</section>

<!-- Word cloud section -->
<section class="wordcloud">
	<h2>What our community is saying</h2>
	<img src="https://via.placeholder.com/500x250" alt="Word Cloud">
</section>

<!-- Podcast section -->
<section class="podcast">
	<h2>Listen to our Podcasts</h2>
	<p>Get expert advice and insights on sexual health and wellness from our panel of experts.</p>
	<a href="#">Listen now</a>
</section>

<!-- Trivia section -->
<section class="trivia">
	<h2>Trivia Notification</h2>
	<p>Sign up for our trivia notifications and get fun facts and interesting insights about sexual health and wellness.</p>
	<form>
		<input type="text" placeholder="Enter your phone number">
		<button type="submit">Sign up</button>
	</form>
</section>

<!-- Community section -->
<section class="community">
	<h2>Join our Community</h2>
	<p>Connect with like-minded individuals and share your experiences and insights on sexual health and wellness.</p>
	<a href="#">Join now</a>
</section>

<!-- Footer section -->
<footer>
	<p>&copy; 2023 Durex India</p>
</footer>
</body>
</html>
/* General styles */

body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
}

h1, h2, h3 {
	font-weight: normal;
	margin: 0;
}

a {
	color: #ff3f80;
	text-decoration: none;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Navigation bar styles */

nav {
	background-color: #ff3f80;
	padding: 10px;
}

nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

nav li {
	margin: 5px;
}

nav a {
	color: white;
	font-size: 16px;
	padding: 10px;
}

nav a:hover {
	background-color: white;
	color: #ff3f80;
}

/* Hero section styles */

.hero {
	background-image: url(https://via.placeholder.com/1200x600);
	background-size: cover;
	color: white;
	padding: 100px 50px;
	text-align: center;
}

.hero h1 {
	font-size: 48px;
	margin: 0 0 20px 0;
}

.hero p {
	font-size: 24px;
	margin: 0 0 30px 0;
}

.hero form {
	display: flex;
	justify-content: center;
}

.hero input {
	border: none;
	border-radius: 20px 0 0 20px;
	font-size: 16px;
	padding: 10px;
	width: 300px;
}

.hero button {
	background-color: white;
	border: none;
	border-radius: 0 20px 20px 0;
	color: #ff3f80;
	cursor: pointer;
	font-size: 16px;
	padding: 10px;
}

.hero button:hover {
	background-color: #ff3f80;
	color: white
Editor is loading...