⚡HTML CSS 및 JS를 사용하여 응답 로그인 페이지 만들기🔥

62080 단어
안녕하세요, 사랑하는 개발자 여러분.👩‍💻👨‍💻, 늦어서 죄송합니다. 새해 복 많이 받으세요!따라서 장시간 휴식을 취한 후에 HTML, CSS, 자바스크립트 등 기본적인 전단 기술을 사용하여 또 다른 호응성이 강한 로그인 페이지를 만들 것이다.

또 다른 응답자? 


예, 저희는 이미creating responsive landing 페이지에 각종 블로그를 만들었습니다. 링크는 다음과 같습니다.⤵️




전체 블로그 글이 아닌 코드 자습서를 보려면 다음 비디오를 확인하십시오.

If you want to see more web design tutorials just like these ! Please consider subscribing to our Youtube Channel.


이 글의 원본 코드는 Github에서 찾을 수 있으며, 모든 그림과 더 많은 내용을 포함하므로, 아래에 제시된 링크를 방문하여 원본 코드를 얻으십시오

Source Code Link


따라서 이 인코딩 블로그 글에서 우리는 두 가지 가장 기본적인 현대 구조 구축 시스템, 즉 CSS Flexbox와 CSS Grid를 다시 소개했다.
너는 이 두 사람의 주요 차이가 무엇인지 아니?
네가 절대적인 천재라는 걸 알았다면!만약 없다면 아래에 제시된 그림을 걱정하지 마십시오. 이것은 CSS Flexbox VS CSS Grid가 무엇인지 간단하게 설명합니다.

할 수 있다😆, 지금 이대로!인코딩 부분으로 들어갑시다, 여기 있습니다!!!
우선 프로젝트 폴더 구조부터 시작합니다👇

보통 우리는 3개의 외부 라이브러리를 사용하는데,👇
  • 상자 아이콘 - 원본을 시작하는 아이콘 라이브러리
  • 구글 글꼴 - 글꼴이 라이브러리에 포함되어 있습니다.
  • 그린스토크 GSAP - 현대 네트워크에 대한 전문적인 JavaScript 애니메이션을 만듭니다.
  • 그래서 위의 프로젝트 폴더 구조를 보면 색인이 필요합니다.html, 스타일.css, 스크립트.모든 이미지 파일을 저장하는 js&IMG 폴더입니다.
    따라서 이 파일들을 만든 후에 가장 좋아하는 코드 편집기로 이동합니다.
    우선, 루트, HTML, CSS 변수, 그리고 기본 스타일의 리셋 등 CSS 파일에서 기본적인 변경을 할 것입니다.

    풍격css


    /* ===== GOOGLE FONTS : www.fonts.google.com ======  */
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Rubik:wght@300;400;500&display=swap");
    /* ==== ROOT ==== */
    * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
    }
    /* ==== CSS VARIABLES ==== */
    :root {
     --logo-text-color: #23241f;
     --lg-text-color: #000000;
     --sm-text-color: #828282;
     --md-light-text: #353534;
     --light-text: #959188;
     --text-color: #80b801;
     --light-border: #d9eab3;
     --gradient-start: #f0fff1;
     --gradient-middle: #fefefa;
     --gradient-end: #fff;
    }
    /* ==== HTML RESET ==== */
    html,
    body {
     scroll-behavior: smooth;
    }
    body {
     height: 100vh;
     width: 100%;
     background: linear-gradient(
      124deg,
      var(--gradient-start) 0%,
      var(--gradient-middle) 50%,
      var(--gradient-end) 100%
     );
    }
    a {
     text-decoration: none;
    }
    button {
     border: none;
     outline: none;
     cursor: pointer;
    }
    ul li {
     list-style-type: none;
    }
    
    /* ==== CONTAINER ==== */
    .container {
        max-width: 1028px;
        margin: 0 auto;
        padding: 0rem;
    }
    .grid {
        display: grid;
    }
    
    @media screen and (min-width: 64em) {
        .container {
            width: 100%;
            padding: 1rem;
        }
    }
    
    위대하다보시다시피 Google은 Google 프로젝트에 구글 글꼴을 가져왔습니다. 즉, Poppins와 Rubik을 포함한 글꼴의 중요성에 따라.
    HTML을 추가하는 프레임을 추가하고 있습니다.
    그러니 저희 색인에 들어오세요.html 파일로 기본 태그를 추가할 수 있습니다.

    색인html


    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Medme Landing Page - Responsive Landing Page</title>
            <!-- ======= STYLE ====== -->
            <link rel="stylesheet" href="./CSS/style.css" />
            <!-- ======= BOXICONS CDN ====== -->
            <link
                href="https://unpkg.com/[email protected]/css/boxicons.min.css"
                rel="stylesheet"
            />
            <!-- ======= GSAP CDN ====== -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
        </head>
        <body>
    
    
            <!-- ======= Script.js ====== -->
            <script src="./JS/script.js"></script>
        </body>
    </html>
    
    저희의 공백의 결과입니다.😆 =>

    할 수 있다!이제 우리의 첫 번째 구성 요소이자 가장 중요한 것은 네비게이션 표시줄이나 네비게이션 표시줄을 만드는 것이다.

    색인html


    <header class="header container">
        <nav class="navbar">
            <div class="logo">
                <h2 class="logo-name">
                    <a href="#">Med<span>me</span> </a>
                </h2>
            </div>
            <div class="nav_menu">
                <div class="close-nav">
                    <button class="close_btn">&#10005;</button>
                </div>
                <ul class="nav-link-list">
                    <li class="nav-link-list-item">
                        <a class="nav-link active" href="#">home</a>
                    </li>
                    <li class="nav-link-list-item">
                        <a class="nav-link" href="#">product</a>
                    </li>
                    <li class="nav-link-list-item">
                        <a class="nav-link" href="#">contact</a>
                    </li>
                    <li class="nav-link-list-item">
                        <a class="nav-link" href="#">about</a>
                    </li>
                </ul>
            </div>
            <button class="toggle_btn">
            <i class="bx bx-menu"></i>
            </button>
        </nav>
    </header>
    

    결과 =>



    우리 스타일에 스타일을 넣을게요.css 파일

    풍격css


    
    /* ==== ROOT RESET ==== */
    /* ==== HTML RESET ==== */
    /* ==== CSS VARIABLES ==== */
    /* ==== CONTAINER ==== */
    /* ==== HEADER ==== */
    .header {
        width: 100%;
        height: 4rem;
        margin-bottom: 3rem;
    }
    .navbar {
        width: 100%;
        height: 100%;
        padding: 0 0.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .logo {
        min-width: 100px;
    }
    .logo-name a {
        font-family: "Rubik", sans-serif;
        letter-spacing: 0.7px;
        font-size: 1.5rem;
        color: var(--logo-text-color);
    }
    .logo-name a span {
        font-family: "Rubik", sans-serif;
        color: var(--text-color);
        font-weight: 400;
    }
    
    .close-nav {
        display: none;
    }
    .close-nav {
        display: none;
    }
    
    .close_btn {
        background-color: #f3f4f6;
        font-size: 1rem;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        font-weight: 600;
    }
    .close_btn:hover {
        background-color: #ffffff;
    }
    
    .nav-link-list {
        display: flex;
    }
    .nav-link-list-item {
        margin: 0 1.5rem;
    }
    .nav-link-list-item .nav-link {
        font-family: "Rubik", sans-serif;
        font-size: 1.05rem;
        letter-spacing: 0.3px;
        text-transform: capitalize;
        color: var(--logo-text-color);
    }
    .nav-link.active {
        font-weight: 600;
    }
    .nav-link:hover {
        color: var(--text-color);
    }
    
    .toggle_btn {
        background-color: transparent;
        display: none;
    }
    .toggle_btn i {
        font-size: 1.5rem;
    }
    
    .show {
        right: 0 !important;
    }
    
    .no-scroll {
        overflow-y: hidden;
    }
    
    

    결과 =>



    그래서 그 전에 우리는 내비게이션 표시줄을 만들고 내비게이션에 편리한 스타일을 추가했다🎉

    하지만 잠깐만, 우리 아직 완성 안 했어...!

    영웅 구역😎


    읊다, 읊조리다😎 그것은 당신의 회사와 제품에 대한 일별을 정의했다.
    색인에 영웅 부분에 표시를 추가합니다.html 파일

    색인html


    <!-- ====== HEADER ====== -->
    <!-- ====== HERO SECTION ====== -->
    <div class="container">
       <section class="grid grid-cols-2">
          <!-- ===== GRID-ITEM-1 ===== -->
          <div class="grid-item-1">
             <div class="flex-item-1">
                <p class="product-intro">#1 Best Herbal by JEZ</p>
                <h1 class="product-tagline">
                   herbal without <span>side effects</span>
                </h1>
                <p class="product-desc">
                   No need to worry about taking medicines,all our products are
                   herbal remedies that have been proven tob be potent and certified.
                </p>
                <a href="#" class="cta-btn">buy now</a>
             </div>
             <div class="flex-item-2">
                <ul class="customer-list">
                   <li class="customer-list-item">
                      <img class="customer-img" src="./img/01.png" alt="cusomtor-1" />
                   </li>
                   <li class="customer-list-item">
                      <img class="customer-img" src="./img/02.png" alt="cusomtor-2" />
                   </li>
                   <li class="customer-list-item">
                      <img class="customer-img" src="./img/03.png" alt="cusomtor-3" />
                   </li>
                </ul>
                <div class="customer-related-desc">
                   <p>our satisfied customers</p>
                   <span class="rating-star">
                   <i class="bx bxs-star"></i>
                   </span>
                   <span class="rating-count">4.9</span>
                   <span class="ratings">( 110k Ratings )</span>
                </div>
             </div>
          </div>
          <!-- ===== GRID-ITEM-2 ===== -->
          <div class="grid-item-2">
             <div class="plant-img">
                <img src="./img/plant-img.png" alt="plant-img" />
             </div>
          </div>
       </section>
    </div>
    
    

    결과 =>



    나는 그것이 성형되고 있을 것이라고 생각한다.좋아, 우리 스타일을 좀 더 넣자.

    풍격css


     .grid-cols-2 { 
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-item-1 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }
    
    .flex-item-1 {
        width: 80%;
    }
    .product-intro {
        font-size: 1rem;
        color: var(--lg-text-color);
        font-weight: 500;
    }
    .product-tagline {
        font-size: 3.2rem;
        color: var(--lg-text-color);
        line-height: 1.25;
        text-transform: capitalize;
        margin-top: 1.5rem;
    }
    .product-tagline span {
        color: var(--text-color);
    }
    
    .product-desc {
        color: var(--sm-text-color);
        font-weight: 500;
        margin-top: 2rem;
        font-size: 1rem;
    }
    
    .cta-btn:active,
    .cta-btn:visited {
        color: var(--gradient-end);
    }
    .cta-btn {
        display: block;
        width: 150px;
        height: 43px;
        background-color: var(--text-color);
        font-size: 1rem;
        letter-spacing: 0.3px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: capitalize;
        border-radius: 5px;
        margin-top: 3rem;
        transition: 0.5s;
        color: var(--gradient-end);
        box-shadow: 0px 3px 10px 0px rgba(128, 184, 1, 0.75);
    }
    .cta-btn:hover {
        background-color: #73a601;
    }
    .cta-btn:active {
        transform: scale(0.85);
    }
    
    .flex-item-2 {
        display: flex;
        gap: 2rem;
        padding-left: 0.7rem;
    }
    
    .customer-list {
        display: flex;
    }
    .customer-list-item {
        width: 3rem;
        height: 3rem;
    }
    .customer-list-item .customer-img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }
    .customer-img {
        border: 3px solid var(--light-border);
    }
    .customer-list-item {
        margin-left: -0.7rem;
    }
    
    .customer-related-desc p {
        font-size: 1rem;
        font-weight: 400;
        text-transform: capitalize;
        letter-spacing: 0.3px;
        font-family: "Rubik", sans-serif;
        color: var(--md-light-text);
        margin-bottom: 0.2rem;
    }
    .rating-star {
        color: #ffac37;
    }
    .rating-count {
        color: var(--lg-text-color);
        font-weight: 500;
        font-size: 0.95rem;
        font-family: "Rubik", sans-serif;
    }
    .ratings {
        color: var(--light-text);
        letter-spacing: 0.3px;
        font-size: 0.9rem;
        font-family: "Rubik", sans-serif;
        font-weight: 400;
    }
    
    .plant-img {
        width: 100%;
        height: 100%;
    }
    .plant-img img {
        width: 100%;
        height: 100%;
    } 
    

    이제 응답성 미디어 조회를 추가해 휴대전화와 태블릿PC 등 작은 스크린 장치에서 응답성을 실현하자.

    풍격css


    /* ===== HEADER ===== */
    /* ===== HERO  ===== */
    /* ===== RESPONSIVE MEDIA QUERIES  ===== */
    @media screen and (max-width: 991px) {
    body {
    background: linear-gradient(
    90deg,
    var(--gradient-start) 0%,
    var(--gradient-middle) 50%,
    var(--gradient-end) 100%
    );
    }
    .close-nav {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    }
    .nav_menu {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 100%;
    padding: 2rem;
    background: rgba(215, 215, 215, 0.6);
    backdrop-filter: blur(7px);
    z-index: 50;
    transition: 0.5s ease;
    opacity: 1;
    }
    .nav-link-list {
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    }
    .nav-link-list-item {
    margin: 1.4rem 0;
    }
    .nav-link-list-item .nav-link {
    font-size: 1.2rem;
    }
    .nav-link:hover {
    color: #fff;
    }
    .toggle_btn {
    display: block;
    }
    .grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    }
    .grid-item-1 {
    gap: 3rem;
    }
    .flex-item-1 {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    .product-tagline {
    font-size: 2.5rem;
    }
    .product-desc {
    font-size: 0.8rem;
    padding: 0 1.25rem;
    }
    .flex-item-2 {
    width: 100%;
    justify-content: center;
    }
    .customer-list-item {
    width: 2.5rem;
    height: 2.5rem;
    }
    .customer-related-desc p {
    font-size: 0.85rem;
    }
    .rating-star {
    font-size: 0.7rem;
    }
    .rating-count {
    font-size: 0.75rem;
    }
    .ratings {
    font-size: 0.8rem;
    }
    .plant-img {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .plant-img img {
    width: 20rem;
    }
    }
    
    
    현재, 우리는 다른 화면과 달리 내비게이션 표시줄을 더 작은 화면에 응답하도록 합니다.

    여기에서, 우리는 내비게이션 링크가 이동 화면에 숨겨져 있고, 데스크톱 화면에서 볼 수 있는 것을 관찰했다.그래서 여기에 자바스크립트를 추가했습니다. 메뉴 전환 단추를 누르면 내비게이션 링크를 볼 수 있습니다.
    이제 우리 각본으로 들어가.논리적 js 파일 추가🧠

    각본js


    const navMenu = document.querySelector(".nav_menu"),
        ToggleBtn = document.querySelector(".toggle_btn"),
        CloseBtn = document.querySelector(".close_btn");
    
    // ==== SHOW MENU ==== //
    ToggleBtn.addEventListener("click", () => {
        navMenu.classList.add("show");
        document.querySelector("body").classList.add("no-scroll");
    });
    
    // ==== HIDE MENU ==== //
    CloseBtn.addEventListener("click", () => {
        navMenu.classList.remove("show");
        document.querySelector("body").classList.remove("no-scroll");
    });
    
    
    그래서 우리한테js 파일은 navMenu,toggleBtn,closeBtn을 포함하여 실행할 요소를 캡처하고,toggleBtn,closeBtn에 이벤트 리스트를 추가하여 내비게이션 표시줄을 표시하고 숨깁니다.
    더 잘 이해하려면 아래에 나오는 GIF 형식 출력을 참조하십시오.

    GIF 형식 생성⤵️



    그래서 오른쪽 상단에 있는 세 개의 칸을 클릭하면 내비게이션 링크를 볼 수 있다.(boxicons 라이브러리나 사이트의 아이콘으로 전환 단추를 만듭니다.
    따라서 그것을 눌렀을 때 새로운div가 열렸고 내비게이션 링크를 보았으며 오른쪽 상단의div에서 닫기 단추를 다시 보았습니다.

    Absolutely Fantastic!


    저희가 메디컬 응답 로그인 페이지를 만들 때까지 본문을 읽어 주셔서 감사합니다.
    이제 로그인 페이지를 더욱 재미있게 하기 위해 GSAP 라이브러리를 사용하여 애니메이션을 추가합니다.
    우리 대본에 들어가자.js 파일.
    // ==== TOGGLE MENI ==== //
    // ==== GSAP Animations ==== //
    // ==== LOGO  ==== //
    gsap.from(".logo", {
        opacity: 0,
        y: 10,
        delay: 1,
        duration: 0.5,
    });
    // ==== NAV-MENU ==== //
    gsap.from("ul li", {
        opacity: 0,
        y: 10,
        delay: 1.4,
        duration: 0.5,
        stagger: 0.3,
    });
    // ==== TOGGLE BTN ==== //
    gsap.from(".toggle_btn", {
        opacity: 0,
        y: 10,
        delay: 1.2,
        duration: 0.5,
    });
    
    // ==== FLEX ITEM ==== //
    gsap.from(".flex-item-1", {
        opacity: 0,
        y: 20,
        delay: 2.8,
        duration: 1,
    });
    
    gsap.from(".customer-related-desc p", {
        opacity: 0,
        y: 20,
        delay: 2.8,
        duration: 0.8,
    });
    
    gsap.from(".rating-star i", {
        opacity: 0,
        y: 20,
        delay: 3,
        duration: 1,
    });
    
    gsap.from(".rating-count", {
        opacity: 0,
        y: 20,
        delay: 3,
        duration: 1,
    });
    
    gsap.from(".ratings", {
        opacity: 0,
        y: 20,
        delay: 3,
        duration: 1,
    });
    
    // ==== PLANT IMAGE ==== //
    gsap.from(".plant-img img", {
        opacity: 0,
        y: 20,
        delay: 3,
        duration: 1,
    });
    
    

    And that's it guys here we end our project! Thank you so much for reading the post till the end !!! Please Make sure you check out my Youtube Channel where I post this kind of coding tutorial.


    감사합니다!즐거움 코드

    좋은 웹페이지 즐겨찾기