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

Modification de l'html

parent 54a9377c
Branches
No related tags found
No related merge requests found
*{
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;
}
}
}
...@@ -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
...@@ -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% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment