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 3 saya menjadi seorang frontend developer dengan mengerjakan sebuah challange yang mudah berjudul NFT 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 | NFT preview card component - Day 3</title>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="img-top">
<img src="images/image-equilibrium.jpg" alt="">
<div class="img-overlay">
<img src="images/icon-view.svg" alt="">
</div>
</div>
<div class="box-text">
<a href="">Equilibrium #3429</a>
<p>Our Equilibrium collection promotes balance and calm.</p>
<div class="flex">
<div class="eth">
<img src="images/icon-ethereum.svg" alt="">
<p>0.041 ETH</p>
</div>
<div class="days">
<img src="images/icon-clock.svg" alt="">
<p>3 days left</p>
</div>
</div>
<hr>
<div class="author">
<img src="images/image-avatar.png" alt="">
<p>Creation of <a class="name" href="">Jules Wyvern</a></p>
</div>
</div>
</div>
</div>
</body>
</html>CSS :
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Outfit', sans-serif;
background: hsl(217, 54%, 11%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
max-width: 350px;
margin: 0 auto;
}
.wrapper {
margin: 2rem 1rem;
padding: 20px;
background-color: hsl(216, 50%, 16%);
border-radius: 15px;
box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.75);
}
.img-top {
border-radius: 12px;
overflow: hidden;
position: relative;
}
.img-top img {
width: 100%;
display: block;
}
.img-overlay {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: hsla(178, 100%, 50%, 0.5);
display: none;
}
.img-overlay img {
position: absolute;
width: 50px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.img-top:hover .img-overlay {
display: block;
cursor: pointer;
}
.box-text a {
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 21px;
padding: 20px 0;
display: inline-block;
}
.box-text a:hover {
color: hsl(178, 100%, 50%);
}
p {
color: hsl(215, 51%, 70%);
}
.flex {
display: flex;
align-items: center;
justify-content: space-between;
padding: 25px 0;
}
.eth,
.days {
display: flex;
align-items: center;
}
.eth p {
color: hsl(178, 100%, 50%);
font-weight: 600;
padding-left: 7px;
}
.days p {
padding-left: 7px;
}
hr {
border-color: hsl(215, 32%, 27%);
}
.author {
display: flex;
align-items: center;
padding-top: 5px;
}
.author img {
height: 30px;
width: 30px;
border-radius: 50%;
border: 1.5px solid #fff;
margin-right: 15px;
}
.author p a.name {
color: #fff;
text-decoration: none;
font-size: 16px;
}
.author p a.name:hover {
color: hsl(178, 100%, 50%);
}This is the 3st frontend mentor challenge we will cover. Today we will convert a NFT preview card component design to responsive HTML, CSS.
#thechallenge
- This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with.
#link
- Interactive card details form challenge: https://www.frontendmentor.io/challenges/nft-preview-card-component-SbdUL_w0U
- Solution URL: https://github.com/ICode88/NFT-preview-card-component-DAY-3
- Live Site URL: https://icode88.github.io/NFT-preview-card-component-DAY-3/
👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤
⏱ Timestamps:
00:00 Starting Up
03:09 HTML
08:52 CSS
#frontend #day3 #frontendmentor #challenge #solution #vlogkomputer
Keywords: NFT preview card component, NFT preview card component solution, NFT preview card component codepen, frontend mentor challenge, front end mentor, web design challenge
Komentar
Posting Komentar