... .. - . -. ... .. ..--- ----- ..--- ----- -....- ..--- ----- ..--- .----
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

474 lines
6.3 KiB

:root{
--hauteur-menu: 60px;
}
body
{
background-color: #DFD1D1;
}
*{
font-family: Montserrat, sans-serif;
}
a
{
text-decoration: none;
color: black;
}
nav {
width: 1040px;
font-size: 18px;
position: sticky;
top:0;
margin:0% 0% 0% 13%;/*50 200 0 400 */
z-index: 1;
background-color: rgba(0,0,0,0);
}
nav > ul {
display: flex;
text-align: center;
box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.3);
height: var(--hauteur-menu);
background-color: white;
}
nav ul {
list-style-type: none;
}
nav > ul > li {
background-color: white;
position: relative;
height: 10%;
flex: 1;
}
nav > ul > li > a {
position: absolute;
top: 500%;
left: 50%;
transform: translate(-50%, -50%);
}
.ho_menu {
padding:20px;
}
li a {
text-decoration: none;
color: black;
}
.menu-deroulant > a:after{
content: '❯';
font-size: 15px;
margin-left: 7px;
display: inline-block;
}
.sous-menu {
margin-top: var(--hauteur-menu);
width: 100%;
text-align: left;
background-color: white;
border-radius: 2px;
overflow: hidden;
max-height: 0;
}
.sous-menu > li > a {
height: 50px;
padding-left: 20px;
width: 100%;
align-items: center;
display: flex;
}
nav > ul > li:hover > a{
color: #2169EC;
}
.sous-menu > li:hover {
background-color: rgba(33, 105, 236, 0.3);
}
.sous-menu > li:hover > a {
color: white;
}
@keyframes rotationFleche {
0% {
transform: rotate(0deg);
}
100%{
transform: rotate(90deg);
}
}
.menu-deroulant:hover > a:after{
animation: rotationFleche 0.2s linear forwards;
}
@keyframes apparitionSousMenu {
0% {
box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
border-top: 3px solid #2169EC;
}
30% {
box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
}
100% {
max-height: 50em;
border-top: 3px solid #2169EC;
box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
}
}
.menu-deroulant:hover > .sous-menu {
animation: apparitionSousMenu 1s forwards;
}
.aligne
{
display: flex;
justify-content: center;
position: relative;
margin: 0% 0% 0% 13%;
background-color: rgba(0,0,0,0);
}
.article
{
width:1040px;
box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.3);
background-color: white;
}
.article h1
{
margin-top: 80px;
margin-bottom: 80px;
text-align: center;
}
.article img
{
box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.3);
margin-left: 300px;
margin-top: 20px;
margin-bottom: 30px;
height: 300px;
width: 450px;
}
.article h2
{
margin-top: 40px;
margin-left: 40px;
}
.article p
{
margin-left: 40px;
}
.partie
{
margin-left: 40px;
width:300px;
height: 400px;
position: -webkit-sticky;
position: sticky;
top: var(--hauteur-menu);
box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.3);
background-color: white;
}
/*###############Python##################*/
#img_python
{
width: 220px;
height: 200px;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
margin-left: 400px;
}
@keyframes grandissement_python
{
from
{
width: 220px;
height: 200px;
margin-left: 400px;
}
to
{
width: 300px;
height: 250px;
margin-left: 360px;
}
}
#img_python:hover
{
animation: grandissement_python 2s infinite alternate;
}
#script
{
width: 800px;
margin: 0 auto;
background-color: #1c2833;
border-radius: 10px;
margin-bottom: 50px;
}
#navigation {
width: 300px;
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
margin-top: 20px;
background: white ;
color: #fff ;
margin-bottom: 1px ;
}
#navigation li a {
margin-left: 15px;
margin-right: 5px;
font-size: 25px;
display: block ;
color: black ;
line-height: 1em ;
text-decoration: none ;
padding: 4px 0 ;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
color: #2169EC;
}
/*############### C ##################*/
#c_img
{
width: 180px;
height: 250px;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
margin-left: 420px;
}
@keyframes grandissement_c
{
from
{
width: 180px;
height: 250px;
margin-left: 420px;
}
to
{
width: 300px;
height: 370px;
margin-left: 360px;
}
}
#c_img:hover
{
animation: grandissement_c 2s infinite alternate;
}
#compilC
{
width: 500px;
height: 300px;
margin-left: 220px;
}
/*############### C++ ##################*/
#cc
{
width: 180px;
height: 250px;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
margin-left: 420px;
}
@keyframes grandissement_cc
{
from
{
width: 180px;
height: 250px;
margin-left: 420px;
}
to
{
width: 300px;
height: 370px;
margin-left: 360px;
}
}
#cc:hover
{
animation: grandissement_cc 2s infinite alternate;
}
#compilCC
{
width: 500px;
height: 300px;
margin-left: 220px;
}
/*############### base rpi ##################*/
#rpi_histoire
{
width: 400px;
height: 300px;
}
#framboise
{
width: 200px;
height: 250px;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
margin-left: 420px;
margin-top: -100px;
}
@keyframes grandissement_framboise
{
from
{
width: 200px;
height: 250px;
margin-left: 420px;
}
to
{
width: 300px;
height: 370px;
margin-left: 360px;
}
}
#framboise:hover
{
animation: grandissement_framboise 2s infinite alternate;
}
/*############### nfc rpi ##################*/
.tableau-style {
border-collapse: collapse;
min-width: 400px;
width: auto;
box-shadow: 0 5px 50px rgba(0,0,0,0.15);
cursor: pointer;
margin: 100px auto;
border: 2px solid midnightblue;
/* border: 1px solid #ddd; */
}
thead tr {
background-color: midnightblue;
color: #fff;
text-align: left;
}
th, td {
padding: 15px 20px;
}
tbody tr, td, th {
border: 1px solid #ddd;
}
tbody tr:nth-child(even){
background-color: #f3f3f3;
}
#feprogramme
{
width: 300px;
height: 550px;
margin-left: 350px;
}
/*############### os rpi ##################*/
#sudo
{
height: 350px;
width: 550px;
margin-left: 250px;
}
#user_password
{
height: 350px;
width: 600px;
margin-left: 250px;
}
#mkdir
{
height: 350px;
width: 600px;
margin-left: 250px;
}
#racourci
{
height: 50px;
width: 700px;
margin-left: 150px;
}
#cmd_python
{
height: 350px;
width: 600px;
margin-left: 200px;
}
/*############### interpreteur ##################*/
.Interpreteur
{
width: 80%;
height: 356px;
margin-left: 100px;
margin-top: 30px;
margin-bottom: 30px;
}