diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss
new file mode 100644
index 0000000..dbb5b08
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss
@@ -0,0 +1,128 @@
+
+#ressources{
+    background-color: #f6f7f3;
+
+
+    .layout-content{
+        // padding-top: 1rem;
+        .content_container{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            #block-quartiers-de-demain-titredepage{
+                margin-top: 1rem;
+                width: fit-content;
+                @media(max-width: 810px){
+                    margin-top: 14rem;
+                }
+                h1{
+                    text-transform: none;
+                    color: black;
+                    font-size: 2rem;
+                    font-family: "gilroy-medium"
+                }
+                
+                
+            }
+            .views-element-container{
+                margin-left: 15%;
+                width: 70%;
+                .group-content{
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: wrap;
+
+                    h3{
+                        &::before{
+                            content:"";
+                            display: block;
+                            border-bottom: solid 2px $blue_QDD;
+                            // width: 80% ;
+                            margin: auto;
+                        }
+                        text-align: center;
+                        // width: 100%;
+                        flex: 0 0 100%;
+                        div{
+                            .field_name{
+                                h2{
+                                    a{
+                                        font-family: "gilroy-light";
+                                        color: $blue_QDD;
+                                        font-size: 2rem;
+                                    }
+                                    
+                                }
+                            }
+                            .field_description{
+                                font-family: "gilroy-light";
+                            }
+                        }
+                        
+                    }
+                    .views-row{
+                        width: 30%;
+                        font-size: 0.5rem;
+                        h2{
+                            font-family: "gilroy-semibold";
+                            color: $blue_QDD;
+                            font-size: 00.6rem;
+                        } 
+                        p{
+                            font-size: 0.5rem;
+                        }  
+                        .field_field_mots_clefs{
+                            div{
+                                display: flex;
+                                flex-direction: row;
+                                div{
+                                    border: solid 1px $blue_QDD;
+                                    margin-right: 0.2rem;
+                                    padding: 1.3%;
+                                    padding-bottom: 0.2%;
+                                    padding-top: 0.2%;
+                                    font-size: 0.4rem;
+                                    font-family: "gilroy-semibold";
+                                    a{
+                                        color: $blue_QDD;
+                                    }
+                                }
+                            }
+
+                        }  
+                        .field_field_site{
+                            div {
+                                
+                                a {
+                                    position: relative;
+                                    padding-left: 20px; // Ajuster selon la taille de l'icône
+                        
+                                    &:before {
+                                        content: "";
+                                        position: absolute;
+                                        left: 0;
+                                        top: 50%;
+                                        transform: translateY(-50%);
+                                        width: 1em;
+                                        height: 1em;
+                                        background-image: url("../img/map_pointer.svg");
+                                        background-size: contain;
+                                        background-repeat: no-repeat;
+                                    }
+                                    
+                                    color: $red_QDD;
+                                    font-family: "gilroy-semibold";
+                                }
+                            }
+
+                        }               
+                    }
+
+                }
+                
+            }
+            
+        }
+    }
+}