Skip to content

GitLab

Commit 1503b2c4 authored by EnesKarakas's avatar EnesKarakas
Browse files

React, Lets go!

parent 39acfa69
Expand all Hide whitespace changes
Inline Side-by-side
.gitignore
View file @ 1503b2c4
......@@ -31,3 +31,6 @@ build/
### VS Code ###
.vscode/
### Node Modules ###
frontend/node_modules
frontend/craco.config.js 0 → 100644
View file @ 1503b2c4
module.exports = {
reactScriptsVersion: "react-scripts",
style: {
css: {
loaderOptions: () => {
return {
url: false,
};
},
},
},
};
\ No newline at end of file
frontend/package-lock.json 0 → 100644
View file @ 1503b2c4
This diff is collapsed.
frontend/package.json 0 → 100644
View file @ 1503b2c4
{
"name": "weather-app",
"version": "1.0.0",
"private": true,
"dependencies": {
"prop-types": "15.7.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-helmet": "^6.1.0",
"react-router-dom": "^5.2.0"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test --env=jsdom",
"eject": "craco eject"
},
"engines": {
"node": "18.x"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@craco/craco": "^7.1.0",
"react-scripts": "^5.0.1"
}
}
frontend/public/index.html 0 → 100644
View file @ 1503b2c4
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flat Dizzy Grasshopper</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<meta property="twitter:card" content="summary_large_image" />
<style data-tag="reset-style-sheet">
html { line-height: 1.15;}body { margin: 0;}* { box-sizing: border-box; border-width: 0; border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6,figure,blockquote,figcaption { margin: 0; padding: 0;}button { background-color: transparent;}button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}button,select { text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus { outline: 1px dotted ButtonText;}a { color: inherit; text-decoration: inherit;}input { padding: 2px 4px;}img { display: block;}html { scroll-behavior: smooth }
</style>
<style data-tag="default-style-sheet">
html {
font-family: Inter Tight;
font-size: 16px;
}
body {
font-weight: 400;
font-style:normal;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
line-height: 1.15;
color: var(--dl-color-theme-neutral-dark);
background-color: var(--dl-color-theme-neutral-light);
fill: var(--dl-color-theme-neutral-dark);
}
</style>
<link
rel="stylesheet"
href="https://unpkg.com/animate.css@4.1.1/animate.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
data-tag="font"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
data-tag="font"
/>
<link
rel="stylesheet"
href="https://unpkg.com/@teleporthq/teleport-custom-scripts/dist/style.css"
/>
</head>
<body>
<div id="app"></div>
<script
defer
src="https://unpkg.com/@teleporthq/teleport-custom-scripts"
></script>
</body>
</html>
frontend/src/components/contact4.css 0 → 100644
View file @ 1503b2c4
.contact4-contact20 {
display: flex;
overflow: hidden;
position: relative;
align-items: center;
flex-direction: column;
}
.contact4-max-width {
gap: var(--dl-space-space-twounits);
display: flex;
align-items: center;
flex-direction: column;
}
.contact4-section-title {
gap: var(--dl-space-space-unit);
width: auto;
display: flex;
max-width: 800px;
align-self: flex-start;
align-items: flex-start;
flex-shrink: 0;
flex-direction: column;
}
.contact4-content {
gap: var(--dl-space-space-halfunit);
display: flex;
align-items: flex-start;
flex-direction: column;
}
.contact4-text2 {
text-align: center;
}
.contact4-row {
gap: 48px;
display: flex;
align-self: stretch;
align-items: flex-start;
flex-shrink: 0;
}
.contact4-content1 {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
width: auto;
display: flex;
flex-grow: 1;
align-items: flex-start;
flex-shrink: 0;
flex-direction: column;
}
.contact4-contact-info {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: center;
flex-direction: column;
}
.contact4-content2 {
gap: 16px;
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.contact4-text3 {
align-self: flex-start;
text-align: center;
}
.contact4-text4 {
align-self: flex-start;
text-align: left;
}
.contact4-email {
align-self: flex-start;
text-align: center;
}
.contact4-content3 {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
width: auto;
display: flex;
align-items: center;
flex-shrink: 0;
flex-direction: column;
}
.contact4-icon2 {
align-self: flex-start;
}
.contact4-contact-info1 {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: center;
flex-direction: column;
}
.contact4-content4 {
gap: 16px;
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.contact4-text5 {
align-self: stretch;
text-align: left;
}
.contact4-text6 {
text-align: left;
}
.contact4-phone {
align-self: flex-start;
text-align: center;
}
.contact4-content5 {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
width: auto;
display: flex;
align-items: center;
flex-shrink: 0;
flex-direction: column;
}
.contact4-icon4 {
align-self: flex-start;
}
.contact4-contact-info2 {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: center;
flex-direction: column;
}
.contact4-content6 {
gap: 16px;
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.contact4-text7 {
align-self: flex-start;
text-align: left;
}
.contact4-text8 {
text-align: left;
}
.contact4-address {
align-self: flex-start;
text-align: left;
}
@media(max-width: 767px) {
.contact4-row {
flex-direction: column;
}
}
frontend/src/components/contact4.js 0 → 100644
View file @ 1503b2c4
import React from 'react'
import PropTypes from 'prop-types'
import './contact4.css'
const Contact4 = (props) => {
return (
<div className="contact4-contact20 thq-section-padding">
<div className="contact4-max-width thq-section-max-width">
<div className="contact4-section-title">
<span className="thq-body-small">{props.content2}</span>
<div className="contact4-content">
<h2 className="thq-heading-2">{props.heading1}</h2>
<p className="contact4-text2 thq-body-large">{props.content1}</p>
</div>
</div>
<div className="contact4-row">
<div className="contact4-content1">
<svg viewBox="0 0 1024 1024" className="thq-icon-medium">
<path d="M854 342v-86l-342 214-342-214v86l342 212zM854 170q34 0 59 26t25 60v512q0 34-25 60t-59 26h-684q-34 0-59-26t-25-60v-512q0-34 25-60t59-26h684z"></path>
</svg>
<div className="contact4-contact-info">
<div className="contact4-content2">
<h3 className="contact4-text3 thq-heading-3">Email</h3>
<p className="contact4-text4 thq-body-large">
{props.content3}
</p>
</div>
<span className="contact4-email thq-body-small">
{props.email1}
</span>
</div>
</div>
<div className="contact4-content3">
<svg
viewBox="0 0 1024 1024"
className="contact4-icon2 thq-icon-medium"
>
<path d="M282 460q96 186 282 282l94-94q20-20 44-10 72 24 152 24 18 0 30 12t12 30v150q0 18-12 30t-30 12q-300 0-513-213t-213-513q0-18 12-30t30-12h150q18 0 30 12t12 30q0 80 24 152 8 26-10 44z"></path>
</svg>
<div className="contact4-contact-info1">
<div className="contact4-content4">
<h3 className="contact4-text5 thq-heading-3">Phone</h3>
<p className="contact4-text6 thq-body-large">
{props.content4}
</p>
</div>
<span className="contact4-phone thq-body-small">
{props.phone1}
</span>
</div>
</div>
<div className="contact4-content5">
<svg
viewBox="0 0 1024 1024"
className="contact4-icon4 thq-icon-medium"
>
<path d="M512 0c-176.732 0-320 143.268-320 320 0 320 320 704 320 704s320-384 320-704c0-176.732-143.27-320-320-320zM512 512c-106.040 0-192-85.96-192-192s85.96-192 192-192 192 85.96 192 192-85.96 192-192 192z"></path>
</svg>
<div className="contact4-contact-info2">
<div className="contact4-content6">
<h3 className="contact4-text7 thq-heading-3">Office</h3>
<p className="contact4-text8 thq-body-large">
{props.content5}
</p>
</div>
<span className="contact4-address thq-body-small">
{props.address1}
</span>
</div>
</div>
</div>
</div>
</div>
)
}
Contact4.defaultProps = {
email1: 'info@weatherapp.com',
content2: 'Get in touch with us today!',
address1: '123 Weather Street, City, Country',
heading1: 'Contact Us',
content1: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',
phone1: '+123-456-7890',
content3:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.',
content4:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.',
content5:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.',
}
Contact4.propTypes = {
email1: PropTypes.string,
content2: PropTypes.string,
address1: PropTypes.string,
heading1: PropTypes.string,
content1: PropTypes.string,
phone1: PropTypes.string,
content3: PropTypes.string,
content4: PropTypes.string,
content5: PropTypes.string,
}
export default Contact4
frontend/src/components/cta1.css 0 → 100644
View file @ 1503b2c4
.cta1-container {
gap: var(--dl-space-space-threeunits);
display: flex;
overflow: hidden;
position: relative;
flex-direction: column;
}
.cta1-max-width {
width: 100%;
display: flex;
max-width: var(--dl-size-size-maxwidth);
align-items: center;
flex-direction: column;
}
.cta1-content {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: center;
flex-direction: column;
}
.cta1-heading1 {
text-align: center;
}
.cta1-content1 {
text-align: center;
}
.cta1-actions {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-items: flex-start;
}
.cta1-action1 {
text-align: center;
}
.cta1-action2 {
text-align: center;
}
@media(max-width: 479px) {
.cta1-actions {
width: 100%;
flex-direction: column;
}
.cta1-button {
width: 100%;
}
.cta1-button1 {
width: 100%;
}
}
frontend/src/components/cta1.js 0 → 100644
View file @ 1503b2c4
import React from 'react'
import PropTypes from 'prop-types'
import './cta1.css'
const CTA1 = (props) => {
return (
<div className="cta1-container thq-section-padding">
<div className="cta1-max-width thq-section-max-width">
<div className="cta1-content">
<h2 className="cta1-heading1 thq-heading-2">{props.heading1}</h2>
<p className="cta1-content1 thq-body-large">{props.content1}</p>
<div className="cta1-actions">
<button className="thq-button-filled cta1-button">
<span className="cta1-action1 thq-body-small">
{props.action1}
</span>
</button>
<button className="thq-button-outline cta1-button1">
<span className="cta1-action2 thq-body-small">
{props.action2}
</span>
</button>
</div>
</div>
</div>
</div>
)
}
CTA1.defaultProps = {
action1: 'Get Weather Updates',
heading1: 'Plan Your Day with Accurate Weather Forecasts',
content1:
'Stay informed about the weather conditions in your city or any location worldwide.',
action2: 'Try Now',
}
CTA1.propTypes = {
action1: PropTypes.string,
heading1: PropTypes.string,
content1: PropTypes.string,
action2: PropTypes.string,
}
export default CTA1
frontend/src/components/faq1.css 0 → 100644
View file @ 1503b2c4
.faq1-faq7 {
display: flex;
overflow: hidden;
position: relative;
align-items: center;
flex-direction: column;
}
.faq1-max-width {
gap: var(--dl-space-space-fiveunits);
display: flex;
align-items: center;
flex-direction: column;
}
.faq1-text1 {
text-align: center;
}
.faq1-list-item1 {
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.faq1-faq1-question {
font-style: normal;
text-align: center;
font-weight: 600;
}
.faq1-list-item2 {
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.faq1-faq2-question {
font-style: normal;
text-align: center;
font-weight: 600;
}
.faq1-list-item3 {
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.faq1-faq3-question {
font-style: normal;
text-align: center;
font-weight: 600;
}
.faq1-list-item4 {
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.faq1-faq4-question {
font-style: normal;
text-align: center;
font-weight: 600;
}
.faq1-list-item5 {
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.faq1-faq5-question {
font-style: normal;
text-align: center;
font-weight: 600;
}
.faq1-content1 {
gap: 16px;
display: flex;
align-self: stretch;
align-items: center;
flex-direction: column;
}
.faq1-text3 {
text-align: center;
}
.faq1-container {
display: flex;
position: relative;
}
@media(max-width: 991px) {
.faq1-max-width {
gap: var(--dl-space-space-oneandhalfunits);
}
}
@media(max-width: 767px) {
.faq1-text1 {
text-align: left;
}
.faq1-list {
gap: var(--dl-space-space-twounits);
}
.faq1-button {
width: 100%;
}
}
frontend/src/components/faq1.js 0 → 100644
View file @ 1503b2c4
import React from 'react'
import PropTypes from 'prop-types'
import './faq1.css'
const FAQ1 = (props) => {
return (
<div className="faq1-faq7 thq-section-padding">
<div className="faq1-max-width thq-section-max-width">
<div className="thq-flex-column">
<h2 className="thq-heading-2">{props.heading1}</h2>
<p className="faq1-text1 thq-body-large">{props.content1}</p>
</div>
<div className="thq-flex-column faq1-list">
<div className="faq1-list-item1">
<p className="faq1-faq1-question thq-body-large">
{props.faq1Question}
</p>
<span className="thq-body-small">{props.faq1Answer}</span>
</div>
<div className="faq1-list-item2">
<p className="faq1-faq2-question thq-body-large">
{props.faq2Question}
</p>
<span className="thq-body-small">{props.faq2Answer}</span>
</div>
<div className="faq1-list-item3">
<p className="faq1-faq3-question thq-body-large">
{props.faq3Question}
</p>
<span className="thq-body-small">{props.faq3Answer}</span>
</div>
<div className="faq1-list-item4">
<p className="faq1-faq4-question thq-body-large">
{props.faq4Question}
</p>
<span className="thq-body-small">{props.faq4Answer}</span>
</div>
<div className="faq1-list-item5">
<p className="faq1-faq5-question thq-body-large">
{props.faq5Question}
</p>
<span className="thq-body-small">{props.faq5Answer}</span>
</div>
</div>
<div className="thq-flex-column">
<div className="faq1-content1">
<h2 className="thq-heading-2">{props.heading2}</h2>
<p className="faq1-text3 thq-body-large">{props.content2}</p>
</div>
<div className="faq1-container">
<button className="thq-button-outline faq1-button">
<span className="thq-body-small">{props.action1}</span>
</button>
</div>
</div>
</div>
</div>
)
}
FAQ1.defaultProps = {
faq4Answer:
'Yes, you can view the weather forecast for the upcoming days to plan ahead.',
faq5Question: 'How accurate is the weather data provided?',
action1: 'Contact',
faq1Question: 'How do I search for weather information?',
faq4Question: 'Can I view the weather forecast for multiple days?',
faq3Answer:
'Yes, the weather information is updated in real-time to provide you with the most accurate data.',
faq3Question: 'Is the weather information updated in real-time?',
content1:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.',
content2: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',
heading2: 'Still have a question?',
heading1: 'FAQs',
faq5Answer:
'The weather data is sourced from reliable sources to provide accurate and up-to-date information.',
faq1Answer:
'You can input the city and country, or the latitude and longitude of the city in the search bar to get weather information.',
faq2Answer:
'Yes, you can create an account and save your favorite cities for quick access to their weather information.',
faq2Question: 'Can I save my favorite cities for quick access?',
}
FAQ1.propTypes = {
faq4Answer: PropTypes.string,
faq5Question: PropTypes.string,
action1: PropTypes.string,
faq1Question: PropTypes.string,
faq4Question: PropTypes.string,
faq3Answer: PropTypes.string,
faq3Question: PropTypes.string,
content1: PropTypes.string,
content2: PropTypes.string,
heading2: PropTypes.string,
heading1: PropTypes.string,
faq5Answer: PropTypes.string,
faq1Answer: PropTypes.string,
faq2Answer: PropTypes.string,
faq2Question: PropTypes.string,
}
export default FAQ1
frontend/src/components/features17.css 0 → 100644
View file @ 1503b2c4
.features17-layout349 {
display: flex;
overflow: hidden;
position: relative;
align-items: center;
flex-direction: column;
}
.features17-max-width {
gap: var(--dl-space-space-fiveunits);
display: flex;
align-items: center;
}
.features17-image-container {
flex: 1;
display: flex;
position: relative;
align-items: center;
}
.features17-content {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
display: flex;
align-items: flex-start;
flex-direction: column;
}
.features17-section-title {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.features17-content1 {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
@media(max-width: 991px) {
.features17-max-width {
gap: var(--dl-space-space-twounits);
flex-direction: column;
}
}
frontend/src/components/features17.js 0 → 100644
View file @ 1503b2c4
import React from 'react'
import PropTypes from 'prop-types'
import './features17.css'
const Features17 = (props) => {
return (
<div className="features17-layout349 thq-section-padding">
<div className="features17-max-width thq-section-max-width">
<div className="features17-image-container">
<img
alt={props.feature1ImageAlt}
src={props.feature1ImageSrc}
className="thq-img-ratio-16-9"
/>
</div>
<div className="features17-content">
<div className="features17-section-title">
<span className="thq-body-small">{props.feature1Slogan}</span>
<div className="features17-content1">
<h2 className="thq-heading-2">{props.feature1Title}</h2>
<p className="thq-body-large">{props.feature1Description}</p>
</div>
</div>
</div>
</div>
</div>
)
}
Features17.defaultProps = {
feature1Title: 'Accurate Weather Forecast',
feature1Slogan: 'Stay ahead with precise weather predictions',
feature1ImageSrc:
'https://images.unsplash.com/photo-1551836022-4c4c79ecde51?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w5MTMyMXwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxNTQzMTM1OHw&ixlib=rb-4.0.3&q=80&w=1080',
feature1ImageAlt: 'Accurate Weather Forecast Image',
feature1Description:
'Get real-time updates on weather conditions to plan your day effectively.',
}
Features17.propTypes = {
feature1Title: PropTypes.string,
feature1Slogan: PropTypes.string,
feature1ImageSrc: PropTypes.string,
feature1ImageAlt: PropTypes.string,
feature1Description: PropTypes.string,
}
export default Features17
frontend/src/components/features171.css 0 → 100644
View file @ 1503b2c4
.features171-layout349 {
display: flex;
overflow: hidden;
position: relative;
align-items: center;
flex-direction: column;
}
.features171-max-width {
gap: var(--dl-space-space-fiveunits);
display: flex;
align-items: center;
}
.features171-image-container {
flex: 1;
display: flex;
position: relative;
align-items: center;
}
.features171-content {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
display: flex;
align-items: flex-start;
flex-direction: column;
}
.features171-section-title {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.features171-content1 {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
@media(max-width: 991px) {
.features171-max-width {
gap: var(--dl-space-space-twounits);
flex-direction: column;
}
}
frontend/src/components/features171.js 0 → 100644
View file @ 1503b2c4
import React from 'react'
import PropTypes from 'prop-types'
import './features171.css'
const Features171 = (props) => {
return (
<div className="features171-layout349 thq-section-padding">
<div className="features171-max-width thq-section-max-width">
<div className="features171-image-container">
<img
alt={props.feature1ImageAlt}
src={props.feature1ImageSrc}
className="thq-img-ratio-16-9"
/>
</div>
<div className="features171-content">
<div className="features171-section-title">
<span className="thq-body-small">{props.feature1Slogan}</span>
<div className="features171-content1">
<h2 className="thq-heading-2">{props.feature1Title}</h2>
<p className="thq-body-large">{props.feature1Description}</p>
</div>
</div>
</div>
</div>
</div>
)
}
Features171.defaultProps = {
feature1Title: 'Accurate Weather Data',
feature1Slogan: 'Stay informed with precise weather information',
feature1ImageSrc:
'https://images.unsplash.com/photo-1591804227855-d6fe0b648d0e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w5MTMyMXwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxNTQzMTM1OHw&ixlib=rb-4.0.3&q=80&w=1080',
feature1ImageAlt: 'Accurate Weather Data Image',
feature1Description:
'Get real-time updates on temperature, humidity, wind speed, and more for any location worldwide.',
}
Features171.propTypes = {
feature1Title: PropTypes.string,
feature1Slogan: PropTypes.string,
feature1ImageSrc: PropTypes.string,
feature1ImageAlt: PropTypes.string,
feature1Description: PropTypes.string,
}
export default Features171
frontend/src/components/features18.css 0 → 100644
View file @ 1503b2c4
.features18-layout349 {
display: flex;
overflow: hidden;
position: relative;
align-items: center;
flex-direction: column;
}
.features18-max-width {
gap: var(--dl-space-space-fiveunits);
display: flex;
align-items: center;
}
.features18-content {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
display: flex;
align-items: flex-start;
flex-direction: column;
}
.features18-section-title {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.features18-content1 {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.features18-image-container {
flex: 1;
display: flex;
position: relative;
align-items: center;
}
@media(max-width: 991px) {
.features18-max-width {
gap: var(--dl-space-space-twounits);
flex-direction: column-reverse;
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal