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
src/index.html
+51 -39
View File
@@ -4,19 +4,20 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice 01</title>
<link rel="stylesheet" href="./styles/bases/reset.css" />
<link rel="stylesheet" href="./styles/main.css" />
</head>
<body>
<div class="background">
<!-- Header -->
<div class="width-container">
<!-- Start header -->
<header class="header">
<div class="container divide-content-center text text--md">
<a href="https://google.com" class="logo-link"
><img src="./assets/images/logo.svg" alt="" class="logo"
/></a>
<a href="javascript:void(0)" class="logo-link">
<div class="logo-wrapper">
<img src="./assets/images/logo.svg" alt="Logo web" class="logo" />
</div>
</a>
<nav class="nav">
<ul class="nav__lists d-flex justify-content-between">
<li class="nav__item">
@@ -35,20 +36,24 @@
</nav>
</div>
</header>
<!-- End header -->
<!-- Welcome section -->
<!-- Start 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>
<h1 class="welcome__heading text--secondary text--lg">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" />
<div class="welcome-image-container">
<img src="./assets/images/header-image.png" alt="Header Image" class="welcome__image" />
</div>
</section>
<!-- End welcome section -->
</div>
</div>
@@ -83,6 +88,7 @@
<a href="javascript:void(0)" class="btn btn-secondary text">Learn More</a>
</div>
</section>
<!-- End sponsor section -->
<!-- Conversation section -->
<section class="conversation">
@@ -93,7 +99,7 @@
<!-- 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">
<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
cum est eos error ipsum, voluptate culpa nesciunt delectus iste?
</p>
@@ -101,6 +107,7 @@
</div>
</div>
</section>
<!-- End conversation section -->
<!-- Security section -->
<section class="security">
@@ -108,7 +115,7 @@
<!-- 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">
<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
cum est eos error ipsum, voluptate culpa nesciunt delectus iste?
</p>
@@ -119,6 +126,7 @@
<img src="./assets/images/security.png" alt="Image Security" class="security__image" />
</div>
</section>
<!-- End security section -->
<!-- Team section -->
<section class="team">
@@ -138,7 +146,7 @@
<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>
<span class="team__position text text--sm text--secondary-color">Ceo</span>
</div>
</div>
</div>
@@ -149,7 +157,7 @@
<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>
<span class="team__position text text--sm text--secondary-color">Cto</span>
</div>
</div>
</div>
@@ -160,7 +168,7 @@
<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>
<span class="team__position text text--sm text--secondary-color">Designer</span>
</div>
</div>
</div>
@@ -171,7 +179,7 @@
<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>
<span class="team__position text text--sm text--secondary-color">Developer</span>
</div>
</div>
</div>
@@ -179,39 +187,43 @@
<a href="javascript:void(0)" class="btn btn-secondary text">View Team</a>
</div>
</section>
<!-- End team section -->
</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>
<div class="width-container">
<div class="footer__content d-flex justify-content-between">
<div class="footer__logos d-flex">
<a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/facebook.svg" alt="Facebook logo" class="footer__logo-item" />
</a>
<a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/instagram.svg" alt="Instagram logo" class="footer__logo-item" />
</a>
<a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/twitter.svg" alt="Twitter logo" class="footer__logo-item" />
</a>
<a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/pinterest.svg" alt="Pinterest logo" class="footer__logo-item" />
</a>
<a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/tiktok.svg" alt="Tiktok logo" class="footer__logo-item" />
</a>
<a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/wechat.svg" alt="Wechat logo" class="footer__logo-item" />
</a>
<a href="javascript:void(0)" class="footer__link">
<img src="./assets/images/youtube.svg" alt="Youtube Logo" class="footer__logo-item" />
</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>
</footer>
<!-- End footer -->
</body>
</html>