Challenge-1 Frontendmentor.io
방금 @frontendmentor의 프론트엔드 코딩 챌린지를 완료했습니다 🎉
보려면 여기를 클릭하십시오 live url
Github repo
내 솔루션을 볼 수 있습니다here.
이 챌린지를 완료하기 위해 HTML과 CSS만 사용했습니다.
내 HTML 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap"
rel="stylesheet"
/>
<title>Frontend Mentor | Order summary card</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
</head>
<body>
<main>
<section class="container">
<div>
<img
src="./images/illustration-hero.svg"
class="hero"
alt="dancing with music"
/>
</div>
<h1 class="heading">Order Summary</h1>
<div class="description">
You can now listen to millions of songs, audiobooks, and podcasts on
any device anywhere you like!
</div>
<div class="price_container">
<div class="pricing">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<g fill="none" fill-rule="evenodd">
<circle cx="24" cy="24" r="24" fill="#DFE6FB" />
<path
fill="#717FA6"
fill-rule="nonzero"
d="M32.574 15.198a.81.81 0 00-.646-.19L20.581 16.63a.81.81 0 00-.696.803V26.934a3.232 3.232 0 00-1.632-.44A3.257 3.257 0 0015 29.747 3.257 3.257 0 0018.253 33a3.257 3.257 0 003.253-3.253v-8.37l9.726-1.39v5.327a3.232 3.232 0 00-1.631-.441 3.257 3.257 0 00-3.254 3.253 3.257 3.257 0 003.254 3.253 3.257 3.257 0 003.253-3.253V15.81a.81.81 0 00-.28-.613z"
/>
</g>
</svg>
</span>
<div>
<h2>Annual Plan</h2>
<div>$59.99/year</div>
</div>
</div>
<button class="change_button">Change</button>
</div>
<div class="actions">
<button class="proceed">Proceed to Payment</button>
<button class="cancel">Cancel Order</button>
</div>
</section>
</main>
<footer class="footer">
<div>
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Rhythm Saha</a>.
</div>
</footer>
</body>
</html>
CSS 코드
:root {
--Pale-blue: hsl(225, 100%, 94%);
--Bright-blue: hsl(245, 75%, 52%);
--Very-pale-blue: hsl(225, 100%, 98%);
--Desaturated-blue: hsl(224, 23%, 55%);
--Dark-blue: hsl(223, 47%, 23%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: url(./images//pattern-background-desktop.svg);
background-size: contain;
background-position: fixed;
background-repeat: no-repeat;
background-color: var(--Pale-blue);
font-family: "Red Hat Display", sans-serif;
}
main {
min-height: calc(100vh - 100px - 10vh);
}
@media only screen and (max-width: 375px) {
body {
background-image: url(./images//pattern-background-mobile.svg);
background-size: auto;
}
}
.container {
width: 90%;
background: white;
margin: 10vh auto 0;
max-width: 500px;
border-radius: 2rem;
padding-bottom: 1rem;
box-shadow: hsla(224, 23%, 55%, 0.301) 0px 7px 29px 0px;
}
.hero {
width: 100%;
border-radius: 2rem 2rem 0 0;
margin-bottom: 1rem;
overflow: hidden;
}
.heading {
text-align: center;
color: hsl(223, 47%, 23%);
margin: 2rem 0;
font-weight: 900;
font-size: 1.8rem;
}
@media only screen and (max-width: 375px) {
.heading {
text-align: center;
color: hsl(223, 47%, 23%);
margin: 1.5rem 0;
font-weight: 900;
font-size: 1.3rem;
}
}
.description {
width: 80%;
text-align: center;
margin: auto;
font-size: 1.2rem;
color: hsl(224, 23%, 55%);
padding: 0 1rem;
line-height: 1.6rem;
}
@media only screen and (max-width: 375px) {
.description {
padding: 0;
font-size: 1rem;
}
}
.price_container {
width: 80%;
margin: 1.5rem auto;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--Very-pale-blue);
padding: 1.3rem;
border-radius: 1rem;
transition: all 250ms;
}
.pricing {
display: flex;
justify-content: center;
gap: 1.2rem;
color: var(--Desaturated-blue);
}
.pricing h2 {
font-weight: 900;
color: var(--Dark-blue);
margin-bottom: 3px;
font-size: 1rem;
}
@media screen and (max-width: 375px) {
.price_container {
width: 85%;
margin: 1.5rem auto;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--Very-pale-blue);
padding: 1rem;
border-radius: 1rem;
}
}
.change_button {
border: none;
outline: none;
background: none;
color: var(--Bright-blue);
text-decoration: underline;
font-size: 1rem;
transition: all 250ms;
font-weight: 700;
}
.change_button:hover {
text-decoration: none;
color: hsl(245, 82%, 68%);
cursor: pointer;
}
@media screen and (max-width: 375px) {
.change_button {
font-size: 14px;
font-weight: 700;
}
}
.actions {
margin: 2rem auto;
display: flex;
flex-direction: column;
width: 80%;
gap: 2rem;
}
.proceed {
border: none;
outline: none;
width: 100%;
color: white;
background: var(--Bright-blue);
padding: 1rem 0;
font-weight: 700;
font-size: 1rem;
border-radius: 10px;
transition: all 250ms;
box-shadow: hsla(245, 75%, 52%, 0.45) 0px 7px 32px 0px;
}
.proceed:hover {
background-color: hsl(245, 82%, 68%);
cursor: pointer;
}
.cancel {
border: none;
outline: none;
background: transparent;
font-size: 1rem;
font-weight: 700;
color: var(--Desaturated-blue);
transition: all 250ms;
}
.cancel:hover {
color: var(--Dark-blue);
cursor: pointer;
}
footer {
color: var(--Dark-blue);
display: flex;
align-items: center;
justify-content: center;
height: 100px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
}
.footer a:visited {
color: var(--Bright-blue);
}
.footer a {
color: var(--Bright-blue);
}
@media screen and (max-width: 375px) {
.footer {
padding: 0 2rem;
text-align: center;
}
}
개선할 수 있는 방법에 대한 제안을 환영합니다!
Reference
이 문제에 관하여(Challenge-1 Frontendmentor.io), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rhythmsaha/challenge-1-frontendmentorio-cn텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
