Ajouté le projet
This commit is contained in:
parent
0d489806b1
commit
8772ad4f09
BIN
15 - langage HTML/.DS_Store
vendored
Normal file
BIN
15 - langage HTML/.DS_Store
vendored
Normal file
Binary file not shown.
11
15 - langage HTML/5 - Mini-Projet/Site.md
Normal file
11
15 - langage HTML/5 - Mini-Projet/Site.md
Normal file
@ -0,0 +1,11 @@
|
||||
Découverte du Cosmos
|
||||
Pages : Planètes - Missions - Quiz
|
||||
Features :
|
||||
|
||||
Quiz interactif sur l'espace
|
||||
|
||||
Animation système solaire (CSS)
|
||||
|
||||
Formulaire de questions astronomiques
|
||||
|
||||
Liens vers NASA/ESA
|
||||
BIN
15 - langage HTML/5 - Mini-Projet/mini-projet.pdf
Normal file
BIN
15 - langage HTML/5 - Mini-Projet/mini-projet.pdf
Normal file
Binary file not shown.
BIN
15 - langage HTML/5 - Mini-Projet/src/.DS_Store
vendored
Normal file
BIN
15 - langage HTML/5 - Mini-Projet/src/.DS_Store
vendored
Normal file
Binary file not shown.
@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Airbus</title><path d="M11.0673 11.296c0-.8153-.5311-1.4329-1.6304-1.4329h-2.211v4.2614h1.0375v-3.335H9.437c.4323 0 .5928.247.5928.5311 0 .2965-.1605.5312-.5928.5312H8.4363l1.4329 2.2727h1.1858s-.9758-1.5316-.9635-1.5316c.5929-.1359.9758-.5558.9758-1.297M5.4966 9.8631h1.0376v4.2614H5.4966Zm-3.3227 0L0 14.137h1.1734l.3459-.7164h1.754l-.4324-.9017h-.877l.6424-1.3093h.0123l1.4575 2.9274h1.1982L3.1003 9.863Zm12.6854 2.0504c.3335-.1852.5065-.4693.5065-.9017 0-.6917-.5188-1.1487-1.3711-1.1487h-2.4333v4.2614h2.5198c.877 0 1.4575-.4693 1.4575-1.1981.0123-.494-.2718-.8646-.6794-1.0129m-2.2604-1.1487h1.3835c.21 0 .3705.1606.3705.3706s-.1606.3705-.3705.3705h-1.3835zm1.4205 2.4704H12.599v-.8646h1.4205c.247 0 .4447.1852.4447.4323 0 .247-.1977.4323-.4447.4323m4.8049-.9882c0 .6423-.2964 1.0005-.8893 1.0005-.5806 0-.877-.3582-.877-1.0005V9.8631h-1.0623v2.3098c0 1.3217.6917 2.0504 1.9516 2.0504 1.26 0 1.9516-.7287 1.9516-2.0504V9.8631h-1.0623v2.384zm3.8414-.6793c-.9881-.2347-1.1981-.2594-1.1981-.5435 0-.2223.247-.3211.667-.3211.5558 0 1.1364.1358 1.4699.3458l.3335-.8646c-.4447-.247-1.0623-.4076-1.8034-.4076-1.0993 0-1.717.5434-1.717 1.2846 0 .7905.4571 1.1116 1.5194 1.334.8276.1852 1.0005.2964 1.0005.531 0 .2471-.2224.3583-.6794.3583-.6546 0-1.2352-.1606-1.7045-.42l-.3212.914c.5188.2718 1.2846.4447 2.0504.4447 1.0746 0 1.717-.494 1.717-1.334.0123-.6793-.42-1.1116-1.334-1.3216"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
110
15 - langage HTML/5 - Mini-Projet/src/common/animation.css
Normal file
110
15 - langage HTML/5 - Mini-Projet/src/common/animation.css
Normal file
@ -0,0 +1,110 @@
|
||||
.planetContainer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ol {
|
||||
color: black;
|
||||
all: unset;
|
||||
aspect-ratio: 1 / 1;
|
||||
container-type: inline-size;
|
||||
display: grid;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
li {
|
||||
aspect-ratio: 1 / 1;
|
||||
border: 1px dashed;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
grid-area: 1 / 1;
|
||||
place-self: center;
|
||||
width: var(--d, 2cqi);
|
||||
&::after {
|
||||
animation: rotate var(--t, 3s) linear infinite;
|
||||
aspect-ratio: 1 / 1;
|
||||
background: var(--b, hsl(0, 0%, 50%));
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
display: block;
|
||||
offset-path: content-box;
|
||||
width: var(--w, 2cqi);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
to {
|
||||
offset-distance: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sun {
|
||||
--b: radial-gradient(circle, #f9d71c 0%, #f9a825 50%, #f9a825 100%);
|
||||
--d: 10cqi;
|
||||
--w: 8cqi;
|
||||
border: 0;
|
||||
&::after {
|
||||
animation: none;
|
||||
offset-path: none;
|
||||
place-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mercury {
|
||||
--b: radial-gradient(circle, #c2c2c2 0%, #8a8a8a 100%);
|
||||
--d: 15cqi;
|
||||
--t: 2105.26ms;
|
||||
--w: 2.0526cqi;
|
||||
}
|
||||
|
||||
.venus {
|
||||
--b: radial-gradient(circle, #f4d03f 0%, #c39c43 100%);
|
||||
--d: 25cqi;
|
||||
--t: 4210.53ms;
|
||||
--w: 2.6053cqi;
|
||||
}
|
||||
|
||||
.earth {
|
||||
--b: radial-gradient(circle, #3a82f7 0%, #2f9e44 80%, #1a5e20 100%);
|
||||
--d: 35cqi;
|
||||
--t: 6315.79ms;
|
||||
--w: 3.1579cqi;
|
||||
}
|
||||
|
||||
.mars {
|
||||
--b: radial-gradient(circle, #e57373 0%, #af4448 100%);
|
||||
--d: 45cqi;
|
||||
--t: 8421.05ms;
|
||||
--w: 3.7105cqi;
|
||||
}
|
||||
|
||||
.jupiter {
|
||||
--b: radial-gradient(circle, #d4a373 0%, #b36d32 50%, #f4e7d3 100%);
|
||||
--d: 60cqi;
|
||||
--t: 12631.58ms;
|
||||
--w: 4.8158cqi;
|
||||
}
|
||||
|
||||
.saturn {
|
||||
--b: radial-gradient(circle, #e6dba0 0%, #c2a13e 100%);
|
||||
--d: 75cqi;
|
||||
--t: 14736.84ms;
|
||||
--w: 5.3684cqi;
|
||||
}
|
||||
|
||||
.uranus {
|
||||
--b: radial-gradient(circle, #7de3f4 0%, #3ba0b5 100%);
|
||||
--d: 84.5cqi;
|
||||
--t: 10526.32ms;
|
||||
--w: 4.2632cqi;
|
||||
}
|
||||
|
||||
.neptune {
|
||||
--b: radial-gradient(circle, #4c6ef5 0%, #1b3b8c 100%);
|
||||
--d: 94cqi;
|
||||
--t: 20000ms;
|
||||
--w: 6cqi;
|
||||
}
|
||||
4
15 - langage HTML/5 - Mini-Projet/src/common/style.css
Normal file
4
15 - langage HTML/5 - Mini-Projet/src/common/style.css
Normal file
@ -0,0 +1,4 @@
|
||||
.mainContainer {
|
||||
background-color: darkblue;
|
||||
color: white;
|
||||
}
|
||||
40
15 - langage HTML/5 - Mini-Projet/src/index.html
Normal file
40
15 - langage HTML/5 - Mini-Projet/src/index.html
Normal file
@ -0,0 +1,40 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="./common/style.css" />
|
||||
<script src="./common/script.js"></script>
|
||||
<title>Le titre de ma page web</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Une description de la page..." />
|
||||
<meta name="author" content="Nicolas AUNE" />
|
||||
<meta name="copyright" content="© CC BY-NC-SA 4.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<!-- Logo avec lien vers ma page d'acceil -->
|
||||
<a href="index.html">
|
||||
<img src="./assets/images/" />
|
||||
</a>
|
||||
<!-- navigation -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="prortfolio.html">Portfolio</a></li>
|
||||
<li><a href="a_propos.html">À propos</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="mainContainer">
|
||||
<p>
|
||||
<a href="./pages/solarsytstem.html">Test</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
17
15 - langage HTML/5 - Mini-Projet/src/pages/form.html
Normal file
17
15 - langage HTML/5 - Mini-Projet/src/pages/form.html
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="../common/styles.css" />
|
||||
<script src="../common/script.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>
|
||||
Todo: Formulaire de questions astronomiques
|
||||
|
||||
</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
16
15 - langage HTML/5 - Mini-Projet/src/pages/quizz.html
Normal file
16
15 - langage HTML/5 - Mini-Projet/src/pages/quizz.html
Normal file
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="../common/styles.css" />
|
||||
<script src="../common/script.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>
|
||||
Todo: Quiz interactif sur l'espace
|
||||
</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="../common/animation.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="cosmos-header">
|
||||
<h1>🌌 Système Solaire</h1>
|
||||
</header>
|
||||
<div class="planetContainer">
|
||||
<ol>
|
||||
<li class="sun"></li>
|
||||
<li class="mercury"></li>
|
||||
<li class="venus"></li>
|
||||
<li class="earth"></li>
|
||||
<li class="mars"></li>
|
||||
<li class="jupiter"></li>
|
||||
<li class="saturn"></li>
|
||||
<li class="uranus"></li>
|
||||
<li class="neptune"></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="planet-card">
|
||||
<img src="../assets/images/planets/mars.jpg" alt="Mars">
|
||||
<h3>Mars</h3>
|
||||
<ul>
|
||||
<li>Diamètre : 6 779 km</li>
|
||||
<li>Température : -63°C</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user