mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-14 00:30:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

do intro

Browse source
This commit is contained in:
Niklas 2025-06-30 14:29:50 +02:00 • committed by Luisa Bellitto
parent f68e5471a5
commit 6507f5f239
8 changed files with 182 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

33
code/frontend/src/pages/About.tsx
View file

@ -3,9 +3,36 @@ import "./about.css";
function About() {
return (
<div className="mainbox">
<h1 className="about-title color-orange">
About<br></br>Feather Feed
</h1>
<div className="intro">
<div className="block">
<div className="item text1 text-start">
Bringing Birds closer to you
</div>
<img
className="item item-end pic pic-justify"
src="/assets/images/BirdOnCam.jpg"
alt="A bird sitting on a camera"
/>
</div>
<div className="block block2">
<img
className="item item-end grid-end pic2 pic"
src="/assets/images/birdVeryInterestedFace.jpg"
alt="A curious-interested looking cute bird"
/>
<div className="item text1 text-end grid-start text1">
And the Birds you love
</div>
</div>
<div className="block">
<div className="item text1 text-start">Enhance your day</div>
<img
className="item item-end pic pic-justify"
src="/assets/images/owlFancyFace.jpg"
alt="A very confident looking owl"
/>
</div>
</div>
</div>
);
}

115
code/frontend/src/pages/about.css
View file

@ -1,11 +1,15 @@
:root {
--margin-mobile: 2rem;
}
.mainbox {
/* TODO header height variablen anpassen sobald PR für header durch ist*/
margin-top: var(--Header-height);
min-height: calc(100vh - var(--Header-height));
min-width: 360px;
max-width: 100vw;
}
@media screen and (min-width: 768px) {
.mainbox {
min-width: 60rem;
min-height: 60rem;
margin-top: var(--Header-height);
}
}
@ -15,6 +19,62 @@
justify-content: start;
}
.intro {
box-sizing: border-box;
margin: 3vw;
}
.block {
max-width: calc(100vw-var(--margin-mobile));
display: grid;
grid-template-rows: 1fr auto;
align-items: center;
justify-content: space-between;
height: clamp(30vw, 45vh, 100%);
margin: 2vw;
vertical-align: center;
margin-block-end: 2rem;
}
.block2 {
display: grid;
grid-template-areas:
"text"
"pic";
grid-template-columns: 1fr;
}
.block2 .text1 {
grid-area: text;
}
.block2 .pic2 {
grid-area: pic;
justify-self: start;
}
.block .pic-justify {
justify-self: end;
}
.item {
max-width: 90vw;
max-height: 19rem;
}
.pic {
max-width: 80vw;
border-radius: var(--border-radius);
box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
}
.text1 {
height: 100%;
color: white;
font-size: 4rem;
}
.text-start {
text-align: start;
}
.text-end {
text-align: end;
}
/* TODO Entfernen vor final*/
.test {
height: 100vh;
@ -22,3 +82,52 @@
color: aqua;
background-color: aquamarine;
}
@media screen and (min-width: 768px) {
.about-title {
flex-direction: row;
justify-content: start;
}
.intro {
box-sizing: border-box;
margin: 2rem;
}
.block {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
justify-content: space-between;
height: clamp(30vw, 45vh, 100%);
margin: 1rem;
vertical-align: center;
margin-block-end: 2rem;
}
.block2 {
grid-template-areas: "pic text";
grid-template-columns: auto 1fr;
align-items: center;
}
.item {
height: clamp(19rem, 30vw, 30vw);
max-height: none;
}
.text1 {
height: 100%;
color: white;
font-size: clamp(5rem, 8vw, 15vw);
display: flex;
align-items: center;
}
/* TODO Entfernen vor final*/
.test {
height: 100vh;
width: 100vw;
color: aqua;
background-color: aquamarine;
}
}