Fabienmcll/stellar-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Fabienmcl
2024-04-26 16:31:42 +02:00
commit 41af0a2764
15 changed files with 1429 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/index.html Normal file
View File

@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="assets/05.png" type="image/x-icon">
<link rel="stylesheet" href="../dist/output.css">
<title>Stellar Web - Home</title>
</head>
<body class="w-full bg-indigo-800 text-white box-border">
<!-- TopBar -->
<div class="mt-5 mx-2 md:mx-4 lg:mx-24 bg-indigo-800 text-white">
<div class="flex justify-between">
<div>
<a class="font-Sen font-bold text-sm md:text-lg cursor-pointer" href="index.html">Stellar Web</a>
</div>
<div>
<ul class="flex font-Inter text-sm md:text-lg font-normal">
<li class="mr-8 xl:mr-16 hover:underline"><a href="#">Home</a></li>
<li class="mr-8 xl:mr-16 hover:underline"><a href="about.html">About</a></li>
<li class="hover:underline"><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- Box 1 -->
<div class="w-5/6 mx-auto mt-28 text-center sm:w-11/12 lg:w-full xl:w-8/12 lg:flex lg:items-center lg:justify-between lg:flex-row-reverse xl:mt-44">
<div class="xl:w-4/6 xl:ml-5 xl:text-left lg:w-4/5">
<h1 class="font-Sen text-6xl md:text-7xl lg:text-justify xl:w-96 font-bold">Hello <br class="block"> Astronaut</h1>
<p class="mt-12 font-Inter text-sm sm:w-9/12 md:w-8/12 xl:w-96 text-justify sm:mx-auto md:text-lg xl:mx-0 font-normal">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae sapien at
turpis gravida tristique. Fusce vel erat a odio laoreet fermentum. Nullam varius,
oio id ultrices vulputate, tellus tortor lacinia ex, vel feugiat risus justo et
arcu. Nunc id odio vitae ante volutpat bibendum. Fusce sit amet leo orci. Vestibulum
nec massa in erat cursus viverra. Praesent ultricies aliquam urna, a venenatis arcu laoreet a.
</p>
<a href="#box2" class="scroll-button">
<div class="mx-auto xl:mx-0">
<button class="mt-10 py-2 px-4 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 border border-white rounded-full hover:bg-fuchsia-600">
Read More
</button>
</div>
</a>
</div>
<div class="mx-auto mt-16 w-3/5 sm:w-4/12 md:w-3/12 xl:w-full">
<img class="h-200 w-200 lg:h-350 lg:w-350 xl:h-500 xl:w-500 xl:mx-auto" src="assets/05.png" alt="">
</div>
</div>
<!-- Box 2 -->
<div id="box2" class="w-5/6 mx-auto mt-52 sm:w-11/12 lg:w-3/4 xl:w-7/12 lg:flex lg:items-center lg:justify-center xl:mt-80">
<div class="w-11/12 mx-auto sm:w-5/12 md:w-4/12 xl:w-3/6 xl:mx-auto xl:ml-4">
<img class="h-300 w-300" src="assets/02.jpeg" alt="">
</div>
<div class="lg:w-3/4">
<p class="mt-12 text-center font-Inter text-sm font-normal sm:w-9/12 sm:mx-auto md:w-8/12 md:text-lg lg:text-justify xl:ml-12 xl:w-96">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae sapien at
turpis gravida tristique. Fusce vel erat a odio laoreet fermentum. Nullam varius,
oio id ultrices vulputate, tellus tortor lacinia ex, vel feugiat risus justo.
</p>
</div>
</div>
<!-- Box 3 -->
<div class="w-5/6 mx-auto mt-40 sm:w-11/12 lg:w-3/4 xl:w-7/12 xl:mt-80 lg:flex lg:items-center lg:justify-center lg:flex-row-reverse">
<div class="w-11/12 mx-auto sm:w-5/12 md:w-4/12 xl:w-3/6 xl:mx-auto xl:ml-4">
<img src="assets/03.jpeg" alt="" style="height: 300px; width: 300px;">
</div>
<div class="lg:w-3/4">
<p class="mt-12 text-center font-Inter text-sm font-normal sm:w-9/12 sm:mx-auto md:w-8/12 md:text-lg lg:text-justify xl:ml-12 xl:w-96">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae sapien at
turpis gravida tristique. Fusce vel erat a odio laoreet fermentum. Nullam varius,
oio id ultrices vulputate, tellus tortor lacinia ex, vel feugiat risus justo.
</p>
</div>
</div>
<!-- Box 4 -->
<div class="mx-auto w-5/6 mt-40 sm:w-11/12 md:w-4/12 lg:w-3/4 xl:w-7/12 lg:flex lg:items-center lg:justify-center">
<div class="w-11/12 mx-auto sm:w-5/12 sm:mx-auto sm:ml-4 md:w-4/12 xl:w-3/6 xl:mx-auto xl:ml-12">
<img src="assets/04.jpeg" alt="" style="height: 300px; width: 300px;">
</div>
<div class="lg:w-3/4">
<p class="mt-12 text-center font-Inter text-sm font-normal sm:w-9/12 sm:mx-auto md:w-8/12 lg:text-justify xl:w-96 xl:ml-0 xl:text-lg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae sapien at
turpis gravida tristique. Fusce vel erat a odio laoreet fermentum. Nullam varius,
oio id ultrices vulputate, tellus tortor lacinia ex, vel feugiat risus justo.
</p>
</div>
</div>
<footer class="text-sm font-Inter text-center mt-32 mb-3 w-5/6 mx-auto md:text-lg">
<p>© 2023 Stellar Web. Tous droits réservés.</p>
</footer>
<script src="js/scroll.js"></script>
</body>
</html>