Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit bfe48f8c authored by peter_rabbit's avatar peter_rabbit
Browse files

feat: software-service section

parent 726c3ada
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/pages/software-development/software-development.js
+ 15
− 1
View file @ bfe48f8c
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
const { images_url } = require("../../../constants"); const { images_url } = require("../../../constants");
const WebPage = require("../../lib/web-page"); const WebPage = require("../../lib/web-page");
const ServiceSection = require("./components/service-section");
const SoftwareArticles = require("./components/software-articles"); const SoftwareArticles = require("./components/software-articles");
class SoftwareDevelopment extends WebPage { class SoftwareDevelopment extends WebPage {
...@@ -25,7 +26,7 @@ class SoftwareDevelopment extends WebPage { ...@@ -25,7 +26,7 @@ class SoftwareDevelopment extends WebPage {
{ {
tag: "img", tag: "img",
alt: `image mechanic electronic`, alt: `image mechanic electronic`,
src: `${images_url}/meca_proc.svg`, src: `${images_url}meca_proc.svg`,
}, },
], ],
}, },
...@@ -38,7 +39,20 @@ class SoftwareDevelopment extends WebPage { ...@@ -38,7 +39,20 @@ class SoftwareDevelopment extends WebPage {
}, },
], ],
}, },
{
tag: "h2",
id: "projects", //anchor
contents: "Nos projets",
class: "page-section-title",
},
new SoftwareArticles().render(), new SoftwareArticles().render(),
{
tag: "h2",
id: "service", //anchor
contents: "Prestation de services",
class: "page-section-title",
},
new ServiceSection().render(),
], ],
}; };
} }
......
src/pages/software-development/software-development.scss
+ 144
− 8
View file @ bfe48f8c
#software-page { #software-page {
.software-articles { .software-articles {
margin: 0 auto 50px;
article.software-article { article.software-article {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
margin: 30px 0; margin: 0 0 30px;
gap: 0 30px; gap: 0 30px;
background-color: $dark_2; background-color: $dark_2;
& > * { & > * {
...@@ -55,7 +56,7 @@ ...@@ -55,7 +56,7 @@
&:not(:first-child) { &:not(:first-child) {
border-top: 1px solid $medium_grey; border-top: 1px solid $medium_grey;
} }
padding: 10px 0; padding: 5px 0;
label { label {
font-weight: bold; font-weight: bold;
} }
...@@ -70,10 +71,6 @@ ...@@ -70,10 +71,6 @@
} }
} }
} }
@media screen and (max-width: $page_contents_center_width) {
margin: 30px 20px;
}
@media screen and (max-width: $screen_l) { @media screen and (max-width: $screen_l) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
.software-title { .software-title {
...@@ -89,9 +86,148 @@ ...@@ -89,9 +86,148 @@
} }
} }
article.placeholder { article.placeholder {
background-color: $light_0; display: flex;
height: 400px; flex-direction: column;
gap: 10px;
margin: 30px; margin: 30px;
* {
background-color: $light_0;
}
.title {
height: 60px;
}
.body {
height: 400px;
}
.details {
height: 200px;
}
}
}
#service-section {
h3 {
margin: 0 0 20px;
}
.skills {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
margin: 20px 0;
ul {
display: grid;
gap: 1px;
max-width: 100%;
li {
box-shadow: 0 0 2px $light_1;
}
&.skill-themes {
width: 600px;
grid-template-columns: repeat(3, 1fr);
@media screen and (max-width: $screen_s) {
grid-template-columns: 1fr 1fr;
width: 100%;
}
@media screen and (max-width: $screen_xs) {
grid-template-columns: 1fr;
}
background-color: $dark_2;
li {
font-weight: bold;
color: $light_0;
font-size: 18px;
@include flex-center;
padding: 10px;
text-align: center;
}
}
&.skill-stack {
width: 400px;
grid-template-columns: repeat(4, 1fr);
li {
@include flex-center-col;
position: relative;
padding: 10px;
strong {
visibility: hidden;
max-height: 0;
height: 70px;
padding: 0 20px;
transition: max-height 0.3s;
position: absolute;
@include flex-center;
}
img {
width: 100%;
}
@media screen and (min-width: $screen_m) {
&:hover {
strong {
visibility: visible;
max-height: 80px;
background-color: #fffc;
font-size: 18px;
}
}
}
@media screen and (max-width: $screen_m) {
strong {
visibility: visible;
position: relative;
max-height: unset;
height: unset;
padding: 0;
}
}
}
@media screen and (max-width: $screen_xs) {
grid-template-columns: repeat(3, 1fr);
}
}
}
}
.teaser {
background-image: url("/assets/images/wallpaper_binary.png");
padding: 40px 30px;
text-align: center;
font-size: 18px;
strong {
color: $light_0;
}
blue {
color: $blue_3;
}
}
.call-us {
* {
font-weight: bold;
}
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
gap: 10px 0;
margin: 40px 0;
h3 {
grid-column: 1 / span 2;
text-align: center;
}
a {
background-color: $dark_2;
font-size: 20px;
text-align: center;
padding: 20px;
}
@media screen and (max-width: $screen_m) {
@include flex-center-col;
gap: 0;
h3 {
margin: 0 0 10px;
}
a {
width: 100%;
}
}
} }
} }
} }
src/style.scss
+ 6
− 3
View file @ bfe48f8c
...@@ -340,9 +340,12 @@ main { ...@@ -340,9 +340,12 @@ main {
} }
} }
.page-contents-center { .page-contents-center {
width: $page_contents_center_width; @include page-contents-center;
max-width: 100%; }
margin: 0 auto; h2.page-section-title {
color: $blue_2;
padding: 20px 0 10px;
@include page-contents-center;
} }
@import "./homepage.scss"; @import "./homepage.scss";
@import "./pages/education/education.scss"; @import "./pages/education/education.scss";
......
src/template/components/navbar.js
+ 10
− 3
View file @ bfe48f8c
...@@ -4,7 +4,14 @@ const { images_url } = require("../../../constants"); ...@@ -4,7 +4,14 @@ const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [ const NAV_MENU_ITEMS = [
["/games/", "Jeux"], ["/games/", "Jeux"],
["/software-development/", "Software"], [
"/software-development/",
"Software",
[
["/software-development/#projects", "Nos Projets"],
["/software-development/#service", "Prestation de services"],
],
],
[ [
"/education/", "/education/",
"Pédagogie", "Pédagogie",
...@@ -49,13 +56,13 @@ class NavBar { ...@@ -49,13 +56,13 @@ class NavBar {
{ {
tag: "img", tag: "img",
alt: "Logo Kuadrado", alt: "Logo Kuadrado",
src: `${images_url}/logo_kuadrado.svg`, src: `${images_url}logo_kuadrado.svg`,
}, },
{ {
tag: "img", tag: "img",
alt: "Kuadrado Software", alt: "Kuadrado Software",
class: "logo-text", class: "logo-text",
src: `${images_url}/logo_kuadrado_txt.svg`, src: `${images_url}logo_kuadrado_txt.svg`,
}, },
], ],
}, },
......
src/template/template.js
+ 2
− 2
View file @ bfe48f8c
...@@ -42,13 +42,13 @@ class Template { ...@@ -42,13 +42,13 @@ class Template {
{ {
tag: "img", tag: "img",
alt: `logo Kuadrado`, alt: `logo Kuadrado`,
src: `${images_url}/logo_kuadrado.svg`, src: `${images_url}logo_kuadrado.svg`,
}, },
{ {
tag: "img", tag: "img",
class: "text-logo", class: "text-logo",
alt: "Kuadrado Software", alt: "Kuadrado Software",
src: `${images_url}/logo_kuadrado_txt.svg`, src: `${images_url}logo_kuadrado_txt.svg`,
}, },
], ],
}, },
......
src/theme.scss
+ 9
− 0
View file @ bfe48f8c
...@@ -40,3 +40,12 @@ $page_contents_center_width: 1300px; ...@@ -40,3 +40,12 @@ $page_contents_center_width: 1300px;
@include flex-center; @include flex-center;
flex-direction: column; flex-direction: column;
} }
@mixin page-contents-center {
width: $page_contents_center_width;
max-width: 100%;
margin: 0 auto;
@media screen and (max-width: $page_contents_center_width) {
padding: 20px 20px 0;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service