diff --git a/frontend/src/assets/Designer (2).jpeg b/frontend/src/assets/Designer (2).jpeg new file mode 100644 index 0000000..3b83c0d Binary files /dev/null and b/frontend/src/assets/Designer (2).jpeg differ diff --git a/frontend/src/assets/Designer (3).jpeg b/frontend/src/assets/Designer (3).jpeg new file mode 100644 index 0000000..23d5017 Binary files /dev/null and b/frontend/src/assets/Designer (3).jpeg differ diff --git a/frontend/src/assets/Designer (4).jpeg b/frontend/src/assets/Designer (4).jpeg new file mode 100644 index 0000000..c94db5f Binary files /dev/null and b/frontend/src/assets/Designer (4).jpeg differ diff --git a/frontend/src/pages/Techniques/TechniqueDetailed.css b/frontend/src/pages/Techniques/TechniqueDetailed.css index d190361..835732d 100644 --- a/frontend/src/pages/Techniques/TechniqueDetailed.css +++ b/frontend/src/pages/Techniques/TechniqueDetailed.css @@ -1,12 +1,74 @@ -.technique-background { - margin: -32px; - padding: 32px; - +.technique-detailed-top::before { + content: ""; + + position: absolute; + inset: 0; + + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 0.45) 0%, + rgba(0, 0, 0, 0.20) 40%, + rgba(0, 0, 0, 0.10) 70%, +#001819 100% +); + + z-index: 0; +} + +.technique-detailed-top { + position: relative; + + display: grid; + grid-template-columns: 2fr 1fr; + gap: 24px; + + width: calc(100% + 168px); + + margin-top: -68px; + margin-left: -84px; + margin-right: -84px; + border-radius: 0 0 16px 16px; + background-image: url("../../assets/deltaworks-earth-7641871.jpg"); background-size: cover; - background-position: center; + + padding: 64px 69px; + + /* viser toppen av bildet */ + background-position: center top; + background-repeat: no-repeat; +} +.technique-detailed-top > * { +position: relative; +z-index: 1; +} + +/* Tablet */ +@media (max-width: 1200px) { + .technique-detailed-top { + margin-left: -20px; + margin-right: -20px; + + width: calc(100% + 40px); + + padding: 32px; + } +} + +/* Mobil */ +@media (max-width: 768px) { + .technique-detailed-top { + width: 100%; + + margin-left: 0; + margin-right: 0; + + padding: 24px; + + grid-template-columns: 1fr; + } } .technique-detailed-page { @@ -21,16 +83,6 @@ width: min(1400px, calc(100% - 64px)); } -.technique-detailed-top { - position: relative; - - display: grid; - grid-template-columns: 2fr 1fr; - gap: 24px; - - overflow: hidden; -} - .technique-detailed-tags { display: flex; gap: 12px; @@ -42,6 +94,7 @@ .technique-description { + margin-top: -24px; width: 100%; }