Book_Style.css

/* ______________________________________________ HOME */



/*Font _______________________________________________________________________________________________________________________ */

@font-face{
	font-family: 'axis';
	src:url('Axis Extrabold.otf') format('truetype');
}




/* Background image ___________________________________________________________________________________________________________*/

body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}




html {
  scroll-behavior: smooth;
  background-color: rgb(10, 13, 22);
  color: white;
}



.bgimg {

	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url(imgs/fond.jpg)/*url(imgs/Fond.jpg)*/;
  /*background: linear-gradient(rgba(19,24,42, 0.9), rgba(10, 13, 22, 0.8));*/
  min-height: 100%;
  height: 100%;
	padding-top: 0;
  /*background-position: center center;*/
  background-repeat: repeat-x;
  background-attachment: inherit;
  background-size: contain;
  /*scroll-behavior: smooth;*/


}
.text {
	position: static;
  text-align: center;
  vertical-align: middle;
  font-family: axis;
}

/* Vertical bar menu ___________________________________________________________________________________________________________*/



.sidebar {
  height: 100%;
  width: 180px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: -185px;
  background-color: #0a0d16/*#14192c*/;
  overflow-x: hidden;
  padding-top: 16px;

}

/* Style sidebar links */
.sidebar a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: white/*#818181*/;
  display: block;
}

/* Style links on mouse-over */
.sidebar a:hover {
  color: #ff2370;/*#f1f1f1;*/
}

/* Style the main content */
.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  padding: 0px 10px;
}

/* Add media queries for small screens (when the height of the screen is less than 450px, add a smaller padding and font-size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}


/* Bouton menu animated ___________________________________________________________________________________________________________*/

.container {
  display: inline-block;
  cursor: pointer;
  position: fixed;
  z-index: 2;
  margin-left: 0px;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}




.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}


/* BOUTON ANIMATION MENU */

.move-left{
  animation-name: bouge_gauche;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
}

@keyframes bouge_gauche {
  from {left: 0px;}
  to {left: -185px}
}

.move-right{
  animation-name: bouge_droite;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
}

@keyframes bouge_droite {
  from {left: -185px;}
  to {left: 0px}
}

/* HOME presentation */

.presentation {
  display: table;
  position: absolute;

	top: 90px;
	right: 0;

  margin: 20px;

  max-width: 300px;
  /*padding: 30px;*/
  background: rgba(10, 13, 22, 0.8);
  height: 80%;
  max-height: 700px;
  width: auto;
  /*text-align: center;*/

}
.presentation:hover {
  background: rgba(10, 13, 22, 0.5);
  border: 2px solid #f20055;

}

.presentation > :first-child {
    display: table-cell;
    vertical-align: middle;
}






/* PRESENTATION A PROPOS DE MOI*/
.aproposdemoi {
  position: relative;



  max-width: 800px;
  padding: 16px;

  margin: auto;

  background: rgba(10, 13, 22, 0.8);
	border: 2px solid #f20055;
  height: auto;
  width: auto;

	transition: box-shadow 0.3s;



}
.aproposdemoi:hover {
  /*background: rgba(10, 13, 22, 0.5);
  background: rgba(242, 0, 85, 0.5);*/

	box-shadow: 0 0 11px rgba(242, 0, 85, 0.8);

}







/*A propos de moi presentation*/
.apropos {
	font-family: axis;
  position: absolute;
  right: 2;
  left: 2;
  /*top: 839px;*/
	bottom: 0px;
  margin: 0px;
  padding: 1px;
  width: 99%;
  color: #fff;

  border: 2px solid #f20055;
  background: rgba(242, 0, 85, 0.1);
  height: auto;
  text-align: center;


}
.apropos:hover {
  background: rgba(242, 0, 85, 0.5);
  border: 2px solid #f20055;

  cursor: pointer;
}

.apropos:active {
  background: rgba(242, 0, 85, 0.5);

}

.apropos2 {
	font-family: axis;
  position: absolute;
  right: 2;
  left: 2;
  top: 1890px;
  margin: 0px;
  padding: 1px;
  width: 99%;
  color: #fff;

  border: 2px solid #f20055;
  background: rgba(242, 0, 85, 0.1);
  height: auto;
  text-align: center;


}
.apropos2:hover {
  background: rgba(242, 0, 85, 0.5);
  border: 2px solid #f20055;

  cursor: pointer;
}

.apropos2:active {
  background: rgba(242, 0, 85, 0.5);

}








.about{
  margin-top: 1000px;
}

.crea{
  margin-top: 500px;
}




.ligne:after {
  content: "";
  display: table;
  clear: both;
}




/* MES CREATIONS TITRE */
.MesCreations {
  position: relative;
	font-family: axis;


  /*max-width: 1200px;*/
  padding: 16px;

  margin: auto;

  background: rgba(10, 13, 22, 0.8);
  height: auto;
  width: auto;
}


/* Graphique rond ____________________________________________________________________________________________*/









@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}
.circle-svg {
  display: block;
  margin: 10px auto;
  max-height: 100px;
	color: white;
}
.circle-svg text {
  text-align:center;
  color:white;
  font-size:10px
}
.circle-svg path.percent {
  stroke: #f20055;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}
.circle-svg path.around {
    stroke: #7a0f2b;
    fill: none;
    stroke-width: 1;
}



.CodeBox {
  position: relative;



  max-width: 800px;
  padding: 16px;

  margin: auto;

  background: rgba(10, 13, 22, 0.5);
  height: auto;
  width: auto;
}
.CodeBox:hover {
  background: rgba(10, 13, 22, 0.8);
  border: 2px solid #f20055;
}



.FondSimple {

	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url(imgs/fond.jpg)/*url(imgs/Fond.jpg)*/;

  /*background: linear-gradient(rgba(19,24,42, 0.9), rgba(10, 13, 22, 0.8));*/
  min-height: 150%;
  height: 150%;
	/*background-position: center center;*/
  background-repeat: no-repeat;
  background-attachment: inherit;
	background-size: contain;
  /*scroll-behavior: smooth;*/

}

.FondSimpleDessin {

	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url(imgs/fond.jpg)/*url(imgs/Fond.jpg)*/;

  /*background: linear-gradient(rgba(19,24,42, 0.9), rgba(10, 13, 22, 0.8));*/
  min-height: 150%;
  height: 150%;
	position: absolute;
	/*background-position: center center;*/
  background-repeat: no-repeat;
  background-attachment: inherit;
	background-size: contain;
  /*scroll-behavior: smooth;*/

}














/* COLONE 3D DESSIN CODE _______________________________________________________________________________________*/







.colone1 {
	font-family: axis;
  float: left;
  display: table;
  width: 33%;
  height: auto;

	transition: 0.3s;

  vertical-align: top;


  position: relative;
  background: rgba(10, 13, 22, 0.0);

}

.colone1:hover {
  background: rgba(10, 13, 22, 0.5);
  border: 2px solid #f20055;

	cursor: pointer;

	transform: translate(0, -10px);

}


@media screen and (max-width: 600px) {
  .colone1 {
    width: 100%;
  }
}




.lien:link {
  color: white;
}

.lien:hover {
  color: #f20055;
}

.lien:visited {
  color: #f20055;
}



.lien2:link {
  color: white;
}

.lien2:hover {
  color: #f20055;
}

.lien2:visited {
  color: #f20055;
}












/* ________________________________________________________________ 3D */

.presentation-3D {
  position: absolute;

	top: 10px;
	left: 5%;
	right: 5%;

	/*padding-left: 500px;
	padding-right: 500px;*/
	padding: 30px;


	border: 2px solid #f20055;
  /*max-width: 300px;*/

  background: rgba(10, 13, 22, 0.8);
  height: auto;
  max-height: 700px;
  width: auto;
  text-align: center;

}
.presentation-3D:hover {
  /*background: rgba(10, 13, 22, 0.5);
  border: 2px solid #f20055;*/
	box-shadow: 0 0 11px rgba(242, 0, 85, 0.5);
}






* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container2 {
	top: 10%;
	width: 80%;
  position: absolute;
	margin: 10%;

}

/* Hide the images by default */
.mySlides {

  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}











/* Partie Dessin _________________________________________________________________________________________________________*/


* {box-sizing: border-box;}

.img-comp-container {
  position: relative;
  height: 200px;
}

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow:hidden;
}

.img-comp-img img {
  display:block;
  vertical-align:middle;
	width: 425px;
}

.img-comp-slider {
  position: absolute;
  z-index:9;
  cursor: ew-resize;
  /*set the appearance of the slider:*/
  width: 30px;
  height: 30px;
  background-color: #f20055;
  opacity: 0.7;
  border-radius: 50%;
}

.Compareur {
	/*padding-top: 15%;
	padding-left: 35%;
	padding-right: 35%;
	position: static;*/

	margin-bottom: 60px;
}















.row_2 {
  margin: 350px -16px;
}

/* Add padding BETWEEN each column */
.row_2,
.row_2 > .column {
  padding: 8px;
}

/* Create four equal columns that floats next to each other */
.column_2 {
  float: left;
  width: 25%;
	padding-bottom: 150px;
}

/* Clear floats after rows */
.row_2:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: #222;
  padding: 10px;
}

@media screen and (max-width: 900px) {
  .column_2 {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column_2 {
    width: 100%;
  }
}