nezumi/loi-phan-internship
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/loi-phan-internship.git synced 2026-09-22 20:01:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve UI, using BEM modifier and refactor code

Browse Source
This commit is contained in:
nezumi
2023-07-03 16:50:13 +07:00
parent 14781d85ef
commit 87f2f0a993
3 changed files with 49 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
practice/practice-01/src/index.html
+13 -9
View File
@@ -14,7 +14,7 @@
<!-- Header -->
<div class="width-container">
<header>
<div class="container">
<div class="container flex-center-row-space-between">
<img src="./assets/images/logo.svg" alt="" class="logo" />
<nav class="nav">
<ul class="nav__lists">
@@ -69,9 +69,11 @@
<section class="sponsor">
<div class="sponsor__container align-center">
<div class="sponsor__content align-center">
<span class="sponsor__title">Partners</span>
<span class="sponsor__title text--primary-color-uppercase"
>Partners</span
>
<h2 class="sponsor__heading">Lorem Ipsum Dolor</h2>
<p class="sponsor__description">
<p class="sponsor__description text--black-fs-md">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</p>
</div>
@@ -102,7 +104,7 @@
<!-- Conversation section -->
<section class="conversation">
<div class="conversation__container">
<div class="conversation__container flex-center-row-space-between">
<!-- Conversation image -->
<img
src="./assets/images/conversation.png"
@@ -115,7 +117,7 @@
<h2 class="conversation__heading">
Lorem ipsum dolor sit amet consectetur
</h2>
<p class="conversation__description">
<p class="conversation__description text--gray-fs-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?
@@ -129,13 +131,13 @@
<!-- Security section -->
<section class="security">
<div class="security__container">
<div class="security__container flex-center-row-space-between">
<!-- Security content -->
<div class="security__content">
<h2 class="security__heading">
Lorem ipsum dolor sit amet consectetur
</h2>
<p class="security__description">
<p class="security__description text--gray-fs-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?
@@ -159,9 +161,11 @@
<div class="team__container align-center">
<!-- Team content -->
<div class="team__content align-center">
<span class="team__title">Team</span>
<span class="team__title text--primary-color-uppercase"
>Team</span
>
<h2 class="team__heading">Our talents</h2>
<p class="team__description">
<p class="team__description text--black-fs-md">
Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos,
ab,
</p>
practice/practice-01/src/style/abstracts/variables.css
+1
View File
@@ -3,6 +3,7 @@
--text-dark: #d6d6d6;
--white: #ffffff;
--black: #000000;
--gray: rgba(33, 37, 41, 0.50);
--fs-sm: 15px;
--fs-md: 20px;
--fs-lg: 40px;
practice/practice-01/src/style/main.css
+35 -44
View File
@@ -15,16 +15,37 @@
margin: auto;
}
.flex-center-row-space-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.text--black-fs-md {
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);
color: var(--gray);
}
.text--primary-color-uppercase {
font-family: var(--ff-primary-bold);
letter-spacing: 5px;
text-transform: uppercase;
color: var(--primary-color);
}
/* Header */
.background {
background-color: var(--primary-color);
}
.container {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 35px;
padding-bottom: 40px;
padding: 37px 0px;
margin: auto;
color: var(--white);
font-family: var(--ff-primary-regular);
@@ -81,9 +102,7 @@
}
.welcome__description {
text-transform: none;
font-size: var(--fs-sm);
letter-spacing: 0px;
font-family: var(--ff-primary-regular);
color: var(--white);
margin-bottom: 25px;
@@ -148,21 +167,12 @@
width: 411px;
}
.sponsor__title {
font-family: var(--ff-primary-bold);
letter-spacing: 5px;
text-transform: uppercase;
color: var(--primary-color);
}
.sponsor__heading {
font-size: var(--fs-lg);
font-family: var(--ff-secondary-bold);
}
.sponsor__description {
font-size: var(--fs-md);
font-family: var(--ff-primary-regular);
text-align: center;
}
@@ -171,12 +181,17 @@
gap: 68px;
}
.sponsor__logo-item {
transition: 0.3s;
}
.sponsor__logo-item:hover {
transform: scale(1.2);
}
/* Conversation Section */
.conversation__container {
margin: 60px auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.conversation__content {
@@ -191,17 +206,9 @@
font-family: var(--ff-secondary-bold);
}
.conversation__description {
font-size: var(--fs-sm);
font-family: var(--ff-primary-regular);
}
/* Security section */
.security__container {
margin: 60px auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.security__content {
@@ -216,11 +223,6 @@
font-family: var(--ff-secondary-bold);
}
.security__description {
font-size: 15px;
font-family: var(--ff-primary-regular);
}
/* Team section */
.team__container {
@@ -233,23 +235,12 @@
gap: 16px;
}
.team__title {
font-family: var(--ff-primary-bold);
letter-spacing: 5px;
text-transform: uppercase;
color: var(--primary-color);
}
.team__heading {
font-size: var(--fs-lg);
font-family: var(--ff-secondary-bold);
}
.team__description {
font-size: var(--fs-md);
font-family: var(--ff-primary-regular);
text-align: center;
}
@@ -318,4 +309,4 @@
line-height: 125%;
color: var(--white);
}
}