Skip to content
Snippets Groups Projects
Commit cdb0bbbc authored by MEHIAOUI Mohamed's avatar MEHIAOUI Mohamed
Browse files

Modification de l'html

parent 54a9377c
No related merge requests found
Hide whitespace changes
Inline Side-by-side
MEHIAOUI/app.css 0 → 100644
+ 68
− 0
View file @ cdb0bbbc
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Poppins', sans-serif;
background-color: white;
width:100vw;
height: 100vh;
header {
text-align: center;
background: radial-gradient(circle, rgba(255, 102, 128, 0.2) 30%, rgba(102, 204, 255, 0.2) 70%);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
.logo, .creators{
position: absolute;
font-size: 1.2rem;
font-weight: bold;
color: #6c63ff;
}
.logo{
top: 0;
left: 0;
}
.creators{
top: 0;
right: 5px;
}
.title {
font-size: 3rem;
font-weight: bold;
color: #003b66;
}
.subtitle {
font-size: 1.2rem;
color: #8b8eb2;
font-weight: 500;
}
}
/*div centre title*/
main{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.centre{
border: none;
width: 100%;
padding: 40px;
font-size: 20px;
font-weight: bold;
color: cadetblue;
text-align: center;
margin-bottom: 40px;
}
}
}
MEHIAOUI/index.html
+ 25
− 15
View file @ cdb0bbbc
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>TP 1</title> <title>TP 1</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico"> <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="app.css">
<style> <style>
body { margin: 0; } body { margin: 0; }
canvas { width: 100%; height: 100% } canvas { width: 100%; height: 100% }
...@@ -11,21 +12,30 @@ ...@@ -11,21 +12,30 @@
</style> </style>
</head> </head>
<body> <body>
<!-- API importe du site de Three.js --> <header>
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script> <h3 class="logo">OurProject</h3>
<script type="importmap"> <h3 class="creators">Merimi & Mehiaoui</h3>
{ <h1 class="title">THREE.JS Project</h1>
"imports": { <p class="subtitle">Découvrez notre petit projet en three.js !</p>
"three": "https://threejs.org/build/three.module.js", </header>
"three/addons/": "https://threejs.org/examples/jsm/" <main>
<!-- Un titre centre -->
<div id="webGL" class="centre">Juste un bol, des fruits, et des fleurs</div>
<!-- API importe du site de Three.js -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
} }
} </script>
</script> <!-- JQuery pour afficher les erreurs -->
<!-- JQuery pour afficher les erreurs --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Mon script avec un chemin relatif -->
<!-- Un titre centre --> <div class="scene"><script type="module" src="projet.js"></script></div>
<div id="webGL" class="centre">Juste un bol, des fruits, et des fleurs</div> </main>
<!-- Mon script avec un chemin relatif -->
<script type="module" src="projet.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
MEHIAOUI/projet.js
+ 2
− 2
View file @ cdb0bbbc
...@@ -273,8 +273,8 @@ function fillScene() { ...@@ -273,8 +273,8 @@ function fillScene() {
function init() { function init() {
// For grading the window is fixed in size; here's general code: // For grading the window is fixed in size; here's general code:
var canvasWidth = window.innerWidth; var canvasWidth = window.innerWidth/2;
var canvasHeight = window.innerHeight; var canvasHeight = window.innerHeight/2;
var canvasRatio = canvasWidth / canvasHeight; var canvasRatio = canvasWidth / canvasHeight;
// RENDERER // RENDERER
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment