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