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, "bracketSpacing": true,
"embeddedLanguageFormatting": "auto", "embeddedLanguageFormatting": "auto",
"printWidth": 120, "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 charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice 01</title> <title>Practice 01</title>
<link rel="stylesheet" href="./styles/bases/reset.css" />
<link rel="stylesheet" href="./styles/main.css" /> <link rel="stylesheet" href="./styles/main.css" />
</head> </head>
<body> <body>
<div class="background"> <div class="background">
<!-- Header --> <!-- Start header -->
<div class="width-container"> <header class="header">
<header class="header"> <div class="container divide-content-center text text--md">
<div class="container divide-content-center text text--md"> <a href="javascript:void(0)" class="logo-link">
<a href="https://google.com" class="logo-link" <div class="logo-wrapper">
><img src="./assets/images/logo.svg" alt="" class="logo" <img src="./assets/images/logo.svg" alt="Logo web" class="logo" />
/></a> </div>
<nav class="nav"> </a>
<ul class="nav__lists d-flex justify-content-between"> <nav class="nav">
<li class="nav__item"> <ul class="nav__lists justify-content-between">
<a href="javascript:void(0)" class="nav__item-link">Home</a> <li class="nav__item">
</li> <a href="javascript:void(0)" class="nav__item-link text">Home</a>
<li class="nav__item"> </li>
<a href="javascript:void(0)" class="nav__item-link">Portfolio</a> <li class="nav__item">
</li> <a href="javascript:void(0)" class="nav__item-link text">Portfolio</a>
<li class="nav__item"> </li>
<a href="javascript:void(0)" class="nav__item-link">Services</a> <li class="nav__item">
</li> <a href="javascript:void(0)" class="nav__item-link text">Services</a>
<li class="nav__item"> </li>
<a href="javascript:void(0)" class="nav__item-link">Contact</a> <li class="nav__item">
</li> <a href="javascript:void(0)" class="nav__item-link text">Contact</a>
</ul> </li>
</nav> </ul>
</div> </nav>
</header> </div>
</header>
<!-- End header -->
<!-- Welcome section --> <!-- Start welcome section -->
<section class="welcome d-flex align-item-center"> <section class="welcome d-flex align-item-center">
<div class="welcome__content d-flex flex-column"> <div class="welcome__content">
<div class="welcome__content-text">
<span class="welcome__title text--bold">Welcome</span> <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"> <p class="welcome__description text text--sm">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit nemo hic quos, ab, dolor aperiam nobis 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? cum est eos error ipsum, voluptate culpa nesciunt delectus iste?
</p> </p>
<a href="javascript:void(0)" class="btn btn-primary text">Explore</a>
</div> </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" /> <img src="./assets/images/header-image.png" alt="Header Image" class="welcome__image" />
</section> </div>
</div> </section>
<!-- End welcome section -->
</div> </div>
<div class="width-container"> <div class="width-container">
@@ -83,17 +88,20 @@
<a href="javascript:void(0)" class="btn btn-secondary text">Learn More</a> <a href="javascript:void(0)" class="btn btn-secondary text">Learn More</a>
</div> </div>
</section> </section>
<!-- End sponsor section -->
<!-- Conversation section --> <!-- Conversation section -->
<section class="conversation"> <section class="conversation">
<div class="conversation__container divide-content-center"> <div class="conversation__container divide-content-center">
<!-- Conversation image --> <!-- 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 --> <!-- Conversation content -->
<div class="conversation__content d-flex flex-column"> <div class="conversation__content d-flex flex-column">
<h2 class="conversation__heading text--secondary text--lg">Lorem ipsum dolor sit amet consectetur</h2> <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 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? cum est eos error ipsum, voluptate culpa nesciunt delectus iste?
</p> </p>
@@ -101,6 +109,7 @@
</div> </div>
</div> </div>
</section> </section>
<!-- End conversation section -->
<!-- Security section --> <!-- Security section -->
<section class="security"> <section class="security">
@@ -108,7 +117,7 @@
<!-- Security content --> <!-- Security content -->
<div class="security__content d-flex flex-column"> <div class="security__content d-flex flex-column">
<h2 class="security__heading text--secondary text--lg">Lorem ipsum dolor sit amet consectetur</h2> <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 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? cum est eos error ipsum, voluptate culpa nesciunt delectus iste?
</p> </p>
@@ -116,9 +125,12 @@
</div> </div>
<!-- Security image --> <!-- 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> </div>
</section> </section>
<!-- End security section -->
<!-- Team section --> <!-- Team section -->
<section class="team"> <section class="team">
@@ -135,10 +147,12 @@
<!-- Frame 1 --> <!-- Frame 1 -->
<div class="team__frame"> <div class="team__frame">
<div class="team__image-content align-center"> <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"> <div class="team__information d-flex flex-column">
<span class="team__name text--secondary">Peg legge</span> <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> </div>
</div> </div>
@@ -146,10 +160,12 @@
<!-- Frame 2 --> <!-- Frame 2 -->
<div class="team__frame"> <div class="team__frame">
<div class="team__image-content align-center"> <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"> <div class="team__information">
<span class="team__name text--secondary">Richard guerra</span> <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> </div>
</div> </div>
@@ -157,10 +173,12 @@
<!-- Frame 3 --> <!-- Frame 3 -->
<div class="team__frame"> <div class="team__frame">
<div class="team__image-content align-center"> <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"> <div class="team__information">
<span class="team__name text--secondary">Alexandra stolz</span> <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> </div>
</div> </div>
@@ -168,10 +186,12 @@
<!-- Frame 4 --> <!-- Frame 4 -->
<div class="team__frame"> <div class="team__frame">
<div class="team__image-content align-center"> <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"> <div class="team__information">
<span class="team__name text--secondary">Janet bray</span> <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> </div>
</div> </div>
@@ -179,39 +199,43 @@
<a href="javascript:void(0)" class="btn btn-secondary text">View Team</a> <a href="javascript:void(0)" class="btn btn-secondary text">View Team</a>
</div> </div>
</section> </section>
<!-- End team section -->
</div> </div>
<!-- Footer --> <!-- Footer -->
<footer class="footer"> <footer class="footer">
<div class="background"> <div class="background">
<div class="footer__content d-flex justify-content-between"> <div class="width-container">
<div class="footer__logos d-flex"> <div class="footer__content d-flex justify-content-between">
<a href="javascript:void(0)" <div class="footer__logos d-flex">
><img src="./assets/images/facebook.svg" alt="Facebook logo" class="footer__logo-item" <a href="javascript:void(0)" class="footer__link">
/></a> <img src="./assets/images/facebook.svg" alt="Facebook logo" class="footer__logo-item" />
<a href="javascript:void(0)" </a>
><img src="./assets/images/instagram.svg" alt="Instagram logo" class="footer__logo-item" <a href="javascript:void(0)" class="footer__link">
/></a> <img src="./assets/images/instagram.svg" alt="Instagram logo" class="footer__logo-item" />
<a href="javascript:void(0)"> </a>
<img src="./assets/images/twitter.svg" alt="Twitter logo" class="footer__logo-item" /> <a href="javascript:void(0)" class="footer__link">
</a> <img src="./assets/images/twitter.svg" alt="Twitter logo" class="footer__logo-item" />
<a href="javascript:void(0)"> </a>
<img src="./assets/images/pinterest.svg" alt="Pinterest logo" class="footer__logo-item" /> <a href="javascript:void(0)" class="footer__link">
</a> <img src="./assets/images/pinterest.svg" alt="Pinterest logo" class="footer__logo-item" />
<a href="javascript:void(0)"> </a>
<img src="./assets/images/tiktok.svg" alt="Tiktok logo" class="footer__logo-item" /> <a href="javascript:void(0)" class="footer__link">
</a> <img src="./assets/images/tiktok.svg" alt="Tiktok logo" class="footer__logo-item" />
<a href="javascript:void(0)"> </a>
<img src="./assets/images/wechat.svg" alt="Wechat logo" class="footer__logo-item" /> <a href="javascript:void(0)" class="footer__link">
</a> <img src="./assets/images/wechat.svg" alt="Wechat logo" class="footer__logo-item" />
<a href="javascript:void(0)"> </a>
<img src="./assets/images/youtube.svg" alt="Youtube Logo" class="footer__logo-item" /> <a href="javascript:void(0)" class="footer__link">
</a> <img src="./assets/images/youtube.svg" alt="Youtube Logo" class="footer__logo-item" />
</div> </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>
</div> </div>
</footer> </footer>
<!-- End footer -->
</body> </body>
</html> </html>
src/styles/main.css
+81 -20
View File
@@ -1,9 +1,6 @@
@import url("./abstracts/variables.css"); @import url("./abstracts/variables.css");
@import url("./bases/typo.css"); @import url("./bases/typo.css");
@import url("./bases/reset.css");
* {
line-height: 125%;
}
.wrapper { .wrapper {
width: 1440px; width: 1440px;
@@ -18,13 +15,14 @@
.text { .text {
font-size: var(--fs-md); font-size: var(--fs-md);
font-family: var(--ff-primary-regular); font-family: var(--ff-primary-regular);
line-height: 125%;
} }
.text--bold { .text--bold {
font-family: var(--ff-primary-bold); font-family: var(--ff-primary-bold);
} }
.text--gray { .text--secondary-color {
color: var(--gray); color: var(--gray);
} }
@@ -77,10 +75,12 @@
.header { .header {
padding-top: 35px; padding-top: 35px;
padding-bottom: 40px; padding-bottom: 40px;
margin: auto;
width: 1175px;
} }
.logo-link { .logo-wrapper {
height: auto; height: 50px;
} }
.background { .background {
@@ -101,12 +101,14 @@
.nav__lists { .nav__lists {
list-style: none; list-style: none;
gap: 30px; gap: 30px;
display: inline-flex;
} }
.nav__item-link { .nav__item-link {
text-decoration: none; text-decoration: none;
color: var(--white); color: var(--white);
transition: 0.3s; transition: 0.3s;
padding: 0.5px;
} }
.nav__item-link:hover { .nav__item-link:hover {
@@ -118,9 +120,17 @@
margin: auto; margin: auto;
gap: 120px; gap: 120px;
padding-bottom: 82.87px; padding-bottom: 82.87px;
width: 1180px;
} }
.welcome__content { .welcome__content {
width: 416px;
gap: 15px;
}
.welcome__content-text {
display: flex;
flex-direction: column;
gap: 15px; gap: 15px;
} }
@@ -136,8 +146,21 @@
} }
.welcome__description { .welcome__description {
color: var(--white); color: rgba(255, 255, 255, 0.75);
margin-bottom: 25px; }
.welcome__btn {
margin-top: 25px;
}
.welcome-image-container {
height: 378px;
width: 644px;
}
.welcome__image {
width: 100%;
height: 100%;
} }
.btn { .btn {
@@ -146,9 +169,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 170px; width: 168px;
height: 48px; height: 46px;
border: none;
/* Text */ /* Text */
text-decoration: none; text-decoration: none;
@@ -162,11 +184,13 @@
.btn-primary { .btn-primary {
color: var(--black); color: var(--black);
background-color: var(--white); background-color: var(--white);
border: 1px solid var(--white);
} }
.btn-primary:hover { .btn-primary:hover {
background-color: var(--black); background-color: var(--black);
color: var(--white); color: var(--white);
border: 1px solid var(--black);
} }
.btn-secondary { .btn-secondary {
@@ -182,7 +206,8 @@
/* Pattern Section */ /* Pattern Section */
.sponsor__container { .sponsor__container {
margin: 60 auto; padding-top: 60px;
margin: auto;
gap: 55px; gap: 55px;
} }
@@ -203,10 +228,13 @@
.sponsor__logos { .sponsor__logos {
gap: 68px; gap: 68px;
width: 1159px;
height: 50px;
} }
.sponsor__logo-item { .sponsor__logo-item {
transition: 0.3s; transition: 0.3s;
cursor: pointer;
} }
.sponsor__logo-item:hover { .sponsor__logo-item:hover {
@@ -215,7 +243,7 @@
/* Conversation Section */ /* Conversation Section */
.conversation__container { .conversation__container {
margin: 60px auto; margin-top: 73px;
} }
.conversation__content { .conversation__content {
@@ -223,9 +251,19 @@
gap: 16px; gap: 16px;
} }
.conversation__wrapper-image {
width: 600px;
height: 431px;
}
.conversation__image {
width: 100%;
height: 100%;
}
/* Security section */ /* Security section */
.security__container { .security__container {
margin: 60px auto; margin-top: 73px;
} }
.security__content { .security__content {
@@ -233,13 +271,28 @@
gap: 16px; gap: 16px;
} }
.security__wrapper-image {
width: 600px;
height: 566px;
}
.security__image {
width: 100%;
height: 100%;
}
/* Team section */ /* Team section */
.team__container { .team__container {
margin-top: 102px;
gap: 45px; gap: 45px;
margin-bottom: 54px; margin-bottom: 54px;
} }
.team__heading {
text-transform: capitalize;
}
.team__content { .team__content {
width: 404px; width: 404px;
gap: 16px; gap: 16px;
@@ -258,6 +311,7 @@
height: 299px; height: 299px;
box-shadow: 3px 4px 12px 1px rgba(0, 0, 0, 0.25); box-shadow: 3px 4px 12px 1px rgba(0, 0, 0, 0.25);
transition: 0.3s; transition: 0.3s;
cursor: pointer;
} }
.team__frame:hover { .team__frame:hover {
@@ -270,6 +324,11 @@
} }
.team__image { .team__image {
width: 100%;
height: 100%;
}
.team__wrapper-image {
width: 175px; width: 175px;
height: 175px; height: 175px;
} }
@@ -290,17 +349,19 @@
/* Footer */ /* Footer */
.footer__content { .footer__content {
padding: 50px 131px; padding-top: 51px;
width: var(--max-width); padding-bottom: 49px;
margin: auto;
} }
.footer__logos { .footer__logos {
gap: 20px; gap: 20px;
align-items: center;
} }
.footer__text { .footer__text {
line-height: 125%;
color: var(--white); color: var(--white);
} }
.footer__link {
height: 19px;
}