Change folder name and fix style
@@ -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
|
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"bracketSameLine": false,
|
||||||
|
"bracketSpacing": true,
|
||||||
|
"embeddedLanguageFormatting": "auto",
|
||||||
|
"printWidth": 120,
|
||||||
|
"tabWidth": 2
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 415 B After Width: | Height: | Size: 415 B |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.5 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 735 B After Width: | Height: | Size: 735 B |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 585 B After Width: | Height: | Size: 585 B |
@@ -4,318 +4,214 @@
|
|||||||
<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">
|
|
||||||
<header>
|
|
||||||
<div class="container divide-content-center text text--md">
|
|
||||||
<img src="./assets/images/logo.svg" alt="" class="logo" />
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Welcome section -->
|
|
||||||
<section class="welcome d-flex align-item-center">
|
|
||||||
<div class="welcome__content d-flex flex-column">
|
|
||||||
<span class="welcome__title text--bold">Welcome</span>
|
|
||||||
<h1 class="welcome__heading text--secondary">
|
|
||||||
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>
|
|
||||||
<img
|
|
||||||
src="./assets/images/header-image.png"
|
|
||||||
alt="Header Image"
|
|
||||||
class="welcome__image"
|
|
||||||
/>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="width-container">
|
<div class="width-container">
|
||||||
<!-- Sponsor section -->
|
<header class="header">
|
||||||
<section class="sponsor">
|
<div class="container divide-content-center text text--md">
|
||||||
<div class="sponsor__container align-center">
|
<a href="https://google.com" class="logo-link"
|
||||||
<div class="sponsor__content align-center">
|
><img src="./assets/images/logo.svg" alt="" class="logo"
|
||||||
<span class="sponsor__title text--bold text--title"
|
/></a>
|
||||||
>Partners</span
|
<nav class="nav">
|
||||||
>
|
<ul class="nav__lists d-flex justify-content-between">
|
||||||
<h2 class="sponsor__heading text--secondary text--lg">
|
<li class="nav__item">
|
||||||
Lorem Ipsum Dolor
|
<a href="javascript:void(0)" class="nav__item-link">Home</a>
|
||||||
</h2>
|
</li>
|
||||||
<p class="sponsor__description text">
|
<li class="nav__item">
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
<a href="javascript:void(0)" class="nav__item-link">Portfolio</a>
|
||||||
</p>
|
</li>
|
||||||
</div>
|
<li class="nav__item">
|
||||||
|
<a href="javascript:void(0)" class="nav__item-link">Services</a>
|
||||||
<!-- Logo items -->
|
</li>
|
||||||
<ul class="sponsor__logos d-flex">
|
<li class="nav__item">
|
||||||
<li class="sponsor__logo-item">
|
<a href="javascript:void(0)" class="nav__item-link">Contact</a>
|
||||||
<img src="./assets/images/logo-1.png" alt="Logo Sponsor" />
|
</li>
|
||||||
</li>
|
</ul>
|
||||||
<li class="sponsor__logo-item">
|
</nav>
|
||||||
<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 text"
|
|
||||||
>Learn More</a
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</header>
|
||||||
|
|
||||||
<!-- Conversation section -->
|
<!-- Welcome section -->
|
||||||
<section class="conversation">
|
<section class="welcome d-flex align-item-center">
|
||||||
<div class="conversation__container divide-content-center">
|
<div class="welcome__content d-flex flex-column">
|
||||||
<!-- Conversation image -->
|
<span class="welcome__title text--bold">Welcome</span>
|
||||||
<img
|
<h1 class="welcome__heading text--secondary">Lorem ipsum dolor sit amet consectetur</h1>
|
||||||
src="./assets/images/conversation.png"
|
<p class="welcome__description text text--sm">
|
||||||
alt="Conversation Image"
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit nemo hic quos, ab, dolor aperiam nobis
|
||||||
class="conversation__image"
|
cum est eos error ipsum, voluptate culpa nesciunt delectus iste?
|
||||||
/>
|
</p>
|
||||||
|
<a href="javascript:void(0)" class="btn btn-primary text">Explore</a>
|
||||||
<!-- 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">
|
|
||||||
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 text"
|
|
||||||
>Learn More</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Security section -->
|
|
||||||
<section class="security">
|
|
||||||
<div class="security__container divide-content-center">
|
|
||||||
<!-- 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">
|
|
||||||
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 text"
|
|
||||||
>Learn More</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Security image -->
|
|
||||||
<img
|
|
||||||
src="./assets/images/security.png"
|
|
||||||
alt="Image Security"
|
|
||||||
class="security__image"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Team section -->
|
|
||||||
<section class="team">
|
|
||||||
<div class="team__container align-center">
|
|
||||||
<!-- Team content -->
|
|
||||||
<div class="team__content align-center">
|
|
||||||
<span class="team__title text--bold text--title">Team</span>
|
|
||||||
<h2 class="team__heading text--secondary text--lg">
|
|
||||||
Our talents
|
|
||||||
</h2>
|
|
||||||
<p class="team__description text">
|
|
||||||
Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos,
|
|
||||||
ab,
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Avatar Image -->
|
|
||||||
<div class="team__image-container d-flex">
|
|
||||||
<!-- 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__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
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 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__information">
|
|
||||||
<span class="team__name text--secondary"
|
|
||||||
>Richard guerra</span
|
|
||||||
>
|
|
||||||
<span class="team__position text text--sm text--gray"
|
|
||||||
>Cto</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 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__information">
|
|
||||||
<span class="team__name text--secondary"
|
|
||||||
>Alexandra stolz</span
|
|
||||||
>
|
|
||||||
<span class="team__position text text--sm text--gray"
|
|
||||||
>Designer</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 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__information">
|
|
||||||
<span class="team__name text--secondary">Janet bray</span>
|
|
||||||
<span class="team__position text text--sm text--gray"
|
|
||||||
>Developer</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a href="javascript:void(0)" class="btn btn-secondary text"
|
|
||||||
>View Team</a
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
|
<img src="./assets/images/header-image.png" alt="Header Image" class="welcome__image" />
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Footer -->
|
<div class="width-container">
|
||||||
<footer class="footer">
|
<!-- Sponsor section -->
|
||||||
<div class="background">
|
<section class="sponsor">
|
||||||
<div class="footer__content d-flex justify-content-between">
|
<div class="sponsor__container align-center">
|
||||||
<div class="footer__logos d-flex">
|
<div class="sponsor__content align-center">
|
||||||
<a href="javascript:void(0)"
|
<span class="sponsor__title text--bold text--title">Partners</span>
|
||||||
><img
|
<h2 class="sponsor__heading text--secondary text--lg">Lorem Ipsum Dolor</h2>
|
||||||
src="./assets/images/facebook.svg"
|
<p class="sponsor__description text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
|
||||||
alt="Facebook logo"
|
</div>
|
||||||
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>
|
|
||||||
|
|
||||||
<span class="footer__text text"
|
<!-- Logo items -->
|
||||||
>@ Start, 2022. All rights reserved.</span
|
<ul class="sponsor__logos d-flex">
|
||||||
>
|
<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 text">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</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" />
|
||||||
|
|
||||||
|
<!-- 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">
|
||||||
|
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 text">Learn More</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</section>
|
||||||
|
|
||||||
|
<!-- Security section -->
|
||||||
|
<section class="security">
|
||||||
|
<div class="security__container divide-content-center">
|
||||||
|
<!-- 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">
|
||||||
|
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 text">Learn More</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Security image -->
|
||||||
|
<img src="./assets/images/security.png" alt="Image Security" class="security__image" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Team section -->
|
||||||
|
<section class="team">
|
||||||
|
<div class="team__container align-center">
|
||||||
|
<!-- Team content -->
|
||||||
|
<div class="team__content align-center">
|
||||||
|
<span class="team__title text--bold text--title">Team</span>
|
||||||
|
<h2 class="team__heading text--secondary text--lg">Our talents</h2>
|
||||||
|
<p class="team__description text">Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos, ab,</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Avatar Image -->
|
||||||
|
<div class="team__image-container d-flex">
|
||||||
|
<!-- 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__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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 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__information">
|
||||||
|
<span class="team__name text--secondary">Richard guerra</span>
|
||||||
|
<span class="team__position text text--sm text--gray">Cto</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 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__information">
|
||||||
|
<span class="team__name text--secondary">Alexandra stolz</span>
|
||||||
|
<span class="team__position text text--sm text--gray">Designer</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 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__information">
|
||||||
|
<span class="team__name text--secondary">Janet bray</span>
|
||||||
|
<span class="team__position text text--sm text--gray">Developer</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="javascript:void(0)" class="btn btn-secondary text">View Team</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
|
<span class="footer__text text">@ Start, 2022. All rights reserved.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
@@ -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);
|
||||||
}
|
}
|
||||||