commit 41af0a2764cf1e860f9b8d1e1aceb9c468ebe78c Author: Fabienmcl Date: Fri Apr 26 16:31:42 2024 +0200 initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d6f428b --- /dev/null +++ b/.gitignore @@ -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/ diff --git a/README.md b/README.md new file mode 100644 index 0000000..968d364 --- /dev/null +++ b/README.md @@ -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. + diff --git a/dist/output.css b/dist/output.css new file mode 100644 index 0000000..db25c71 --- /dev/null +++ b/dist/output.css @@ -0,0 +1,1171 @@ +@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'); + +/* +! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after{ + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop{ + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.mx-2{ + margin-left: 0.5rem; + margin-right: 0.5rem; +} + +.mx-auto{ + margin-left: auto; + margin-right: auto; +} + +.mb-1{ + margin-bottom: 0.25rem; +} + +.mb-1\.5{ + margin-bottom: 0.375rem; +} + +.mb-2{ + margin-bottom: 0.5rem; +} + +.mb-3{ + margin-bottom: 0.75rem; +} + +.mb-4{ + margin-bottom: 1rem; +} + +.mb-8{ + margin-bottom: 2rem; +} + +.mr-8{ + margin-right: 2rem; +} + +.mt-10{ + margin-top: 2.5rem; +} + +.mt-12{ + margin-top: 3rem; +} + +.mt-14{ + margin-top: 3.5rem; +} + +.mt-16{ + margin-top: 4rem; +} + +.mt-20{ + margin-top: 5rem; +} + +.mt-28{ + margin-top: 7rem; +} + +.mt-32{ + margin-top: 8rem; +} + +.mt-40{ + margin-top: 10rem; +} + +.mt-5{ + margin-top: 1.25rem; +} + +.mt-52{ + margin-top: 13rem; +} + +.box-border{ + box-sizing: border-box; +} + +.block{ + display: block; +} + +.flex{ + display: flex; +} + +.h-200{ + height: 200px; +} + +.h-300{ + height: 300px; +} + +.h-full{ + height: 100%; +} + +.h-screen{ + height: 100vh; +} + +.w-11\/12{ + width: 91.666667%; +} + +.w-3\/5{ + width: 60%; +} + +.w-5\/6{ + width: 83.333333%; +} + +.w-7\/12{ + width: 58.333333%; +} + +.w-full{ + width: 100%; +} + +.max-w-screen-md{ + max-width: 768px; +} + +.cursor-pointer{ + cursor: pointer; +} + +.flex-col{ + flex-direction: column; +} + +.items-center{ + align-items: center; +} + +.justify-center{ + justify-content: center; +} + +.justify-between{ + justify-content: space-between; +} + +.space-y-8 > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2rem * var(--tw-space-y-reverse)); +} + +.overflow-x-hidden{ + overflow-x: hidden; +} + +.overflow-y-hidden{ + overflow-y: hidden; +} + +.whitespace-nowrap{ + white-space: nowrap; +} + +.rounded-2xl{ + border-radius: 1rem; +} + +.rounded-full{ + border-radius: 9999px; +} + +.rounded-lg{ + border-radius: 0.5rem; +} + +.border{ + border-width: 1px; +} + +.border-gray-300{ + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.border-white{ + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); +} + +.bg-gray-50{ + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); +} + +.bg-indigo-800{ + --tw-bg-opacity: 1; + background-color: rgb(55 48 163 / var(--tw-bg-opacity)); +} + +.bg-gradient-to-r{ + background-image: linear-gradient(to right, var(--tw-gradient-stops)); +} + +.from-indigo-500{ + --tw-gradient-from: #6366f1 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.via-purple-500{ + --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.to-pink-500{ + --tw-gradient-to: #ec4899 var(--tw-gradient-to-position); +} + +.p-2{ + padding: 0.5rem; +} + +.p-2\.5{ + padding: 0.625rem; +} + +.p-3{ + padding: 0.75rem; +} + +.px-4{ + padding-left: 1rem; + padding-right: 1rem; +} + +.px-5{ + padding-left: 1.25rem; + padding-right: 1.25rem; +} + +.py-2{ + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.py-3{ + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.py-8{ + padding-top: 2rem; + padding-bottom: 2rem; +} + +.text-center{ + text-align: center; +} + +.text-justify{ + text-align: justify; +} + +.font-Inter{ + font-family: Inter; +} + +.font-Sen{ + font-family: Sen; +} + +.text-4xl{ + font-size: 2.25rem; + line-height: 2.5rem; +} + +.text-6xl{ + font-size: 3.75rem; + line-height: 1; +} + +.text-sm{ + font-size: 0.875rem; + line-height: 1.25rem; +} + +.font-bold{ + font-weight: 700; +} + +.font-extrabold{ + font-weight: 800; +} + +.font-light{ + font-weight: 300; +} + +.font-medium{ + font-weight: 500; +} + +.font-normal{ + font-weight: 400; +} + +.tracking-tight{ + letter-spacing: -0.025em; +} + +.text-gray-500{ + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.text-gray-900{ + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.text-white{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.underline{ + text-decoration-line: underline; +} + +.shadow-sm{ + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.hover\:bg-fuchsia-600:hover{ + --tw-bg-opacity: 1; + background-color: rgb(192 38 211 / var(--tw-bg-opacity)); +} + +.hover\:underline:hover{ + text-decoration-line: underline; +} + +.focus\:outline-none:focus{ + outline: 2px solid transparent; + outline-offset: 2px; +} + +.focus\:ring-4:focus{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +@media (prefers-color-scheme: dark){ + .dark\:border-gray-600{ + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); + } + + .dark\:bg-gray-700{ + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); + } + + .dark\:text-gray-300{ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); + } + + .dark\:text-gray-400{ + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); + } + + .dark\:text-white{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + } + + .dark\:placeholder-gray-400::-moz-placeholder{ + --tw-placeholder-opacity: 1; + color: rgb(156 163 175 / var(--tw-placeholder-opacity)); + } + + .dark\:placeholder-gray-400::placeholder{ + --tw-placeholder-opacity: 1; + color: rgb(156 163 175 / var(--tw-placeholder-opacity)); + } +} + +@media (min-width: 640px){ + .sm\:col-span-2{ + grid-column: span 2 / span 2; + } + + .sm\:mx-auto{ + margin-left: auto; + margin-right: auto; + } + + .sm\:ml-4{ + margin-left: 1rem; + } + + .sm\:w-11\/12{ + width: 91.666667%; + } + + .sm\:w-4\/12{ + width: 33.333333%; + } + + .sm\:w-5\/12{ + width: 41.666667%; + } + + .sm\:w-9\/12{ + width: 75%; + } + + .sm\:w-fit{ + width: -moz-fit-content; + width: fit-content; + } + + .sm\:text-xl{ + font-size: 1.25rem; + line-height: 1.75rem; + } +} + +@media (min-width: 768px){ + .md\:mx-4{ + margin-left: 1rem; + margin-right: 1rem; + } + + .md\:w-3\/12{ + width: 25%; + } + + .md\:w-4\/12{ + width: 33.333333%; + } + + .md\:w-8\/12{ + width: 66.666667%; + } + + .md\:text-7xl{ + font-size: 4.5rem; + line-height: 1; + } + + .md\:text-lg{ + font-size: 1.125rem; + line-height: 1.75rem; + } +} + +@media (min-width: 1024px){ + .lg\:mx-24{ + margin-left: 6rem; + margin-right: 6rem; + } + + .lg\:mb-16{ + margin-bottom: 4rem; + } + + .lg\:mt-36{ + margin-top: 9rem; + } + + .lg\:flex{ + display: flex; + } + + .lg\:h-350{ + height: 350px; + } + + .lg\:w-11\/12{ + width: 91.666667%; + } + + .lg\:w-2\/4{ + width: 50%; + } + + .lg\:w-2\/6{ + width: 33.333333%; + } + + .lg\:w-3\/4{ + width: 75%; + } + + .lg\:w-4\/5{ + width: 80%; + } + + .lg\:w-full{ + width: 100%; + } + + .lg\:flex-row-reverse{ + flex-direction: row-reverse; + } + + .lg\:items-center{ + align-items: center; + } + + .lg\:justify-center{ + justify-content: center; + } + + .lg\:justify-between{ + justify-content: space-between; + } + + .lg\:py-16{ + padding-top: 4rem; + padding-bottom: 4rem; + } + + .lg\:text-justify{ + text-align: justify; + } +} + +@media (min-width: 1280px){ + .xl\:mx-0{ + margin-left: 0px; + margin-right: 0px; + } + + .xl\:mx-auto{ + margin-left: auto; + margin-right: auto; + } + + .xl\:ml-0{ + margin-left: 0px; + } + + .xl\:ml-12{ + margin-left: 3rem; + } + + .xl\:ml-16{ + margin-left: 4rem; + } + + .xl\:ml-4{ + margin-left: 1rem; + } + + .xl\:ml-5{ + margin-left: 1.25rem; + } + + .xl\:ml-64{ + margin-left: 16rem; + } + + .xl\:mr-16{ + margin-right: 4rem; + } + + .xl\:mt-20{ + margin-top: 5rem; + } + + .xl\:mt-44{ + margin-top: 11rem; + } + + .xl\:mt-80{ + margin-top: 20rem; + } + + .xl\:h-500{ + height: 500px; + } + + .xl\:w-2\/6{ + width: 33.333333%; + } + + .xl\:w-3\/6{ + width: 50%; + } + + .xl\:w-4\/6{ + width: 66.666667%; + } + + .xl\:w-7\/12{ + width: 58.333333%; + } + + .xl\:w-8\/12{ + width: 66.666667%; + } + + .xl\:w-96{ + width: 24rem; + } + + .xl\:w-full{ + width: 100%; + } + + .xl\:text-left{ + text-align: left; + } + + .xl\:text-lg{ + font-size: 1.125rem; + line-height: 1.75rem; + } +} \ No newline at end of file diff --git a/src/about.html b/src/about.html new file mode 100644 index 0000000..13d1682 --- /dev/null +++ b/src/about.html @@ -0,0 +1,47 @@ + + + + + + + + Stellar Web - About + + + + +
+
+
+ Stellar Web +
+
+ +
+
+
+ + +
+
+

About
stellar Web

+ +

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.

+
+ +
+ +
+
+ + + + + + \ No newline at end of file diff --git a/src/assets/01.jpeg b/src/assets/01.jpeg new file mode 100644 index 0000000..59d3fe1 Binary files /dev/null and b/src/assets/01.jpeg differ diff --git a/src/assets/02.jpeg b/src/assets/02.jpeg new file mode 100644 index 0000000..954b497 Binary files /dev/null and b/src/assets/02.jpeg differ diff --git a/src/assets/03.jpeg b/src/assets/03.jpeg new file mode 100644 index 0000000..992cff0 Binary files /dev/null and b/src/assets/03.jpeg differ diff --git a/src/assets/04.jpeg b/src/assets/04.jpeg new file mode 100644 index 0000000..52cee05 Binary files /dev/null and b/src/assets/04.jpeg differ diff --git a/src/assets/05.png b/src/assets/05.png new file mode 100644 index 0000000..a007654 Binary files /dev/null and b/src/assets/05.png differ diff --git a/src/assets/giphy.gif b/src/assets/giphy.gif new file mode 100644 index 0000000..8448a52 Binary files /dev/null and b/src/assets/giphy.gif differ diff --git a/src/contact.html b/src/contact.html new file mode 100644 index 0000000..b3202e1 --- /dev/null +++ b/src/contact.html @@ -0,0 +1,51 @@ + + + + + + + + Stellar Web - Contact + + + + +
+
+
+ Stellar Web +
+
+ +
+
+
+ + + +
+

Contact Us

+

Nunc id odio vitae ante volutpat bibendum. Fusce sit amet leo orci. Praesent ultricies aliquam urna, a venenatis arcu laoreet.

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ + + \ No newline at end of file diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..0f4ebdd --- /dev/null +++ b/src/index.html @@ -0,0 +1,93 @@ + + + + + + + + Stellar Web - Home + + + +
+
+
+ Stellar Web +
+
+ +
+
+
+ +
+
+

Hello
Astronaut

+

+ 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. +

+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+

+ 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. +

+
+
+ +
+
+ +
+
+

+ 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. +

+
+
+ +
+
+ +
+
+

+ 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. +

+
+
+ + + + \ No newline at end of file diff --git a/src/input.css b/src/input.css new file mode 100644 index 0000000..c77a56b --- /dev/null +++ b/src/input.css @@ -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; \ No newline at end of file diff --git a/src/js/scroll.js b/src/js/scroll.js new file mode 100644 index 0000000..3019a4c --- /dev/null +++ b/src/js/scroll.js @@ -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' }); +}) \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..6abe858 --- /dev/null +++ b/tailwind.config.js @@ -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: [], +};