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

Merge feature/team branch

Browse Source 
Edit, remove unnecessary and refactor code
This commit is contained in:
nezumi
2023-07-03 11:41:15 +07:00
parent fbc221a032 678bb5ff2d
commit c78e8d8d22
4 changed files with 299 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files
practice/practice-01/src/index.html
+279 -247
View File
@@ -7,261 +7,293 @@
<link rel="stylesheet" href="./style/base/reset.css" />
<link rel="stylesheet" href="./style/main.css" />
</head>
<body>
<div class="background">
<!-- Header -->
<header>
<div class="container">
<img src="./assets/images/logo.svg" alt="" class="logo" />
<nav class="nav">
<ul class="nav__lists">
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link">Home</a>
<div class="wrapper">
<div class="background">
<!-- Header -->
<div class="width-container">
<header>
<div class="container">
<img src="./assets/images/logo.svg" alt="" class="logo" />
<nav class="nav">
<ul class="nav__lists">
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link">Home</a>
</li>
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link"
>Portfolio</a
>
</li>
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link"
>Services</a
>
</li>
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link"
>Contact</a
>
</li>
</ul>
</nav>
</div>
</header>
<!-- Welcome section -->
<section class="welcome">
<div class="welcome__content">
<span class="welcome__title">Welcome</span>
<h1 class="welcome__heading">
Lorem ipsum dolor sit amet consectetur
</h1>
<p class="welcome__description">
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>
</div>
<img
src="./assets/images/header-image.png"
alt="Header Image"
class="welcome__image"
/>
</section>
</div>
</div>
<div class="width-container">
<!-- Sponsor section -->
<section class="sponsor">
<div class="sponsor__container align-center">
<div class="sponsor__content align-center">
<span class="sponsor__title">Partners</span>
<h2 class="sponsor__heading">Lorem Ipsum Dolor</h2>
<p class="sponsor__description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</p>
</div>
<!-- Logo items -->
<ul class="sponsor__logos">
<li class="sponsor__logo-item">
<img src="./assets/images/logo-1.png" alt="Logo Sponsor" />
</li>
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link"
>Portfolio</a
>
<li class="sponsor__logo-item">
<img src="./assets/images/logo-2.png" alt="Logo Sponsor" />
</li>
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link">Services</a>
<li class="sponsor__logo-item">
<img src="./assets/images/logo-3.png" alt="Logo Sponsor" />
</li>
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link">Contact</a>
<li class="sponsor__logo-item">
<img src="./assets/images/logo-4.png" alt="Logo Sponsor" />
</li>
<li class="sponsor__logo-item">
<img src="./assets/images/logo-5.png" alt="Logo Sponsor" />
</li>
</ul>
</nav>
</div>
</header>
<a href="javascript:void(0)" class="btn btn-secondary"
>Learn More</a
>
</div>
</section>
<!-- Welcome section -->
<section class="welcome">
<div class="welcome__content">
<span class="welcome__title">Welcome</span>
<h1 class="welcome__heading">
Lorem ipsum dolor sit amet consectetur
</h1>
<p class="welcome__description">
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>
<!-- Conversation section -->
<section class="conversation">
<div class="conversation__container">
<!-- Conversation image -->
<img
src="./assets/images/conversation.png"
alt="Conversation Image"
class="conversation__image"
/>
<!-- Conversation content -->
<div class="conversation__content">
<h2 class="conversation__heading">
Lorem ipsum dolor sit amet consectetur
</h2>
<p class="conversation__description">
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"
>Learn More</a
>
</div>
</div>
</section>
<!-- Security section -->
<section class="security">
<div class="security__container">
<!-- Security content -->
<div class="security__content">
<h2 class="security__heading">
Lorem ipsum dolor sit amet consectetur
</h2>
<p class="security__description">
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"
>Learn More</a
>
</div>
<!-- Security image -->
<img
src="./assets/images/security.png"
alt="Image Security"
class="security__image"
/>
</div>
</section>
<!-- Team section -->
<section class="team">
<div class="team__container align-center">
<!-- Team content -->
<div class="team__content align-center">
<span class="team__title">Team</span>
<h2 class="team__heading">Our talents</h2>
<p class="team__description">
Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos,
ab,
</p>
</div>
<!-- Avatar Image -->
<div class="team__image-container">
<!-- Frame 1 -->
<div class="team__frame">
<div class="team__image-content align-center">
<img
src="./assets/images/avatar-1.png"
alt="Avatar Image"
class="team__image"
/>
<div class="team__information">
<span class="team__name">Peg legge</span>
<span class="team__position">Ceo</span>
</div>
</div>
</div>
<!-- Frame 2 -->
<div class="team__frame">
<div class="team__image-content align-center">
<img
src="./assets/images/avatar-2.png"
alt="Avatar Image"
class="team__image"
/>
<div class="team__information">
<span class="team__name">Richard guerra</span>
<span class="team__position">Cto</span>
</div>
</div>
</div>
<!-- Frame 3 -->
<div class="team__frame">
<div class="team__image-content align-center">
<img
src="./assets/images/avatar-3.png"
alt="Avatar Image"
class="team__image"
/>
<div class="team__information">
<span class="team__name">Alexandra stolz</span>
<span class="team__position">Designer</span>
</div>
</div>
</div>
<!-- Frame 4 -->
<div class="team__frame">
<div class="team__image-content align-center">
<img
src="./assets/images/avatar-4.png"
alt="Avatar Image"
class="team__image"
/>
<div class="team__information">
<span class="team__name">Peg legge</span>
<span class="team__position">Developer</span>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="btn btn-secondary">View Team</a>
</div>
</section>
</div>
<!-- Footer -->
<footer class="footer">
<div class="background">
<div class="footer__content">
<div class="footer__logos">
<a href="javascript:void(0)"
><img
src="./assets/images/facebook.svg"
alt="Facebook logo"
class="footer__logo-item"
/></a>
<a href="javascript:void(0)"
><img
src="./assets/images/instagram.svg"
alt="Instagram logo"
class="footer__logo-item"
/></a>
<a href="javascript:void(0)">
<img
src="./assets/images/twitter.svg"
alt="Twitter logo"
class="footer__logo-item"
/>
</a>
<a href="javascript:void(0)">
<img
src="./assets/images/pinterest.svg"
alt="Pinterest logo"
class="footer__logo-item"
/>
</a>
<a href="javascript:void(0)">
<img
src="./assets/images/tiktok.svg"
alt="Tiktok logo"
class="footer__logo-item"
/>
</a>
<a href="javascript:void(0)">
<img
src="./assets/images/wechat.svg"
alt="Wechat logo"
class="footer__logo-item"
/>
</a>
<a href="javascript:void(0)">
<img
src="./assets/images/youtube.svg"
alt="Youtube Logo"
class="footer__logo-item"
/>
</a>
</div>
<span class="footer__text"
>&#64; Start, 2022. All rights reserved.</span
>
</div>
</div>
<img
src="./assets/images/header-image.png"
alt="Header Image"
class="welcome__image"
/>
</section>
</footer>
</div>
<!-- Sponsor section -->
<section class="sponsor">
<div class="sponsor__container align-center">
<div class="sponsor__content align-center">
<span class="sponsor__title line-height-125">Partners</span>
<h2 class="sponsor__heading line-height-125">Lorem Ipsum Dolor</h2>
<p class="sponsor__description line-height-125">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</p>
</div>
<!-- Logo items -->
<ul class="sponsor__logos">
<li class="sponsor__logo-item">
<img src="./assets/images/logo-1.png" alt="Logo Sponsor" />
</li>
<li class="sponsor__logo-item">
<img src="./assets/images/logo-2.png" alt="Logo Sponsor" />
</li>
<li class="sponsor__logo-item">
<img src="./assets/images/logo-3.png" alt="Logo Sponsor" />
</li>
<li class="sponsor__logo-item">
<img src="./assets/images/logo-4.png" alt="Logo Sponsor" />
</li>
<li class="sponsor__logo-item">
<img src="./assets/images/logo-5.png" alt="Logo Sponsor" />
</li>
</ul>
<a href="javascript:void(0)" class="btn btn-secondary">Learn More</a>
</div>
</section>
<!-- Conversation section -->
<section class="conversation">
<div class="conversation__container">
<!-- Conversation image -->
<img
src="./assets/images/conversation.png"
alt="Conversation Image"
class="conversation__image"
/>
<!-- Conversation content -->
<div class="conversation__content">
<h2 class="conversation__heading">
Lorem ipsum dolor sit amet consectetur
</h2>
<p class="conversation__description">
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">Learn More</a>
</div>
</div>
</section>
<!-- Security section -->
<section class="security">
<div class="security__container">
<!-- Security content -->
<div class="security__content">
<h2 class="security__heading">
Lorem ipsum dolor sit amet consectetur
</h2>
<p class="security__description">
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">Learn More</a>
</div>
<!-- Security image -->
<img
src="./assets/images/security.png"
alt="Image Security"
class="security__image"
/>
</div>
</section>
<!-- Team section -->
<section class="team">
<div class="team__container align-center">
<!-- Team content -->
<div class="team__content align-center">
<span class="team__title">Team</span>
<h2 class="team__heading">Our talents</h2>
<p class="team__description">
Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos, ab,
</p>
</div>
<!-- Avatar Image -->
<div class="team__image-container">
<!-- Frame 1 -->
<div class="team__frame">
<div class="team__image-content align-center">
<img
src="./assets/images/avatar-1.png"
alt="Avatar Image"
class="team__image"
/>
<div class="team__information">
<span class="team__name">Peg legge</span>
<span class="team__position">Ceo</span>
</div>
</div>
</div>
<!-- Frame 2 -->
<div class="team__frame">
<div class="team__image-content align-center">
<img
src="./assets/images/avatar-2.png"
alt="Avatar Image"
class="team__image"
/>
<div class="team__information">
<span class="team__name">Richard guerra</span>
<span class="team__position">Cto</span>
</div>
</div>
</div>
<!-- Frame 3 -->
<div class="team__frame">
<div class="team__image-content align-center">
<img
src="./assets/images/avatar-3.png"
alt="Avatar Image"
class="team__image"
/>
<div class="team__information">
<span class="team__name">Alexandra stolz</span>
<span class="team__position">Ceo</span>
</div>
</div>
</div>
<!-- Frame 4 -->
<div class="team__frame">
<div class="team__image-content align-center">
<img
src="./assets/images/avatar-4.png"
alt="Avatar Image"
class="team__image"
/>
<div class="team__information">
<span class="team__name">Peg legge</span>
<span class="team__position">Ceo</span>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="btn btn-secondary">View Team</a>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="background">
<div class="footer__content">
<div class="footer__logos">
<img
src="./assets/images/facebook.svg"
alt="Facebook logo"
class="footer__logo-item"
/>
<img
src="./assets/images/instagram.svg"
alt="Instagram logo"
class="footer__logo-item"
/>
<img
src="./assets/images/twitter.svg"
alt="Twitter logo"
class="footer__logo-item"
/>
<img
src="./assets/images/pinterest.svg"
alt="Pinterest logo"
class="footer__logo-item"
/>
<img
src="./assets/images/tiktok.svg"
alt="Tiktok logo"
class="footer__logo-item"
/>
<img
src="./assets/images/wechat.svg"
alt="Wechat logo"
class="footer__logo-item"
/>
<img
src="./assets/images/youtube.svg"
alt="Youtube Logo"
class="footer__logo-item"
/>
</div>
<span class="footer__text">&#64; Start, 2022. All rights reserved.</span>
</div>
</div>
</footer>
</body>
</html>
practice/practice-01/src/style/abstracts/variables.css
+1 -3
View File
@@ -6,9 +6,7 @@
--fs-sm: 15px;
--fs-md: 20px;
--fs-lg: 40px;
--width: 1180px;
--frame-width: 279px;
--frame-height: 299px;
--max-width: 1180px;
--ff-secondary-regular: CrimsonText-Regular;
--ff-secondary-bold: CrimsonText-Bold;
--ff-primary-medium: WorkSans-Medium;
practice/practice-01/src/style/base/reset.css
+1 -4
View File
@@ -1,4 +1,4 @@
/* http://meyerweb.com/eric/tools/css/reset/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
@@ -105,9 +105,6 @@ nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
practice/practice-01/src/style/main.css
+18 -30
View File
@@ -1,13 +1,26 @@
@import url("./abstracts/variables.css");
@import url("./base/typo.css");
* {
line-height: 125%;
}
.wrapper {
width: 1440px;
margin: auto;
}
.width-container {
width: var(--max-width);
margin: auto;
}
.background {
background-color: var(--primary-color);
}
.container {
display: flex;
width: 1175px;
align-items: center;
justify-content: space-between;
padding-top: 35px;
@@ -42,7 +55,6 @@
/* Welcome section */
.welcome {
margin: auto;
width: 1180px;
display: flex;
gap: 120px;
padding-bottom: 82.87px;
@@ -55,11 +67,6 @@
gap: 15px;
}
.welcome__image {
width: 644.279px;
height: 378.13px;
}
.welcome__title {
font-family: var(--ff-primary-bold);
letter-spacing: 5px;
@@ -70,7 +77,6 @@
.welcome__heading {
font-size: var(--fs-lg);
font-family: var(--ff-secondary-bold);
line-height: 125%;
color: var(--white);
}
@@ -79,7 +85,6 @@
font-size: var(--fs-sm);
letter-spacing: 0px;
font-family: var(--ff-primary-regular);
line-height: 125%;
color: var(--white);
margin-bottom: 25px;
}
@@ -98,7 +103,6 @@
font-family: var(--ff-primary-regular);
font-size: var(--fs-md);
text-decoration: none;
line-height: 125%;
/* Other */
cursor: pointer;
@@ -129,7 +133,6 @@
/* Pattern Section */
.sponsor__container {
width: var(--width);
margin: 60 auto;
gap: 55px;
}
@@ -152,10 +155,6 @@
color: var(--primary-color);
}
.line-height-125 {
line-height: 125%;
}
.sponsor__heading {
font-size: var(--fs-lg);
font-family: var(--ff-secondary-bold);
@@ -174,7 +173,6 @@
/* Conversation Section */
.conversation__container {
width: var(--width);
margin: 60px auto;
display: flex;
justify-content: space-between;
@@ -191,18 +189,15 @@
.conversation__heading {
font-size: var(--fs-lg);
font-family: var(--ff-secondary-bold);
line-height: 125%;
}
.conversation__description {
font-size: var(--fs-sm);
font-family: var(--ff-primary-regular);
line-height: 125%;
}
/* Security section */
.security__container {
width: var(--width);
margin: 60px auto;
display: flex;
justify-content: space-between;
@@ -219,13 +214,11 @@
.security__heading {
font-size: var(--fs-lg);
font-family: var(--ff-secondary-bold);
line-height: 125%;
}
.security__description {
font-size: 15px;
font-family: var(--ff-primary-regular);
line-height: 125%;
}
/* Team section */
@@ -242,7 +235,6 @@
.team__title {
font-family: var(--ff-primary-bold);
line-height: 125%;
letter-spacing: 5px;
text-transform: uppercase;
@@ -252,25 +244,23 @@
.team__heading {
font-size: var(--fs-lg);
font-family: var(--ff-secondary-bold);
line-height: 125%;
}
.team__description {
font-size: var(--fs-md);
font-family: var(--ff-primary-regular);
line-height: 125%;
text-align: center;
}
.team__image-container {
display: flex;
gap: 47px;
gap: 35px;
}
.team__frame {
width: var(--frame-width);
height: var(--frame-height);
width: 270px;
height: 299px;
box-shadow: 3px 4px 12px 1px rgba(0, 0, 0, 0.25);
transition: 0.3s;
}
@@ -299,14 +289,12 @@
.team__name {
font-size: 24px;
font-family: var(--ff-secondary-bold);
line-height: 125%;
text-transform: capitalize;
}
.team__position {
font-size: var(--fs-sm);
font-family: var(--ff-primary-regular);
line-height: 125%;
text-transform: uppercase;
}
@@ -315,7 +303,7 @@
padding: 50px 131px;
display: flex;
justify-content: space-between;
width: var(--width);
width: var(--max-width);
margin: auto;
}