initial commit

2024-04-26 16:14:30 +02:00
commit 30faf7aa5e
9 changed files with 264 additions and 0 deletions
--- a/style.css
+++ b/style.css
@ -0,0 +1,186 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Cardo:wght@700&display=swap');
+*{
+    box-sizing: border-box;
+
+}
+
+body, html{
+    font-size: 16px;
+    font-family: 'Montserrat', sans-serif;
+    color: rgb(0, 0, 0, .87);
+    line-height: 1.6;
+    margin: 0;
+    font-weight: 500;
+
+
+}
+
+.topbar{
+    position: fixed;
+    background-color: #FFF;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    padding: 30px;
+    z-index: 3;
+    box-shadow: 0 4px 10px rgb(0, 0, 0, .05);
+
+}
+
+.topbar nav{
+    float: left;
+    
+}
+
+.topbar nav a{
+    color: #9f9f9f;
+    font-weight: 500;
+    padding: 0 53px;
+    line-height: 23px;
+}
+
+.topbar nav a:hover, .topbar nav a.active{
+    color: #000;
+}
+
+.social{
+    float: right;
+}
+
+.social a{
+    padding: 0 12px;
+    opacity: .5;
+}
+
+.social a:hover{
+    opacity: 1;
+}
+
+
+.banniere{
+    height: 427px;
+    background: no-repeat center center / cover url(img/header.jpg) ;
+}
+
+.main{
+    float: left;
+    width: 60%;
+    background: #FFF;
+    box-shadow: 0 4px 30px rgb(0, 0, 0, .05);
+    position: relative;
+    z-index: 2;
+    
+
+}
+
+.sidebar{
+    position: relative;
+    width: 40%;
+    float: right;
+    background: #ececee;
+    font-size: 17px;
+    padding: 40px;
+    z-index: 1;
+}
+
+.side-title{
+    font-size: 30px;
+    color: #000;
+    margin: 15px 0;
+}
+
+.side-title:first-child{
+    margin: 0;
+    margin-bottom: 30px;
+}
+
+.sidebar a{
+    color: #9F9F9F;
+    text-decoration: none;
+}
+
+.sidebar a:hover{
+    text-decoration: underline;
+}
+
+.sidebar ul{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.sidebar li{
+    padding: 6px 0;
+}
+
+.sidebar li:first-child{
+    padding-top:  0;
+}
+
+.sidebar li:last-child{
+    padding-bottom:  0;
+}
+
+.sidebar hr{
+    border: none ;
+    background: #C4C4C4;
+    height: 1px;
+    margin: 50px 0;
+}
+
+.container{
+    margin: 0 auto;;
+    max-width: 940px;
+}
+
+.article{
+    margin: 50px;
+    position: relative;
+    padding-left: 333px;
+    min-height: 203px;
+    
+}
+
+.article a{
+    color: inherit;
+    text-decoration: none;
+}
+
+.article a:hover{
+    text-decoration: underline;
+}
+
+.article-img{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 308px;
+    margin-right: 25px;
+}
+
+.article-img img{
+    width: 100%;
+    height: auto;
+}
+
+.date{
+    font-weight: 300px;
+    color: rgba(0, 0, 0, .6);
+    margin-bottom: 5px;
+}
+
+.titre-article{
+    font-size: 2.25rem;
+    line-height: 1.1;
+    font-family: 'Cardo', serif;
+    margin: 0 0 15px 0;
+
+}
+
+
+.footer{
+    clear: both;
+    text-align: center;
+}