Menjadi Seorang Frontend Developer
Disini kita akan membuat sebuah dokumentasi perjalanan menuju seorang frontend developer,
jadi ikuti dan saksikan perjalanan saya menjadi seorang frontend developer, saya akan konsisten dalam mengerjakan nya selama beberapa hari kedepan.
ini adalah hari ke 4 saya menjadi seorang frontend developer dengan mengerjakan sebuah challange yang mudah berjudul Order summary component pada website frontend mentor, dengan kelas newbie, saya mengkonvert menggunakan HTML dan CSS.
dimana kita menganalisis terlebih dahulu apa saja kebutuhan yang kita perlukan.
seperti memberikan kelas yang nantinya kita bisa style, dan melihat ketentuan yang berlaku,
dibawah ini contoh kodingan yang sudah selesai :
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | Order summary card - Day 4</title>
</head>
<body>
<div class="container">
<div class="hero">
<img src="images/illustration-hero.svg" alt="" />
</div>
<div class "content">
<h2 class="title">Order Summary</h2>
<p class="subtitle">You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!</p>
<div class="plan-box">
<div class="plan-box-left">
<img src="images/icon-music.svg" alt="" />
<div>
<h5>Annual Plan</h5>
<p>$59.99/year</p>
</div>
</div>
<a href="">Change</a>
</div>
<a href="" class="proceed-btn">Proceed to Payment</a>
<a href="" class="cancel-btn">Cancel Order</a>
</div>
</div>
</body>
</html>CSS :
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Red Hat Display', sans-serif;
min-height: 100vh;
background-image: url(images/pattern-background-desktop.svg);
background-repeat: no-repeat;
background-size: contain;
background-color: hsl(225, 100%, 94%);
position: relative;
font-size: 16px;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 450px;
background: #fff;
border-radius: 20px;
overflow: hidden;
}
.content {
padding: 10%;
text-align: center;
}
.title {
color: hsl(223, 47%, 23%);
font-weight: 900;
font-size: 28px;
margin-bottom: 20px;
}
.content p.subtitle {
color: hsl(224, 23%, 55%);
margin-bottom: 25px;
}
.plan-box {
background-color: hsl(225, 100%, 98%);
border-radius: 12px;
display: flex;
padding: 25px;
align-items: center;
justify-content: space-between;
}
.plan-box-left {
display: flex;
align-items: center;
text-align: left;
}
.plan-box-left div {
margin-left: 20px;
}
.plan-box-left div h5 {
font-weight: 900;
font-size: 17px;
color: hsl(223, 47%, 23%);
}
.plan-box-left div p {
font-size: 17px;
color: hsl(224, 23%, 55%);
}
.plan-box a {
font-weight: 700;
color: hsl(245, 75%, 52%);
}
.plan-box a:hover {
text-decoration: none;
color: hsla(245, 75%, 52%, 0.75);
}
a.proceed-btn {
display: block;
text-decoration: none;
color: #fff;
background-color: hsl(245, 75%, 52%);
padding: 15px 0;
border-radius: 12px;
margin: 30px 0;
font-weight: 900;
}
a.proceed-btn:hover {
background-color: hsla(245, 75%, 52%, 0.75);
}
a.cancel-btn {
color: hsl(224, 23%, 55%);
font-weight: 900;
text-decoration: none;
}
a.cancel-btn:hover {
color: #000;
}
@media only screen and (max-width: 491px) {
body {
background-image: url(images/pattern-background-mobile.svg);
font-size: 14px;
}
.container {
max-width: 87%;
}
.title {
font-size: 22px;
}
.content {
padding: 9% 7%;
}
div.plan-box {
padding: 12px;
}
.plan-box-left div {
margin-left: 10px;
}
.plan-box-left div h5 {
font-size: 14px;
}
.plan-box-left div p {
font-size: 14px;
}
a.proceed-btn, a.cancel-btn, .plan-box a {
font-size: 13px;
}
}This is the 4st frontend mentor challenge we will cover. Today we will convert a Order summary component design to responsive HTML, CSS.
#thechallenge
- A perfect project for newbies who are starting to build confidence with layouts!
#Your users should be able to:
- See hover states for interactive elements
#link
- Interactive card details form challenge: https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj
- Solution URL: https://github.com/ICode88/Order-summary-component-DAY-4
- Live Site URL: https://icode88.github.io/Order-summary-component-DAY-4/
👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤
⏱ Timestamps:
00:00 Starting Up
03:08 HTML
07:22 CSS
26:34 Responsive
#frontend #day4 #frontendmentor #challenge #solution #vlogkomputer
Keywords: Order summary component, Order summary component solution, Order summary component codepen, frontend mentor challenge, front end mentor, web design challenge
Komentar
Posting Komentar