-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (139 loc) · 7.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AuroraDesgin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://kit.fontawesome.com/YOUR_KIT_CODE.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="container">
<h1>AuroraDesgin</h1>
<ul>
<li><a href="#section1">Home</a></li>
<li><a href="#section2">About</a></li>
<li><a href="#section3">Services</a></li>
<li><a href="#section4">Portfolio</a></li>
<li><a href="#section5">Contact</a></li>
</ul>
</div>
</nav>
<div class="parallax-image parallax-image-01"></div>
<section id="section1">
<div class="container">
<h2>Welcome to AuroraDesgin</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<div class="parallax-image parallax-image-02"></div>
<section id="section2">
<div class="container">
<h2>About Us</h2>
<p>
At AuroraDesgin, we are dedicated to illuminating a brighter path forward. Our journey began with a vision to harness the power of creativity and technology to bring about positive change in the world. Since our establishment, we have been on a relentless pursuit of excellence, striving to redefine the way we interact with the world around us.
What sets us apart is our unwavering commitment to pushing the boundaries of innovation. We believe in embracing challenges and transforming them into opportunities for growth. Our team of dedicated professionals brings together a diverse range of expertise, working collaboratively to create solutions that inspire and empower.
Our products are more than just tools – they are a testament to our dedication to quality and ingenuity. Each creation that bears the AuroraDesgin name is a result of meticulous craftsmanship and a deep passion for making a difference.
But AuroraDesgin is more than just a company – we are a community. We value every individual who joins us on this journey, from our customers and partners to our team members and supporters. Your trust and enthusiasm fuel our drive to continually evolve and innovate.
As we move forward, we remain committed to shining a light on new possibilities. We are excited about the future and look forward to illuminating even more lives with our upcoming projects and initiatives. Join us in embracing the dawn of a new era in innovation.
</p>
</div>
</section>
<div class="parallax-image parallax-image-03"></div>
<section id="section3">
<div class="container">
<h2>Our Services</h2>
<div class="services-grid">
<div class="service-item">
<img src="img/7.jpeg" alt="Service 1">
<h3>Web Design</h3>
<p>We create stunning and user-friendly website designs.</p>
</div>
<div class="service-item">
<img src="img/8.jpeg" alt="Service 2">
<h3>Responsive Development</h3>
<p>We ensure your website looks great on all devices.</p>
</div>
<div class="service-item">
<img src="img/9.jpeg" alt="Service 3">
<h3>E-Commerce Solutions</h3>
<p>Start selling online with our powerful e-commerce solutions.</p>
</div>
</div>
</div>
</section>
<div class="parallax-image parallax-image-01"></div>
<section id="section4">
<div class="container">
<h2>Portfolio</h2>
<div class="portfolio-grid">
<div class="portfolio-item">
<img src="img/4.jpeg" alt="Project 1">
<h3>Project 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="portfolio-item">
<img src="img/5.jpeg" alt="Project 2">
<h3>Project 2</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="portfolio-item">
<img src="img/6.jpeg" alt="Project 3">
<h3>Project 3</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
</div>
</div>
</div>
</section>
<div class="parallax-image parallax-image-02"></div>
<!-- Scroll Up Button -->
<div id="scrollUpBtn" class="scroll-up-button">
<a href="#top">↑</a>
</div>
<!-- Add a footer section -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<h1>AuroraDesgin</h1>
<p>Designed by Ahmed Kawa</p>
</div>
<div class="footer-contact">
<h3>Contact Us</h3>
<p>123 Main Street, City, Country</p>
<p>Email: [email protected]</p>
<p>Phone: +1 (555) 123-4567</p>
</div>
<div class="footer-social">
<h3>Follow Us</h3>
<ul>
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://kit.fontawesome.com/bf0f7b8aab.js" crossorigin="anonymous"></script>
<script>// Add this script at the end of your HTML body or in an external script file
// Show/hide the "Scroll Up" button based on scroll position
window.addEventListener("scroll", function() {
const scrollUpButton = document.getElementById("scrollUpBtn");
if (window.scrollY > 500) { // Adjust the threshold value as needed
scrollUpButton.style.display = "block";
} else {
scrollUpButton.style.display = "none";
}
});
// Scroll to the top when the "Scroll Up" button is clicked
document.getElementById("scrollUpBtn").addEventListener("click", function() {
window.scrollTo({ top: 0, behavior: "smooth" });
});
</script>
</body>
</html>