Footer Section Bootstrap Consultant Website – Part-3

안녕하세요 매일 수업료를 다시받을 수 있습니다

이전 비디오에서는 콘텐츠 1, 콘텐츠 2 및 콘텐츠 3 섹션을 만들었습니다 이 튜토리얼에서는 섹션 4와 웹 사이트의 바닥 글 섹션을 작성합니다 이 튜토리얼 시리즈의 마지막 부분입니다 나는 당신이 학습을 즐기기를 바랍니다 그래서 우리가 떠나기 전에 let�s가 시작됩니다

앞으로 콘텐츠 만들기 4 그러므로 클래스 내용으로 div를 생성하십시오 이 div에서 행을 만듭니다 그리고 col-6의 두 열을 삽입하십시오 이제 첫 번째 열에서 행을 추가하고 두 개의 열을 다시 삽입합니다

그래서 우리는 col-2와 col-7을 추가 할 것입니다 col-2에서 우리는 질문 아이콘의 이미지를 추가 할 것입니다 두 번째 열에서는 텍스트 센터 클래스로 div를 만듭니다 그리고 h4 제목 태그를 텍스트와 함께 삽입하십시오 그래서 여기에 텍스트를 추가 할 것입니다

그리고 닫는 div 바로 뒤에 p 태그에 데모 텍스트를 추가 할 것입니다 따라서 단락 태그에 텍스트를 복사하여 붙여 넣습니다 우리는 약간의 패딩을 추가하려고합니다 따라서 패딩 윗부분과 패딩을 왼쪽에 추가합니다 또한 내부 행에 패딩 4를 추가하십시오

콘텐츠 4 클래스에서 경계 상단과 경계 하단 클래스를 추가합니다 그 다음, 콘텐츠 4의 두 번째 열에 행을 추가합니다 이 줄에서는 col-2와 col-7 두 열을 추가합니다 col-2에서는 이미지 태그에 다운로드 아이콘을 추가합니다 그리고 col-7에서는 div를 텍스트 센터로 추가합니다

이 div에서 텍스트를 추가 할 것입니다 그래서 몇 가지 텍스트를 추가하겠습니다 그 다음에는이 코드를 다시 입력하는 것을 제외하고 단락 태그를 삽입합니다 이 p 태그를 복사하여 여기에 붙여 넣으십시오 그런 다음 행에 패딩 4를 추가합니다

나는 여기에 약간의 문제가 있다고 생각한다 승인 여기에 h4 태그를 삽입하여 삽입하겠습니다 이제는 완벽합니다 이제는 바닥 글 섹션을 만드는 것입니다

그래서 우리는 바닥 글 태그를 추가 할 것입니다 이 태그에서 클래스 내용으로 div를 추가합니다 5 앞으로 나아 가기 전에 콘텐츠 4에 약간의 마진을 추가 할 것입니다 컨텐츠 5에서는 div를 컨테이너 및 패딩 5 클래스로 추가합니다 이 div에서 div를 텍스트 흰색으로 채우고 상단 4를 채 웁니다

여기서 우리는 d flex 표제어 태그에 d flex 인라인 클래스를 추가 할 것입니다 이 클래스는 한 줄에 h2 제목을 표시합니다 구독 뉴스 레터 텍스트를 추가하십시오 텍스트를 볼 수 없으므로 Stylecss 파일에 컨텐츠 5 클래스를 삽입합니다

그리고 배경색을 적용하십시오 이제 콘텐츠에 배경색을 추가했기 때문에 텍스트를 제대로 볼 수 있습니다 5 수업 그 다음 입력 텍스트에 자리 표시 자 입력 이메일 주소를 입력합니다 그리고 클래스 패딩 2 margin left 3과 border zero를 추가하십시오

그 후이 텍스트 상자에 크기 50을 지정하십시오 입력 태그 바로 다음에 버튼을 추가합니다 그 사이에 공백을 추가하지 않으므로 입력 태그와 버튼 이 공간을 제거하기 위해 입력 태그 바로 뒤에 버튼을 만듭니다 그러면 버튼을 만들고 클래스를 추가합니다

y btn-info 텍스트 – 어둡기 및 경계 0을 채우는 것과 같습니다 이 버튼에 텍스트 제출을 지정하십시오 그 후에 우리는 바닥 글과 경계 최상위 클래스를 만들 것입니다 행과 함께 div를 만듭니다 그리고 col-3의 4 개의 열을 추가하십시오

그래서 첫 번째 열에서 d-flex 플렉스 컬럼 클래스로 div를 만듭니다 Flex-column 클래스는 수직 방향을 설정하는 데 사용됩니다 그 다음 텍스트 흰색 클래스와 함께 h6 제목 태그를 추가합니다 그리고 회사 텍스트를 추가하십시오 이 열에 패딩 4를 추가합니다

stylecss에서 바닥 글 클래스를 만듭니다 그리고 마진 상위 8 %를 추가하십시오 완벽 해 그 후에 우리는 몇 개의 링크를 추가 할 것입니다

그래서 앵커 태그를 추가 할 것입니다 그리고 가정 텍스트를 지정하십시오 us 텍스트가있는 다른 앵커 태그를 만듭니다 더 많은 링크를 만들려면 여기에 복사하여 여기에 붙여 넣으십시오 style

css에서 앵커 클래스를 만들고 텍스트 장식 없음을 지정합니다 색상과 패딩을 2 % 지정하십시오 다른 3 개의 열에도 패딩 4를 추가합니다 두 번째 열에서는 d flex와 flex column 클래스로 div를 생성합니다 이 div에서 텍스트 흰색 클래스로 h6 태그를 생성합니다

서비스 텍스트를 지정하십시오 그런 다음 여기에 링크를 추가하십시오 그래서 중개, 가치있는 서비스, 뮤추얼 펀드 및 보험 링크를 추가 할 것입니다 세 번째 열에서 플렉스 컬럼 클래스를 추가하고 div에 텍스트 흰색 클래스를 추가합니다 그리고 우리에게 텍스트를 지정하십시오

그런 다음 Gmail 링크를 지정하고 전화 번호를 지정합니다 네 번째 열에서는 h6 태그를 텍스트 흰색으로 만듭니다 그리고 우리와 텍스트로 연결을 지정하십시오 이 후 우리는 d flex와 flex 행 클래스로 div를 생성 할 것입니다 이 클래스는 요소를 가로 방향으로 설정합니다

페이스 북 png 이미지가있는 이미지 태그를 삽입하십시오 클래스 폭을 25 % 높이 25 %로 지정하고 패딩 1을 지정합니다 그런 다음이 이미지 태그를 복사하여 붙여넣고 트위터 png 이미지로 이미지를 변경하고 PNG 이미지에 링크되어 있습니다 그런 다음 세 개의 닫는 div를 남기고 텍스트 중심의 흰색 폭을 가진 다른 div를 추가하십시오 100 및 패딩 톱 4 클래스

여기서 우리는 저작권 정보를 지정하여 p 태그를 추가하고 저작권 정보를 추가 할 것입니다 이리 span 태그에서는 일일 수업료 텍스트의 색상을 지정합니다 좋아 이제 모든 것이 만들어집니다

시간은 프로젝트를 실행하는 것입니다 회전 목마와 놀라운 디자인으로 매우 아름답게 보입니다 그래서이 튜토리얼 시리즈에서는이 모든 것을 다룰 수 있습니다 이 튜토리얼을 좋아한다면이 튜토리얼에서 유용한 것을 찾으면 같은 버튼을 클릭하십시오 나를 위해 무언가를 만들 것을 제안하고 싶다면 비디오 댓글에서 나를 말하십시오

나는 당신을 위해 그것을 만들거나, 가능한 한이 일을 창조 할 아이디어를 줄 것이다 최신 채널 인 경우이 채널을 구독하고 벨 아이콘을 누르면 내 채널의 알림을받습니다 모든 새로운 비디오 그게 오늘이야 다음 비디오에서 만나요

그 때까지 행복하게 지켜봐주십시오