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 9 saya menjadi seorang frontend developer dengan mengerjakan sebuah challange yang mudah berjudul Single price grid 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"> <!-- 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">
<title>Frontend Mentor | Single Price Grid Component - Day 9</title>
</head>
<body>
<main>
<div class="top">
<h1>Join our community</h1>
<span>30-day, hassle-free money back guarantee</span>
<p>Gain access to our full library of tutorials along with expert code reviews.
Perfect for any developers who are serious about honing their skills.</p>
</div>
<div class="middle">
<h2>Monthly Subscription</h2>
<span><b>$29</b>per month</span>
<span>Full access for less than $1 a day</span>
<button>Sign Up</button>
</div>
<div class="bottom">
<h2>Why Us</h2>
<span>Tutorials by industry experts <br>
Peer & expert code review <br>
Coding exercises <br>
Access to our GitHub repos <br>
Community forum <br>
Flashcard decks <br>
New videos every week</span>
</div>
</main>
</body>
</html>CSS :
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');
:root {
--Cyan: hsl(179, 62%, 43%);
--Cyan2: hsl(179, 47%, 53%);
--Bright-Yellow: hsl(71, 73%, 54%);
--Light-Gray: hsl(204, 43%, 93%);
--Grayish-Blue: hsl(218, 22%, 67%);
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Karla', sans-serif;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.9rem;
letter-spacing: -0.01em;
min-height: 100vh;
display: grid;
place-content: center;
padding: 7.2rem 3.2rem;
background-color: var(--Light-Gray);
}
main {
background: white;
border-radius: 0.5rem;
overflow: hidden;
max-width: 63.5rem;
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.21);
}
h1 {
font-weight: 700;
font-size: 2rem;
line-height: 2.3rem;
color: var(--Cyan);
}
h2 {
font-weight: 700;
font-size: 1.8rem;
line-height: 2.1rem;
margin-bottom: 1.8rem;
color: white;
}
span {
display: block;
}
.top {
padding: 2.4rem;
}
.top h1 {
margin: 0.4rem 0 2.4rem;
}
.top span {
font-weight: 700;
font-size: 1.5rem;
line-height: 2rem;
color: var(--Bright-Yellow);
margin-bottom: 1.6rem;
}
.top p {
font-size: 1.4rem;
line-height: 2.6rem;
color: var(--Grayish-Blue);
margin-bottom: 0.8rem;
}
.middle {
background: var(--Cyan);
padding: 2.4rem;
}
.middle span {
display: flex;
color: var(--Light-Gray);
align-items: center;
gap: 1.2rem;
margin-bottom: 0.7rem;
}
.middle span b {
font-weight: 700;
font-size: 3.2rem;
line-height: 3.7rem;
}
.middle button {
width: 100%;
border: 0;
height: 4.8rem;
background: var(--Bright-Yellow);
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.21);
border-radius: 0.5rem;
margin-top: 2.3rem;
font-weight: 700;
font-size: 1.6rem;
line-height: 1.9rem;
letter-spacing: -0.01em;
color: white;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.middle button:hover {
background-color: hsla(71, 73%, 54%, 80%);
}
.bottom {
background-color: var(--Cyan2);
padding: 2.4rem;
}
.bottom span {
font-size: 1.4rem;
line-height: 2rem;
color: var(--Light-Gray);
}
@media screen and (min-width: 580px) {
main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: max-content max-content;
grid-template-areas: "top top" "middle bottom";
}
.top {
grid-area: top;
padding: 4rem;
}
.top h1 {
font-size: 2.4rem;
line-height: 2.8rem;
margin: 0 0 2.4rem;
}
.top span {
font-size: 1.8rem;
line-height: 2rem;
margin-bottom: 1.2rem;
}
.top p {
font-size: 1.6rem;
line-height: 2.6rem;
margin: 0;
}
.middle {
grid-area: middle;
padding: 4rem;
}
.bottom {
grid-area: bottom;
padding: 4rem;
}
}This is the 9st frontend mentor challenge we will cover. Today we will convert a Product preview card component design to responsive HTML, CSS.
#thechallenge
- In this challenge, you will build out the pricing component to the designs provided. This is perfect for beginners and people who want to complete a smaller challenge.
#Your users should be able to:
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
#link
- Interactive card details form challenge: https://www.frontendmentor.io/challenges/single-price-grid-component-5ce41129d0ff452fec5abbbc
- Solution URL: https://github.com/ICode88/Single-price-grid-component-DAY-9
- Live Site URL: https://icode88.github.io/Single-price-grid-component-DAY-9/
👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤
⏱ Timestamps:
00:00 Starting Up
03:50 HTML
07:12 CSS
21:50 Responsive
#frontend #day9 #frontendmentor #challenge #solution #vlogkomputer
Keywords: Single price grid component, Single price grid component solution, Single price grid component codepen, frontend mentor challenge, front end mentor, web design challenge
Komentar
Posting Komentar