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 2 saya menjadi seorang frontend developer dengan mengerjakan sebuah challange yang mudah berjudul Profile 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 | Profile card component - Day 2</title>
</head>
<body>
<div class="container">
<div class="card">
<img src="images/bg-pattern-card.svg" alt="">
<div class="img-circle">
<img src="images/image-victor.jpg" alt="">
</div>
<div class="name">
<h2>Victor Crest <span>26</span></h2>
<p>London</p>
</div>
<div class="footer-card">
<div>
<p class="num">80K</p>
<p>Followers</p>
</div>
<div>
<p class="num">803K</p>
<p>Likes</p>
</div>
<div>
<p class="num">1.4K</p>
<p>Photos</p>
</div>
</div>
</div>
</div>
</body>
</html>CSS :
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Kumbh Sans', sans-serif;
background-color: hsl(185, 75%, 39%);
align-items: center;
display: flex;
min-height: 100vh;
background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
background-repeat: no-repeat, no-repeat;
background-position: right 48vw bottom 40vh, left 45vw top 44vh;
}
.container {
margin: 0 auto;
text-align: center;
}
.card {
max-width: 420px;
background-color: #fff;
border-radius: 15px;
overflow: hidden;
margin: 1rem;
}
.img-circle img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid #fff;
margin-top: -52px;
margin-bottom: 20px;
}
.name h2 {
color: hsl(229, 23%, 23%);
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
}
.name h2 span {
color: hsl(227, 10%, 46%);
font-weight: 400;
}
.name p {
color: hsl(227, 10%, 46%);
font-size: 13px;
}
.footer-card {
display: flex;
justify-content: space-between;
border-top: 1px solid hsla(227, 10%, 46%, 02);
padding: 30px 50px;
margin-top: 30px;
}
.footer-card p.num {
font-size: 18px;
font-weight: 700;
color: hsl(229, 23%, 23%);
margin-bottom: 5px;
}
.footer-card p {
color: hsl(227, 10%, 46%);
font-size: 13px;
}This is the 2st frontend mentor challenge we will cover. Today we will convert a Profile card component design to responsive HTML, CSS.
#thechallenge
- This is a perfect challenge to test your layout skills. The card layout doesn't shift, so it's also great for those that haven't dived into responsive websites yet!
#link
- Interactive card details form challenge: https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ
- Solution URL: https://github.com/ICode88/Profile-card-component-DAY-2
- Live Site URL: https://icode88.github.io/Profile-card-component-DAY-2
👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤
⏱ Timestamps:
00:00 Starting Up
02:38 HTML
07:36 CSS
#frontend #day2 #frontendmentor #challenge #solution #vlogkomputer
Keywords: profile card component, profile card component, profile card component codepen, frontend mentor challenge, front end mentor, web design challenge
Komentar
Posting Komentar