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

Merge pull request #1 from Nez27/fix-comments

Browse Source 
Fix comments and improve
This commit is contained in:
Loi Phan
2023-07-06 14:55:29 +07:00
committed by GitHub
parent c319bb6c5f 841a9c6f91
commit 166354a1af
4 changed files with 179 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.prettierrc
+1 -1
View File
@@ -1,5 +1,5 @@
{
"bracketSameLine": false,
"bracketSameLine": true,
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"printWidth": 120,
.vscode/settings.json
Vendored Executable
+3
View File
@@ -0,0 +1,3 @@
{
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
src/index.html
+94 -70
View File
@@ -4,52 +4,57 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice 01</title>
<link rel="stylesheet" href="./styles/bases/reset.css" />
<link rel="stylesheet" href="./styles/main.css" />
</head>
<body>
<div class="background">
<!-- Header -->
<div class="width-container">
<header class="header">
<div class="container divide-content-center text text--md">
<a href="https://google.com" class="logo-link"
><img src="./assets/images/logo.svg" alt="" class="logo"
/></a>
<nav class="nav">
<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>
<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>
<!-- Start header -->
<header class="header">
<div class="container divide-content-center text text--md">
<a href="javascript:void(0)" class="logo-link">
<div class="logo-wrapper">
<img src="./assets/images/logo.svg" alt="Logo web" class="logo" />
</div>
</a>
<nav class="nav">
<ul class="nav__lists justify-content-between">
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link text">Home</a>
</li>
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link text">Portfolio</a>
</li>
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link text">Services</a>
</li>
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link text">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- End header -->
<!-- Welcome section -->
<section class="welcome d-flex align-item-center">
<div class="welcome__content d-flex flex-column">
<!-- Start welcome section -->
<section class="welcome d-flex align-item-center">
<div class="welcome__content">
<div class="welcome__content-text">
<span class="welcome__title text--bold">Welcome</span>
<h1 class="welcome__heading text--secondary">Lorem ipsum dolor sit amet consectetur</h1>
<h1 class="welcome__heading text--secondary text--lg">Lorem ipsum dolor sit amet consectetur</h1>
<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 text">Explore</a>
</div>
<a href="javascript:void(0)" class="welcome__btn btn btn-primary text">Explore</a>
</div>
<div class="welcome-image-container">
<img src="./assets/images/header-image.png" alt="Header Image" class="welcome__image" />
</section>
</div>
</div>
</section>
<!-- End welcome section -->
</div>
<div class="width-container">
@@ -83,17 +88,20 @@
<a href="javascript:void(0)" class="btn btn-secondary text">Learn More</a>
</div>
</section>
<!-- End sponsor section -->
<!-- Conversation section -->
<section class="conversation">
<div class="conversation__container divide-content-center">
<!-- Conversation image -->
<img src="./assets/images/conversation.png" alt="Conversation Image" class="conversation__image" />
<div class="conversation__wrapper-image">
<img src="./assets/images/conversation.png" alt="Conversation Image" class="conversation__image" />
</div>
<!-- Conversation content -->
<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 text--gray text--sm">
<p class="conversation__description text text--secondary-color 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>
@@ -101,6 +109,7 @@
</div>
</div>
</section>
<!-- End conversation section -->
<!-- Security section -->
<section class="security">
@@ -108,7 +117,7 @@
<!-- Security content -->
<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 text--gray text--sm">
<p class="security__description text text--secondary-color 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>
@@ -116,9 +125,12 @@
</div>
<!-- Security image -->
<img src="./assets/images/security.png" alt="Image Security" class="security__image" />
<div class="security__wrapper-image">
<img src="./assets/images/security.png" alt="Image Security" class="security__image" />
</div>
</div>
</section>
<!-- End security section -->
<!-- Team section -->
<section class="team">
@@ -135,10 +147,12 @@
<!-- 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__wrapper-image">
<img src="./assets/images/avatar-1.png" alt="Avatar Image" class="team__image" />
</div>
<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>
<span class="team__position text text--sm text--secondary-color">Ceo</span>
</div>
</div>
</div>
@@ -146,10 +160,12 @@
<!-- 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__wrapper-image">
<img src="./assets/images/avatar-2.png" alt="Avatar Image" class="team__image" />
</div>
<div class="team__information">
<span class="team__name text--secondary">Richard guerra</span>
<span class="team__position text text--sm text--gray">Cto</span>
<span class="team__position text text--sm text--secondary-color">Cto</span>
</div>
</div>
</div>
@@ -157,10 +173,12 @@
<!-- 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__wrapper-image">
<img src="./assets/images/avatar-3.png" alt="Avatar Image" class="team__image" />
</div>
<div class="team__information">
<span class="team__name text--secondary">Alexandra stolz</span>
<span class="team__position text text--sm text--gray">Designer</span>
<span class="team__position text text--sm text--secondary-color">Designer</span>
</div>
</div>
</div>
@@ -168,10 +186,12 @@
<!-- 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__wrapper-image">
<img src="./assets/images/avatar-4.png" alt="Avatar Image" class="team__image" />
</div>
<div class="team__information">
<span class="team__name text--secondary">Janet bray</span>
<span class="team__position text text--sm text--gray">Developer</span>
<span class="team__position text text--sm text--secondary-color">Developer</span>
</div>
</div>
</div>
@@ -179,39 +199,43 @@
<a href="javascript:void(0)" class="btn btn-secondary text">View Team</a>
</div>
</section>
<!-- End team section -->
</div>
<!-- Footer -->
<footer class="footer">
<div class="background">
<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" 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>
<div class="width-container">
<div class="footer__content d-flex justify-content-between">
<div class="footer__logos d-flex">
<a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/facebook.svg" alt="Facebook logo" class="footer__logo-item" />
</a>
<a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/instagram.svg" alt="Instagram logo" class="footer__logo-item" />
</a>
<a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/twitter.svg" alt="Twitter logo" class="footer__logo-item" />
</a>
<a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/pinterest.svg" alt="Pinterest logo" class="footer__logo-item" />
</a>
<a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/tiktok.svg" alt="Tiktok logo" class="footer__logo-item" />
</a>
<a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/wechat.svg" alt="Wechat logo" class="footer__logo-item" />
</a>
<a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/youtube.svg" alt="Youtube Logo" class="footer__logo-item" />
</a>
</div>
<span class="footer__text text">&#64; Start, 2022. All rights reserved.</span>
<span class="footer__text text">&copy; Start, 2022. All rights reserved.</span>
</div>
</div>
</div>
</footer>
<!-- End footer -->
</body>
</html>
src/styles/main.css
+81 -20
View File
@@ -1,9 +1,6 @@
@import url("./abstracts/variables.css");
@import url("./bases/typo.css");
* {
line-height: 125%;
}
@import url("./bases/reset.css");
.wrapper {
width: 1440px;
@@ -18,13 +15,14 @@
.text {
font-size: var(--fs-md);
font-family: var(--ff-primary-regular);
line-height: 125%;
}
.text--bold {
font-family: var(--ff-primary-bold);
}
.text--gray {
.text--secondary-color {
color: var(--gray);
}
@@ -77,10 +75,12 @@
.header {
padding-top: 35px;
padding-bottom: 40px;
margin: auto;
width: 1175px;
}
.logo-link {
height: auto;
.logo-wrapper {
height: 50px;
}
.background {
@@ -101,12 +101,14 @@
.nav__lists {
list-style: none;
gap: 30px;
display: inline-flex;
}
.nav__item-link {
text-decoration: none;
color: var(--white);
transition: 0.3s;
padding: 0.5px;
}
.nav__item-link:hover {
@@ -118,9 +120,17 @@
margin: auto;
gap: 120px;
padding-bottom: 82.87px;
width: 1180px;
}
.welcome__content {
width: 416px;
gap: 15px;
}
.welcome__content-text {
display: flex;
flex-direction: column;
gap: 15px;
}
@@ -136,8 +146,21 @@
}
.welcome__description {
color: var(--white);
margin-bottom: 25px;
color: rgba(255, 255, 255, 0.75);
}
.welcome__btn {
margin-top: 25px;
}
.welcome-image-container {
height: 378px;
width: 644px;
}
.welcome__image {
width: 100%;
height: 100%;
}
.btn {
@@ -146,9 +169,8 @@
display: flex;
align-items: center;
justify-content: center;
width: 170px;
height: 48px;
border: none;
width: 168px;
height: 46px;
/* Text */
text-decoration: none;
@@ -162,11 +184,13 @@
.btn-primary {
color: var(--black);
background-color: var(--white);
border: 1px solid var(--white);
}
.btn-primary:hover {
background-color: var(--black);
color: var(--white);
border: 1px solid var(--black);
}
.btn-secondary {
@@ -182,7 +206,8 @@
/* Pattern Section */
.sponsor__container {
margin: 60 auto;
padding-top: 60px;
margin: auto;
gap: 55px;
}
@@ -203,10 +228,13 @@
.sponsor__logos {
gap: 68px;
width: 1159px;
height: 50px;
}
.sponsor__logo-item {
transition: 0.3s;
cursor: pointer;
}
.sponsor__logo-item:hover {
@@ -215,7 +243,7 @@
/* Conversation Section */
.conversation__container {
margin: 60px auto;
margin-top: 73px;
}
.conversation__content {
@@ -223,9 +251,19 @@
gap: 16px;
}
.conversation__wrapper-image {
width: 600px;
height: 431px;
}
.conversation__image {
width: 100%;
height: 100%;
}
/* Security section */
.security__container {
margin: 60px auto;
margin-top: 73px;
}
.security__content {
@@ -233,13 +271,28 @@
gap: 16px;
}
.security__wrapper-image {
width: 600px;
height: 566px;
}
.security__image {
width: 100%;
height: 100%;
}
/* Team section */
.team__container {
margin-top: 102px;
gap: 45px;
margin-bottom: 54px;
}
.team__heading {
text-transform: capitalize;
}
.team__content {
width: 404px;
gap: 16px;
@@ -258,6 +311,7 @@
height: 299px;
box-shadow: 3px 4px 12px 1px rgba(0, 0, 0, 0.25);
transition: 0.3s;
cursor: pointer;
}
.team__frame:hover {
@@ -270,6 +324,11 @@
}
.team__image {
width: 100%;
height: 100%;
}
.team__wrapper-image {
width: 175px;
height: 175px;
}
@@ -290,17 +349,19 @@
/* Footer */
.footer__content {
padding: 50px 131px;
width: var(--max-width);
margin: auto;
padding-top: 51px;
padding-bottom: 49px;
}
.footer__logos {
gap: 20px;
align-items: center;
}
.footer__text {
line-height: 125%;
color: var(--white);
}
.footer__link {
height: 19px;
}