본문 바로가기
개발 일지/한라열쇠 홈페이지(Web)

2021.04.14 서비스 페이지 만들기

by 빛밤하늘 2021. 4. 14.
반응형

2021.04.11 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.11 한라열쇠 홍보용 웹페이지

2021.04.12 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.12 메인 페이지 만들기

2021.04.13 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.13 오시는 길 페이지 만들기

 

2021.04.13 오시는 길 페이지 만들기

2021.04.11 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.11 한라열쇠 홍보용 웹페이지 2021.04.12 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.12 메인 페이지 만들기 2021.04.12 메인 페이지 만들기 20..

brightnightsky77.tistory.com

 

 

 

열쇠 가게에서 제공하는 서비스로 제가 곧바로 떠올린 것들은 다음과 같습니다.

 

  • 잠긴 문 열기
  • 열쇠 제작
  • 열쇠 복사
  • 디지털 도어락 시공

 

그래서 일단 위의 4개를 서비스 페이지에 넣고 부모님과 상의한 후 더 넣을 것이 있으면 추가할 예정입니다.

 

 

 

서비스 페이지도 오시는 길 페이지처럼 메인 페이지의 navigation bar와 footer는 그대로 사용합니다.

그리고 오시는 길 페이지의 상단 부분도 똑같이 사용했습니다.

서비스 페이지의 navigation bar와 상단 부분

 

 

 

 

 

 

 

각 서비스 항목의 템플릿은 밑의 링크를 사용했습니다.

메인 페이지에서 검은색 위주로 사용했기 때문에 여기서도 버튼의 색깔은 검은색으로 바꿨습니다.

 

Bootstrap 4 Portfolio Layout Snippet - One Column

A CSS only, responsive Bootstrap 4 portfolio page layout example with one column of content.

startbootstrap.com

각 서비스 목록에 사용할 레이아웃

 

01
내용과 색깔을 수정한 뒤의 페이지

 

후에 한라열쇠 유튜브 채널을 하나 파서 거기에 각 서비스 영상을 올리고 나면

유튜브에서 보기 버튼을 누르면 그 유튜브 영상 링크에 들어갈 수 있게 만들 예정입니다.

아직 각 서비스에 대한 사진과 영상이 없는 상태입니다.

지금은 다른 유튜브 영상이 뜨게 했습니다.

 

충분한 사진과 영상을 찍고 나면 서비스 페이지 완성 글을 따로 올리겠습니다. 

 

 

 

※ 궁금한 부분, 이상한 점 및 오타는 댓글에 부탁드립니다.

 

 

 

다음 글:

2021.04.15 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.15 navigation bar 수정 및 갤러리 페이지 만들기

 

2021.04.15 navigation bar 수정 및 갤러리 페이지 만들기

2021.04.11 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.11 한라열쇠 홍보용 웹페이지 2021.04.12 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.12 메인 페이지 만들기 2021.04.13 - [개발 일지/한라열쇠..

brightnightsky77.tistory.com

반응형

댓글