initial commit
This commit is contained in:
8
.gitignore
vendored
Normal file
8
.gitignore
vendored
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
# Ignorer le fichier package-lock.json
|
||||||
|
package-lock.json
|
||||||
|
|
||||||
|
# Ignorer le fichier package.json
|
||||||
|
package.json
|
||||||
|
|
||||||
|
# Ignorer le dossier node_modules
|
||||||
|
node_modules/
|
||||||
21
README.md
Normal file
21
README.md
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
# Projet BTS SIO - Utilisation de Tailwind CSS
|
||||||
|
|
||||||
|
Ce projet a été réalisé dans le cadre de mon BTS SIO (Services Informatiques aux Organisations) pour l'unité "Vieille technologie". J'ai choisi de travailler avec Tailwind CSS pour ce projet de prototypage.
|
||||||
|
|
||||||
|
## Description du Projet
|
||||||
|
|
||||||
|
Ce projet consiste en la création d'un site web sur le thème de l'espace et de l'astronomie en utilisant Tailwind CSS. J'ai exploité les fonctionnalités puissantes de Tailwind CSS pour styler et structurer le site de manière efficace.
|
||||||
|
|
||||||
|
- **Premier projet avec Tailwind**: Ce projet représente ma première expérience significative avec Tailwind CSS. Avant cela, j'avais eu une petite initiation sur un autre projet, mais ce projet est ma véritable plongée dans l'utilisation de Tailwind CSS pour créer des interfaces web.
|
||||||
|
|
||||||
|
|
||||||
|
## Fonctionnalités
|
||||||
|
|
||||||
|
- **Thème de l'espace**: Le site est conçu autour du thème fascinant de l'espace et de l'astronomie.
|
||||||
|
|
||||||
|
- **Utilisation de Tailwind CSS**: J'ai mis en avant mes compétences dans l'utilisation de Tailwind CSS pour créer un site web esthétiquement plaisant et bien structuré.
|
||||||
|
|
||||||
|
- **Génération d'assets par une IA**: Les images présents sur le site ont été générés par une intelligence artificielle, ajoutant ainsi une touche moderne et innovante à ce projet.
|
||||||
|
|
||||||
|
- **Responsive**: Je tiens à souligner que ce site est responsive, ce qui signifie qu'il s'adapte à différents appareils et tailles d'écran pour offrir une expérience utilisateur optimale.
|
||||||
|
|
||||||
1171
dist/output.css
vendored
Normal file
1171
dist/output.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
47
src/about.html
Normal file
47
src/about.html
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<!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 - About</title>
|
||||||
|
</head>
|
||||||
|
<body class="bg-indigo-800 text-white box-border w-full h-full ">
|
||||||
|
|
||||||
|
<!-- 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="index.html">Home</a></li>
|
||||||
|
<li class="mr-8 xl:mr-16 hover:underline"><a href="#">About</a></li>
|
||||||
|
<li class="hover:underline"><a href="contact.html">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div class="w-5/6 mt-20 mx-auto text-center lg:flex lg:mt-36">
|
||||||
|
<div class="lg:w-2/4">
|
||||||
|
<p class="font-Sen text-6xl md:text-7xl lg:text-justify xl:w-96 font-bold xl:ml-64 whitespace-nowrap">About <br class="block"> <span class="underline">stellar Web</span></p>
|
||||||
|
|
||||||
|
<p class="mt-14 font-Inter text-sm sm:w-9/12 md:w-8/12 xl:w-96 text-justify sm:mx-auto md:text-lg lg:w-11/12 xl:ml-64">Lorem ipsum dolor sit amet. Et accusantium saepe id eius perferendis aut optio libero et totam voluptas. Est consequatur iure et mollitia alias et cumque minima eum nisi dolorem et voluptates velit aut eius iure. Eum odit galisum ut quia possimus est rerum adipisci. Et voluptas recusandae aut placeat tempora nam itaque suscipit 33 corrupti asperiores et labore voluptatem. Et distinctio molestias sit alias enim cum nihil autem. Est accusantium omnis in odio nesciunt vel consequatur molestiae qui reiciendis inventore et totam nihil At fugiat itaque id cupiditate voluptas.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mx-auto w-7/12 mt-14 sm:w-4/12 md:w-3/12 lg:w-2/6 xl:w-2/6 xl:ml-16 ">
|
||||||
|
<img class="w-200 h-200 rounded-2xl lg:w-350 lg:h-350 xl:h-500 xl:w-500" src="assets/giphy.gif" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="text-sm font-Inter text-center mt-16 mb-1.5 w-5/6 mx-auto md:text-lg xl:mt-20">
|
||||||
|
<p>© 2023 Stellar Web. Tous droits réservés.</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
src/assets/01.jpeg
Normal file
BIN
src/assets/01.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
BIN
src/assets/02.jpeg
Normal file
BIN
src/assets/02.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 243 KiB |
BIN
src/assets/03.jpeg
Normal file
BIN
src/assets/03.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 304 KiB |
BIN
src/assets/04.jpeg
Normal file
BIN
src/assets/04.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
BIN
src/assets/05.png
Normal file
BIN
src/assets/05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 379 KiB |
BIN
src/assets/giphy.gif
Normal file
BIN
src/assets/giphy.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
51
src/contact.html
Normal file
51
src/contact.html
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<!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 - Contact</title>
|
||||||
|
</head>
|
||||||
|
<body class="bg-indigo-800 text-white box-border w-full h-full">
|
||||||
|
|
||||||
|
<!-- 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="index.html">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</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Contact form -->
|
||||||
|
<div class=" flex flex-col justify-center items-center h-screen max-w-screen-md mx-auto">
|
||||||
|
<h2 class="mb-4 font-Sen text-6xl md:text-7xl font-bold text-center underline">Contact Us</h2>
|
||||||
|
<p class="mb-8 lg:mb-16 text-center font-Inter text-sm md:text-lg">Nunc id odio vitae ante volutpat bibendum. Fusce sit amet leo orci. Praesent ultricies aliquam urna, a venenatis arcu laoreet.</p>
|
||||||
|
<form action="#" class="space-y-8 w-5/6 ">
|
||||||
|
<div>
|
||||||
|
<label for="email" class="block mb-2 text-sm font-Inter font-medium">Your email</label>
|
||||||
|
<input type="email" id="email" class="shadow-sm border border-gray-300 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light" placeholder="name@flowbite.com" required>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="subject" class="block mb-2 text-sm font-medium font-Inter">Subject</label>
|
||||||
|
<input type="text" id="subject" class="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light" placeholder="Let us know how we can help you" required>
|
||||||
|
</div>
|
||||||
|
<div class="sm:col-span-2">
|
||||||
|
<label for="message" class="block mb-2 text-sm font-medium font-Inter">Your message</label>
|
||||||
|
<textarea id="message" rows="6" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Leave a comment..."></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Send message</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
93
src/index.html
Normal file
93
src/index.html
Normal 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>
|
||||||
6
src/input.css
Normal file
6
src/input.css
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;500;600;700;800&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
||||||
|
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
6
src/js/scroll.js
Normal file
6
src/js/scroll.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
document.querySelector('.scroll-button').addEventListener('click', function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
const targetElement = document.getElementById('box2');
|
||||||
|
const yOffset = targetElement.getBoundingClientRect().top;
|
||||||
|
window.scrollBy({ top: yOffset, behavior: 'smooth' });
|
||||||
|
})
|
||||||
26
tailwind.config.js
Normal file
26
tailwind.config.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
module.exports = {
|
||||||
|
content: ["./src/**/*.{html,js}"],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
Sen: ['Sen'],
|
||||||
|
Inter: ['Inter'],
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
'200': '200px',
|
||||||
|
'300': '300px',
|
||||||
|
'350': '350px',
|
||||||
|
'400': '400px',
|
||||||
|
'500': '500px',
|
||||||
|
},
|
||||||
|
Width: {
|
||||||
|
'200': '200px',
|
||||||
|
'300': '300px',
|
||||||
|
'350': '350px',
|
||||||
|
'400': '400px',
|
||||||
|
'500': '500px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user