first commit
This commit is contained in:
@@ -0,0 +1,371 @@
|
||||
$red: #E40521;
|
||||
$redTrans: rgba(228, 5, 33, 0.8);
|
||||
$grey: #3C3A42;
|
||||
$white: #FFFFFF;
|
||||
$lightgrey: #D9D9D9;
|
||||
$paginationGrey: #707070;
|
||||
$footer: #F2F2F2;
|
||||
|
||||
// Breakpoints
|
||||
|
||||
@mixin breakpoint($class) {
|
||||
@if $class == xs {
|
||||
@media (max-width: 575px) {
|
||||
@content;
|
||||
}
|
||||
} @else if $class == sm {
|
||||
@media (min-width: 576px) {
|
||||
@content;
|
||||
}
|
||||
} @else if $class == md {
|
||||
@media (min-width: 767px) {
|
||||
@content;
|
||||
}
|
||||
} @else if $class == lg {
|
||||
@media (min-width: 992px) {
|
||||
@content;
|
||||
}
|
||||
} @else if $class == xl {
|
||||
@media (min-width: 1200px) {
|
||||
@content;
|
||||
}
|
||||
} @else if $class == xxl {
|
||||
@media (min-width: 1680px) {
|
||||
@content;
|
||||
}
|
||||
} @else if $class == uhd {
|
||||
@media (min-width: 2400px) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn "Breakpoint mixin supports: xs, sm, md, lg, xl, xxl, uhd :" + $class;
|
||||
}
|
||||
}
|
||||
|
||||
// Use breakpoints like this:
|
||||
// aside.primary {
|
||||
// float: right;
|
||||
// width: 350px;
|
||||
// @include breakpoint(sm) {
|
||||
// float: none;
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
$columns: 12;
|
||||
@mixin regular-grid {
|
||||
@for $i from 1 through $columns {
|
||||
&-#{$i} {
|
||||
flex: 0 0 100% / $columns * $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin offset-grid {
|
||||
@for $i from 1 through $columns {
|
||||
&-#{$i} {
|
||||
margin-left: 100% / $columns * $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.col {
|
||||
&-offset {
|
||||
&-xs {
|
||||
@include offset-grid;
|
||||
}
|
||||
&-sm {
|
||||
@include breakpoint(sm) {
|
||||
@include offset-grid;
|
||||
&-reset {
|
||||
margin-left: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-md {
|
||||
@include breakpoint(md) {
|
||||
@include offset-grid;
|
||||
&-reset {
|
||||
margin-left: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-lg {
|
||||
@include breakpoint(lg) {
|
||||
@include offset-grid;
|
||||
&-reset {
|
||||
margin-left: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-xl {
|
||||
@include breakpoint(xl) {
|
||||
@include offset-grid;
|
||||
&-reset {
|
||||
margin-left: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-xs {
|
||||
@include regular-grid;
|
||||
}
|
||||
&-sm {
|
||||
@include breakpoint(sm) {
|
||||
@include regular-grid;
|
||||
}
|
||||
}
|
||||
&-md {
|
||||
@include breakpoint(md) {
|
||||
@include regular-grid;
|
||||
}
|
||||
}
|
||||
&-lg {
|
||||
@include breakpoint(lg) {
|
||||
@include regular-grid;
|
||||
}
|
||||
}
|
||||
&-xl {
|
||||
@include breakpoint(xl) {
|
||||
@include regular-grid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
header{
|
||||
padding: 1rem 3rem;
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.logo{
|
||||
width: 258px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.hero{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
|
||||
&__text{
|
||||
text-align: center;
|
||||
font-family: 'Toyota Type', sans-serif;
|
||||
font-weight: 300;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
h2{
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
h3{
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.guide{
|
||||
display: flex;
|
||||
height: 66%;
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
|
||||
}
|
||||
&__card{
|
||||
flex-grow: 1;
|
||||
width: 33.3333%;
|
||||
position: relative;
|
||||
|
||||
transition: all 0.5s ease-in-out;
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
flex-grow: 6;
|
||||
width: 90%;
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__text{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Toyota Type', sans-serif;
|
||||
background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
|
||||
|
||||
h3{
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&::after{
|
||||
/* a white circle with a chevron pointing right */
|
||||
content: '❯';
|
||||
position: absolute;
|
||||
font-size: 2rem;
|
||||
top: 1rem;
|
||||
right: 3rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
transform: translate(50%, 50%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.5s ease-in-out;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Footer{
|
||||
background-color: $footer;
|
||||
padding: 2rem 10vw;
|
||||
margin-top: 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas: "logo"
|
||||
"navi"
|
||||
"spalte1"
|
||||
"spalte2";
|
||||
color: $paginationGrey;
|
||||
|
||||
@include breakpoint(md) {
|
||||
padding: 5rem 10vw;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas: "logo navi" "spalte1 spalte2";
|
||||
}
|
||||
|
||||
@include breakpoint(xl) {
|
||||
padding: 5rem 10vw;
|
||||
grid-template-columns: 230px 2fr 1fr 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: "logo navi spalte1 spalte2";
|
||||
}
|
||||
|
||||
.logo{
|
||||
grid-area: logo;
|
||||
width: 230px;
|
||||
height: auto;
|
||||
text-align: left;
|
||||
|
||||
@include breakpoint(md) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 223px;
|
||||
}
|
||||
|
||||
.copyright{
|
||||
font-weight: bold;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.siteLinks a{
|
||||
display: block;
|
||||
background-color: $red;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color:#fff;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 0.5rem 0;
|
||||
|
||||
@include breakpoint(md) {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navLinks{
|
||||
grid-area: navi;
|
||||
width: 100%;
|
||||
|
||||
padding: 2rem 0;
|
||||
|
||||
columns: 2;
|
||||
@include breakpoint(md) {
|
||||
padding: 0 0 0 5vw;
|
||||
}
|
||||
|
||||
.navItem{
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 1em 0;
|
||||
|
||||
&:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spalte{
|
||||
height: 100%;
|
||||
padding: 2rem 0;
|
||||
|
||||
@include breakpoint(md) {
|
||||
padding: 0 0 0 3vw;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
@include breakpoint(xl) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h3{
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
|
||||
.column1{
|
||||
grid-area: spalte1;
|
||||
}
|
||||
|
||||
.column2{
|
||||
grid-area: spalte2;
|
||||
}
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
:root {
|
||||
--max-width: 1100px;
|
||||
--border-radius: 12px;
|
||||
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
|
||||
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
|
||||
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
|
||||
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
|
||||
--primary-glow: conic-gradient(
|
||||
from 180deg at 50% 50%,
|
||||
#16abff33 0deg,
|
||||
#0885ff33 55deg,
|
||||
#54d6ff33 120deg,
|
||||
#0071ff33 160deg,
|
||||
transparent 360deg
|
||||
);
|
||||
--secondary-glow: radial-gradient(
|
||||
rgba(255, 255, 255, 1),
|
||||
rgba(255, 255, 255, 0)
|
||||
);
|
||||
|
||||
--tile-start-rgb: 239, 245, 249;
|
||||
--tile-end-rgb: 228, 232, 233;
|
||||
--tile-border: conic-gradient(
|
||||
#00000080,
|
||||
#00000040,
|
||||
#00000030,
|
||||
#00000020,
|
||||
#00000010,
|
||||
#00000010,
|
||||
#00000080
|
||||
);
|
||||
|
||||
--callout-rgb: 238, 240, 241;
|
||||
--callout-border-rgb: 172, 175, 176;
|
||||
--card-rgb: 180, 185, 188;
|
||||
--card-border-rgb: 131, 134, 135;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 0, 0, 0;
|
||||
--background-end-rgb: 0, 0, 0;
|
||||
|
||||
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
|
||||
--secondary-glow: linear-gradient(
|
||||
to bottom right,
|
||||
rgba(1, 65, 255, 0),
|
||||
rgba(1, 65, 255, 0),
|
||||
rgba(1, 65, 255, 0.3)
|
||||
);
|
||||
|
||||
--tile-start-rgb: 2, 13, 46;
|
||||
--tile-end-rgb: 2, 5, 19;
|
||||
--tile-border: conic-gradient(
|
||||
#ffffff80,
|
||||
#ffffff40,
|
||||
#ffffff30,
|
||||
#ffffff20,
|
||||
#ffffff10,
|
||||
#ffffff10,
|
||||
#ffffff80
|
||||
);
|
||||
|
||||
--callout-rgb: 20, 20, 20;
|
||||
--callout-border-rgb: 108, 108, 108;
|
||||
--card-rgb: 100, 100, 100;
|
||||
--card-border-rgb: 200, 200, 200;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body{
|
||||
background-color: #fff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100dvh;
|
||||
font-family: 'Toyota Type', sans-serif;
|
||||
}
|
||||
+2
-1
@@ -1,5 +1,6 @@
|
||||
import { Inter } from 'next/font/google'
|
||||
import './globals.css'
|
||||
import './globals.scss'
|
||||
import '@/styles/index.scss'
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
|
||||
|
||||
+98
-88
@@ -1,95 +1,105 @@
|
||||
import Image from 'next/image'
|
||||
import styles from './page.module.css'
|
||||
import GetImage from "@/components/GetImage/GetImage";
|
||||
import React from "react";
|
||||
import "./Home.scss";
|
||||
|
||||
export default function Home() {
|
||||
const Home = () => {
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<div className={styles.description}>
|
||||
<p>
|
||||
Get started by editing
|
||||
<code className={styles.code}>src/app/page.js</code>
|
||||
</p>
|
||||
<div>
|
||||
<a
|
||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
By{' '}
|
||||
<Image
|
||||
src="/vercel.svg"
|
||||
alt="Vercel Logo"
|
||||
className={styles.vercelLogo}
|
||||
width={100}
|
||||
height={24}
|
||||
priority
|
||||
/>
|
||||
</a>
|
||||
<>
|
||||
<header>
|
||||
<img
|
||||
src="https://cms.camping.autohaus-dinig.de/uploads/TD_Autohaus_weiss_b44cfad12a.svg"
|
||||
alt="Autohaus Dinig"
|
||||
className="logo"
|
||||
/>
|
||||
</header>
|
||||
<div className="hero">
|
||||
<div className="hero__text">
|
||||
<h2>Willkommen bei Ihrem Autohaus</h2>
|
||||
<h3>Entdecken Sie unsere Angebote</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.center}>
|
||||
<Image
|
||||
className={styles.logo}
|
||||
src="/next.svg"
|
||||
alt="Next.js Logo"
|
||||
width={180}
|
||||
height={37}
|
||||
priority
|
||||
/>
|
||||
<div className="guide">
|
||||
<a className="guide__card" href="https://autohaus.toyota.de/dinig/">
|
||||
<GetImage source="auto" />
|
||||
<div className="guide__card__text">
|
||||
<h3>Autohaus Dinig</h3>
|
||||
<p>Willkommen bei Ihrem lokalen Toyota Partner</p>
|
||||
</div>
|
||||
</a>
|
||||
<a className="guide__card" href="https://camping.autohaus-dinig.de/">
|
||||
<GetImage source="camper" />
|
||||
<div className="guide__card__text">
|
||||
<h3>Dinig Camping</h3>
|
||||
<p>Entdecken Sie unsere Camper für jeden Anlass</p>
|
||||
</div>
|
||||
</a>
|
||||
{/* <div className="guide__card">
|
||||
<GetImage source="offroad" />
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<div className={styles.grid}>
|
||||
<a
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2>
|
||||
Docs <span>-></span>
|
||||
</h2>
|
||||
<p>Find in-depth information about Next.js features and API.</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2>
|
||||
Learn <span>-></span>
|
||||
</h2>
|
||||
<p>Learn about Next.js in an interactive course with quizzes!</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2>
|
||||
Templates <span>-></span>
|
||||
</h2>
|
||||
<p>Explore starter templates for Next.js.</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2>
|
||||
Deploy <span>-></span>
|
||||
</h2>
|
||||
<footer className="Footer">
|
||||
<div className="logo">
|
||||
<div className="copyright">© 2024 Autohaus Dinig</div>
|
||||
<img
|
||||
src="https://cms.camping.autohaus-dinig.de/uploads/logo_nachbau_dinig_2x_35e1383373.png"
|
||||
alt="logo_nachbau_dinig@2x.png"
|
||||
/>
|
||||
<div className="siteLinks">
|
||||
<a href="https://autohaus.toyota.de/dinig/">Toyota Dinig</a>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="navLinks">
|
||||
<a
|
||||
className="navItem"
|
||||
href="https://autohaus.toyota.de/dinig/impressum/"
|
||||
>
|
||||
Impressum
|
||||
</a>
|
||||
<a
|
||||
className="navItem"
|
||||
href="https://autohaus.toyota.de/dinig/datenschutz/"
|
||||
>
|
||||
Datenschutz
|
||||
</a>
|
||||
</nav>
|
||||
<div className="spalte column1">
|
||||
<h3 id="hier-finden-sie-uns">Hier finden Sie uns:</h3>
|
||||
<p>
|
||||
Instantly deploy your Next.js site to a shareable URL with Vercel.
|
||||
Autohaus Dinig GmbH & Co. KG
|
||||
<br />
|
||||
Industriegebiet 4<br />
|
||||
55606 Hochstetten-Dhaun{" "}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
<h3 id="kontakt">Kontakt</h3>
|
||||
<p>
|
||||
Tel: 06752/2864
|
||||
<br />
|
||||
Fax: 06752/6971
|
||||
<br />
|
||||
E-Mail:{" "}
|
||||
<a href="mailto:lead@toyota-dinig.de">lead@toyota-dinig.de</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="spalte column2">
|
||||
<h3 id="öffnungszeiten">Öffnungszeiten</h3>
|
||||
<p>
|
||||
<strong>Verkauf</strong>
|
||||
<br />
|
||||
Mo - Fr: 09.00 - 18.00 Uhr
|
||||
<br />
|
||||
Sa: 09.00 - 13.00 Uhr{" "}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Kundendienst</strong>
|
||||
<br />
|
||||
Mo - Fr: 07.30 - 18.00 Uhr
|
||||
<br />
|
||||
Sa: 08.00 - 12.00 Uhr{" "}
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
import { load } from "cheerio";
|
||||
|
||||
const getAutoHtml = async () => {
|
||||
const response = await fetch("https://autohaus.toyota.de/dinig/");
|
||||
const htmlString = await response.text();
|
||||
return htmlString;
|
||||
};
|
||||
|
||||
const getCamperHtml = async () => {
|
||||
const response = await fetch("https://camping.autohaus-dinig.de/");
|
||||
const htmlString = await response.text();
|
||||
return htmlString;
|
||||
};
|
||||
|
||||
const getOffroadHtml = async () => {
|
||||
const response = await fetch("https://offroad.autohaus-dinig.de/");
|
||||
const htmlString = await response.text();
|
||||
return htmlString;
|
||||
};
|
||||
|
||||
const GetImage = async ({ source }) => {
|
||||
|
||||
let image;
|
||||
if (source === "auto") {
|
||||
let getWebsiteHtml = getAutoHtml;
|
||||
|
||||
const html = await getWebsiteHtml();
|
||||
const $ = load(html);
|
||||
|
||||
// the URL of the picture we need is placed in the data-src attribute of the img tag inside the a picture tag
|
||||
image = $(".a-media-image").find("img").attr("data-src");
|
||||
|
||||
} else if (source === "camper") {
|
||||
let getWebsiteHtml = getCamperHtml;
|
||||
|
||||
const html = await getWebsiteHtml();
|
||||
const $ = load(html);
|
||||
|
||||
//get a list of all pictures inside .Slider__Image
|
||||
const pictures = $(".Slider__Image").find("img");
|
||||
|
||||
//if there are multiple pictures, we need to get the second one
|
||||
if (pictures.length > 1) {
|
||||
image = pictures[1].attribs.src;
|
||||
} else {
|
||||
image = pictures[0].attribs.src;
|
||||
}
|
||||
|
||||
|
||||
} else if (source === "offroad") {
|
||||
let getWebsiteHtml = getOffroadHtml;
|
||||
|
||||
const html = await getWebsiteHtml();
|
||||
const $ = load(html);
|
||||
|
||||
//get a list of all pictures inside .Slider__Image
|
||||
const pictures = $(".Slider__Image").find("img");
|
||||
|
||||
//if there are multiple pictures, we need to get the second one
|
||||
if (pictures.length > 1) {
|
||||
image = pictures[1].attribs.src;
|
||||
} else {
|
||||
image = pictures[0].attribs.src;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<img src={image} alt="Guide Image" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default GetImage;
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,132 @@
|
||||
// Breakpoints
|
||||
|
||||
@mixin breakpoint($class) {
|
||||
@if $class == xs {
|
||||
@media (max-width: 575px) {
|
||||
@content;
|
||||
}
|
||||
} @else if $class == sm {
|
||||
@media (min-width: 576px) {
|
||||
@content;
|
||||
}
|
||||
} @else if $class == md {
|
||||
@media (min-width: 767px) {
|
||||
@content;
|
||||
}
|
||||
} @else if $class == lg {
|
||||
@media (min-width: 992px) {
|
||||
@content;
|
||||
}
|
||||
} @else if $class == xl {
|
||||
@media (min-width: 1200px) {
|
||||
@content;
|
||||
}
|
||||
} @else if $class == xxl {
|
||||
@media (min-width: 1680px) {
|
||||
@content;
|
||||
}
|
||||
} @else if $class == uhd {
|
||||
@media (min-width: 2400px) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn "Breakpoint mixin supports: xs, sm, md, lg, xl, xxl, uhd :" + $class;
|
||||
}
|
||||
}
|
||||
|
||||
// Use breakpoints like this:
|
||||
// aside.primary {
|
||||
// float: right;
|
||||
// width: 350px;
|
||||
// @include breakpoint(sm) {
|
||||
// float: none;
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
$columns: 12;
|
||||
@mixin regular-grid {
|
||||
@for $i from 1 through $columns {
|
||||
&-#{$i} {
|
||||
flex: 0 0 100% / $columns * $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin offset-grid {
|
||||
@for $i from 1 through $columns {
|
||||
&-#{$i} {
|
||||
margin-left: 100% / $columns * $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.col {
|
||||
&-offset {
|
||||
&-xs {
|
||||
@include offset-grid;
|
||||
}
|
||||
&-sm {
|
||||
@include breakpoint(sm) {
|
||||
@include offset-grid;
|
||||
&-reset {
|
||||
margin-left: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-md {
|
||||
@include breakpoint(md) {
|
||||
@include offset-grid;
|
||||
&-reset {
|
||||
margin-left: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-lg {
|
||||
@include breakpoint(lg) {
|
||||
@include offset-grid;
|
||||
&-reset {
|
||||
margin-left: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-xl {
|
||||
@include breakpoint(xl) {
|
||||
@include offset-grid;
|
||||
&-reset {
|
||||
margin-left: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-xs {
|
||||
@include regular-grid;
|
||||
}
|
||||
&-sm {
|
||||
@include breakpoint(sm) {
|
||||
@include regular-grid;
|
||||
}
|
||||
}
|
||||
&-md {
|
||||
@include breakpoint(md) {
|
||||
@include regular-grid;
|
||||
}
|
||||
}
|
||||
&-lg {
|
||||
@include breakpoint(lg) {
|
||||
@include regular-grid;
|
||||
}
|
||||
}
|
||||
&-xl {
|
||||
@include breakpoint(xl) {
|
||||
@include regular-grid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
$red: #E40521;
|
||||
$redTrans: rgba(228, 5, 33, 0.8);
|
||||
$grey: #3C3A42;
|
||||
$white: #FFFFFF;
|
||||
$lightgrey: #D9D9D9;
|
||||
$paginationGrey: #707070;
|
||||
$footer: #F2F2F2;
|
||||
@@ -0,0 +1,39 @@
|
||||
@font-face {
|
||||
font-family: 'Toyota Type';
|
||||
font-weight: 300;
|
||||
src: local(''),
|
||||
url('../../statics/fonts/ToyotaType-Regular.woff2') format('woff2'),
|
||||
/* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('../../statics/fonts/ToyotaType-Regular.woff2') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Toyota Type';
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
src: local(''),
|
||||
url('../../statics/fonts/ToyotaType-Italic.woff2') format('woff2'),
|
||||
/* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('../../statics/fonts/ToyotaType-Italic.woff2') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Toyota Type';
|
||||
font-weight: 700;
|
||||
src: local(''),
|
||||
url('../../statics/fonts/ToyotaType-Semibold.woff2') format('woff2'),
|
||||
/* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('../../statics/fonts/ToyotaType-Semibold.woff2') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Toyota Type';
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
src: local(''),
|
||||
url('../../statics/fonts/ToyotaType-SemiboldIt.woff2') format('woff2'),
|
||||
/* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('../../statics/fonts/ToyotaType-SemiboldIt.woff2') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
$font-family-sans-serif: 'Toyota Type', sans-serif;
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-weight: 300;
|
||||
color: #3C3A42;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
strong{
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ExternalContent{
|
||||
width: 100%;
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './base/breakpoints';
|
||||
@import './base/fonts';
|
||||
@import './base/colors';
|
||||
@import './base/globals';
|
||||
@import './base/typography';
|
||||
Reference in New Issue
Block a user