renaud.beuret
/
Sae_1.06
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout de la partie interface du site

Browse Source
master
Flavien BOUHAMDANI 2 years ago
parent ebcbd3eae9
commit dd0a6fef9e
2 changed files with 281 additions and 28 deletions
Show Stats Download Patch File Download Diff File

184
Web/CSS/style.css
Unescape View File

@ -1,10 +1,174 @@
header{
background-image: linear-gradient(to left,lightgreen,sandybrown);
display: flex;
align-items: center;
justify-content: center;
}
.floatant {
float: left;
}
* {
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', sans-serif;
color: lightgrey;
text-shadow: 1px 2px 4px black;
}
body {
background-color: #35363a;
z-index: 0;
}
header {
background-color: #202124;
z-index: 100;
font-size: 18px;
}
header.sticky {
position: sticky;
top: 0;
}
footer {
background-color: #202124;
height: 75px;
margin-top: 25px;
padding-top: 29px;
}
ul li {
list-style: none;
}
ul li p {
font-size: 16px;
}
ul li a {
text-decoration: none;
}
.container {
width: 100%;
padding-left: 3%;
padding-right: 3%;
box-sizing: border-box;
overflow: hidden;
}
.navbar {
width: 100%;
display: flex;
margin-top: 5px;
height: 85px;
align-items: center;
}
#logo {
display: block;
width: 94px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 2px;
margin-bottom: 5px;
}
.titleLogo {
font-size: 20px;
text-align: center;
}
nav {
flex: 1;
text-align: right;
}
.navbar nav ul li {
list-style: none;
display: inline-block;
margin-right: 22px;
}
nav ul li a {
text-decoration: none;
font-size: 14px;
}
.borderButton {
border: 2px solid black;
padding: 8px;
background-color: black;
border-radius: 2px;
cursor: pointer;
transition: 0.2s;
text-decoration: none;
font-size: 12px;
}
.borderButton:hover {
border-color: #e4994a;
box-shadow: 0 0 6px #e4994f;
}
p .borderButton {
border-radius: 5px;
border: 2px solid #131415;
background-color: #131415;
}
.barSeperation {
border-bottom: 5px solid #e4994a;
height: 100%;
margin-left: -100%;
margin-right: -100%;
}
.firstCol {
margin-top: 20px;
width: 100%;
}
.firstCol h2 {
text-align: center;
font-size: 23px;
margin-bottom: 60px;
}
section {
background-color: #202124;
margin: 20px;
margin-left: 10%;
margin-right: 10%;
padding: 15px;
border-radius: 5px;
transition: 0.1s;
}
section:hover {
box-shadow: 0 0 3px #e4994f;
}
.firstCol h3 {
padding: 20px;
padding-bottom: 25px;
text-align: center;
font-size: 20px;
}
p {
font-size: 15px;
margin-left: 10%;
margin-right: 10%;
}
footer p {
font-size: 13px;
}
@media screen and (max-width: 800px) {
.titleLogo {
font-size: 15px;
}
.firstCol {
width: 100%;
}
}

125
Web/index.html
Unescape View File

@ -1,19 +1,108 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="CSS/style.css" rel="stylesheet">
<title>Pain au ChocoRTX</title>
</head>
<body>
<header>
<img class="floatant" src="Image/rtx4090.jpeg" width="200" >
<h1>Pain au ChocoRTX</h1>
</header>
<div>
<p>Les RTX 4090</p>
</div>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/icon.png">
<title>Présentation</title>
<link rel="stylesheet" type="text/CSS" href="CSS/style.css">
<script src="javascript/code.js"></script>
</head>
<body>
<header class="container sticky">
<div class="navbar">
<div>
<h1 class="titleLogo">Titre</h1>
<img src="images/Logo.png" id="logo">
</div>
<nav>
<ul>
<li><p><b>SOMMAIRE</b></p></li>
<li class="borderButton"><a href="#Article1">Article 1</a></li>
<li class="borderButton"><a href="#Article2">Article 2</a></li>
<li class="borderButton"><a href="#Article3">Article 3</a></li>
<li class="borderButton"><a href="#Article4">Article 4</a></li>
<li class="borderButton"><a href="#Article5">Article 5</a></li>
</ul>
</nav>
</div>
<div class="barSeperation "></div>
</header>
<div class="container">
<div class="firstCol">
<h2><u>Articles du dossier</u></h2>
<section>
<h3 id="Article1">Article 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet tincidunt neque, eget commodo neque. Duis id condimentum diam. Nam urna risus, accumsan eget aliquet egestas, tempus eget nisi. Donec a nulla sem. Nulla diam urna, accumsan sed luctus quis, rhoncus a odio. Donec vel magna ultrices, ultricies erat congue, molestie lectus. Quisque vel porttitor tellus, sit amet viverra tortor. Curabitur id nulla posuere, convallis nisl vitae, vulputate lacus. Nam congue massa et imperdiet egestas. Suspendisse cursus iaculis quam, non volutpat nunc tempor at. Cras quis dolor vestibulum, lacinia lorem vitae, finibus neque. Vestibulum ipsum ipsum, mattis eleifend turpis ac, commodo eleifend odio.
<br>
<br>
Phasellus congue leo sed lacus maximus, bibendum varius mi venenatis. Praesent sit amet erat quis ligula luctus viverra accumsan ut felis. Nullam elementum eget erat dictum ornare. Curabitur sodales arcu vel arcu maximus, at mollis risus tincidunt. Proin molestie mauris in lectus semper tempus. Etiam nulla est, gravida sed libero ac, egestas efficitur magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam gravida purus id gravida tincidunt. Ut nec felis vitae arcu egestas venenatis. Integer quam arcu, viverra eu lorem eu, egestas malesuada sem. Ut elit metus, dapibus vitae vulputate et, pharetra id magna. Quisque at ante varius, malesuada nisi et, blandit dui. Morbi lacinia eros vitae ligula posuere, in lobortis turpis ornare. Proin et orci nec odio faucibus mattis vel at est. Phasellus justo elit, elementum at felis consectetur, accumsan tempus lacus.
<br>
<br>
Sed tristique tempus eros id ornare. Nulla facilisi. Sed elementum, mi nec pellentesque vehicula, felis lacus aliquet tellus, vel finibus dui sem at turpis. Proin a semper nibh. Proin a nisi euismod, volutpat sapien id, pulvinar mi. Integer consequat diam ac ligula iaculis, non tincidunt velit volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus non suscipit est, nec viverra nunc. Duis feugiat rutrum eros et faucibus. Pellentesque urna lorem, porttitor sit amet arcu vitae, dignissim venenatis quam. Curabitur egestas, felis nec pharetra viverra, turpis lacus auctor nisl, eget euismod nibh quam vitae eros. Fusce velit nulla, laoreet vitae eleifend quis, mattis sit amet eros. Nullam ac ex pulvinar, tempus ligula nec, venenatis nisi. Phasellus eleifend nisi a auctor imperdiet. Aenean quis lorem eros.
</p>
</section>
<section>
<h3 id="Article2">Article 2</h3>
<p>
Duis tincidunt auctor nisl, in ullamcorper enim. Pellentesque vehicula lorem a urna dapibus elementum. Maecenas tincidunt sapien mi, ut aliquet urna lacinia quis. Sed ac aliquet orci. Morbi egestas libero rutrum turpis vulputate lobortis. Duis sit amet ipsum justo. Curabitur convallis sem semper fermentum dapibus. Fusce id convallis enim. Quisque vel tincidunt erat.
<br>
<br>
Sed id efficitur mi, et mattis ex. Mauris laoreet odio et tortor tristique, viverra aliquet magna pulvinar. Pellentesque sit amet magna id mauris lacinia tristique. Nullam dapibus, tortor eu tincidunt posuere, lacus enim dapibus elit, id rhoncus ligula metus non enim. Fusce sit amet iaculis ligula, in lobortis turpis. Cras dictum sed risus quis ullamcorper. Vestibulum eleifend, nunc ut congue imperdiet, lorem neque imperdiet odio, eget vehicula mi magna quis ex. Duis auctor sem eget nibh pellentesque tristique.
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet tincidunt neque, eget commodo neque. Duis id condimentum diam. Nam urna risus, accumsan eget aliquet egestas, tempus eget nisi. Donec a nulla sem. Nulla diam urna, accumsan sed luctus quis, rhoncus a odio. Donec vel magna ultrices, ultricies erat congue, molestie lectus. Quisque vel porttitor tellus, sit amet viverra tortor. Curabitur id nulla posuere, convallis nisl vitae, vulputate lacus. Nam congue massa et imperdiet egestas. Suspendisse cursus iaculis quam, non volutpat nunc tempor at. Cras quis dolor vestibulum, lacinia lorem vitae, finibus neque. Vestibulum ipsum ipsum, mattis eleifend turpis ac, commodo eleifend odio.
</p>
</section>
<section>
<h3 id="Article3">Article 3</h3>
<p>
Cras ut mollis enim. Integer non felis at eros porta blandit. Integer ut interdum lectus, vitae maximus mi. Fusce id neque nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Aliquam pharetra porta sem ut eleifend. Donec dui arcu, ultricies sed ornare a, congue vel magna.
<br>
<br>
Proin fermentum elementum lacus, vehicula ornare felis. Curabitur diam velit, cursus eu rhoncus at, luctus vitae tortor. Donec id dignissim turpis. Phasellus laoreet tincidunt massa, et hendrerit enim cursus quis. Praesent rutrum nulla urna, eu lacinia mauris mattis sed. Fusce imperdiet rhoncus suscipit. Morbi ac ullamcorper urna. Sed pretium dui quis tortor tristique, lobortis mattis neque rutrum. Vestibulum non erat aliquet, suscipit risus eu, mattis nisl. Mauris commodo nisi et rhoncus euismod. Nullam viverra magna molestie ex tincidunt accumsan. Maecenas et finibus nisl, non egestas augue.
<br>
<br>
Etiam bibendum ultricies ligula non pulvinar. Cras eget cursus arcu, vel pretium ex. Suspendisse neque risus, hendrerit nec lacus ut, molestie interdum elit. Fusce placerat pretium risus ac ultrices. Aliquam magna erat, bibendum in augue ac, bibendum vestibulum mauris. Proin blandit aliquam mauris a molestie. Cras varius ultricies elit, nec egestas diam lacinia at. Maecenas tortor lacus, pretium at est vel, elementum dapibus justo. Sed aliquam neque tellus, ac luctus diam varius eget. Proin ut nunc mi. Etiam sed facilisis sapien. Fusce in neque cursus, elementum elit in, finibus lorem. Nam dapibus lorem lectus, rhoncus feugiat ligula mollis et. Cras quis aliquam est, et finibus tellus. Sed tempor augue vel egestas efficitur. Curabitur in nisi placerat, iaculis sem a, ullamcorper lectus.
</p>
</section>
<section>
<h3 id="Article4">Article 4</h3>
<p>
Cras ut mollis enim. Integer non felis at eros porta blandit. Integer ut interdum lectus, vitae maximus mi. Fusce id neque nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Aliquam pharetra porta sem ut eleifend. Donec dui arcu, ultricies sed ornare a, congue vel magna.
<br>
<br>
Proin fermentum elementum lacus, vehicula ornare felis. Curabitur diam velit, cursus eu rhoncus at, luctus vitae tortor. Donec id dignissim turpis. Phasellus laoreet tincidunt massa, et hendrerit enim cursus quis. Praesent rutrum nulla urna, eu lacinia mauris mattis sed. Fusce imperdiet rhoncus suscipit. Morbi ac ullamcorper urna. Sed pretium dui quis tortor tristique, lobortis mattis neque rutrum. Vestibulum non erat aliquet, suscipit risus eu, mattis nisl. Mauris commodo nisi et rhoncus euismod. Nullam viverra magna molestie ex tincidunt accumsan. Maecenas et finibus nisl, non egestas augue.
<br>
<br>
Etiam bibendum ultricies ligula non pulvinar. Cras eget cursus arcu, vel pretium ex. Suspendisse neque risus, hendrerit nec lacus ut, molestie interdum elit. Fusce placerat pretium risus ac ultrices. Aliquam magna erat, bibendum in augue ac, bibendum vestibulum mauris. Proin blandit aliquam mauris a molestie. Cras varius ultricies elit, nec egestas diam lacinia at. Maecenas tortor lacus, pretium at est vel, elementum dapibus justo. Sed aliquam neque tellus, ac luctus diam varius eget. Proin ut nunc mi. Etiam sed facilisis sapien. Fusce in neque cursus, elementum elit in, finibus lorem. Nam dapibus lorem lectus, rhoncus feugiat ligula mollis et. Cras quis aliquam est, et finibus tellus. Sed tempor augue vel egestas efficitur. Curabitur in nisi placerat, iaculis sem a, ullamcorper lectus.
</p>
</section>
<section>
<h3 id="Article5">Article 5</h3>
<p>
Cras ut mollis enim. Integer non felis at eros porta blandit. Integer ut interdum lectus, vitae maximus mi. Fusce id neque nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Aliquam pharetra porta sem ut eleifend. Donec dui arcu, ultricies sed ornare a, congue vel magna.
<br>
<br>
Proin fermentum elementum lacus, vehicula ornare felis. Curabitur diam velit, cursus eu rhoncus at, luctus vitae tortor. Donec id dignissim turpis. Phasellus laoreet tincidunt massa, et hendrerit enim cursus quis. Praesent rutrum nulla urna, eu lacinia mauris mattis sed. Fusce imperdiet rhoncus suscipit. Morbi ac ullamcorper urna. Sed pretium dui quis tortor tristique, lobortis mattis neque rutrum. Vestibulum non erat aliquet, suscipit risus eu, mattis nisl. Mauris commodo nisi et rhoncus euismod. Nullam viverra magna molestie ex tincidunt accumsan. Maecenas et finibus nisl, non egestas augue.
<br>
<br>
Etiam bibendum ultricies ligula non pulvinar. Cras eget cursus arcu, vel pretium ex. Suspendisse neque risus, hendrerit nec lacus ut, molestie interdum elit. Fusce placerat pretium risus ac ultrices. Aliquam magna erat, bibendum in augue ac, bibendum vestibulum mauris. Proin blandit aliquam mauris a molestie. Cras varius ultricies elit, nec egestas diam lacinia at. Maecenas tortor lacus, pretium at est vel, elementum dapibus justo. Sed aliquam neque tellus, ac luctus diam varius eget. Proin ut nunc mi. Etiam sed facilisis sapien. Fusce in neque cursus, elementum elit in, finibus lorem. Nam dapibus lorem lectus, rhoncus feugiat ligula mollis et. Cras quis aliquam est, et finibus tellus. Sed tempor augue vel egestas efficitur. Curabitur in nisi placerat, iaculis sem a, ullamcorper lectus.
</p>
</section>
</div>
</div>
<footer class="container">
<p>BOUHAMDANI Flavien / FEREYROLLES Antoine / DEVOUASSOUX Nolan / BEURET Renaud - Groupe 2</p>
</footer>
</body>
</html>
Write Preview
Loading…
Cancel
Save