search

Web3bidgeAsoOke / frontend

Frontend for AsoOke platform
https://asooke-frontend.vercel.app/
0 stars 1 forks source link

Landing page implementation #4

Open youngancient opened 1 week ago

youngancient commented 1 week ago

Figma design

youngancient commented 1 week ago

Fix responsiveness Screenshot from 2024-10-13 00-27-51

youngancient commented 1 week ago

fix text responsiveness Screenshot from 2024-10-13 00-48-46

youngancient commented 1 week ago

Change the current plain logo text to this, this one can be found on the dashboard screen Screenshot from 2024-10-13 01-47-34

youngancient commented 1 week ago

https://residease.vercel.app/

  @media (min-width: 500px) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(164px, 100%), 1fr));
    column-gap: 1rem;
    row-gap: 1.5rem;
  }
  @media (min-width: 767px) {
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    column-gap: 1.5rem;
    row-gap: 2rem;
  }
  @media (min-width: 998px) {
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    column-gap: 2rem;
    row-gap: 2.5rem;
  }
youngancient commented 1 week ago

pls add a much proper footer Screenshot from 2024-10-15 09-08-49

collinsadi commented 1 week ago

https://residease.vercel.app/

  @media (min-width: 500px) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(164px, 100%), 1fr));
    column-gap: 1rem;
    row-gap: 1.5rem;
  }
  @media (min-width: 767px) {
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    column-gap: 1.5rem;
    row-gap: 2rem;
  }
  @media (min-width: 998px) {
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    column-gap: 2rem;
    row-gap: 2.5rem;
  }

I need the class names that are being styled, so I can work with them

youngancient commented 1 week ago

I used styled-components so basically all the styles I shared here is belong to the layout

youngancient commented 1 week ago

The full styles

export const HouseListCompStyles = styled.div`
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-bottom: 4rem;
  @media (min-width: 500px) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(164px, 100%), 1fr));
    column-gap: 1rem;
    row-gap: 1.5rem;
  }
  @media (min-width: 767px) {
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    column-gap: 1.5rem;
    row-gap: 2rem;
  }
  @media (min-width: 998px) {
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    column-gap: 2rem;
    row-gap: 2.5rem;
  }
`;
collinsadi commented 1 week ago

still not working, if you have any idea on how to implement it, you can help out