HTML CSS를 사용한 반응형 Navbar

22296 단어 webdevcsshtmljavascript
Navbar 구성 요소는 브랜드 연락처 및 기타 세부 정보와 같은 프로젝트 또는 브랜드에 대한 모든 정보를 보유하고 있기 때문에 클라이언트 웹 사이트의 중요한 부분이며 navbar는 반응이 좋을 때 항상 좋게 들리므로 HTML 코드부터 시작하겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="./assets/Group 11.png" sizes="32x32" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://kit.fontawesome.com/814966721c.js" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

    <title>Personal Portfolio</title>
</head>
<body>
    <section id="home">
        <header>
            <nav class="nav">
              <a href="/" class="logo">Portfolio</a>

              <div class="hamburger">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
              </div>

              <div class="nav__link hide">
                <a href="#">home</a>
                <a href="#">about</a>
                <a href="#">Skills</a>
                <a href="#">blog</a>
                <a href="#">contact</a>
              </div>
            </nav>
          </header>

        <div class="content">
            Hey there,
            I am Ganesh and Congratulations
             you successfully
             build navbar component.

        </div>
    </section>
</body>
</html>


이제 우리는 HTML 부분을 마쳤습니다. 이제 우리의 창의성으로 CSS를 추가합니다.

@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Pattaya&family=Poppins:wght@200;400;600&family=Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    background-color: #F8F8FF;
}

a {
    text-decoration: none;
    color: rgb(45, 182, 175);
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
  }
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
  }

  .logo {
    font-size: 32px;
    color: rgb(5, 5, 116);
    padding-left: 20px;
  }

  .hamburger {
    padding-right: 20px;
    cursor: pointer;
  }

  .hamburger .line {
    display: block;
    width: 40px;
    height: 5px;
    margin-bottom: 10px;
    background-color: black;
  }

  .nav__link {
    position: fixed;
    width: 94%;
    top: 5rem;
    left: 18px;
    /* background-color: lightblue; */
  }

  .nav__link a {
    display: block;
    text-align: center;
    padding: 10px 0;
  }

  .nav__link a:hover {
    border-bottom: 3px solid rgb(36, 145, 196);
    border-radius: 7px;
    transition: all 0.2s ease;
  }

  .hide {
    display: none;
  }
  .content{
    display: flex;
    justify-content: center;
    text-align: justify;
    align-items: center;
    margin-top: 20%;
    color: rgb(17, 19, 19);
    font-weight: 700;
    font-size: 20px;

    font-family: poppins,sans-serif;
  }
  @media screen and (min-width: 600px) {
    .nav__link {
      display: block;
      position: static;
      width: auto;
      margin-right: 20px;
      background: none;


    }

    .nav__link a {
      display: inline-block;
      padding: 15px 20px;


    }

    .hamburger {
      display: none;
    }
    .content{
      display: block;
      text-align: center;
      margin-left: 15px;
    }
  }


위 코드의 출력:


GitHub에서 이 코드를 확인하십시오.
이와 같은 더 많은 콘텐츠를 보려면 저를 팔로우하고 댓글 섹션에서 제안 사항을 공유하세요...!!

나랑 사귀자
2011년제 MacbookPro의 배터리를 교환한 이야기
기계 언어 컴파일러의 작은 버그를 수정한 방법 0100 1111 0100 1011

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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