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 11 saya menjadi seorang frontend developer dengan mengerjakan sebuah challange yang mudah berjudul Huddle landing page with a single introductory 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">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Huddle landing page with single introductory section - Day 11</title>
</head>
<body>
<header><img src="images/logo.svg" alt=""></header>
<main>
<img src="images/illustration-mockups.svg" alt="">
<div>
<h1>Build The Community Your Fans Will Love</h1>
<p>Huddle re-imagines the way we build communities. You have a voice, but so does your audience. Create connections with your users as you engage in genuine discussion.</p>
<button>Register</button>
</div>
</main>
<footer>
<a href="facebook.com"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="twitter.com"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="instagram.com"><ion-icon name="logo-instagram"></ion-icon></a>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>CSS :
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;600&display=swap');
:root {
--Violet: hsl(257, 40%, 49%);
--Soft-Magenta: hsl(300, 69%, 71%);
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-image: url(images/bg-mobile.svg);
background-position: top;
background-repeat: no-repeat;
background-color: var(--Violet);
min-height: 100vh;
display: grid;
padding: 3.2rem 3.4rem;
grid-template-rows: max-content;
max-width: 59rem;
margin: 0 auto;
}
img {
display: block;
}
header {
margin-bottom: 6rem;
}
header img {
height: 3.2rem;
}
main {
margin-bottom: 6.4rem;
}
main img {
margin-bottom: 5.8rem;
width: 100%;
}
main div {
text-align: center;
}
main div h1 {
font-weight: 600;
font-size: 2.4rem;
line-height: 3.6rem;
color: white;
margin-bottom: 1.2rem;
}
main div p {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 2.4rem;
color: white;
margin-bottom: 2.4rem;
}
main div button {
width: 100%;
max-width: 20rem;
height: 4rem;
border: 0;
background: white;
color: var(--Violet);
border-radius: 2.8rem;
font-size: 1.2rem;
font-weight: 400;
line-height: 1.8rem;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.21);
cursor: pointer;
transition: all 0.3s ease-in-out;
}
main div button:hover {
background: var(--Soft-Magenta);
color: white;
}
footer {
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
height: max-content;
}
footer a {
border: 1px solid white;
width: 2.8rem;
height: 2.8rem;
border-radius: 50%;
display: grid;
place-content: center;
transition: all 0.3s ease-in-out;
}
footer a ion-icon {
color: white;
font-size: 1.4rem;
transition: all 0.3s ease-in-out;
}
footer a:hover {
border-color: var(--Soft-Magenta);
}
footer a:hover ion-icon {
color: var(--Soft-Magenta);
}
@media screen and (min-width: 1290px) {
body {
background-image: url(images/bg-desktop.svg);
padding: 5.2rem 8rem 4rem 7rem;
background-position: left;
max-width: 100%;
}
header {
margin-bottom: 8.7rem;
}
header img {
margin-bottom: 5.4rem;
}
main {
display: flex;
gap: 5.8rem;
margin-bottom: 2.1rem;
}
main img {
margin: 0;
}
main div {
text-align: left;
padding-top: 4.2rem;
}
main div h1 {
font-size: 4rem;
line-height: 6rem;
margin-bottom: 2rem;
}
main div p {
font-size: 1.8rem;
line-height: 2.7rem;
}
main div button {
height: 5.6rem;
font-size: 1.8rem;
line-height: 2.7rem;
}
footer {
justify-content: right;
gap: 1.6rem;
}
footer a {
width: 4rem;
height: 4rem;
}
footer a ion-icon {
font-size: 2rem;
}
}This is the 11st frontend mentor challenge we will cover. Today we will convert a Huddle landing page with a single introductory section design to responsive HTML, CSS.
#thechallenge
- A perfect challenge for beginners, this project will get you working with a two column layout.
#Your users should be able to:
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
#link
- Interactive card details form challenge: https://www.frontendmentor.io/challenges/huddle-landing-page-with-a-single-introductory-section-B_2Wvxgi0
- Solution URL: https://github.com/ICode88/Huddle-landing-page-with-a-single-introductory-section-DAY-11
- Live Site URL: https://icode88.github.io/Huddle-landing-page-with-a-single-introductory-section-DAY-11/
👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤
⏱ Timestamps:
00:00 Starting Up
03:20 HTML
07:36 CSS
22:52 Responsive
#frontend #day11 #frontendmentor #challenge #solution #vlogkomputer
Keywords: Huddle landing page with a single introductory section, Huddle landing page with a single introductory section solution, Huddle landing page with a single introductory section codepen, frontend mentor challenge, front end mentor, web design challenge
Komentar
Posting Komentar