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 12 saya menjadi seorang frontend developer dengan mengerjakan sebuah challange yang mudah berjudul Social proof section 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 | Social proof section - Day 12</title>
</head>
<body>
<main>
<div class="title">
<h1>10,000+ of our users love our products.</h1>
<p>We only provide great products combined with excellent customer service. See what our satisfied customers are saying about our services.</p>
</div>
<ul>
<li>
<span>
<img src="images/icon-star.svg" alt="" />
<img src="images/icon-star.svg" alt="" />
<img src="images/icon-star.svg" alt="" />
<img src="images/icon-star.svg" alt="" />
<img src="images/icon-star.svg" alt="" />
</span>
Rated 5 Stars in Reviews
</li>
<li>
<span>
<img src="images/icon-star.svg" alt="" />
<img src="images/icon-star.svg" alt="" />
<img src="images/icon-star.svg" alt="" />
<img src="images/icon-star.svg" alt="" />
<img src="images/icon-star.svg" alt="" />
</span>
Rated 5 Stars in Report Guru
</li>
<li>
<span>
<img src="images/icon-star.svg" alt="" />
<img src="images/icon-star.svg" alt="" />
<img src="images/icon-star.svg" alt="" />
<img src="images/icon-star.svg" alt="" />
<img src="images/icon-star.svg" alt="" />
</span>
Rated 5 Stars in BestTech
</li>
</ul>
<div class="reviews">
<div class="review">
<div class="profile">
<img src="images/image-colton.jpg" alt="" />
<div class="name">
<span>Colton Smith</span>
<span>Verified Buyer</span>
</div>
</div>
<p>"We needed the same printed design as the one we had ordered a week prior. Not only did they find the original order, but we also received it in time. Excellent!"</p>
</div>
<div class="review">
<div class "profile">
<img src="images/image-irene.jpg" alt="" />
<div class="name">
<span>Irene Roberts</span>
<span>Verified Buyer</span>
</div>
</div>
<p>"Customer service is always excellent and very quick turn around. Completely delighted with the simplicity of the purchase and the speed of delivery."</p>
</div>
<div class="review">
<div class="profile">
<img src="images/image-anne.jpg" alt="" />
<div class="name">
<span>Anne Wallace</span>
<span>Verified Buyer</span>
</div>
</div>
<p>"Put an order with this company and can only praise them for the very high standard. Will definitely use them again and recommend them to everyone!"</p>
</div>
</div>
</main>
</body>
</html>CSS :
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;700&display=swap');
:root {
--Very-Dark-Magenta: hsl(300, 43%, 22%);
--Soft-Pink: hsl(333, 80%, 67%);
--Dark-Grayish-Magenta: hsl(303, 10%, 53%);
--Light-Grayish-Magenta: hsl(300, 24%, 96%);
--White: hsl(0, 0%, 100%);
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'League Spartan', sans-serif;
font-size: 1.5rem;
min-height: 100vh;
padding: 2.4rem;
display: grid;
place-content: center;
background-image: url(images/bg-pattern-top-mobile.svg), url(images/bg-pattern-bottom-mobile.svg);
background-repeat: no-repeat, no-repeat;
background-size: auto, auto;
background-position: top 0 left 0, bottom 0 right 0;
}
main {
margin-top: 5.8rem;
}
.title {
max-width: 44.4rem;
}
.title h1 {
font-size: 4rem;
font-weight: 700;
line-height: 3.2rem;
text-align: center;
letter-spacing: -0.03em;
color: var(--Very-Dark-Magenta);
margin-bottom: 2.4rem;
}
.title p {
font-size: 2rem;
font-weight: 400;
line-height: 2.5rem;
text-align: center;
letter-spacing: -0.045em;
color: var(--Dark-Grayish-Magenta);
margin-bottom: 3.8rem;
}
ul {
list-style: none;
margin-bottom: 4.6rem;
}
ul li {
text-align: center;
background-color: var(--Light-Grayish-Magenta);
border-radius: 1rem;
padding: 1.6rem;
line-height: 1.5rem;
letter-spacing: 0.025em;
color: var(--Very-Dark-Magenta);
margin-bottom: 1.6rem;
max-width: 44.4rem;
font-weight: 700;
}
ul li span {
display: flex;
justify-content: center;
margin-bottom: 1.6rem;
gap: 0.8rem;
}
.reviews .review {
background-color: var(--Very-Dark-Magenta);
border-radius: 1rem;
padding: 3.2rem;
margin-bottom: 1.4rem;
max-width: 44.4rem;
}
.reviews .review .profile {
display: flex;
align-items: center;
gap: 2.4rem;
margin-bottom: 2.8rem;
}
.reviews .review .profile img {
border-radius: 50%;
width: 4rem;
}
.reviews .review .profile span:first-child,
.reviews .review .profile span:last-child {
display: block;
font-size: 1.7rem;
line-height: 1.6rem;
}
.reviews .review .profile .name span:first-child {
color: var(--White);
font-weight: 700;
margin-bottom: 0.4rem;
}
.reviews .review .profile .name span:last-child {
color: var(--Soft-Pink);
font-weight: 400;
}
.reviews .review p {
text-align: left;
font-weight: 500;
font-size: 1.7rem;
line-height: 2.2rem;
letter-spacing: -0.02em;
color: var(--White);
}
@media screen and (min-width: 1440px) {
body {
padding: 0;
background-image: url(images/bg-pattern-top-desktop.svg), url(images/bg-pattern-bottom-desktop.svg);
}
main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 43.4rem auto;
grid-template-areas: "title rated" "reviews reviews";
margin: 0;
}
.title {
grid-area: title;
max-width: 72rem;
padding: 11.8rem 12.6rem 0 16.4rem;
}
.title h1 {
text-align: left;
font-size: 5.5rem;
line-height: 4.8rem;
margin-bottom: 2.6rem;
}
.title p {
text-align: left;
margin: 0;
}
ul {
grid-area: rated;
max-width: 72rem;
margin: 0;
padding-top: 14.6rem;
}
ul li {
display: flex;
align-items: center;
gap: 3.2rem;
padding: 1.9rem 3.2rem;
}
ul li:first-child {
margin-left: 1.6rem;
}
ul li:nth-child(2) {
margin-left: 6.4rem;
}
ul li:last-child {
margin-left: 11.2rem;
}
ul li span {
margin: 0;
}
.reviews {
grid-area: reviews;
display: flex;
gap: 3.2rem;
padding-left: 16.4rem;
}
.reviews .review {
max-height: 23.4rem;
max-width: 35rem;
margin: 0;
padding: 4rem 3.2rem;
}
.reviews .review:nth-child(2) {
margin-top: 1.6rem;
}
.reviews .review:last-child {
margin-top: 3.2rem;
}
.reviews.review .profile {
margin-bottom: 2.6rem;
}
}This is the 12st frontend mentor challenge we will cover. Today we will convert a Social proof section design to responsive HTML, CSS.
#thechallenge
- This project will test your layout skills. If you're starting to get confident with Flexbox or Grid, this will provide a nice challenge!
#Your users should be able to:
- View the optimal layout for the site depending on their device's screen size
#link
- Interactive card details form challenge: https://www.frontendmentor.io/challenges/social-proof-section-6e0qTv_bA
- Solution URL: https://github.com/ICode88/Social-proof-section-DAY-12
- Live Site URL: https://icode88.github.io/Social-proof-section-DAY-12/
👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤
⏱ Timestamps:
00:00 Starting Up
02:22 HTML
08:20 CSS
28:11 Responsive
#frontend #day12 #frontendmentor #challenge #solution #vlogkomputer
Keywords: Social proof section, Social proof section solution, Social proof section codepen, frontend mentor challenge, front end mentor, web design challenge
Komentar
Posting Komentar