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 7 saya menjadi seorang frontend developer dengan mengerjakan sebuah challange yang mudah berjudul 3-column 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" />
<!-- displays site properly based on user's device -->
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<title>Frontend Mentor | 3-column preview card component - Day 7</title>
</head>
<body>
<main>
<div class="column sedans">
<img src="images/icon-sedans.svg" alt="icon-sedans" />
<h1>Sedans</h1>
<p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
<a href="#" class="text-sedans">Learn More</a>
</div>
<div class="column suvs">
<img src="images/icon-suvs.svg" alt="icon-suvs" />
<h1>SUVS</h1>
<p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.</p>
<a href="#" class="text-suvs">Learn More</a>
</div>
<div class="column luxury last">
<img src="images/icon-luxury.svg" alt="icon-luxury" />
<h1>Luxury</h1>
<p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.</p>
<a href="#" class="text-luxury">Learn More</a>
</div>
</main>
</body>
</html>CSS :
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap');
:root {
--Bright-orange: hsl(31, 77%, 52%);
--Dark-cyan: hsl(184, 100%, 22%);
--Very-dark-cyan: hsl(179, 100%, 13%);
--Transparent-white: hsla(0, 0%, 100%, 0.75);
--Very-light-gray: hsl(0, 0%, 95%);
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Lexend Deca', sans-serif;
font-size: 1.5rem;
min-height: 100vh;
display: grid;
place-content: center;
background-clip: var(--Very-light-gray);
}
main {
border-radius: 1rem;
overflow: hidden;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(27.2rem, 1fr));
max-width: 92rem;
margin: 2.4rem;
}
.column {
padding: 4.8rem;
}
.sedans {
background-color: var(--Bright-orange);
}
.text-sedans {
color: var(--Bright-orange);
}
.suvs {
background-color: var(--Dark-cyan);
}
.text-suvs {
color: var(--Dark-cyan);
}
.luxury {
background-color: var(--Very-dark-cyan);
}
.text-luxury {
color: var(--Very-dark-cyan);
}
img {
margin-bottom: 3.6rem;
}
h1 {
font-family: 'Big Shoulders Display', sans-serif;
font-weight: 700;
font-size: 4rem;
line-height: 4.8rem;
color: var(--Very-light-gray);
text-transform: uppercase;
margin-bottom: 2.4rem;
}
p {
font-size: 1.5rem;
line-height: 1.6em;
color: var(--Very-light-gray);
margin-bottom: 2.4rem;
}
a {
text-decoration: none;
background-color: var(--Very-light-gray);
border-radius: 2em;
border: 1px solid var(--Very-light-gray);
padding: 0.9em 2.1em;
display: inline-block;
transition: all 0.3s;
}
a:hover {
background-color: transparent;
color: var(--Very-light-gray);
}
@media screen and (min-width: 590px) {
.last {
grid-column: 1/3;
}
.column {
position: relative;
height: 50rem;
}
a {
position: absolute;
bottom: 4.8rem;
}
}
@media screen and (min-width: 860px) {
.last {
grid-column: 3/3;
}
}This is the 7st frontend mentor challenge we will cover. Today we will convert a 3-column preview card component design to responsive HTML, CSS.
#thechallenge
- This challenge is perfect if you're just getting started. The shift between the layouts will be a nice test if you're new to building responsive projects.
#Your users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
#link
- Interactive card details form challenge: https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2-
- Solution URL: https://github.com/ICode88/3-column-preview-card-component-DAY-7
- Live Site URL: https://icode88.github.io/3-column-preview-card-component-DAY-7/
👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤
⏱ Timestamps:
00:00 Starting Up
03:44 HTML
07:30 CSS
18:59 Responsive
#frontend #day7 #frontendmentor #challenge #solution #vlogkomputer
Keywords: 3-column preview card component, 3-column preview card component solution, 3-column preview card component codepen, frontend mentor challenge, front end mentor, web design challenge
Komentar
Posting Komentar