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

add screenshot

Browse source
This commit is contained in:
Niklas 2025-07-01 01:03:46 +02:00 • committed by Luisa Bellitto
parent a1fc9772f1
commit 176e9fc904
3 changed files with 26 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
code/frontend/public/assets/images/Feed.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 686 KiB

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

@ -6,7 +6,7 @@ function About() {
return ( return (
<div className="mainbox"> <div className="mainbox">
<div className="intro"> <div className="intro">
<div className="block"> <div className="block block-l">
<div className="item text1 text-start"> <div className="item text1 text-start">
Bringing Birds closer to you Bringing Birds closer to you
</div> </div>
@ -42,6 +42,12 @@ function About() {
> >
Feather Feed Feather Feed
</div> </div>
<img
className="explain-pic cursor-pointer"
src="/assets/images/Feed.png"
alt="Feed with posts"
onClick={() => navigate("/feed")}
/>
<div className="explain-text"> <div className="explain-text">
... a social media platform about Birds. ... a social media platform about Birds.
<br /> <br />

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

@ -17,17 +17,25 @@
align-items: center; align-items: center;
margin: 3vw; margin: 3vw;
} }
.explain-pic {
width: 90vw;
margin: 2vw;
border-radius: var(--border-radius);
box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
border-radius: 8px;
border: 5px solid var(--Rotkehlchen-gray);
}
.explain-announce { .explain-announce {
width: 90vw; width: 90vw;
margin: 2vw; margin: 2vw;
font-size: clamp(5rem, 8vw, 15vw); font-size: clamp(4rem, 8vw, 15vw);
color: white; color: white;
text-align: left; text-align: left;
} }
.explain-title { .explain-title {
margin: 1vw; margin: 1vw;
width: 90vw; width: 90vw;
font-size: clamp(7rem, 10vw, 17vw); font-size: clamp(5rem, 10vw, 17vw);
color: var(--Rotkehlchen-orange-default); color: var(--Rotkehlchen-orange-default);
} }
.explain-text { .explain-text {
@ -52,6 +60,9 @@
box-sizing: border-box; box-sizing: border-box;
margin: 3vw; margin: 3vw;
} }
.block-l {
height: clamp(19rem, 55vh, 100%);
}
.block { .block {
max-width: calc(100vw-var(--margin-mobile)); max-width: calc(100vw-var(--margin-mobile));
@ -59,7 +70,7 @@
grid-template-rows: 1fr auto; grid-template-rows: 1fr auto;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: clamp(30vw, 45vh, 100%); height: clamp(22rem, 45vh, 100%);
margin: var(--margin-mobile); margin: var(--margin-mobile);
vertical-align: center; vertical-align: center;
margin-block-end: var(--margin-mobile); margin-block-end: var(--margin-mobile);
@ -104,15 +115,12 @@
text-align: end; text-align: end;
} }
/* TODO Entfernen vor final*/
.test {
height: 100vh;
width: 100vw;
color: aqua;
background-color: aquamarine;
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.explain-pic {
max-height: clamp(600px, 120vh, 1200px);
width: auto;
justify-self: center;
}
.about-title { .about-title {
flex-direction: row; flex-direction: row;
justify-content: start; justify-content: start;