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 5 saya menjadi seorang frontend developer dengan mengerjakan sebuah challange yang mudah berjudul Product preview card 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 | Product preview card component - Day 5</title>
</head>
<body>
<main>
<picture>
<source media="(min-width: 768px)" srcset="./images/image-product-desktop.jpg" />
<img src="images/image-product-mobile.jpg" alt="Product Gabrielle Essence Eau De Parfum" />
</picture>
<div class="info">
<div class="breadcrumbs">Perfume</div>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
<div class="price">
<span>$149.99</span>
<del>$169.99</del>
</div>
<button>
<img src="images/icon-cart.svg" alt="" />
Add to Cart
</button>
</div>
</main>
</body>
</html>CSS :
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap');
:root {
--Dark-cyan: hsl(158, 36%, 37%);
--Cream: hsl(30, 38%, 92%);
--Very-dark-blue: hsl(212, 21%, 14%);
--Dark-grayish-blue: hsl(228, 12%, 48%);
--White: hsl(0, 0%, 100%);
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 1.4rem;
font-weight: 500;
line-height: 2.3rem;
font-family: 'Montserrat', sans-serif;
min-height: 100vh;
display: grid;
place-content: center;
padding: 1.6rem;
background-color: var(--Cream);
}
main {
max-width: 60rem;
overflow: hidden;
border-radius: 1rem;
background-color: #fff;
display: flex;
flex-direction: column;
}
picture {
display: flex;
}
picture img {
width: 100%;
}
.info {
padding: 2.4rem;
}
.info .breadcrumbs {
display: inline-block;
font-size: 1.2rem;
line-height: 1.5rem;
letter-spacing: 0.415em;
color: var(--Dark-grayish-blue);
text-transform: uppercase;
margin-bottom: 1.2rem;
}
.info h1 {
font-family: 'Fraunces', serif;
font-weight: 700;
font-size: 3.2rem;
line-height: 3.2rem;
color: var(--Very-dark-blue);
margin-bottom: 1.6rem;
}
.info p {
color: var(--Dark-grayish-blue);
margin-bottom: 2.2rem;
}
.price {
display: flex;
align-items: center;
gap: 2rem;
margin-bottom: 1.6rem;
}
.price span {
font-family: 'Fraunces', serif;
font-weight: 700;
font-size: 3.2rem;
line-height: 3.9rem;
color: var(--Dark-cyan);
}
.price del {
font-size: 1.3rem;
line-height: 1.6rem;
color: var(--Dark-grayish-blue);
}
button {
border: 0;
background-color: var(--Dark-cyan);
display: flex;
width: 100%;
align-items: center;
justify-content: center;
gap: 1.2rem;
padding: 1.6rem;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.035em;
color: #fff;
border-radius: 1rem;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
button:hover {
background-color: hsla(158, 36%, 18%, 1);
}
@media screen and (min-width: 768px) {
main {
flex-direction: row;
}
.info {
padding: 3.2rem;
max-width: 30rem;
}
.info h1 {
margin-bottom: 2rem;
}
.info .breadcrumbs {
margin-bottom: 2rem;
}
.info p {
margin-bottom: 2.6rem;
}
.price {
margin-bottom: 2.6rem;
}
}This is the 5st frontend mentor challenge we will cover. Today we will convert a Product preview card component design to responsive HTML, CSS.
#thechallenge
- This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects.
#Your users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
#link
- Interactive card details form challenge: https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa
- Solution URL: https://github.com/ICode88/Product-preview-card-component-DAY-5
- Live Site URL: https://icode88.github.io/Product-preview-card-component-DAY-5/
👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤
⏱ Timestamps:
00:00 Starting Up
03:42 HTML
08:16 CSS
23:52 Responsive
#frontend #day4 #frontendmentor #challenge #solution #vlogkomputer
Keywords: Product preview card component, Product preview card component solution, Product preview card component codepen, frontend mentor challenge, front end mentor, web design challenge
Komentar
Posting Komentar