3. bouwen - Jesse-L3/Lifely-AI-Sprint-interactive-en-responsive-website GitHub Wiki
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lifely AI getting started</title>
<link rel="icon" href="assets/logos/Favicon/Favicon_homerun _red.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap"> -->
</head>
<body>
<span class="main-line"></span>
<nav>
<div class="browseNav">
<img src="assets/logos/Dark/[email protected]" alt="Logo-Lifely">
<span><a href="https://lifely.nl/en/">home/</a></span>
<span><a href="https://lifely.nl/en/solutions/">Solutions/</a></span>
<span><a href="Getting Started with Artificial Intelligence">Getting Started with Artificial Intelligence</a></span>
</div>
<div>
<span>
<a href="https://lifely.nl/en/solutions/getting-started-with-artificial-intelligence/tel:020%20846%2019%2005">Call us <b>020 846 19 05</b></a>
</span>
<span>
<a href="https://lifely.nl/en/contact/">contact</a>
</span>
<span>
<a class="menu">menu</a>
</span>
</div>
</nav>
<!-- Nav menu -->
<article>
<div>
<h2>Services</h2>
<ul>
<li><a href="https://lifely.nl/en/services/agile-product-teams/">Agile Product Teams</a></li>
<li><a href="https://lifely.nl/en/services/agile-product-teams/design-and-development-expertise/">and Development Expertise</a></li>
<li><a href="https://lifely.nl/en/services/agile-product-teams/managed-services/">Managed Services</a></li>
<li><a href="https://lifely.nl/en/services/agile-product-teams/cloud-devops/">Cloud and DevOps</a></li>
<li><a href="https://lifely.nl/en/services/artificial-intelligence/">Artificial Intelligence</a></li>
<li><a href="https://lifely.nl/en/services/artificial-intelligence/machine-learning/">Machine Learning</a></li>
<li><a href="https://lifely.nl/en/services/artificial-intelligence/ai-driven-digital-transformation/">AI-driven Digital Transformation</a></li>
<li><a href="https://lifely.nl/en/services/strategic-development/">Strategic Development</a></li>
<li><a href="https://lifely.nl/en/services/strategic-development/product-strategy/">Product Strategy</a></li>
<li><a href="https://lifely.nl/en/services/strategic-development/digital-strategy/">Digital Strategy</a></li>
</ul>
</div>
<div>
<h2>Solutions</h2>
<ul>
<li><a href="https://lifely.nl/en/solutions/">For experts</a></li>
<li><a href="https://lifely.nl/en/solutions/software-as-a-service/">Software as a Service</a></li>
<li><a href="https://lifely.nl/en/solutions/cross-platform-mobile-web-and-desktop-apps/">Cross-Platform Apps</a></li>
<li><a href="https://lifely.nl/en/solutions/ai-in-production-mlops/">AI in production</a></li>
<li><a href="https://lifely.nl/en/solutions/software-rebuild/">Software Rebuild</a></li>
<li><a href="https://lifely.nl/en/solutions/common-ground/">Common Ground Software</a></li>
<li><a href="">For a fresh perspective</a></li>
<li><a href="https://lifely.nl/en/solutions/getting-started-with-artificial-intelligence/">Getting Started with Artificial Intelligence</a></li>
<li><a href="https://lifely.nl/en/solutions/robotic-process-automation-rpa/">Robotic Process Automation</a></li>
<li><a href="https://lifely.nl/en/solutions/google-design-sprint/">Google Design Sprint</a></li>
</ul>
</div>
<div>
<h2>About our company</h2>
<ul>
<li><a href="https://lifely.nl/en/">Home</a></li>
<li><a href="https://lifely.nl/en/cases/">Cases</a></li>
<li><a href="https://lifely.nl/en/culture/">Culture</a></li>
<li><a href="https://lifely.nl/en/people/">People</a></li>
<li><a href="https://lifely.nl/en/knowledge/">Knowledge</a></li>
<li><a href="https://jobs.lifely.nl/">Jobs</a></li>
<li><a href="https://lifely.nl/en/contact/">Contact</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="https://nl.linkedin.com/company/lifely">linkedin</a></li>
<li><a href="https://www.instagram.com/lifelynl/">instagram</a></li>
</ul>
</div>
</article>
<main>
<!-- getting startded -->
<section class="starting">
<div class="starting-primary">
<h1><span>Getting </span> <span>Started </span> <span>with </span> <span>Artificial </span> <span>Intelligence </span></h1>
<h2>
Start reaping the actual benefits of AI. Not tomorrow, but today.
</h2>
<p>
Have you been wondering about how you can apply AI in your
organisation? With our AI Design Sprint, we can help you discover
how machine learning will change and automate your business
processes, and how your employees could work with it, in just two
weeks.
</p>
</div>
<div class="starting-secondary">
<img src="assets/images/DSF9030.jpg" width="80%" alt="starting-image">
<a id="Schedule-button">Schedule a free AI consultation</a>
<a>Discover Lifely’s AI services →</a>
</div>
</section>
<!-- schedule -->
<section class="schedule">
<h2>Read more about AI</h2>
<div class="schedule-content">
<div class="schedule-primary">
<span>Call us <a>020 846 19 05</a></span><br>
<span>Mail our expert <a>[email protected]</a></span>
<p>
Let's explore your goals, and figure out if we can help you achieve
them
</p>
<img src="../assets/images/DSCF2183.jpg" alt="schedule-image" width="80%">
</div>
<div class="schedule-secondary">
<form action="/en/solutions/getting-started-with-artificial-intelligence/#wpcf7-f1016-o1" method="post" aria-label="Contact form" novalidate="novalidate" data-status="init">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="1016">
<input type="hidden" name="_wpcf7_version" value="5.8.1">
<input type="hidden" name="_wpcf7_locale" value="en_US">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1016-o1">
<input type="hidden" name="_wpcf7_container_post" value="0">
<input type="hidden" name="_wpcf7_posted_data_hash" value="">
<input type="hidden" name="_wpcf7_recaptcha_response" value="03AFcWeA5Gc9DSQc51c83LuM8DHUe8IOh8FqGgD2jEJTjPFj5BjIYn9tkcBNr7U3iypuirs_WWaCbXjK4jKkGOvfddqnDZpb3gfCApEU1zvZlcvcUhCmLs8WuC6gCIBuf51pC7-N8LU2cr0-MUyai-bzjFFdq0ZZIRZTWw2ldxJuEqgl4Bh5X9ZdatY_eEn2J42n5m65m2M25cjc2us9Jok-RIDDGrX9NSrLJRyNq6K-WqBZns02tugG1MwuDiOrBfOvbEvFQJtxoh68u5OgygkRPhBahEAUGJzmGD4QNEN2CNUY-ZxbgJUxgBYQWlrYAEb0hhR7EHFgbPSzHmm827c6htKyHIc7fMZnN4ykp__Qg_Noz9IWyYlsA-dZgC5YFqmN98stOdhNrJgW62jIWWBmIGlZetDQh4iWsa43D6IGMFwxyq-IQzNacGvIfl0yq5yIBwHK-fvK-STr9AolmnyrRZSl92HESP-03IBw5CL9H1z8Jxcbg-c2LNNd09wxDA1czHTUNaeaELLJYCqWOufUQXi7uDuMkzifUEe5JSZkPKSUNCPgI-V9I">
</div>
<!-- Calendly inline widget begin -->
<div data-url="https://calendly.com/lifely-ai/consultation?hide_event_type_details=1&hide_gdpr_banner=1&text_color=3c3b34&primary_color=ff6b6b" style="position: relative;min-width:320px;height:630px;" data-processed="true"><iframe src="https://calendly.com/lifely-ai/consultation?embed_domain=lifely.nl&embed_type=Inline&hide_event_type_details=1&hide_gdpr_banner=1&text_color=3c3b34&primary_color=ff6b6b" width="100%" height="100%" frameborder="0" title="Select a Date & Time - Calendly"></iframe></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async=""></script>
<!-- Calendly inline widget end -->
</form>
</div>
</div>
</section>
<!-- Dictionary/quote -->
<section>
<h2>AI Design Sprint /eɪ-aɪ dɪˈzaɪn sprɪnt/</h2>
<p>
An AI Design Sprint is a time-constrained process executed by an
interdisciplinary team. The process focuses on proving the practical
applicability of artificial intelligence models within an
organisation. The result is a prototype that automates parts of a
business process, including a reflection on how a business will be
able to work with AI in the future.
</p>
</section>
<!-- steps -->
<section>
<h2>What are the steps of the AI Design Sprint?</h2>
<ol>
<li>
<span>Step 1 </span>
<h3>We research your process</h3>
<h4>Context is key.</h4>
<p>
We bring together your team to get your current process on paper.
When we know the goals and output of your process we can
effectively validate if we have successfully supported or replaced
parts with AI solutions.
</p>
<hr>
</li>
<li>
<span>Step 2 </span>
<h3>We give you the knowledge to become future-proof</h3>
<h4>Setting the stage.</h4>
<p>
We invite experts to educate your team on what AI is, what its use
cases are, how it will develop in the future, and how it will
affect your industry and business.
</p>
<hr>
</li>
<li>
<span>Step 3 </span>
<h3>We zoom in on what's important</h3>
<h4>Getting to the core.</h4>
<p>
To make sure we have a solid prototype, we have to create focus.
With your team, we decide which parts of your process will have
the biggest impact on efficiency and on cost savings.
</p>
<hr>
</li>
<li>
<span>Step 4 </span>
<h3>We create a prototype</h3>
<h4>Augmenting your process.</h4>
<p>
Good preparation results in good execution. With the insights of
all the previous steps, we leverage AI models and create a
prototype that automates or enhances parts of your business
processes.
</p>
<hr>
</li>
<li>
<span>Step 5 </span>
<h3>And we make sure it works</h3>
<h4>Solve for good.</h4>
<p>
We bring back your team to test the prototype and see if it’s
helpful and practical in real-world scenarios. In the end, you’ll
receive the actual prototype (be it an API or script), and advice
on whether or not your organisation is ready to embrace AI.
</p>
<hr>
</li>
</ol>
</section>
<!-- cases -->
<section>
<h2>We've done this before</h2>
<article>
<div>
<span>Ruler AI case study </span>
<h3>Allowing law experts to focus on their expertise.</h3>
<a href="https://lifely.nl/en/cases/ruler-ai/">Learn more about this case →</a>
</div>
<div>
<span>TopTaal case study </span>
<h3>Predicting chances of success.</h3>
<a href="https://lifely.nl/en/cases/toptaal/">Learn more about this case →</a>
</div>
</article>
</section>
<!-- content and related -->
<section>
<div>
<h2>Read more about AI</h2>
<h3>Robotic Process Automation</h3>
<a href="https://lifely.nl/en/solutions/robotic-process-automation-rpa/">readmore →</a>
<h3>AI-driven Digital Transformation</h3>
<a href="https://lifely.nl/en/services/artificial-intelligence/ai-driven-digital-transformation/">readmore →</a>
</div>
<div>
<h2>How we can help</h2>
<h3>Solution we help you build.</h3>
<a>Solutions</a>
</div>
</section>
</main>
<!-- footer -->
<footer>
<section>
<div>
<img src="assets/logos/Grey/[email protected]" alt="footer-logo">
<ul>
<li><span><a>Work</a></span></li>
<li><span><a>Culture</a></span></li>
<li><span><a>People</a></span></li>
<li><span><a>Knowledge</a></span></li>
<li><span><a>Jobs</a></span></li>
<li><span><a>Contact</a></span></li>
</ul>
</div>
</section>
<section>
<div>
<h2>Services</h2>
<!--checkpoint -->
<ul>
<li><span><a>Agile Product Teams</a></span></li>
<li><span><a>Artificial Intelligence</a></span></li>
<li><span><a>Strategic Development</a></span></li>
</ul>
</div>
</section>
<section>
<div>
<h2>Solutions</h2>
<ul>
<li><span><a>Software as a Service</a></span></li>
<li><span><a>Cross-Platform Apps</a></span></li>
<li><span><a>Software Rebuild</a></span></li>
<li><span><a>Common Ground Software</a></span></li>
<li><span><a>Getting started with AI</a></span></li>
<li><span><a>Robotic Process Automation</a></span></li>
<li><span><a>Google Design Sprint</a></span></li>
<li><span><a>AI in production</a></span></li>
</ul>
</div>
</section>
<hr>
<section>
<h2>Solve for good</h2>
<h3>Innovation that is long-lasting and worthwhile.</h3>
<p>
[solve] We are warm hearted problem solvers. [for good] We’re here to
help until you can help yourself. [good] The company we keep, and the
code we operate by, are good.
</p>
</section>
<section class="end-footer">
<p>Lifely Studio, Prinsengracht 197D Amsterdam</p>
<p>Visit us from 09:00 till 17:00, or call us at 020 846 19 05</p>
<a href="https://lifely.nl/en/privacy-policy/">Privacy & cookies</a>
</section>
</footer>
<script src="scripts/script.js"></script>
</body>
</html>huis styling: hier stop ik alle kleuren en fonts die ik heb mee gekregen van lifely. Ook heb ik een paar vaste ruimte waardes aangemaakt voor een aantal elementen
/* mobile first */
:root {
--grey--99: #3c3b34;
--grey--70: #9b9a92;
--grey--50: #c6c5bd;
--grey--20: #eaeae6;
--Background--grey: #f6f6f4;
--Accent--red: #ff6b6b;
--standard--line-height: 1.5;
--spacing--sections: 2.5em 0 2.5em 0;
--spacing--top: 2.5em 0 0 0;
--spacing--bottom: 0 0 2.5em 0;
--spacing--sides: 1em 4.5em;
--background--padding: 1.5em;
}
@font-face {
font-family: "Aktiv-Lt";
src: url(../assets/fonts/AktivGrotesk_Lt.ttf);
}
@font-face {
font-family: "Aktiv-Rg";
src: url(../assets/fonts/AktivGrotesk_Rg.ttf);
}
@font-face {
font-family: "Aktiv-Md";
src: url(../assets/fonts/AktivGrotesk_Md.ttf);
}
@font-face {
font-family: "Aktiv-Bd";
src: url(../assets/fonts/AktivGrotesk_Bd.ttf);
}
@font-face {
font-family: "playfair-RG";
src: url(../assets/fonts/PlayfairDisplay-R.ttf);
}dit zijn overige vaste waardes. wanneer bijvoorbeeld h4 niet appart word aangepast binnen een bepaalde section bijvoorbeeld, krijgt hij dus standaard een font size van 0.9em
/* general styling*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Aktiv-Rg", sans-serif;
line-height: var(--standard--line-height);
position: relative;
}
.hide-scroll {
overflow: hidden;
}
h1 {
font-size: 1.5em;
transform: scale(0.94);
animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
h1 span {
font-size: 1.5em;
font-family: "playfair-RG", serif;
color: var(--grey--50);
display: inline-block;
opacity: 0;
filter: blur(4px);
}
h2 {
font-size: 1.2em;
}
h3 {
font-size: 1em;
}
h4 {
font-size: 0.9em;
}
p {
font-size: 0.8em;
}
span {
font-size: 0.8em;
}
a {
color: var(--Accent--red);
text-decoration: none;
font-size: 0.8em;
}
li {
list-style-type: none;
}
span li a {
color: var(--grey--20);
}
section {
margin: var(--spacing--sections);
}Hier is mijn hele styling van mobile first heb in het begin ook met comment tags aangegeven waar de mobile styling begint. Belangrijke kenmerk is dat de main en footer een beetje padding hebben voor een vaste wit ruimte en een max width hebben van 30 em met dit laat ik zien dat de mobile versie niet breeder is dan 30 em want bij deze breedte begint ook de eerste breakpoint. Ook geef ik veel onderdelen zoals de section een display flex + flex direction collumn om alles onder elkaar te zetten. (soms heb ik block als uitzondering)
/* begin styling mobile */
/* navigation */
nav {
display: flex;
justify-content: space-around;
align-items: center;
background-color: var(--Accent--red);
z-index: 20;
position: fixed;
width: 100%;
height: 3em;
border-bottom: solid var(--grey--99);
}
nav img {
width: 34px;
height: 20px;
margin: auto;
margin-right: 1em;
}
nav a {
color: var(--grey--20);
cursor: pointer;
}
nav div {
display: flex;
max-width: 100%;
}
nav span {
display: inline-block;
}
nav div:nth-child(1) {
overflow: hidden;
white-space: nowrap;
padding: 0 0 0 1em;
}
nav div:nth-child(1) span:nth-child(4) {
display: block;
text-overflow: ellipsis;
overflow: hidden;
}
nav div:nth-child(2) {
gap: 0.5em;
white-space: nowrap;
margin: 0 0 0 1em;
padding: 0 1em 0 0;
}
nav div:nth-child(2) span a[href="https://lifely.nl/en/contact/"]{
background-color: var(--Background--grey);
color: var(--grey--99);
border: var(--grey--99) solid;
padding: 0.4em 0.6em;
font-weight: bold;
}
body > article {
background-color: var(--grey--99);
position: fixed;
z-index: 2;
width: 100%;
height: 100%;
margin: var(--spacing--top);
transform: translateX(-100%);
transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
padding: 1em;
overflow: scroll;
}
.show-menu {
transform: translateX(0%);
}
body > article h2 {
color: var(--Background--grey);
}
body > article div {
display: flex;
flex-direction: column;
gap: 1em;
margin: var(--spacing--bottom);
}
body > article ul li a {
color: var(--grey--20);
transition: 0.2s;
}
body > article ul li a:hover::after {
content: " →";
color: var(--Accent--red);
}
body > article div:last-child ul {
color: var(--grey--20);
display: flex;
}
body > article div:last-child ul li:last-child {
padding-left: 1em;
}
/* main */
main,
footer {
padding: 1em;
max-width: 30em;
margin: 0 auto;
}
/* deze lijn zit aan de zeikant van de pagina */
.main-line {
position: absolute;
top: 0;
left: 10px;
z-index: 10;
height: 100%;
border-left: 1px solid hsla(53, 7%, 76%, 0.5);
}
/* hero section */
.starting {
background-color: white;
position: relative;
margin: var(--spacing--top);
z-index: 1;
}
.starting-primary {
margin: var(--spacing--bottom);
}
.starting-primary h1 {
margin-bottom: 1.2em;
}
.starting-secondary {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.2em;
}
#Schedule-button {
font-family: "Aktiv-Bd", serif;
background-color: var(--Accent--red);
border-radius: 5px;
padding: 1em 2.5em;
text-align: center;
animation-name: knipper-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
cursor: pointer;
color: var(--Background--grey);
}
/* einde 1ste section */
/* begin 2de section schdule */
.schedule {
color: var(--grey--50);
margin: 0 0 2.5em 0;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
opacity: 1;
transform: translateY(-1600px);
transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
position: absolute;
z-index: 0;
padding: 0;
}
.schedule-primary img {
display: none;
}
.schedule h2 {
font-family: "playfair-RG", serif;
}
.schedule span,
.schedule p {
color: var(--grey--99);
}
.show-schdule {
transform: translateY(0px);
position: relative;
animation-name: planning;
animation-duration: 0.5s;
animation-delay: 0.5s;
}
.schedule p {
word-wrap: break-word;
width: 15em;
margin: auto;
}
/* main section:nth-child(2){
opacity: 0;
} */
.schedule-primary {
text-align: center;
}
.schedule-secondary {
text-align: center;
}
form {
margin: auto;
scale: 1;
}
/* einde 2de section */
/* begin 3de section Dictionary/quote */
main section:nth-child(3) {
display: flex;
flex-direction: column;
background-color: var(--grey--20);
padding: var(--background--padding);
gap: 1.2em;
align-items: center;
}
/* einde 3de section */
/* begin 4de section steps*/
main section:nth-child(4) {
display: flex;
flex-wrap: wrap;
}
main section:nth-child(4) h2 {
font-family: "playfair-RG", serif;
color: var(--grey--50);
}
.active {
color: var(--Accent--red);
}
main section:nth-child(4) ol li span {
font-size: 1.2em;
text-align: center;
width: 100%;
}
main section:nth-child(4) h3 {
text-align: center;
}
main section:nth-child(4) h4 {
text-align: center;
}
main section:nth-child(4) ol li {
margin: 1em 0;
}
main section:nth-child(4) ol::before {
position: sticky;
top: 30%;
content: "";
display: block;
float: left;
width: 1px;
height: 100px;
margin: -20px 0 20px;
padding: 20px 0;
box-sizing: content-box;
transform: translate(-6px, 40px);
background-image: linear-gradient(
180deg,
hsla(0, 0%, 100%, 0),
#3c3b34 9.38%,
#3c3b34 86.46%,
hsla(0, 0%, 100%, 0)
);
transition: height 0.1s ease-out;
}
/* einde 4de section */
/* begin 5de section cases */
main section:nth-child(5) {
overflow: hidden;
}
main section:nth-child(5) article {
display: flex;
gap: 1em;
flex-direction: column;
}
main section:nth-child(5) h2 {
font-family: "playfair-RG", serif;
color: var(--grey--50);
text-align: center;
}
main section:nth-child(5) h3 {
z-index: 1;
color: var(--Background--grey);
word-break: break-word;
width: 10em;
}
main section:nth-child(5) a {
z-index: 1;
}
main section:nth-child(5) span {
font-size: 1.2em;
z-index: 1;
color: var(--Background--grey);
text-shadow: 0.2px 0.2px 0 #ff6b6b;
}
main section:nth-child(5) div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
main section:nth-child(5) div:first-child {
position: relative;
display: flex;
flex-direction: column;
z-index: 1;
background-image: url("../assets/images/DSF8566.jpg");
background-size: cover;
font-family: "Aktiv-Bd", sans-serif;
justify-content: space-evenly;
height: 300px;
padding: var(--spacing--sides);
}
main section:nth-child(5) div:last-child::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
main section:nth-child(5) div:last-child {
position: relative;
display: flex;
flex-direction: column;
z-index: 1;
background-image: url("../assets/images/DSF8997.jpg");
background-size: cover;
font-family: "Aktiv-Bd", sans-serif;
justify-content: space-evenly;
height: 300px;
padding: var(--spacing--sides);
}
/* einde section 5 */
/* begin 6de section contact en related */
main section:nth-child(6) {
background-color: var(--grey--20);
margin: 0;
}
main section:nth-child(6) h2 {
font-family: "playfair-RG", serif;
color: var(--grey--70);
}
main section:nth-child(6) div {
padding: var(--background--padding);
}
main section:nth-child(6) div:last-child {
background-color: var(--Accent--red);
padding: var(--background--padding);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5em;
}
main section:nth-child(6) div:last-child h2 {
color: var(--grey--20);
}
main section:nth-child(6) div:last-child a {
background-color: var(--grey--20);
border: solid var(--grey--99);
color: var(--grey--99);
padding: 1em 2em;
font-family: "Aktiv-Bd";
}
/* einde 6de section */
/* end main */
/* footer */
footer {
background-color: var(--grey--99);
color: var(--grey--20);
padding-top: 2.5em;
}
footer li span a {
color: var(--grey--20);
}
.end-footer {
margin: var(--spacing--top);
}andere formaten: aan de media queries kan je zien wanneer de styling layout veranderd
/* bigger formats */
@media (min-width: 30em) {
main,
footer {
padding: 1em;
max-width: 100%;
padding: var(--spacing--sides);
}
.starting-secondary {
padding: var(--spacing--bottom);
}
main section:nth-child(4) {
display: flex;
flex-direction: column;
align-content: center;
}
main section:nth-child(4) h2 {
font-family: "playfair-RG", serif;
color: var(--grey--50);
text-align: center;
}
section:nth-child(4) p {
word-wrap: break-word;
width: 30em;
}
main section:nth-child(5) div:first-child {
width: 100%;
}
main section:nth-child(5) div:last-child {
width: 100%;
}
main section:nth-child(5) article {
display: flex;
width: 100%;
}
main section:nth-child(6) {
display: flex;
}
main section:nth-child(6) div {
width: 50%;
}
}
@media (min-width: 50em) {
body > article {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
justify-content: space-evenly;
align-items: center;
overflow: hidden;
padding: var(--spacing--top);
}
body > article div:nth-child(1) {
grid-area: 1 / 1 / 2 / 2;
}
body > article div:nth-child(2) {
grid-area: 1 / 2 / 2 / 3;
}
body > article div:nth-child(3) {
grid-area: 1 / 3 / 2 / 4;
}
body > article div:nth-child(4) {
grid-area: 2 / 2 / 3 / 3;
}
body > article div ul {
text-align: center;
}
body > article div ul li {
padding-bottom: 0.2em;
}
body > article div ul li a {
font-size: 1em;
}
body > article h2 {
text-align: center;
font-size: 1.5em;
}
body > article div:last-child ul {
color: var(--grey--20);
display: flex;
flex-direction: column;
align-items: center;
}
body > article div:last-child ul li:last-child {
padding: 0;
}
main,
footer {
padding: 2.5em 4.5em;
}
.starting {
display: flex;
flex-direction: row;
}
.starting-primary {
width: 50%;
}
.starting-secondary {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.starting-secondary img {
width: 70%;
}
.schedule {
display: flex;
flex-direction: column;
}
.schedule-content {
display: flex;
width: 100%;
}
.schedule-primary {
display: block;
width: 50%;
margin: auto;
}
.schedule-primary img {
display: block;
margin: auto;
}
.schedule-secondary {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
}
form {
margin: 0;
scale: 0.8;
}
h1 span {
font-size: 1.8em;
font-family: "playfair-RG", serif;
color: var(--grey--50);
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
p {
font-size: 1em;
}
span {
font-size: 1em;
}
section:nth-child(3) p {
word-wrap: break-word;
width: 25em;
}
section:nth-child(4) p {
word-wrap: break-word;
width: 30em;
}
main section:nth-child(5) article {
display: flex;
flex-direction: row;
}
main section:nth-child(5) div:last-child {
background-position-y: 0em;
}
}
@media (min-width: 76.875em) {
nav {
height: 5em;
}
main,
footer {
padding: 2.5em 9em;
}
h1 span {
font-size: 2.3em;
font-family: "playfair-RG", serif;
color: var(--grey--50);
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.5em;
}
p {
font-size: 1.3em;
}
span {
font-size: 1.3em;
}
form {
scale: 1;
}
body > article div ul li a {
font-size: 1.2em;
}
body > article h2 {
font-size: 1.8em;
}
.starting {
padding: var(--spacing--top);
}
.schedule-primary {
display: block;
margin: auto;
}
section:nth-child(3) p {
word-wrap: break-word;
width: 25em;
}
section:nth-child(4) p {
word-wrap: break-word;
width: 30em;
}
main section:nth-child(5) div:last-child {
background-position-y: -1.5em;
}
}
@media (min-width: 125em) {
nav {
height: 5em;
}
main,
footer {
padding: 2.5em 7.5em;
}
h1 span {
font-size: 2.7em;
font-family: "playfair-RG", serif;
color: var(--grey--50);
}
h2 {
font-size: 2.2em;
}
h3 {
font-size: 1.9em;
}
p {
font-size: 1.7em;
}
span {
font-size: 1.7em;
}
.starting-primary h1 {
word-wrap: break-word;
width: 30em;
}
.starting-primary p {
word-wrap: break-word;
width: 35em;
}
.starting-secondary a {
font-size: 1.7em;
}
main section:nth-child(5) div:first-child,
main section:nth-child(5) div:last-child {
height: 500px;
}
main section:nth-child(5) div:last-child {
background-position-y: -4em;
}
}
/* animations */
@keyframes scale {
100% {
transform: scale(1);
}
}
@keyframes fade-in {
100% {
opacity: 1;
filter: blur(0);
}
}
@keyframes knipper-animation {
0% {
}
25% {
scale: 0.9;
}
50% {
scale: 1;
}
75% {
scale: 0.9;
}
100% {
}
}
@keyframes planning {
0% {
transform: scale(0.9);
z-index: -1;
}
50% {
transform: scale(1.05);
z-index: 2;
}
100% {
transform: scale(1);
z-index: 2;
}
}voor alle interacties zet ik boven aan in comment tags wat iets doet of wanneer er een nieuwe functie begint
Beide functies werken als volgt. je klikt op de knop en hij krijgt een class. klik je nog een keer, dan gaat de class weer weg
// show schedule section
const Schedule = document.querySelector('.schedule');
const ScheduleBtn = document.querySelector('#Schedule-button');
// show nav menu
const menuBtn = document.querySelector('.menu')
const navMenu = document.querySelector('body > article')
const body = document.querySelector('body');
// click on button gives the schedule section a class
ScheduleBtn.addEventListener('click', function(){
Schedule.classList.toggle('show-schdule');
});
// click on button gives the nav menu a class
menuBtn.addEventListener('click', function(){
navMenu.classList.toggle('show-menu');
body.classList.toggle('hide-scroll');
});