10일 동안 10개의 CSS 프로젝트 빌드: 프로젝트 5

13645 단어 webdevcssprojectsbeginners
내 "10일 동안 10개의 CSS 프로젝트 빌드"시리즈에 오신 것을 환영합니다. 이것은 5일차 및 프로젝트 5입니다. 이 시리즈의 다른 기사를 읽지 않았다면 먼저 확인하십시오. 이 기사의 끝 부분에 나열하겠습니다.

오늘은 frontendmentor에서 Huddle landing page을 빌드하겠습니다.



** 항상 시작하기 전에 스타터 파일 다운로드 **
발신자 here

그리고 코드 편집기에서 시작 파일을 엽니다.
이제 코딩을 해봅시다.

1부: HTML



<body>
  <header>
    <img src="./images/logo.svg" alt="logo">
  </header>

  <main>
    <section class="left">
      <img src="./images/illustration-mockups.svg" alt="illustration-mockups">
    </section>
    <section class="right">
      <h1>Build The Community Your Fans Will Love</h1>
      <p>Huddle re-imagines the way we build communities. You have a voice, but so does your audience. 
  Create connections with your users as you engage in genuine discussion. </p>
  <button>Register</button> 
    </section>
  </main>
  <footer>
    <i class="fab fa-facebook-f"></i>
    <i class="fab fa-twitter"></i> 
    <i class="fab fa-instagram"></i> 
  </footer>
</body>

이것은 단지 마크업 복사하여 코드 편집기에 붙여넣기한 것입니다. 그리고 그것을 읽으십시오.

2부: CSS



이제 우리는 프로젝트의 스타일을 지정할 것입니다.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;600&display=swap'); 

/* global syles */

* {
    box-sizing: border-box;
    margin: 0; 
    padding: 0; 
}

body {
    font-family: 'Open Sans', sans-serif; 
    background: hsl(257, 40%, 49%) url("./images/bg-desktop.svg") no-repeat; 
    padding: 50px 60px;   
}


여기에서는 "style-guide.md"파일에 제공된 글꼴을 가져왔습니다. 구글 폰트에서.
전역 선택기가 있는 모든 요소에 일부 전역 스타일을 추가했습니다.

그런 다음 본문에 글꼴을 추가하고 배경색, 이미지 및 일부 패딩을 추가했습니다.

여기까지입니다.



/* hader */
header img {
    width: 200px; 
}

/* main styles */
main {
    display: flex; 
    padding-top: 85px; 
    justify-content: space-between; 
} 

.left {
    padding-right: 2.5em; 
} 

.right {
    color: #fff;    
}

h1 {
    font-size: 2.5em; 
    font-family: 'Poppins';
    padding-bottom: 20px; 
}

p {
    line-height: 1.7;
    opacity: .8;  
}

button {
    padding: 15px 60px; 
    margin-top: 30px; 
    border-radius: 5rem;
    border: 0; 
    cursor: pointer; 
    color: hsl(257, 40%, 49%);
    font-size: 1em;
    font-weight: 600;   
}

button:hover {
    color: #fff; 
    background: hsl(300, 69%, 71%); 
}


여기서는 로고에 200px 너비를 지정했습니다.

메인 섹션에 display flex를 추가했습니다. 따라서 왼쪽과 오른쪽 섹션은 서로 옆에 있습니다.

그리고 오른쪽 섹션의 텍스트와 버튼의 스타일을 지정했습니다.



/* footer */

footer {
    text-align: right;  
}

.fab {
    border: 2px solid #fff; 
    padding: 10px 10px; 
    border-radius: 50%; 
    margin-left: 20px; 
    color: #fff;   
}

.fa-facebook-f {
    padding: 10px 13px;   
}

.fab:hover {
    color: hsl(300, 69%, 71%);
    border-color: hsl(300, 69%, 71%); 
    cursor: pointer; 
}


바닥글 섹션 스타일입니다. 바닥글에는 3개의 소셜 아이콘이 있습니다.
오른쪽에 정렬했습니다. 그리고 스타일을 추가했습니다.



이제 모바일 디자인입니다.

@media screen and (max-width: 1000px) {

    main {
        flex-direction: column; 
    }

    .left img {
        width: 100%; 
    }

    .right {
        padding-top: 40px; 
        text-align: center;  
    }

    h1  {
        font-size: 1.8em; 
    }

    button {
        padding: 15px 90px; 
    }

    footer {
        text-align: center;
        padding-top: 80px;  
    } 

}


모바일 디자인에서는 기본에 flex-direction 열을 추가했습니다. 따라서 섹션은 서로 위에 유지됩니다.

그리고 텍스트와 바닥글을 가운데 정렬했습니다.



이전 게시물:



Build 10 CSS projects: project 4

결론



오늘의 프로젝트는 여기까지입니다.
이와 같은 더 많은 기사를 원하면 다음을 고려하십시오.

읽어 주셔서 감사합니다.
HEVC 코드 추적(14): 디코딩된 xDecodeSlice
경량급 자바 캐시 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage