⚡HTML CSS 및 JS를 사용하여 응답 로그인 페이지 만들기🔥
또 다른 응답자?
예, 저희는 이미creating responsive landing 페이지에 각종 블로그를 만들었습니다. 링크는 다음과 같습니다.⤵️
👨💻 HTML CSS 및 JS를 사용하여 응답 로그인 페이지 만들기🔥
아니케트・ 10월 13~21일・ 12분 읽기
#html
#css
#javascript
#webdev
HTML CSS 및 JS를 사용하여 응답 로그인 페이지 만들기🔥
아니케트・ 9월 8~21일・ 9분 읽기
#html
#css
#javascript
#webdev
전체 블로그 글이 아닌 코드 자습서를 보려면 다음 비디오를 확인하십시오.
If you want to see more web design tutorials just like these ! Please consider subscribing to our Youtube Channel.
이 글의 원본 코드는 Github에서 찾을 수 있으며, 모든 그림과 더 많은 내용을 포함하므로, 아래에 제시된 링크를 방문하여 원본 코드를 얻으십시오
따라서 이 인코딩 블로그 글에서 우리는 두 가지 가장 기본적인 현대 구조 구축 시스템, 즉 CSS Flexbox와 CSS Grid를 다시 소개했다.
너는 이 두 사람의 주요 차이가 무엇인지 아니?
네가 절대적인 천재라는 걸 알았다면!만약 없다면 아래에 제시된 그림을 걱정하지 마십시오. 이것은 CSS Flexbox VS CSS Grid가 무엇인지 간단하게 설명합니다.
할 수 있다😆, 지금 이대로!인코딩 부분으로 들어갑시다, 여기 있습니다!!!
우선 프로젝트 폴더 구조부터 시작합니다👇
보통 우리는 3개의 외부 라이브러리를 사용하는데,👇
따라서 이 파일들을 만든 후에 가장 좋아하는 코드 편집기로 이동합니다.
우선, 루트, 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;
}
}
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">✕</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");
});
더 잘 이해하려면 아래에 나오는 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.
감사합니다!즐거움 코드
Reference
이 문제에 관하여(⚡HTML CSS 및 JS를 사용하여 응답 로그인 페이지 만들기🔥), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ananiket/medme-responsive-landing-page-using-html-css-js-144h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
