Textique/styles.css

396 lines
5.8 KiB
CSS

body {
display: flex;
flex-direction: column;
background-image: url("images/background.png");
background-size: cover;
align-items: center;
justify-content: center;
font-family: sans-serif, monospace;
}
*{
padding: 0px;
margin: 0px;
}
html {
height: auto;
width: auto;
}
div.container {
display: flex;
flex-direction: column;
box-sizing: content-box;
width: 100%;
height: auto;
margin: 0px;
justify-content: center;
align-items: center;
}
div {
margin: 20px;
}
/* ---------------- Container --------------- */
div.box {
display: flex;
flex-direction: column;
border-radius: 10px;
background-color: #236427;
width: 50%;
font-size: 100%;
height: auto;
padding: 20px;
background-color: rgba(56,156,62, 0.7);
align-items: center;
}
div.dual_box {
display: flex;
width: 100%;
height: auto;
margin: 10px;
overflow: hidden;
justify-content: space-evenly;
}
div.dual_box31 {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
margin: 10px;
overflow: hidden;
justify-content: space-evenly;
align-items: center;
}
img.dual_img {
width: 40%;
height: 100%;
}
img.img3 {
width: 50%;
height: 70%;
}
div.texti{
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: flex-start;
}
/* ----------- Barre de navigation ------------ */
.topnav {
display: flex;
flex-direction: row;
justify-content: space-evenly ;
align-items: center;
width: 100%;
background-color: #236427;
overflow: hidden;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
display: flex;
flex-direction: column;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* ----------- RESTE ------------ */
div {
margin: 20px;
}
div.box3 {
display: flex;
flex-direction: column;
border-radius: 10px;
background-color: rgba(56,156,62, 0.7);
width: 60%;
height: auto;
padding: 20px;
justify-content: space-evenly;
align-items: center;
}
/* Produits */
div.box2 {
display: flex;
flex-direction: column;
background-color: rgba(35,100,39, 0.5);
width: 1000px;
height: 900px;
padding: 20px;
justify-content: space-evenly;
align-items: center;
}
div.choix {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
div.s1 {
display: flex;
flex-direction: row;
background-color: rgba(56,156,62, 0.7);
width: 500px;
height: 150px;
padding: 20px;
justify-content: space-evenly;
align-items: center;
border-radius: 10px;
}
.l {
display: block;
color: white;
text-align: center;
text-decoration: none;
}
.pres {
width: 170px;
}
.pres2 {
height: 150px;
}
.imgvend {
height: 300px;
margin-left: 20px;
}
.imgvend2 {
width: 250px;
margin-left: 20px;
}
.vend {
width: 550px;
height: 350px;
display: flex;
flex-direction: row;
background-color: rgba(56,156,62, 0.7);
justify-content: space-evenly;
align-items: center;
border-radius: 10px;
}
.texte {
margin-left: 50px;
}
/*Qui sommes nous*/
div.s2 {
display: flex;
flex-direction: row;
background-color: rgba(56,156,62, 0.7);
width: 500px;
height: 150px;
padding: 20px;
justify-content: space-evenly;
align-items: center;
border-radius: 10px;
text-align:center;
}
div.s3 {
display: flex;
flex-direction: column;
background-color: rgba(56,156,62, 0.7);
width: 300px;
height: 450px;
padding: 20px;
justify-content: space-evenly;
align-items: center;
border-radius: 10px;
text-align:center;
}
.imgqsn {
height: 250px;
}
.acv {
text-decoration:none;
color: #ffffff;
}
/* ---------- FOOTER --------- */
.footer{
display: flex;
position: relative;
height: 25px;
justify-content: center;
justify-items: center;
background-color: #236427;
width: 100%;
}
/* ---------- Contact ----------- */
fieldset{
font-size: larger;
width: 500px;
border:transparent;
}
input {
width: 100%;
height: 20px;
background-color: #d2d6d9;
border-radius: 5px;
}
textarea.message{
height: 200px;
width: 100% ;
display: block;
background-color: #d2d6d9;
border-radius: 5px;
font-size: 15px;
resize: none;
}
input.send{
height: 25px;
width: 20%;
margin-left: 40%;
}
button.haut{
font-size: 200%;
text-align: center;
position: fixed;
width: 50px;
height: 50px;
border: transparent;
border-radius: 45px;
left: calc(100% - 55px);
bottom: 5px;
}
/* Tissu */
div.texte2 p{
margin-left: 30px;
}
div.texte2 {
display: block;
font-size: 100%;
background-color: rgba(56,156,62, 0.7);
border-radius: 10px;
}
div.texte2 ol.liste1{
list-style-type: "-";
}
div.texte2 ol li{
float:none;
margin-left: 10%;
}
div.texte2 img{
width: 15%;
display: block;
margin-left: auto;
margin-right: auto;
padding-right: 130px;
}
div.transfo img{
width: 40%;
}
div.textile img{
width: 30%;
}
div.texte2 ol{
list-style-type: upper-roman;
}
/*burger menu*/