Change folder name and fix style

This commit is contained in:
2023-07-06 09:32:05 +07:00
parent 77a746510b
commit c319bb6c5f
39 changed files with 221 additions and 318 deletions
-11
View File
@@ -1,11 +0,0 @@
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
Regular → Executable
View File
Regular → Executable
View File
Regular → Executable
View File
Executable
+7
View File
@@ -0,0 +1,7 @@
{
"bracketSameLine": false,
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"printWidth": 120,
"tabWidth": 2
}
Regular → Executable
View File
Generated Regular → Executable
View File
Regular → Executable
View File
Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 8.7 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 52 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 415 B

After

Width:  |  Height:  |  Size: 415 B

View File

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 58 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 735 B

After

Width:  |  Height:  |  Size: 735 B

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Regular → Executable
View File

Before

Width:  |  Height:  |  Size: 585 B

After

Width:  |  Height:  |  Size: 585 B

View File
View File
View File
View File
View File
Regular → Executable
+49 -153
View File
@@ -4,37 +4,32 @@
<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="./style/base/reset.css" /> <link rel="stylesheet" href="./styles/bases/reset.css" />
<link rel="stylesheet" href="./style/main.css" /> <link rel="stylesheet" href="./styles/main.css" />
</head> </head>
<body> <body>
<div class="wrapper">
<div class="background"> <div class="background">
<!-- Header --> <!-- Header -->
<div class="width-container"> <div class="width-container">
<header> <header class="header">
<div class="container divide-content-center text text--md"> <div class="container divide-content-center text text--md">
<img src="./assets/images/logo.svg" alt="" class="logo" /> <a href="https://google.com" class="logo-link"
><img src="./assets/images/logo.svg" alt="" class="logo"
/></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">
<a href="javascript:void(0)" class="nav__item-link">Home</a> <a href="javascript:void(0)" class="nav__item-link">Home</a>
</li> </li>
<li class="nav__item"> <li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link" <a href="javascript:void(0)" class="nav__item-link">Portfolio</a>
>Portfolio</a
>
</li> </li>
<li class="nav__item"> <li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link" <a href="javascript:void(0)" class="nav__item-link">Services</a>
>Services</a
>
</li> </li>
<li class="nav__item"> <li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link" <a href="javascript:void(0)" class="nav__item-link">Contact</a>
>Contact</a
>
</li> </li>
</ul> </ul>
</nav> </nav>
@@ -45,23 +40,14 @@
<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"> <h1 class="welcome__heading text--secondary">Lorem ipsum dolor sit amet consectetur</h1>
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. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit nemo hic quos, ab, dolor aperiam nobis
Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos cum est eos error ipsum, voluptate culpa nesciunt delectus iste?
error ipsum, voluptate culpa nesciunt delectus iste?
</p> </p>
<a href="javascript:void(0)" class="btn btn-primary text" <a href="javascript:void(0)" class="btn btn-primary text">Explore</a>
>Explore</a
>
</div> </div>
<img <img src="./assets/images/header-image.png" alt="Header Image" class="welcome__image" />
src="./assets/images/header-image.png"
alt="Header Image"
class="welcome__image"
/>
</section> </section>
</div> </div>
</div> </div>
@@ -71,15 +57,9 @@
<section class="sponsor"> <section class="sponsor">
<div class="sponsor__container align-center"> <div class="sponsor__container align-center">
<div class="sponsor__content align-center"> <div class="sponsor__content align-center">
<span class="sponsor__title text--bold text--title" <span class="sponsor__title text--bold text--title">Partners</span>
>Partners</span <h2 class="sponsor__heading text--secondary text--lg">Lorem Ipsum Dolor</h2>
> <p class="sponsor__description text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<h2 class="sponsor__heading text--secondary text--lg">
Lorem Ipsum Dolor
</h2>
<p class="sponsor__description text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</p>
</div> </div>
<!-- Logo items --> <!-- Logo items -->
@@ -100,9 +80,7 @@
<img src="./assets/images/logo-5.png" alt="Logo Sponsor" /> <img src="./assets/images/logo-5.png" alt="Logo Sponsor" />
</li> </li>
</ul> </ul>
<a href="javascript:void(0)" class="btn btn-secondary text" <a href="javascript:void(0)" class="btn btn-secondary text">Learn More</a>
>Learn More</a
>
</div> </div>
</section> </section>
@@ -110,25 +88,16 @@
<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 <img src="./assets/images/conversation.png" alt="Conversation Image" class="conversation__image" />
src="./assets/images/conversation.png"
alt="Conversation Image"
class="conversation__image"
/>
<!-- 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"> <h2 class="conversation__heading text--secondary text--lg">Lorem ipsum dolor sit amet consectetur</h2>
Lorem ipsum dolor sit amet consectetur
</h2>
<p class="conversation__description text text--gray text--sm"> <p class="conversation__description text text--gray text--sm">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit nemo hic quos, ab, dolor aperiam nobis
Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos cum est eos error ipsum, voluptate culpa nesciunt delectus iste?
error ipsum, voluptate culpa nesciunt delectus iste?
</p> </p>
<a href="javascript:void(0)" class="btn btn-secondary text" <a href="javascript:void(0)" class="btn btn-secondary text">Learn More</a>
>Learn More</a
>
</div> </div>
</div> </div>
</section> </section>
@@ -138,25 +107,16 @@
<div class="security__container divide-content-center"> <div class="security__container divide-content-center">
<!-- 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"> <h2 class="security__heading text--secondary text--lg">Lorem ipsum dolor sit amet consectetur</h2>
Lorem ipsum dolor sit amet consectetur
</h2>
<p class="security__description text text--gray text--sm"> <p class="security__description text text--gray text--sm">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit nemo hic quos, ab, dolor aperiam nobis
Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos cum est eos error ipsum, voluptate culpa nesciunt delectus iste?
error ipsum, voluptate culpa nesciunt delectus iste?
</p> </p>
<a href="javascript:void(0)" class="btn btn-secondary text" <a href="javascript:void(0)" class="btn btn-secondary text">Learn More</a>
>Learn More</a
>
</div> </div>
<!-- Security image --> <!-- Security image -->
<img <img src="./assets/images/security.png" alt="Image Security" class="security__image" />
src="./assets/images/security.png"
alt="Image Security"
class="security__image"
/>
</div> </div>
</section> </section>
@@ -166,13 +126,8 @@
<!-- Team content --> <!-- Team content -->
<div class="team__content align-center"> <div class="team__content align-center">
<span class="team__title text--bold text--title">Team</span> <span class="team__title text--bold text--title">Team</span>
<h2 class="team__heading text--secondary text--lg"> <h2 class="team__heading text--secondary text--lg">Our talents</h2>
Our talents <p class="team__description text">Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos, ab,</p>
</h2>
<p class="team__description text">
Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos,
ab,
</p>
</div> </div>
<!-- Avatar Image --> <!-- Avatar Image -->
@@ -180,16 +135,10 @@
<!-- 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 <img src="./assets/images/avatar-1.png" alt="Avatar Image" class="team__image" />
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" <span class="team__position text text--sm text--gray">Ceo</span>
>Ceo</span
>
</div> </div>
</div> </div>
</div> </div>
@@ -197,18 +146,10 @@
<!-- 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 <img src="./assets/images/avatar-2.png" alt="Avatar Image" class="team__image" />
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" <span class="team__name text--secondary">Richard guerra</span>
>Richard guerra</span <span class="team__position text text--sm text--gray">Cto</span>
>
<span class="team__position text text--sm text--gray"
>Cto</span
>
</div> </div>
</div> </div>
</div> </div>
@@ -216,18 +157,10 @@
<!-- 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 <img src="./assets/images/avatar-3.png" alt="Avatar Image" class="team__image" />
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" <span class="team__name text--secondary">Alexandra stolz</span>
>Alexandra stolz</span <span class="team__position text text--sm text--gray">Designer</span>
>
<span class="team__position text text--sm text--gray"
>Designer</span
>
</div> </div>
</div> </div>
</div> </div>
@@ -235,23 +168,15 @@
<!-- 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 <img src="./assets/images/avatar-4.png" alt="Avatar Image" class="team__image" />
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" <span class="team__position text text--sm text--gray">Developer</span>
>Developer</span
>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<a href="javascript:void(0)" class="btn btn-secondary text" <a href="javascript:void(0)" class="btn btn-secondary text">View Team</a>
>View Team</a
>
</div> </div>
</section> </section>
</div> </div>
@@ -262,60 +187,31 @@
<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)"
><img ><img src="./assets/images/facebook.svg" alt="Facebook logo" class="footer__logo-item"
src="./assets/images/facebook.svg"
alt="Facebook logo"
class="footer__logo-item"
/></a> /></a>
<a href="javascript:void(0)" <a href="javascript:void(0)"
><img ><img src="./assets/images/instagram.svg" alt="Instagram logo" class="footer__logo-item"
src="./assets/images/instagram.svg"
alt="Instagram logo"
class="footer__logo-item"
/></a> /></a>
<a href="javascript:void(0)"> <a href="javascript:void(0)">
<img <img src="./assets/images/twitter.svg" alt="Twitter logo" class="footer__logo-item" />
src="./assets/images/twitter.svg"
alt="Twitter logo"
class="footer__logo-item"
/>
</a> </a>
<a href="javascript:void(0)"> <a href="javascript:void(0)">
<img <img src="./assets/images/pinterest.svg" alt="Pinterest logo" class="footer__logo-item" />
src="./assets/images/pinterest.svg"
alt="Pinterest logo"
class="footer__logo-item"
/>
</a> </a>
<a href="javascript:void(0)"> <a href="javascript:void(0)">
<img <img src="./assets/images/tiktok.svg" alt="Tiktok logo" class="footer__logo-item" />
src="./assets/images/tiktok.svg"
alt="Tiktok logo"
class="footer__logo-item"
/>
</a> </a>
<a href="javascript:void(0)"> <a href="javascript:void(0)">
<img <img src="./assets/images/wechat.svg" alt="Wechat logo" class="footer__logo-item" />
src="./assets/images/wechat.svg"
alt="Wechat logo"
class="footer__logo-item"
/>
</a> </a>
<a href="javascript:void(0)"> <a href="javascript:void(0)">
<img <img src="./assets/images/youtube.svg" alt="Youtube Logo" class="footer__logo-item" />
src="./assets/images/youtube.svg"
alt="Youtube Logo"
class="footer__logo-item"
/>
</a> </a>
</div> </div>
<span class="footer__text text" <span class="footer__text text">&#64; Start, 2022. All rights reserved.</span>
>&#64; Start, 2022. All rights reserved.</span
>
</div> </div>
</div> </div>
</footer> </footer>
</div>
</body> </body>
</html> </html>
View File
+5 -5
View File
@@ -1,25 +1,25 @@
@font-face { @font-face {
font-family: CrimsonText-Regular; font-family: CrimsonText-Regular;
src: url(../../font/CrimsonText-Regular.ttf); src: url(../../fonts/CrimsonText-Regular.ttf);
} }
@font-face { @font-face {
font-family: CrimsonText-Bold; font-family: CrimsonText-Bold;
src: url(../../font/CrimsonText-700.ttf); src: url(../../fonts/CrimsonText-700.ttf);
font-weight: 700; font-weight: 700;
} }
@font-face { @font-face {
font-family: WorkSans-Medium; font-family: WorkSans-Medium;
src: url(../../font/WorkSans-500.ttf); src: url(../../fonts/WorkSans-500.ttf);
} }
@font-face { @font-face {
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
src: url(../../font/WorkSans-700.ttf); src: url(../../fonts/WorkSans-700.ttf);
} }
@font-face { @font-face {
font-family: WorkSans-Regular; font-family: WorkSans-Regular;
src: url(../../font/WorkSans-Regular.ttf); src: url(../../fonts/WorkSans-Regular.ttf);
} }
+13 -2
View File
@@ -1,5 +1,5 @@
@import url("./abstracts/variables.css"); @import url("./abstracts/variables.css");
@import url("./base/typo.css"); @import url("./bases/typo.css");
* { * {
line-height: 125%; line-height: 125%;
@@ -73,12 +73,23 @@
} }
/* Header */ /* Header */
.header {
padding-top: 35px;
padding-bottom: 40px;
}
.logo-link {
height: auto;
}
.background { .background {
background-color: var(--primary-color); background-color: var(--primary-color);
} }
.container { .container {
padding: 37px 0px; /* padding-top: 35px;
padding-bottom: 40px; */
margin: auto; margin: auto;
color: var(--white); color: var(--white);
} }
Regular → Executable
View File