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 20:01:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix comments

Browse Source
This commit is contained in:
nezumi
2023-07-06 12:00:17 +07:00
parent c319bb6c5f
commit 0c1c645e3f
4 changed files with 91 additions and 58 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
+37 -25
View File
@@ -4,19 +4,20 @@
<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 -->
<div class="width-container"> <div class="width-container">
<!-- Start header -->
<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="https://google.com" class="logo-link" <a href="javascript:void(0)" class="logo-link">
><img src="./assets/images/logo.svg" alt="" class="logo" <div class="logo-wrapper">
/></a> <img src="./assets/images/logo.svg" alt="Logo web" class="logo" />
</div>
</a>
<nav class="nav"> <nav class="nav">
<ul class="nav__lists d-flex justify-content-between"> <ul class="nav__lists d-flex justify-content-between">
<li class="nav__item"> <li class="nav__item">
@@ -35,20 +36,24 @@
</nav> </nav>
</div> </div>
</header> </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 d-flex flex-column">
<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> <a href="javascript:void(0)" class="btn btn-primary text">Explore</a>
</div> </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" />
</div>
</section> </section>
<!-- End welcome section -->
</div> </div>
</div> </div>
@@ -83,6 +88,7 @@
<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">
@@ -93,7 +99,7 @@
<!-- 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 +107,7 @@
</div> </div>
</div> </div>
</section> </section>
<!-- End conversation section -->
<!-- Security section --> <!-- Security section -->
<section class="security"> <section class="security">
@@ -108,7 +115,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>
@@ -119,6 +126,7 @@
<img src="./assets/images/security.png" alt="Image Security" class="security__image" /> <img src="./assets/images/security.png" alt="Image Security" class="security__image" />
</div> </div>
</section> </section>
<!-- End security section -->
<!-- Team section --> <!-- Team section -->
<section class="team"> <section class="team">
@@ -138,7 +146,7 @@
<img src="./assets/images/avatar-1.png" alt="Avatar Image" class="team__image" /> <img src="./assets/images/avatar-1.png" alt="Avatar Image" class="team__image" />
<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>
@@ -149,7 +157,7 @@
<img src="./assets/images/avatar-2.png" alt="Avatar Image" class="team__image" /> <img src="./assets/images/avatar-2.png" alt="Avatar Image" class="team__image" />
<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>
@@ -160,7 +168,7 @@
<img src="./assets/images/avatar-3.png" alt="Avatar Image" class="team__image" /> <img src="./assets/images/avatar-3.png" alt="Avatar Image" class="team__image" />
<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>
@@ -171,7 +179,7 @@
<img src="./assets/images/avatar-4.png" alt="Avatar Image" class="team__image" /> <img src="./assets/images/avatar-4.png" alt="Avatar Image" class="team__image" />
<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 +187,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="width-container">
<div class="footer__content d-flex justify-content-between"> <div class="footer__content d-flex justify-content-between">
<div class="footer__logos d-flex"> <div class="footer__logos d-flex">
<a href="javascript:void(0)" <a href="javascript:void(0)" class="footer__link">
><img src="./assets/images/facebook.svg" alt="Facebook logo" class="footer__logo-item" <img src="./assets/images/facebook.svg" alt="Facebook logo" class="footer__logo-item" />
/></a> </a>
<a href="javascript:void(0)" <a href="javascript:void(0)" class="footer__link">
><img src="./assets/images/instagram.svg" alt="Instagram logo" class="footer__logo-item" <img src="./assets/images/instagram.svg" alt="Instagram logo" class="footer__logo-item" />
/></a> </a>
<a href="javascript:void(0)"> <a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/twitter.svg" alt="Twitter logo" class="footer__logo-item" /> <img src="./assets/images/twitter.svg" alt="Twitter logo" class="footer__logo-item" />
</a> </a>
<a href="javascript:void(0)"> <a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/pinterest.svg" alt="Pinterest logo" class="footer__logo-item" /> <img src="./assets/images/pinterest.svg" alt="Pinterest logo" class="footer__logo-item" />
</a> </a>
<a href="javascript:void(0)"> <a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/tiktok.svg" alt="Tiktok logo" class="footer__logo-item" /> <img src="./assets/images/tiktok.svg" alt="Tiktok logo" class="footer__logo-item" />
</a> </a>
<a href="javascript:void(0)"> <a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/wechat.svg" alt="Wechat logo" class="footer__logo-item" /> <img src="./assets/images/wechat.svg" alt="Wechat logo" class="footer__logo-item" />
</a> </a>
<a href="javascript:void(0)"> <a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/youtube.svg" alt="Youtube Logo" class="footer__logo-item" /> <img src="./assets/images/youtube.svg" alt="Youtube Logo" class="footer__logo-item" />
</a> </a>
</div> </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
+36 -18
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);
} }
@@ -79,8 +77,8 @@
padding-bottom: 40px; padding-bottom: 40px;
} }
.logo-link { .logo-wrapper {
height: auto; height: 50px;
} }
.background { .background {
@@ -121,6 +119,7 @@
} }
.welcome__content { .welcome__content {
width: 416px;
gap: 15px; gap: 15px;
} }
@@ -140,15 +139,24 @@
margin-bottom: 25px; margin-bottom: 25px;
} }
.welcome-image-container {
height: 378px;
width: 644px;
}
.welcome__image {
max-width: 100%;
max-height: 100%;
}
.btn { .btn {
/* Display & Box Models */ /* Display & Box Models */
border-radius: 5px; border-radius: 5px;
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 +170,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 +192,8 @@
/* Pattern Section */ /* Pattern Section */
.sponsor__container { .sponsor__container {
margin: 60 auto; padding-top: 60px;
margin: auto;
gap: 55px; gap: 55px;
} }
@@ -215,7 +226,7 @@
/* Conversation Section */ /* Conversation Section */
.conversation__container { .conversation__container {
margin: 60px auto; margin-top: 73px;
} }
.conversation__content { .conversation__content {
@@ -225,7 +236,7 @@
/* Security section */ /* Security section */
.security__container { .security__container {
margin: 60px auto; margin-top: 73px;
} }
.security__content { .security__content {
@@ -236,10 +247,15 @@
/* 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;
@@ -290,17 +306,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;
}