Grid Project #1

Starter HTML

Starter HTML

Part-1

styles.css

요구사항 #1

1. live server를 통해 html 파일을 랜더링 했을 때 바로 html 파일이 웹 브라우저에 그려지는 것이 아닌, 1초에 거쳐 서서히 나오게 만들어보세요.

(Hint CSS Properties: animation, opacity)

요구사항 #2 — Hero Section

1. Navigation은 고정형 방식으로 동작하지 않는다. Flexbox or Grid 어떤 것을 사용해도 상관없다.
2. Hero Section의 경우 @media query를 사용하지 않고 반응형을 구현해야한다.
3. 사진 뒤의 풀 잎 같은 경우 z-index와 animation의 적절한 조합으로 마치 바람에 흩날리는 듯한 느낌을 줘야 한다. 답은 없다 본인이 생각하는 흩날리는 느낌을 적절한 animation을 이용해 구현하면 된다.

요구사항 #3 — About Section

1. About Section의 경우도 Hero Section과 동일하게 @media query를 사용하지 않고 반응형을 구현해야한다.
2. Minimal 이라는 글자는 적절한 position을 이용해 구현해야한다.

요구사항 #4 — Gallery Section

1. Gallery Section은 Flexbox or Grid 어느 것을 이용해도 상관없다. (Grid 사용을 추천한다)
2. Quality ... 이 글자 부분은 position을 이용해 적절히 배치해야한다.
3. 사진을 배치할 때는 grid-column, grid-row,

요구사항 #5 — Footer Section

1. Footer Section 또한 media query를 사용하지 않고 반응형을 구현해야한다.