change to webtps

master
tuks 2 years ago
parent 0f9164529a
commit 1090635a03

@ -1,67 +1,89 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="UTF-8" />
<title>Languages de programmation</title> <title>LangProg</title>
<link href="styles.css" rel="stylesheet" /> <link href="styles/main.css" rel="stylesheet" type="text/css" />
<link href="styles/index.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>
<h1>Languages de programmation</h1>
<img class="imghead" src="img/ProgrammingLanguage1-1.jpg" alt="Images des nom de programmes" /> <div class="header">
<div class"main">
<article> <div class="title">
<h1>LangProg - Main</h1>
<img src="img/ProgrammingLanguage1-1.jpg" alt="ImgTitle" />
</div>
<nav>
<a href="./index.html">Menu Principal</a>
<a href="pages/galerie.html">Galerie</a>
<a href="pages/donnees.html">Données</a>
</nav>
</div>
<div class="main-content">
<section class="articles">
<h2>actualités des languages</h2> <h2>actualités des languages</h2>
<section>
<article>
<h3>Quelques données...</h3> <h3>Quelques données...</h3>
<p>Voici quelques données sur les différants languages de <p>Voici quelques données sur les différants languages de
programmation.</p> programmation.</p>
<a href="./pages/donnees.html">Voir les données...</a> <a href="./pages/donnees.html">Voir les données...</a>
</section> </article>
<section>
<article>
<h3>Le C</h3> <h3>Le C</h3>
<p>Le C est un language de programmation.</p> <p>Le C est un language de programmation.</p>
<a href="./pages/article1.html">Lire la suite...</a> <a href="./pages/article1.html">Lire la suite...</a>
</section> </article>
<section>
<article>
<h3>Le C++</h3> <h3>Le C++</h3>
<p>Le C++ est un language de programmation.</p> <p>Le C++ est un language de programmation.</p>
<a href="./pages/article2.html">Lire la suite...</a> <a href="./pages/article2.html">Lire la suite...</a>
</section> </article>
<section>
<article>
<h3>Le C#</h3> <h3>Le C#</h3>
<p>Le C# est un language de programmation.</p> <p>Le C# est un language de programmation.</p>
<a href="./pages/article3.html">Lire la suite...</a> <a href="./pages/article3.html">Lire la suite...</a>
</section> </article>
</article> </section>
</div>
<section class="actus">
<h2>Actualités du site</h2>
<article>
<h3>Initialisation du site</h3>
<p>08/09/2022: Création de la page d'acceuil, des 3 premiers articles,
et de la table.</p>
</article>
<article>
<h3>Ajouts des stylesheets</h3>
<p>15/09/2022: Ajouts de styles.css.</p>
</article>
</section>
<aside class="links"> <aside class="links">
<h3>Quelques liens externes..</h3> <h3>Quelques liens externes..</h3>
<ul> <ul>
<li><a href="https://fr.wikipedia.org/wiki/C_(langage)">C (Wiki)</a></li> <li><a href="https://fr.wikipedia.org/wiki/C_(langage)">C (Wiki)</a></li>
<li><a href="https://fr.wikipedia.org/wiki/C%2B%2B">C++ (Wiki)</a></li> <li><a href="https://fr.wikipedia.org/wiki/C%2B%2B">C++ (Wiki)</a></li>
<li><a href="https://fr.wikipedia.org/wiki/C_sharp">C# (Wiki)</a></li> <li><a href="https://fr.wikipedia.org/wiki/C_sharp">C# (Wiki)</a></li>
</ul> </ul>
</aside> </aside>
<div>
<article>
<h2>Actualités du site</h2>
<section>
<h3>Initialisation du site</h3>
<p>08/09/2022: Création de la page d'acceuil, des 3 premiers articles,
et de la table.</p>
</section>
<section>
<h3>Ajouts des stylesheets</h3>
<p>15/09/2022: Ajouts de styles.css.</p>
</section>
</article>
</div> </div>
<div>
</div>
<footer> <footer>
<p>Auteur: Alexandre Agostinho (TP1)</p> <p>Auteur: Alexandre Agostinho (TP1)</p>
<p><a href="mailto:alexandre.agostinho@etu.uca.fr">alexandre.agostinho@etu.uca.fr</a></p> <p><a href="mailto:alexandre.agostinho@etu.uca.fr">alexandre.agostinho@etu.uca.fr</a></p>
</footer> </footer>
</body> </body>
</html> </html>

@ -1,22 +0,0 @@
body {
background-color: #ebebeb;
margin-width: 80%;
}
h1 {
background-color: #c9832e;
color: white;
}
.imghead {
float: right;
width: 400px;
height: 250px;
}
.links {
height: 400px;
float: right;
border-width: 20%;
}

@ -0,0 +1,89 @@
body {
background-color: #ebebeb;
}
/* HEADER */
.header {
border-left: 6px solid cadetblue;
background-color: #ebebeb;
position: sticky;
top: 0px;
}
.header .title {
display: block;
}
.header h1 {
margin-left: 10px;
margin-bottom: 4px;
}
.header img {
position: absolute;
right: 0;
top: 0;
width: 124px;
}
.header nav {
background-color: cadetblue;
color: white;
}
.header nav a {
color: white;
margin-inline: 10px;
}
/* MAIN CONTENT */
.main-content {
border-left: 6px solid cadetblue;
}
.main-content section {
margin-left: 10px;
}
.main-content h2,h3 {
border-bottom: 6px solid cadetblue;
border-left: 6px solid darkgrey;
padding-bottom: 4px;
padding-left: 10px;
}
.main-content h2 {
background-color: cadetblue;
}
/* ASIDE */
.links {
background-color: #ebebebca;
border: 6px solid cadetblue;
display: block;
float: right;
position: fixed;
top: 400px;
right: 8px;
height: 400px;
}
/* FOOTER */
footer {
background-color: darkgray;
padding: 0;
margin: 0;
position: sticky;
bottom: 0px;
}
footer p {
display: inline-block;
text-align: right;
padding: 0;
margin: 0;
}
Loading…
Cancel
Save