mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-06 14:48: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 (
<div className="mainbox">
<div className="intro">
<div className="block">
<div className="block block-l">
<div className="item text1 text-start">
Bringing Birds closer to you
</div>
@ -42,6 +42,12 @@ function About() {
>
Feather Feed
</div>
<img
className="explain-pic cursor-pointer"
src="/assets/images/Feed.png"
alt="Feed with posts"
onClick={() => navigate("/feed")}
/>
<div className="explain-text">
... a social media platform about Birds.
<br />

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

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