123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- @font-face
- {
- font-family: 'figli-ouidade';
- src: url('polices/figli-ouidade-webfont.eot');
- src: url('polices/figli-ouidade-webfont.eot') format('embedded-opentype'),
- url('polices/figli-ouidade-webfont.woff') format('woff'),
- url('polices/figli-ouidade-webfont.ttf') format('truetype'),
- url('polices/figli-ouidade-webfont.svg') format('svg');
- font-weight: normal;
- font-style: normal;
- }
- @font-face
- {
- font-family: 'droidsans';
- src: url('polices/droidsans-webfont.eot');
- src: url('polices/droidsans-webfont.eot') format('embedded-opentype'),
- url('polices/droidsans-webfont.woff') format('woff'),
- url('polices/droidsans-webfont.ttf') format('truetype'),
- url('polices/droidsans-webfont.svg') format('svg');
- font-weight: normal;
- font-style: normal;
- }
- body {
- display: flex;
- flex-direction: column;
- width: 80%;
- position: absolute;
- right: 0;
- background-image: url(images/fond.png);
- box-sizing: border-box;
- }
- header p {
- font-size: 0.8em;
- }
- header img {
- top: ;
- right:;
- margin: 20px;
- }
- header {
- display: flex;
- flex-direction: row;
- justify-content: center;
- font-family: figli-ouidade, sans-serif;
- margin-left: 50px;
- margin: 20px;
- margin-top: 40px;
- border-bottom: #e30613 solid 3px;
- padding-bottom: 20px;
- text-align: center;
- }
- header div {
- }
- h2 {
- color: #5b2d87;
- }
- .bonjour {
- display: flex;
- font-family: droidsans, sans-serif;
- position: relative;
- width: 18%;
- height: 100%;
- background-color: #5b2d87;
- border-radius: 20px;
- position: fixed;
- top: 0;
- left: 0;
- font-family: figli-ouidade;
- font-size: 8vw;
- writing-mode: vertical-lr;
- }
- /* exemple trouvé sur web pour font scaling based on container's width:
- div {
- width: 50%;
- border: 1px solid black;
- margin: 20px;
- font-size: 16px;
- /* 100 = viewport width, as 1vw = 1/100th of that
- So if the container is 50% of viewport (as here)
- then factor that into how you want it to size.
- Let's say you like 5vw if it were the whole width,
- then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
- font-size: 2.5vw;
- }
- */
- .bonjour p {
- position: relative;
- margin: auto;
- /* transform: rotateX(90deg); */
- }
- .contenu {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- margin-left: 50px;
- margin-top: 40px;
- padding: 40px;
- font-family: droidsans;
- box-shadow: 4px 4px 4px;
- }
- /*
- .contenu div {
- padding: 10px;
- flex-grow: 1;
- flex-shrink: 1;
- flex-basis: 0;
- }
- */
- .contenu section {
- flex: 1;
- padding: 20px;
- }
- section ul {
- list-style-image: url(images/O_signature_puce.png) ;
- }
- footer {
- margin: 40px;
- padding: 40px;
- }
- .contact {
- text-align: center;
- }
|