mirror of
https://github.com/Cian-H/am-d-model.eu.git
synced 2025-12-23 05:51:57 +00:00
Separated landing page into multiple files
This commit is contained in:
84
src/LandingPage/BottomCall.scss
Normal file
84
src/LandingPage/BottomCall.scss
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
.btmcall {
|
||||||
|
background: #f7f7f7;
|
||||||
|
width: 100%;
|
||||||
|
height: 236px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btmcall-text {
|
||||||
|
color: var(--background, #090541);
|
||||||
|
text-align: left;
|
||||||
|
font-family: var(--title-font-family);
|
||||||
|
font-size: var(--title-font-size, 64px);
|
||||||
|
font-weight: var(--title-font-weight, 400);
|
||||||
|
position: absolute;
|
||||||
|
left: calc(50% - 675px);
|
||||||
|
top: 64px;
|
||||||
|
width: 874px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btmcall-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
position: absolute;
|
||||||
|
right: 80px;
|
||||||
|
top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btmcall-button1 {
|
||||||
|
background: var(--cpalettemedium);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px 32px 20px 32px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-shrink: 0;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: var(--button-shadow-box-shadow,
|
||||||
|
0px 1px 2px 0px rgba(0, 0, 0, 0.05));
|
||||||
|
}
|
||||||
|
|
||||||
|
.btmcall-button2 {
|
||||||
|
background: var(--cpalettecomplimentary, #ffffff);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px 32px 20px 32px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-shrink: 0;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: var(--button-shadow-box-shadow,
|
||||||
|
0px 1px 2px 0px rgba(0, 0, 0, 0.05));
|
||||||
|
}
|
||||||
|
|
||||||
|
.btmcall-get-involved {
|
||||||
|
color: var(--cpalettecomplimentary, #ffffff);
|
||||||
|
text-align: left;
|
||||||
|
font-family: var(--body-font-family, "Assistant", sans-serif);
|
||||||
|
font-size: var(--body-font-size, 24px);
|
||||||
|
font-weight: var(--body-font-weight, 400);
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btmcall-contact-us {
|
||||||
|
color: var(--background, #090541);
|
||||||
|
text-align: left;
|
||||||
|
font-family: var(--body-font-family, "Assistant", sans-serif);
|
||||||
|
font-size: var(--body-font-size, 24px);
|
||||||
|
font-weight: var(--body-font-weight, 400);
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
15
src/LandingPage/BottomCall.svelte
Normal file
15
src/LandingPage/BottomCall.svelte
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<script>
|
||||||
|
import "./BottomCall.scss";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="btmcall">
|
||||||
|
<div class="btmcall-buttons">
|
||||||
|
<div class="btmcall-button1">
|
||||||
|
<div class="btmcall-get-involved">Get Involved!</div>
|
||||||
|
</div>
|
||||||
|
<div class="btmcall-button2">
|
||||||
|
<div class="btmcall-contact-us">Contact Us</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btmcall-text">Interested in the project?</div>
|
||||||
|
</div>
|
||||||
90
src/LandingPage/InfoScroll.scss
Normal file
90
src/LandingPage/InfoScroll.scss
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
.infscr {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
padding-top: var(--infscr-vpad);
|
||||||
|
padding-bottom: var(--infscr-vpad);
|
||||||
|
padding-left: var(--infscr-hpad);
|
||||||
|
padding-right: var(--infscr-hpad);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--infscr-cardgap-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.infscr-title {
|
||||||
|
color: var(--cpalettelight);
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
font-family: var(--infscr-title-font-family);
|
||||||
|
font-size: var(--infscr-title-font-size);
|
||||||
|
font-weight: var(--infscr-title-font-weight);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infscr-subtitle {
|
||||||
|
color: var(--cpalettelight);
|
||||||
|
text-align: left;
|
||||||
|
font-family: var(--infscr-subtitle-font-family);
|
||||||
|
font-size: var(--infscr-subtitle-font-size);
|
||||||
|
font-weight: var(--infscr-subtitle-font-weight);
|
||||||
|
position: relative;
|
||||||
|
width: 515px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infscr-body {
|
||||||
|
color: var(--cpalettecomplimentary);
|
||||||
|
text-align: left;
|
||||||
|
font-family: var(--infscr-body-font-family);
|
||||||
|
font-size: var(--infscr-body-font-size);
|
||||||
|
font-weight: var(--infscr-body-font-weight);
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infscr-image {
|
||||||
|
border-radius: var(--infscr-corner-round);
|
||||||
|
width: var(--infscr-img-size);
|
||||||
|
height: var(--infscr-img-size);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infscr-row,
|
||||||
|
.infscr-row-reverse {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: var(--infscr-cardgap-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (orientation: landscape) {
|
||||||
|
.infscr-row {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infscr-row-reverse {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
.infscr-row {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infscr-row-reverse {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infscr-textcol {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--infscr-titlegap-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.infscr-subcol {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--infscr-textgap-size);
|
||||||
|
}
|
||||||
104
src/LandingPage/InfoScroll.svelte
Normal file
104
src/LandingPage/InfoScroll.svelte
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
<script>
|
||||||
|
import "./InfoScroll.scss";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="infscr">
|
||||||
|
<div class="infscr-row">
|
||||||
|
<div><img class="infscr-image" src="buildplate0.png" /></div>
|
||||||
|
<div class="infscr-textcol">
|
||||||
|
<div class="infscr-title">Experts in L-PBF</div>
|
||||||
|
<div class="infscr-subcol">
|
||||||
|
<div class="infscr-subtitle">Experienced Research Teams</div>
|
||||||
|
<div class="infscr-body">
|
||||||
|
Our collaboration is comprised of expert L-PBF researchers
|
||||||
|
with years of experience in the field.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="infscr-subcol">
|
||||||
|
<div class="infscr-subtitle">International Excellence</div>
|
||||||
|
<div class="infscr-body">
|
||||||
|
AM-D-Model contributors include scientists and engineers
|
||||||
|
from respected research institutions across Europe.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="infscr-subcol">
|
||||||
|
<div class="infscr-subtitle">
|
||||||
|
Backed by Research Associations
|
||||||
|
</div>
|
||||||
|
<div class="infscr-body">
|
||||||
|
AM-D-Model is supported and funded by ESAFORM, a globally
|
||||||
|
recognized association of research leaders in additive
|
||||||
|
manufacturing.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="infscr-row-reverse">
|
||||||
|
<div><img class="infscr-image" src="data0.png" /></div>
|
||||||
|
<div class="infscr-textcol">
|
||||||
|
<div class="infscr-title">Data Driven Research</div>
|
||||||
|
<div class="infscr-subcol">
|
||||||
|
<div class="infscr-subtitle">Building the Future of L-PBF</div>
|
||||||
|
<div class="infscr-body">
|
||||||
|
AM-D-Model aims to provide a key cornerstone for the future
|
||||||
|
of L-PBF research: a universal benchmark for process
|
||||||
|
modelling.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="infscr-subcol">
|
||||||
|
<div class="infscr-subtitle">
|
||||||
|
Community Focused Data Management
|
||||||
|
</div>
|
||||||
|
<div class="infscr-body">
|
||||||
|
We aim to provide a blueprint for future big data AM
|
||||||
|
projects, working with contributors to ensure this
|
||||||
|
benchmarking dataset is managed responsibly.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="infscr-subcol">
|
||||||
|
<div class="infscr-subtitle">
|
||||||
|
Data Science, as a Core Discipline
|
||||||
|
</div>
|
||||||
|
<div class="infscr-body">
|
||||||
|
Our team includes expert data scientists, responsible for
|
||||||
|
managing data contributions and maximizing data impact.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="infscr-row">
|
||||||
|
<div>
|
||||||
|
<img class="infscr-image" src="open-science-palettematched0.png" />
|
||||||
|
</div>
|
||||||
|
<div class="infscr-textcol">
|
||||||
|
<div class="infscr-title">Open Science</div>
|
||||||
|
<div class="infscr-subcol">
|
||||||
|
<div class="infscr-subtitle">FAIR, Transparent, and Open</div>
|
||||||
|
<div class="infscr-body">
|
||||||
|
The AM-D-Model benchmark project is designed with open
|
||||||
|
science in mind, following FAIR principles of transparency
|
||||||
|
and openness.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="infscr-subcol">
|
||||||
|
<div class="infscr-subtitle">
|
||||||
|
Visibility, Accessibility and Impact
|
||||||
|
</div>
|
||||||
|
<div class="infscr-body">
|
||||||
|
By making these results open, we believe that visibility and
|
||||||
|
accessibility will maximize their impact on the L-PBF field.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="infscr-subcol">
|
||||||
|
<div class="infscr-subtitle">
|
||||||
|
Serving the Research Community
|
||||||
|
</div>
|
||||||
|
<div class="infscr-body">
|
||||||
|
We aim to contribute to the L-PBF research community by
|
||||||
|
providing a universally accessible benchmark similar to
|
||||||
|
those driving other cutting-edge research fields.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
27
src/LandingPage/LandingPage.scss
Normal file
27
src/LandingPage/LandingPage.scss
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
.landing-page,
|
||||||
|
.landing-page * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing-page {
|
||||||
|
background: var(--background, #090541);
|
||||||
|
height: 3860px;
|
||||||
|
width: 100vw;
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing-zone {
|
||||||
|
position: relative;
|
||||||
|
background-image: url("background-f-000143-10.png");
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
@@ -1,622 +1,21 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import "./LandingPage.scss";
|
||||||
|
import NavigationHeader from "./NavigationHeader.svelte";
|
||||||
|
import Splash from "./Splash.svelte";
|
||||||
|
import InfoScroll from "./InfoScroll.svelte";
|
||||||
|
import BottomCall from "./BottomCall.svelte";
|
||||||
|
import NavigationFooter from "./NavigationFooter.svelte";
|
||||||
|
|
||||||
let className = "";
|
let className = "";
|
||||||
export { className as class };
|
export { className as class };
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={"landing-page " + className}>
|
<div class={"landing-page " + className}>
|
||||||
<div class="landing-zone">
|
<div class="landing-zone">
|
||||||
<div class="navigation-header">
|
<NavigationHeader />
|
||||||
<div class="navigation-header-items">
|
<Splash />
|
||||||
<div class="navigation-header-link">Data Repository</div>
|
|
||||||
<div class="navigation-header-link">How to Contribute</div>
|
|
||||||
<div class="navigation-header-button">
|
|
||||||
<div class="navigation-header-contact-us">Contact Us</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<InfoScroll />
|
||||||
|
<BottomCall />
|
||||||
|
<NavigationFooter />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="splash">
|
|
||||||
<div class="splash-copy">
|
|
||||||
<div class="splash-page-title">
|
|
||||||
<div class="splash-title">
|
|
||||||
Benchmarking the future of metal 3d printing
|
|
||||||
</div>
|
|
||||||
<div class="splash-body">
|
|
||||||
AM-D-Model is an ESAFORM benchmark project aiming to
|
|
||||||
create the data that will drive the future of Laser
|
|
||||||
Powder-Bed-Fusion (L-PBF) research and innovation. By
|
|
||||||
connecting an international network of collaborators
|
|
||||||
AM-D-Model will create a comprehensive, open L-PBF
|
|
||||||
benchmark dataset. As part of our commitment to open
|
|
||||||
science, this dataset will be openly shared with the
|
|
||||||
research community. Our goal is to create a universal
|
|
||||||
benchmark for the L-PBF community, sparking the
|
|
||||||
collaboration and innovation that will build the future
|
|
||||||
of this technology.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="splash-button">
|
|
||||||
<div class="splash-get-involved">Get Involved!</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="splash-bottom-blend"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="infscr">
|
|
||||||
<div class="infscr-row">
|
|
||||||
<div><img class="infscr-image" src="buildplate0.png" /></div>
|
|
||||||
<div class="infscr-textcol">
|
|
||||||
<div class="infscr-title">Experts in L-PBF</div>
|
|
||||||
<div class="infscr-subcol">
|
|
||||||
<div class="infscr-subtitle">
|
|
||||||
Experienced Research Teams
|
|
||||||
</div>
|
|
||||||
<div class="infscr-body">
|
|
||||||
Our collaboration is comprised of expert L-PBF
|
|
||||||
researchers with years of experience in the field.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="infscr-subcol">
|
|
||||||
<div class="infscr-subtitle">International Excellence</div>
|
|
||||||
<div class="infscr-body">
|
|
||||||
AM-D-Model contributors include scientists and engineers
|
|
||||||
from respected research institutions across Europe.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="infscr-subcol">
|
|
||||||
<div class="infscr-subtitle">
|
|
||||||
Backed by Research Associations
|
|
||||||
</div>
|
|
||||||
<div class="infscr-body">
|
|
||||||
AM-D-Model is supported and funded by ESAFORM, a
|
|
||||||
globally recognized association of research leaders in
|
|
||||||
additive manufacturing.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="infscr-row-reverse">
|
|
||||||
<div><img class="infscr-image" src="data0.png" /></div>
|
|
||||||
<div class="infscr-textcol">
|
|
||||||
<div class="infscr-title">Data Driven Research</div>
|
|
||||||
<div class="infscr-subcol">
|
|
||||||
<div class="infscr-subtitle">
|
|
||||||
Building the Future of L-PBF
|
|
||||||
</div>
|
|
||||||
<div class="infscr-body">
|
|
||||||
AM-D-Model aims to provide a key cornerstone for the
|
|
||||||
future of L-PBF research: a universal benchmark for
|
|
||||||
process modelling.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="infscr-subcol">
|
|
||||||
<div class="infscr-subtitle">
|
|
||||||
Community Focused Data Management
|
|
||||||
</div>
|
|
||||||
<div class="infscr-body">
|
|
||||||
We aim to provide a blueprint for future big data AM
|
|
||||||
projects, working with contributors to ensure this
|
|
||||||
benchmarking dataset is managed responsibly.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="infscr-subcol">
|
|
||||||
<div class="infscr-subtitle">
|
|
||||||
Data Science, as a Core Discipline
|
|
||||||
</div>
|
|
||||||
<div class="infscr-body">
|
|
||||||
Our team includes expert data scientists, responsible
|
|
||||||
for managing data contributions and maximizing data
|
|
||||||
impact.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="infscr-row">
|
|
||||||
<div>
|
|
||||||
<img
|
|
||||||
class="infscr-image"
|
|
||||||
src="open-science-palettematched0.png"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="infscr-textcol">
|
|
||||||
<div class="infscr-title">Open Science</div>
|
|
||||||
<div class="infscr-subcol">
|
|
||||||
<div class="infscr-subtitle">
|
|
||||||
FAIR, Transparent, and Open
|
|
||||||
</div>
|
|
||||||
<div class="infscr-body">
|
|
||||||
The AM-D-Model benchmark project is designed with open
|
|
||||||
science in mind, following FAIR principles of
|
|
||||||
transparency and openness.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="infscr-subcol">
|
|
||||||
<div class="infscr-subtitle">
|
|
||||||
Visibility, Accessibility and Impact
|
|
||||||
</div>
|
|
||||||
<div class="infscr-body">
|
|
||||||
By making these results open, we believe that visibility
|
|
||||||
and accessibility will maximize their impact on the
|
|
||||||
L-PBF field.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="infscr-subcol">
|
|
||||||
<div class="infscr-subtitle">
|
|
||||||
Serving the Research Community
|
|
||||||
</div>
|
|
||||||
<div class="infscr-body">
|
|
||||||
We aim to contribute to the L-PBF research community by
|
|
||||||
providing a universally accessible benchmark similar to
|
|
||||||
those driving other cutting-edge research fields.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="btmcall">
|
|
||||||
<div class="btmcall-buttons">
|
|
||||||
<div class="btmcall-button1">
|
|
||||||
<div class="btmcall-get-involved">Get Involved!</div>
|
|
||||||
</div>
|
|
||||||
<div class="btmcall-button2">
|
|
||||||
<div class="btmcall-contact-us">Contact Us</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="btmcall-text">Interested in the project?</div>
|
|
||||||
</div>
|
|
||||||
<div class="navigation-footer">
|
|
||||||
<div class="navigation-footer-items">
|
|
||||||
<div class="topic">Topic</div>
|
|
||||||
<div class="navigation-footer-link">Data Repository</div>
|
|
||||||
<div class="navigation-footer-link">How to Contribute</div>
|
|
||||||
<div class="navigation-footer-link">Contact Us</div>
|
|
||||||
</div>
|
|
||||||
<div class="navigation-footer-return">↥↥↥ Return to top ↥↥↥</div>
|
|
||||||
<div class="navigation-footer-site-name">AM-D-Model.eu</div>
|
|
||||||
<div class="navigation-footer-social-media">
|
|
||||||
<div class="navigation-footer-buttons-icon">
|
|
||||||
<img class="navigation-footer-social-icon" src="icon0.svg" />
|
|
||||||
</div>
|
|
||||||
<div class="navigation-footer-buttons-icon">
|
|
||||||
<img class="navigation-footer-social-icon" src="icon1.svg" />
|
|
||||||
</div>
|
|
||||||
<div class="navigation-footer-buttons-icon">
|
|
||||||
<img class="navigation-footer-social-icon" src="icon2.svg" />
|
|
||||||
</div>
|
|
||||||
<div class="navigation-footer-buttons-icon">
|
|
||||||
<img class="navigation-footer-social-icon" src="icon3.svg" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="navigation-footer-divider"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
// Landing page level classes
|
|
||||||
.landing-page,
|
|
||||||
.landing-page * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.landing-page {
|
|
||||||
background: var(--background, #090541);
|
|
||||||
height: 3860px;
|
|
||||||
width: 100vw;
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.landing-zone {
|
|
||||||
position: relative;
|
|
||||||
background-image: url("background-f-000143-10.png");
|
|
||||||
background-size: 100% auto;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
// Navigation Header classes
|
|
||||||
.navigation-header {
|
|
||||||
position: relative;
|
|
||||||
height: 116.03px;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.navigation-header-items {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: var(--spacing-m, 48px);
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
position: absolute;
|
|
||||||
right: 79.79px;
|
|
||||||
top: 28px;
|
|
||||||
}
|
|
||||||
.navigation-header-link {
|
|
||||||
color: var(--cpalettelight);
|
|
||||||
text-align: left;
|
|
||||||
font-family: var(--navigation-header-link-font-family);
|
|
||||||
font-size: var(--navigation-header-link-font-size);
|
|
||||||
font-weight: var(--navigation-header-link-font-weight);
|
|
||||||
text-decoration: underline;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.navigation-header-button {
|
|
||||||
background: var(--cpalettelight);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 14px 24px 14px 24px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
position: relative;
|
|
||||||
box-shadow: var(
|
|
||||||
--button-shadow-box-shadow,
|
|
||||||
0px 1px 2px 0px rgba(0, 0, 0, 0.05)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
.navigation-header-contact-us {
|
|
||||||
@extend .navigation-header-link;
|
|
||||||
color: var(--cpalettedark);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
// Splash area classes
|
|
||||||
.splash {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
top: 0px;
|
|
||||||
height: 680px;
|
|
||||||
}
|
|
||||||
.splash-page-title {
|
|
||||||
align-self: stretch;
|
|
||||||
flex-shrink: 0;
|
|
||||||
height: 492px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.splash-copy {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 40px;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: flex-start;
|
|
||||||
width: 892.53px;
|
|
||||||
height: 647.85px;
|
|
||||||
position: absolute;
|
|
||||||
left: 48.06px;
|
|
||||||
top: 227.77px;
|
|
||||||
}
|
|
||||||
.splash-title {
|
|
||||||
color: var(--cpalettecomplimentary);
|
|
||||||
text-align: left;
|
|
||||||
font-family: var(--splash-title-font-family);
|
|
||||||
font-size: var(--splash-title-font-size);
|
|
||||||
font-size: 64px;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
font-weight: var(--splash-title-font-weight);
|
|
||||||
font-weight: 700;
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 844px;
|
|
||||||
}
|
|
||||||
.splash-body {
|
|
||||||
color: var(--cpalettecomplimentary);
|
|
||||||
text-align: left;
|
|
||||||
font-family: var(--splash-body-font-family);
|
|
||||||
font-size: var(--splash-body-font-size);
|
|
||||||
font-weight: var(--splash-body-font-weight);
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
top: 258px;
|
|
||||||
width: 844px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.splash-button {
|
|
||||||
background: var(--background, #090541);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 20px 32px 20px 32px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
flex-shrink: 0;
|
|
||||||
position: relative;
|
|
||||||
box-shadow: var(
|
|
||||||
--button-shadow-box-shadow,
|
|
||||||
0px 1px 2px 0px rgba(0, 0, 0, 0.05)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
.splash-get-involved {
|
|
||||||
color: var(--cpalettelight);
|
|
||||||
text-align: left;
|
|
||||||
font-family: "Assistant-Bold", sans-serif;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.splash-bottom-blend {
|
|
||||||
background: var(--background, #090541);
|
|
||||||
width: 100%;
|
|
||||||
height: 33.31px;
|
|
||||||
top: 905.69px;
|
|
||||||
box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
||||||
}
|
|
||||||
// Info scroll area classes
|
|
||||||
.infscr {
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
padding-top: var(--infscr-vpad);
|
|
||||||
padding-bottom: var(--infscr-vpad);
|
|
||||||
padding-left: var(--infscr-hpad);
|
|
||||||
padding-right: var(--infscr-hpad);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--infscr-cardgap-size);
|
|
||||||
}
|
|
||||||
.infscr-title {
|
|
||||||
color: var(--cpalettelight);
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
font-family: var(--infscr-title-font-family);
|
|
||||||
font-size: var(--infscr-title-font-size);
|
|
||||||
font-weight: var(--infscr-title-font-weight);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.infscr-subtitle {
|
|
||||||
color: var(--cpalettelight);
|
|
||||||
text-align: left;
|
|
||||||
font-family: var(--infscr-subtitle-font-family);
|
|
||||||
font-size: var(--infscr-subtitle-font-size);
|
|
||||||
font-weight: var(--infscr-subtitle-font-weight);
|
|
||||||
position: relative;
|
|
||||||
width: 515px;
|
|
||||||
}
|
|
||||||
.infscr-body {
|
|
||||||
color: var(--cpalettecomplimentary);
|
|
||||||
text-align: left;
|
|
||||||
font-family: var(--infscr-body-font-family);
|
|
||||||
font-size: var(--infscr-body-font-size);
|
|
||||||
font-weight: var(--infscr-body-font-weight);
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.infscr-image {
|
|
||||||
border-radius: var(--infscr-corner-round);
|
|
||||||
width: var(--infscr-img-size);
|
|
||||||
height: var(--infscr-img-size);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.infscr-row,
|
|
||||||
.infscr-row-reverse {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
gap: var(--infscr-cardgap-size);
|
|
||||||
}
|
|
||||||
@media (orientation: landscape) {
|
|
||||||
.infscr-row {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
.infscr-row-reverse {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (orientation: portrait) {
|
|
||||||
.infscr-row {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.infscr-row-reverse {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.infscr-textcol {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--infscr-titlegap-size);
|
|
||||||
}
|
|
||||||
.infscr-subcol {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--infscr-textgap-size);
|
|
||||||
}
|
|
||||||
// Bottom call-to-action elements
|
|
||||||
.btmcall {
|
|
||||||
background: #f7f7f7;
|
|
||||||
width: 100%;
|
|
||||||
height: 236px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.btmcall-text {
|
|
||||||
color: var(--background, #090541);
|
|
||||||
text-align: left;
|
|
||||||
font-family: var(--title-font-family);
|
|
||||||
font-size: var(--title-font-size, 64px);
|
|
||||||
font-weight: var(--title-font-weight, 400);
|
|
||||||
position: absolute;
|
|
||||||
left: calc(50% - 675px);
|
|
||||||
top: 64px;
|
|
||||||
width: 874px;
|
|
||||||
}
|
|
||||||
.btmcall-buttons {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 24px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
position: absolute;
|
|
||||||
right: 80px;
|
|
||||||
top: 80px;
|
|
||||||
}
|
|
||||||
.btmcall-button1 {
|
|
||||||
background: var(--cpalettemedium);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 20px 32px 20px 32px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
flex-shrink: 0;
|
|
||||||
position: relative;
|
|
||||||
box-shadow: var(
|
|
||||||
--button-shadow-box-shadow,
|
|
||||||
0px 1px 2px 0px rgba(0, 0, 0, 0.05)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
.btmcall-button2 {
|
|
||||||
background: var(--cpalettecomplimentary, #ffffff);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 20px 32px 20px 32px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
flex-shrink: 0;
|
|
||||||
position: relative;
|
|
||||||
box-shadow: var(
|
|
||||||
--button-shadow-box-shadow,
|
|
||||||
0px 1px 2px 0px rgba(0, 0, 0, 0.05)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
.btmcall-get-involved {
|
|
||||||
color: var(--cpalettecomplimentary, #ffffff);
|
|
||||||
text-align: left;
|
|
||||||
font-family: var(--body-font-family, "Assistant", sans-serif);
|
|
||||||
font-size: var(--body-font-size, 24px);
|
|
||||||
font-weight: var(--body-font-weight, 400);
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.btmcall-contact-us {
|
|
||||||
color: var(--background, #090541);
|
|
||||||
text-align: left;
|
|
||||||
font-family: var(--body-font-family, "Assistant", sans-serif);
|
|
||||||
font-size: var(--body-font-size, 24px);
|
|
||||||
font-weight: var(--body-font-weight, 400);
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
// Navigation footer elements
|
|
||||||
.navigation-footer {
|
|
||||||
background: #ffffff;
|
|
||||||
height: 264px;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.navigation-footer-site-name {
|
|
||||||
color: #000000;
|
|
||||||
text-align: left;
|
|
||||||
font-family: var(--body-font-family, "Assistant-Regular", sans-serif);
|
|
||||||
font-size: var(--body-font-size, 24px);
|
|
||||||
font-weight: var(--body-font-weight, 400);
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.navigation-footer-items {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--navigation-footer-spacing);
|
|
||||||
align-items: flex-end;
|
|
||||||
justify-content: center;
|
|
||||||
width: 187px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.navigation-footer-topic {
|
|
||||||
color: #000000;
|
|
||||||
text-align: left;
|
|
||||||
font-family: "Assistant-Regular", sans-serif;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 400;
|
|
||||||
position: relative;
|
|
||||||
align-self: stretch;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.navigation-footer-link {
|
|
||||||
color: #454545;
|
|
||||||
text-align: left;
|
|
||||||
font-family: var(--body-font-family);
|
|
||||||
font-size: var(--body-font-size, 24px);
|
|
||||||
font-weight: var(--body-font-weight, 400);
|
|
||||||
position: relative;
|
|
||||||
align-self: stretch;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.navigation-footer-social-icon {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
position: relative;
|
|
||||||
left: 8px;
|
|
||||||
top: 8px;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
.navigation-footer-social-media {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: var(--spacing-xs, 8px);
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: flex-start;
|
|
||||||
position: relative;
|
|
||||||
left: 80px;
|
|
||||||
top: 176px;
|
|
||||||
}
|
|
||||||
.navigation-footer-buttons-icon {
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 8px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.navigation-footer-return {
|
|
||||||
color: rgba(69, 69, 69, 0.5);
|
|
||||||
text-align: left;
|
|
||||||
font-family: var(--small-text-font-family, "Inter-Medium", sans-serif);
|
|
||||||
font-size: var(--small-text-font-size, 16px);
|
|
||||||
line-height: var(--small-text-line-height, 150%);
|
|
||||||
font-weight: var(--small-text-font-weight, 500);
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.navigation-footer-divider {
|
|
||||||
margin-top: -1px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: #e6e6e6;
|
|
||||||
border-width: 1px 0 0 0;
|
|
||||||
width: 1280px;
|
|
||||||
height: 0px;
|
|
||||||
position: absolute;
|
|
||||||
left: 80px;
|
|
||||||
top: 1px;
|
|
||||||
transform-origin: 0 0;
|
|
||||||
transform: rotate(0deg) scale(1, 1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
110
src/LandingPage/NavigationFooter.scss
Normal file
110
src/LandingPage/NavigationFooter.scss
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
.navigation-footer {
|
||||||
|
background: #ffffff;
|
||||||
|
height: 264px;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-footer-site-name {
|
||||||
|
color: #000000;
|
||||||
|
text-align: left;
|
||||||
|
font-family: var(--body-font-family, "Assistant-Regular", sans-serif);
|
||||||
|
font-size: var(--body-font-size, 24px);
|
||||||
|
font-weight: var(--body-font-weight, 400);
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-footer-items {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--navigation-footer-spacing);
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
width: 187px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-footer-topic {
|
||||||
|
color: #000000;
|
||||||
|
text-align: left;
|
||||||
|
font-family: "Assistant-Regular", sans-serif;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 400;
|
||||||
|
position: relative;
|
||||||
|
align-self: stretch;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-footer-link {
|
||||||
|
color: #454545;
|
||||||
|
text-align: left;
|
||||||
|
font-family: var(--body-font-family);
|
||||||
|
font-size: var(--body-font-size, 24px);
|
||||||
|
font-weight: var(--body-font-weight, 400);
|
||||||
|
position: relative;
|
||||||
|
align-self: stretch;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-footer-social-icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
position: absolute;
|
||||||
|
left: 8px;
|
||||||
|
top: 8px;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-footer-social-icons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: var(--spacing-xs, 8px);
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
position: absolute;
|
||||||
|
left: 80px;
|
||||||
|
top: 176px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-footer-buttons-icon {
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-footer-return {
|
||||||
|
color: rgba(69, 69, 69, 0.5);
|
||||||
|
text-align: left;
|
||||||
|
font-family: var(--small-text-font-family, "Inter-Medium", sans-serif);
|
||||||
|
font-size: var(--small-text-font-size, 16px);
|
||||||
|
line-height: var(--small-text-line-height, 150%);
|
||||||
|
font-weight: var(--small-text-font-weight, 500);
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-footer-divider {
|
||||||
|
margin-top: -1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #e6e6e6;
|
||||||
|
border-width: 1px 0 0 0;
|
||||||
|
width: 1280px;
|
||||||
|
height: 0px;
|
||||||
|
position: absolute;
|
||||||
|
left: 80px;
|
||||||
|
top: 1px;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
transform: rotate(0deg) scale(1, 1);
|
||||||
|
}
|
||||||
29
src/LandingPage/NavigationFooter.svelte
Normal file
29
src/LandingPage/NavigationFooter.svelte
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
<script>
|
||||||
|
import "./NavigationFooter.scss";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="navigation-footer">
|
||||||
|
<div class="navigation-footer-items">
|
||||||
|
<div class="topic">Topic</div>
|
||||||
|
<div class="navigation-footer-link">Data Repository</div>
|
||||||
|
<div class="navigation-footer-link">How to Contribute</div>
|
||||||
|
<div class="navigation-footer-link">Contact Us</div>
|
||||||
|
</div>
|
||||||
|
<div class="navigation-footer-return">↥↥↥ Return to top ↥↥↥</div>
|
||||||
|
<div class="navigation-footer-site-name">AM-D-Model.eu</div>
|
||||||
|
<div class="navigation-footer-social-media">
|
||||||
|
<div class="navigation-footer-buttons-icon">
|
||||||
|
<img class="navigation-footer-social-icon" src="icon0.svg" />
|
||||||
|
</div>
|
||||||
|
<div class="navigation-footer-buttons-icon">
|
||||||
|
<img class="navigation-footer-social-icon" src="icon1.svg" />
|
||||||
|
</div>
|
||||||
|
<div class="navigation-footer-buttons-icon">
|
||||||
|
<img class="navigation-footer-social-icon" src="icon2.svg" />
|
||||||
|
</div>
|
||||||
|
<div class="navigation-footer-buttons-icon">
|
||||||
|
<img class="navigation-footer-social-icon" src="icon3.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navigation-footer-divider"></div>
|
||||||
|
</div>
|
||||||
51
src/LandingPage/NavigationHeader.scss
Normal file
51
src/LandingPage/NavigationHeader.scss
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
.navigation-header {
|
||||||
|
position: relative;
|
||||||
|
height: 116.03px;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-header-items {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: var(--spacing-m, 48px);
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
position: absolute;
|
||||||
|
right: 79.79px;
|
||||||
|
top: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-header-link {
|
||||||
|
color: var(--cpalettelight);
|
||||||
|
text-align: left;
|
||||||
|
font-family: var(--navigation-header-link-font-family);
|
||||||
|
font-size: var(--navigation-header-link-font-size);
|
||||||
|
font-weight: var(--navigation-header-link-font-weight);
|
||||||
|
text-decoration: underline;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-header-button {
|
||||||
|
background: var(--cpalettelight);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 14px 24px 14px 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: var(--button-shadow-box-shadow,
|
||||||
|
0px 1px 2px 0px rgba(0, 0, 0, 0.05));
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-header-contact-us {
|
||||||
|
@extend .navigation-header-link;
|
||||||
|
color: var(--cpalettedark);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
13
src/LandingPage/NavigationHeader.svelte
Normal file
13
src/LandingPage/NavigationHeader.svelte
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
import "./NavigationHeader.scss";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="navigation-header">
|
||||||
|
<div class="navigation-header-items">
|
||||||
|
<div class="navigation-header-link">Data Repository</div>
|
||||||
|
<div class="navigation-header-link">How to Contribute</div>
|
||||||
|
<div class="navigation-header-button">
|
||||||
|
<div class="navigation-header-contact-us">Contact Us</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
91
src/LandingPage/Splash.scss
Normal file
91
src/LandingPage/Splash.scss
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
.splash {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
top: 0px;
|
||||||
|
height: 680px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splash-page-title {
|
||||||
|
align-self: stretch;
|
||||||
|
flex-shrink: 0;
|
||||||
|
height: 492px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splash-copy {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 40px;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 892.53px;
|
||||||
|
height: 647.85px;
|
||||||
|
position: absolute;
|
||||||
|
left: 48.06px;
|
||||||
|
top: 227.77px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splash-title {
|
||||||
|
color: var(--cpalettecomplimentary);
|
||||||
|
text-align: left;
|
||||||
|
font-family: var(--splash-title-font-family);
|
||||||
|
font-size: var(--splash-title-font-size);
|
||||||
|
font-size: 64px;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
font-weight: var(--splash-title-font-weight);
|
||||||
|
font-weight: 700;
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
width: 844px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splash-body {
|
||||||
|
color: var(--cpalettecomplimentary);
|
||||||
|
text-align: left;
|
||||||
|
font-family: var(--splash-body-font-family);
|
||||||
|
font-size: var(--splash-body-font-size);
|
||||||
|
font-weight: var(--splash-body-font-weight);
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 258px;
|
||||||
|
width: 844px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splash-button {
|
||||||
|
background: var(--background, #090541);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px 32px 20px 32px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-shrink: 0;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: var(--button-shadow-box-shadow,
|
||||||
|
0px 1px 2px 0px rgba(0, 0, 0, 0.05));
|
||||||
|
}
|
||||||
|
|
||||||
|
.splash-get-involved {
|
||||||
|
color: var(--cpalettelight);
|
||||||
|
text-align: left;
|
||||||
|
font-family: "Assistant-Bold", sans-serif;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splash-bottom-blend {
|
||||||
|
background: var(--background, #090541);
|
||||||
|
width: 100%;
|
||||||
|
height: 33.31px;
|
||||||
|
top: 905.69px;
|
||||||
|
box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
28
src/LandingPage/Splash.svelte
Normal file
28
src/LandingPage/Splash.svelte
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
<script>
|
||||||
|
import "./Splash.scss";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="splash">
|
||||||
|
<div class="splash-copy">
|
||||||
|
<div class="splash-page-title">
|
||||||
|
<div class="splash-title">
|
||||||
|
Benchmarking the future of metal 3d printing
|
||||||
|
</div>
|
||||||
|
<div class="splash-body">
|
||||||
|
AM-D-Model is an ESAFORM benchmark project aiming to create the
|
||||||
|
data that will drive the future of Laser Powder-Bed-Fusion
|
||||||
|
(L-PBF) research and innovation. By connecting an international
|
||||||
|
network of collaborators AM-D-Model will create a comprehensive,
|
||||||
|
open L-PBF benchmark dataset. As part of our commitment to open
|
||||||
|
science, this dataset will be openly shared with the research
|
||||||
|
community. Our goal is to create a universal benchmark for the
|
||||||
|
L-PBF community, sparking the collaboration and innovation that
|
||||||
|
will build the future of this technology.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="splash-button">
|
||||||
|
<div class="splash-get-involved">Get Involved!</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="splash-bottom-blend"></div>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user