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

Merge pull request #35 from phuocduong-agilityio/feature/conversation

Browse Source 
Refactor code
This commit is contained in:
Loi Phan
2023-07-03 09:28:21 +07:00
committed by GitHub
parent 6171e9dd0e 3d1d136426
commit 6d8bba68c6
3 changed files with 127 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
practice/practice-01/src/index.html
+115 -98
View File
@@ -7,111 +7,128 @@
<link rel="stylesheet" href="./style/base/reset.css" />
<link rel="stylesheet" href="./style/main.css" />
</head>
<body>
<div class="header__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="header__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 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="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>
</div>
<img
src="./assets/images/header-image.png"
alt="Header Image"
class="welcome__image"
/>
</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>
</div>
</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>
</body>
</html>
practice/practice-01/src/style/abstracts/variables.css
+1 -1
View File
@@ -6,7 +6,7 @@
--fs-sm: 15px;
--fs-md: 20px;
--fs-lg: 40px;
--width: 1180px;
--max-width: 1180px;
--ff-secondary-regular: CrimsonText-Regular;
--ff-secondary-bold: CrimsonText-Bold;
--ff-primary-medium: WorkSans-Medium;
practice/practice-01/src/style/main.css
+11 -5
View File
@@ -1,13 +1,22 @@
@import url("./abstracts/variables.css");
@import url("./base/typo.css");
.wrapper {
width: 1440px;
margin: auto;
}
.width-container {
width: 1180px;
margin: auto;
}
.header__background {
background-color: var(--primary-color);
}
.container {
display: flex;
width: 1175px;
align-items: center;
justify-content: space-between;
padding-top: 35px;
@@ -42,7 +51,6 @@
/* Welcome section */
.welcome {
margin: auto;
width: 1180px;
display: flex;
gap: 120px;
padding-bottom: 82.87px;
@@ -129,7 +137,6 @@
/* Pattern Section */
.sponsor__container {
width: var(--width);
margin: 60 auto;
gap: 55px;
}
@@ -174,7 +181,6 @@
/* Conversation Section */
.conversation__container {
width: var(--width);
margin: 60px auto;
display: flex;
justify-content: space-between;
@@ -198,4 +204,4 @@
font-size: var(--fs-sm);
font-family: var(--ff-primary-regular);
line-height: 125%;
}
}