nezumi/html-css-practice-one
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/html-css-practice-one.git synced 2026-09-22 13:38:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update HTML and CSS file

Browse Source
This commit is contained in:
nezumi
2023-07-04 17:36:49 +07:00
parent f26b0a713f
commit 77a746510b
4 changed files with 114 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+9 -6
View File
@@ -8,7 +8,7 @@
- Build a website using HTML5, CSS3. - Build a website using HTML5, CSS3.
- Design: [link](<https://www.figma.com/file/yZoAxrvKsf3mke9VZLNIrw/Responsive-Startup-Website-(Community)>) - Design: [link](<https://www.figma.com/file/yZoAxrvKsf3mke9VZLNIrw/Responsive-Startup-Website-(Community)>)
- Plan: [practice-one](https://docs.google.com/document/d/142yCLkrdfBK6uohQzY1Q9DheIuVU5K8H/edit) - Plan: [practice-one](https://docs.google.com/document/d/142yCLkrdfBK6uohQzY1Q9DheIuVU5K8H/edit)
- Deploy: _update later_ - Deploy: [link](https://html-css-training-one.nezumi.site/)
## Requirements ## Requirements
@@ -30,7 +30,8 @@
## Information ## Information
- Timeline: - Timeline:
- The practice should be done in 3 days. However, my code is not clean so be needed to review more and it takes about 4 days to complete. - Estimate: 3 days
- Actual: 4 days.
- Calendar: - Calendar:
- Start: 2023/06/28 - Start: 2023/06/28
- End: 2023/07/03 - End: 2023/07/03
@@ -46,14 +47,16 @@
- With HTTPS: - With HTTPS:
- `$ git clone https://github.com/phuocduong-agilityio/loi-phan-internship.git`. - `$ git clone https://github.com/phuocduong-agilityio/loi-phan-internship.git`.
- Step 2: Move to folder which just cloned in your computer. - Step 2: Move to folder which just cloned in your computer.
- `cd internship-loi-phan\practice\practice-01`. - `cd ./internship-loi-phan`.
- Step 3: Move it to branch html-css-practice-one. - Step 3: Move it to branch html-css-practice-one.
- `$ git checkout html-css-practice-one`. - `$ git checkout html-css-practice-one`.
- Step 4: - Step 4: Move to folder practice-01.
- Open terminal > `npm i` or `yarn i`. - `$ cd ./practice/practice-01`.
- Step 5: - Step 5:
- Run `npm start` or `yarn start`. - Open terminal > `npm i`.
- Step 6: - Step 6:
- Run `npm start`.
- Step 7:
- Open http://localhost:1234/ in browser. - Open http://localhost:1234/ in browser.
## Author ## Author
src/index.html
+60 -42
View File
@@ -14,10 +14,10 @@
<!-- Header --> <!-- Header -->
<div class="width-container"> <div class="width-container">
<header> <header>
<div class="container flex-center-row-space-between"> <div class="container divide-content-center text text--md">
<img src="./assets/images/logo.svg" alt="" class="logo" /> <img src="./assets/images/logo.svg" alt="" class="logo" />
<nav class="nav"> <nav class="nav">
<ul class="nav__lists"> <ul class="nav__lists d-flex justify-content-between">
<li class="nav__item"> <li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link">Home</a> <a href="javascript:void(0)" class="nav__item-link">Home</a>
</li> </li>
@@ -42,18 +42,20 @@
</header> </header>
<!-- Welcome section --> <!-- Welcome section -->
<section class="welcome"> <section class="welcome d-flex align-item-center">
<div class="welcome__content"> <div class="welcome__content d-flex flex-column">
<span class="welcome__title">Welcome</span> <span class="welcome__title text--bold">Welcome</span>
<h1 class="welcome__heading"> <h1 class="welcome__heading text--secondary">
Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur
</h1> </h1>
<p class="welcome__description"> <p class="welcome__description text text--sm">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos
error ipsum, voluptate culpa nesciunt delectus iste? error ipsum, voluptate culpa nesciunt delectus iste?
</p> </p>
<a href="javascript:void(0)" class="btn btn-primary">Explore</a> <a href="javascript:void(0)" class="btn btn-primary text"
>Explore</a
>
</div> </div>
<img <img
src="./assets/images/header-image.png" src="./assets/images/header-image.png"
@@ -69,17 +71,19 @@
<section class="sponsor"> <section class="sponsor">
<div class="sponsor__container align-center"> <div class="sponsor__container align-center">
<div class="sponsor__content align-center"> <div class="sponsor__content align-center">
<span class="sponsor__title text--primary-color-uppercase" <span class="sponsor__title text--bold text--title"
>Partners</span >Partners</span
> >
<h2 class="sponsor__heading">Lorem Ipsum Dolor</h2> <h2 class="sponsor__heading text--secondary text--lg">
<p class="sponsor__description text--black-fs-md"> Lorem Ipsum Dolor
</h2>
<p class="sponsor__description text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</p> </p>
</div> </div>
<!-- Logo items --> <!-- Logo items -->
<ul class="sponsor__logos"> <ul class="sponsor__logos d-flex">
<li class="sponsor__logo-item"> <li class="sponsor__logo-item">
<img src="./assets/images/logo-1.png" alt="Logo Sponsor" /> <img src="./assets/images/logo-1.png" alt="Logo Sponsor" />
</li> </li>
@@ -96,7 +100,7 @@
<img src="./assets/images/logo-5.png" alt="Logo Sponsor" /> <img src="./assets/images/logo-5.png" alt="Logo Sponsor" />
</li> </li>
</ul> </ul>
<a href="javascript:void(0)" class="btn btn-secondary" <a href="javascript:void(0)" class="btn btn-secondary text"
>Learn More</a >Learn More</a
> >
</div> </div>
@@ -104,7 +108,7 @@
<!-- Conversation section --> <!-- Conversation section -->
<section class="conversation"> <section class="conversation">
<div class="conversation__container flex-center-row-space-between"> <div class="conversation__container divide-content-center">
<!-- Conversation image --> <!-- Conversation image -->
<img <img
src="./assets/images/conversation.png" src="./assets/images/conversation.png"
@@ -113,16 +117,16 @@
/> />
<!-- Conversation content --> <!-- Conversation content -->
<div class="conversation__content"> <div class="conversation__content d-flex flex-column">
<h2 class="conversation__heading"> <h2 class="conversation__heading text--secondary text--lg">
Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur
</h2> </h2>
<p class="conversation__description text--gray-fs-sm"> <p class="conversation__description text text--gray text--sm">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos
error ipsum, voluptate culpa nesciunt delectus iste? error ipsum, voluptate culpa nesciunt delectus iste?
</p> </p>
<a href="javascript:void(0)" class="btn btn-secondary" <a href="javascript:void(0)" class="btn btn-secondary text"
>Learn More</a >Learn More</a
> >
</div> </div>
@@ -131,18 +135,18 @@
<!-- Security section --> <!-- Security section -->
<section class="security"> <section class="security">
<div class="security__container flex-center-row-space-between"> <div class="security__container divide-content-center">
<!-- Security content --> <!-- Security content -->
<div class="security__content"> <div class="security__content d-flex flex-column">
<h2 class="security__heading"> <h2 class="security__heading text--secondary text--lg">
Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur
</h2> </h2>
<p class="security__description text--gray-fs-sm"> <p class="security__description text text--gray text--sm">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos
error ipsum, voluptate culpa nesciunt delectus iste? error ipsum, voluptate culpa nesciunt delectus iste?
</p> </p>
<a href="javascript:void(0)" class="btn btn-secondary" <a href="javascript:void(0)" class="btn btn-secondary text"
>Learn More</a >Learn More</a
> >
</div> </div>
@@ -161,18 +165,18 @@
<div class="team__container align-center"> <div class="team__container align-center">
<!-- Team content --> <!-- Team content -->
<div class="team__content align-center"> <div class="team__content align-center">
<span class="team__title text--primary-color-uppercase" <span class="team__title text--bold text--title">Team</span>
>Team</span <h2 class="team__heading text--secondary text--lg">
> Our talents
<h2 class="team__heading">Our talents</h2> </h2>
<p class="team__description text--black-fs-md"> <p class="team__description text">
Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos, Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos,
ab, ab,
</p> </p>
</div> </div>
<!-- Avatar Image --> <!-- Avatar Image -->
<div class="team__image-container"> <div class="team__image-container d-flex">
<!-- Frame 1 --> <!-- Frame 1 -->
<div class="team__frame"> <div class="team__frame">
<div class="team__image-content align-center"> <div class="team__image-content align-center">
@@ -181,9 +185,11 @@
alt="Avatar Image" alt="Avatar Image"
class="team__image" class="team__image"
/> />
<div class="team__information"> <div class="team__information d-flex flex-column">
<span class="team__name">Peg legge</span> <span class="team__name text--secondary">Peg legge</span>
<span class="team__position">Ceo</span> <span class="team__position text text--sm text--gray"
>Ceo</span
>
</div> </div>
</div> </div>
</div> </div>
@@ -197,8 +203,12 @@
class="team__image" class="team__image"
/> />
<div class="team__information"> <div class="team__information">
<span class="team__name">Richard guerra</span> <span class="team__name text--secondary"
<span class="team__position">Cto</span> >Richard guerra</span
>
<span class="team__position text text--sm text--gray"
>Cto</span
>
</div> </div>
</div> </div>
</div> </div>
@@ -212,8 +222,12 @@
class="team__image" class="team__image"
/> />
<div class="team__information"> <div class="team__information">
<span class="team__name">Alexandra stolz</span> <span class="team__name text--secondary"
<span class="team__position">Designer</span> >Alexandra stolz</span
>
<span class="team__position text text--sm text--gray"
>Designer</span
>
</div> </div>
</div> </div>
</div> </div>
@@ -227,13 +241,17 @@
class="team__image" class="team__image"
/> />
<div class="team__information"> <div class="team__information">
<span class="team__name">Peg legge</span> <span class="team__name text--secondary">Janet bray</span>
<span class="team__position">Developer</span> <span class="team__position text text--sm text--gray"
>Developer</span
>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<a href="javascript:void(0)" class="btn btn-secondary">View Team</a> <a href="javascript:void(0)" class="btn btn-secondary text"
>View Team</a
>
</div> </div>
</section> </section>
</div> </div>
@@ -241,8 +259,8 @@
<!-- Footer --> <!-- Footer -->
<footer class="footer"> <footer class="footer">
<div class="background"> <div class="background">
<div class="footer__content"> <div class="footer__content d-flex justify-content-between">
<div class="footer__logos"> <div class="footer__logos d-flex">
<a href="javascript:void(0)" <a href="javascript:void(0)"
><img ><img
src="./assets/images/facebook.svg" src="./assets/images/facebook.svg"
@@ -292,7 +310,7 @@
</a> </a>
</div> </div>
<span class="footer__text" <span class="footer__text text"
>&#64; Start, 2022. All rights reserved.</span >&#64; Start, 2022. All rights reserved.</span
> >
</div> </div>
src/style/abstracts/variables.css
-1
View File
@@ -8,7 +8,6 @@
--fs-md: 20px; --fs-md: 20px;
--fs-lg: 40px; --fs-lg: 40px;
--max-width: 1180px; --max-width: 1180px;
--ff-secondary-regular: CrimsonText-Regular;
--ff-secondary-bold: CrimsonText-Bold; --ff-secondary-bold: CrimsonText-Bold;
--ff-primary-medium: WorkSans-Medium; --ff-primary-medium: WorkSans-Medium;
--ff-primary-bold: WorkSans-Bold; --ff-primary-bold: WorkSans-Bold;
src/style/main.css
+45 -62
View File
@@ -15,30 +15,63 @@
margin: auto; margin: auto;
} }
.flex-center-row-space-between { .text {
display: flex;
align-items: center;
justify-content: space-between;
}
.text--black-fs-md {
font-size: var(--fs-md); font-size: var(--fs-md);
font-family: var(--ff-primary-regular); font-family: var(--ff-primary-regular);
} }
.text--gray-fs-sm { .text--bold {
font-size: var(--fs-sm); font-family: var(--ff-primary-bold);
font-family: var(--ff-primary-regular); }
.text--gray {
color: var(--gray); color: var(--gray);
} }
.text--primary-color-uppercase { .text--sm {
font-family: var(--ff-primary-bold); font-size: var(--fs-sm);
}
.text--lg {
font-size: var(--fs-lg);
}
.text--secondary {
font-family: var(--ff-secondary-bold);
}
.text--title {
letter-spacing: 5px; letter-spacing: 5px;
text-transform: uppercase; text-transform: uppercase;
color: var(--primary-color); color: var(--primary-color);
} }
.d-flex {
display: flex;
}
.justify-content-around {
justify-content: space-around;
}
.justify-content-between {
justify-content: space-between;
}
.align-item-center {
align-items: center;
}
.flex-column {
flex-direction: column;
}
.divide-content-center {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Header */ /* Header */
.background { .background {
background-color: var(--primary-color); background-color: var(--primary-color);
@@ -48,8 +81,6 @@
padding: 37px 0px; padding: 37px 0px;
margin: auto; margin: auto;
color: var(--white); color: var(--white);
font-family: var(--ff-primary-regular);
font-size: var(--fs-md);
} }
.logo { .logo {
@@ -58,8 +89,6 @@
.nav__lists { .nav__lists {
list-style: none; list-style: none;
display: flex;
justify-content: space-between;
gap: 30px; gap: 30px;
} }
@@ -76,20 +105,15 @@
/* Welcome section */ /* Welcome section */
.welcome { .welcome {
margin: auto; margin: auto;
display: flex;
gap: 120px; gap: 120px;
padding-bottom: 82.87px; padding-bottom: 82.87px;
align-items: center;
} }
.welcome__content { .welcome__content {
display: flex;
flex-direction: column;
gap: 15px; gap: 15px;
} }
.welcome__title { .welcome__title {
font-family: var(--ff-primary-bold);
letter-spacing: 5px; letter-spacing: 5px;
text-transform: uppercase; text-transform: uppercase;
color: var(--white); color: var(--white);
@@ -97,13 +121,10 @@
.welcome__heading { .welcome__heading {
font-size: var(--fs-lg); font-size: var(--fs-lg);
font-family: var(--ff-secondary-bold);
color: var(--white); color: var(--white);
} }
.welcome__description { .welcome__description {
font-size: var(--fs-sm);
font-family: var(--ff-primary-regular);
color: var(--white); color: var(--white);
margin-bottom: 25px; margin-bottom: 25px;
} }
@@ -119,8 +140,6 @@
border: none; border: none;
/* Text */ /* Text */
font-family: var(--ff-primary-regular);
font-size: var(--fs-md);
text-decoration: none; text-decoration: none;
/* Other */ /* Other */
@@ -167,17 +186,11 @@
width: 411px; width: 411px;
} }
.sponsor__heading {
font-size: var(--fs-lg);
font-family: var(--ff-secondary-bold);
}
.sponsor__description { .sponsor__description {
text-align: center; text-align: center;
} }
.sponsor__logos { .sponsor__logos {
display: flex;
gap: 68px; gap: 68px;
} }
@@ -196,16 +209,9 @@
.conversation__content { .conversation__content {
width: 470px; width: 470px;
display: flex;
flex-direction: column;
gap: 16px; gap: 16px;
} }
.conversation__heading {
font-size: var(--fs-lg);
font-family: var(--ff-secondary-bold);
}
/* Security section */ /* Security section */
.security__container { .security__container {
margin: 60px auto; margin: 60px auto;
@@ -213,16 +219,9 @@
.security__content { .security__content {
width: 470px; width: 470px;
display: flex;
flex-direction: column;
gap: 16px; gap: 16px;
} }
.security__heading {
font-size: var(--fs-lg);
font-family: var(--ff-secondary-bold);
}
/* Team section */ /* Team section */
.team__container { .team__container {
@@ -235,17 +234,11 @@
gap: 16px; gap: 16px;
} }
.team__heading {
font-size: var(--fs-lg);
font-family: var(--ff-secondary-bold);
}
.team__description { .team__description {
text-align: center; text-align: center;
} }
.team__image-container { .team__image-container {
display: flex;
gap: 35px; gap: 35px;
} }
@@ -271,41 +264,31 @@
} }
.team__information { .team__information {
display: flex;
flex-direction: column;
gap: 17px; gap: 17px;
width: 100%; width: 100%;
} }
.team__name { .team__name {
font-size: 24px; font-size: 24px;
font-family: var(--ff-secondary-bold);
text-transform: capitalize; text-transform: capitalize;
} }
.team__position { .team__position {
font-size: var(--fs-sm);
font-family: var(--ff-primary-regular);
text-transform: uppercase; text-transform: uppercase;
} }
/* Footer */ /* Footer */
.footer__content { .footer__content {
padding: 50px 131px; padding: 50px 131px;
display: flex;
justify-content: space-between;
width: var(--max-width); width: var(--max-width);
margin: auto; margin: auto;
} }
.footer__logos { .footer__logos {
display: flex;
gap: 20px; gap: 20px;
} }
.footer__text { .footer__text {
font-size: var(--fs-md);
font-family: var(--ff-primary-regular);
line-height: 125%; line-height: 125%;
color: var(--white); color: var(--white);