mirror of
https://github.com/Nezumi-2711/html-css-practice-one.git
synced 2026-09-22 20:01:21 +00:00
Init project
This commit is contained in:
+303
@@ -0,0 +1,303 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Practice 01</title>
|
||||
<link rel="stylesheet" href="./style/base/reset.css" />
|
||||
<link rel="stylesheet" href="./style/main.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="background">
|
||||
<!-- Header -->
|
||||
<div class="width-container">
|
||||
<header>
|
||||
<div class="container flex-center-row-space-between">
|
||||
<img src="./assets/images/logo.svg" alt="" class="logo" />
|
||||
<nav class="nav">
|
||||
<ul class="nav__lists">
|
||||
<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">
|
||||
<div class="welcome__content">
|
||||
<span class="welcome__title">Welcome</span>
|
||||
<h1 class="welcome__heading">
|
||||
Lorem ipsum dolor sit amet consectetur
|
||||
</h1>
|
||||
<p class="welcome__description">
|
||||
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">Explore</a>
|
||||
</div>
|
||||
<img
|
||||
src="./assets/images/header-image.png"
|
||||
alt="Header Image"
|
||||
class="welcome__image"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="width-container">
|
||||
<!-- Sponsor section -->
|
||||
<section class="sponsor">
|
||||
<div class="sponsor__container align-center">
|
||||
<div class="sponsor__content align-center">
|
||||
<span class="sponsor__title text--primary-color-uppercase"
|
||||
>Partners</span
|
||||
>
|
||||
<h2 class="sponsor__heading">Lorem Ipsum Dolor</h2>
|
||||
<p class="sponsor__description text--black-fs-md">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Logo items -->
|
||||
<ul class="sponsor__logos">
|
||||
<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"
|
||||
>Learn More</a
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Conversation section -->
|
||||
<section class="conversation">
|
||||
<div class="conversation__container flex-center-row-space-between">
|
||||
<!-- Conversation image -->
|
||||
<img
|
||||
src="./assets/images/conversation.png"
|
||||
alt="Conversation Image"
|
||||
class="conversation__image"
|
||||
/>
|
||||
|
||||
<!-- Conversation content -->
|
||||
<div class="conversation__content">
|
||||
<h2 class="conversation__heading">
|
||||
Lorem ipsum dolor sit amet consectetur
|
||||
</h2>
|
||||
<p class="conversation__description text--gray-fs-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"
|
||||
>Learn More</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Security section -->
|
||||
<section class="security">
|
||||
<div class="security__container flex-center-row-space-between">
|
||||
<!-- Security content -->
|
||||
<div class="security__content">
|
||||
<h2 class="security__heading">
|
||||
Lorem ipsum dolor sit amet consectetur
|
||||
</h2>
|
||||
<p class="security__description text--gray-fs-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"
|
||||
>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--primary-color-uppercase"
|
||||
>Team</span
|
||||
>
|
||||
<h2 class="team__heading">Our talents</h2>
|
||||
<p class="team__description text--black-fs-md">
|
||||
Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos,
|
||||
ab,
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Avatar Image -->
|
||||
<div class="team__image-container">
|
||||
<!-- 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">
|
||||
<span class="team__name">Peg legge</span>
|
||||
<span class="team__position">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">Richard guerra</span>
|
||||
<span class="team__position">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">Alexandra stolz</span>
|
||||
<span class="team__position">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">Peg legge</span>
|
||||
<span class="team__position">Developer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript:void(0)" class="btn btn-secondary">View Team</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="background">
|
||||
<div class="footer__content">
|
||||
<div class="footer__logos">
|
||||
<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"
|
||||
>@ Start, 2022. All rights reserved.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user