Scribd
Upload
10 views3 pages

,HTML

Uploaded by

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

,HTML

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> alfaisal Surf</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #87CEEB; /* Light blue background color and red and
yellow */
color: #ffffff; /* White text color for contrast */
}

header {
background-color: #007BFF; /* Blue header background color */
padding: 20px;
text-align: center;
}

.animate {
animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
nav {
background-color: #0056b3; /* Darker blue navigation bar */
padding: 10px;
text-align: center;
}

nav a {
color: #ffffff;
text-decoration: none;
padding: 15px;
margin: 0 10px;
}

section {
padding: 50px;
text-align: center;
}

footer {
text-align: center;
padding: 20px;
background-color: #0056b3; /* Darker blue footer background color */
}
</style>
</head>
<body>

<header>
<h1>AlFaisal Brand </h1>
<p>Your Ultimate Destination for Surfing Adventures</p>
</header>

<nav>
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#about">About Us</a>
<a href="#contact">Contact</a>
</nav>

<section id="home">
<h2>Welcome to AlFaisal Surf!</h2>
<p>Discover the thrill of riding the waves with our expert instructors.</p>
<img src="https://placekitten.com/800/400" alt="Surfing Image"
style="width: 100%; max-width: 800px; margin-top: 20px;">
</section>

<section id="services">
<h2>Our Services</h2>
<p>Explore our range of surfing services, including lessons, equipment
rental, and guided tours.</p>
</section>

<section id="about">
<h2>About Us</h2>
<p>Learn about our passionate team of surf enthusiasts dedicated to
providing an unforgettable experience.</p>
</section>

<section id="contact">
<h2>Contact Us</h2>
<p>Reach out to us for inquiries, bookings, or any questions you may
have.</p>
</section>
.animate {
animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
<footer>
<p>&copy; 2023 Surf Paradise. All rights reserved.</p>
</footer>

</body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Title</title>
<style>
body {
font-family: 'Arial', sans-serif;
text-align: center;
margin: 0;
padding: 0;
}

h1 {
font-size: 36px;
margin: 50px 0;
}

.color1 {
color: #FF6347; /* Tomato color */
}

.color2 {
color: #66CDAA; /* MediumAquamarine color */
}

.color3 {
color: #FFD700; /* Gold color */
}
</style>
</head>
<body>

.animate {
animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
</body>
</html>

You might also like