mirror of
https://github.com/Nezumi-2711/html-css-practice-one.git
synced 2026-09-22 20:01:21 +00:00
Fix comments 3
This commit is contained in:
+174
-170
@@ -10,203 +10,207 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="background">
|
<div class="background">
|
||||||
<!-- Start header -->
|
<div class="width-container">
|
||||||
<header class="header">
|
<!-- Start header -->
|
||||||
<div class="container divide-content-center text text--md">
|
<header class="header">
|
||||||
<a href="javascript:void(0)" class="logo-link">
|
<div class="divide-content-center text text--md">
|
||||||
<div class="logo-wrapper">
|
<a href="javascript:void(0)" class="logo-link">
|
||||||
<img src="./assets/images/logo.svg" alt="Logo web" class="logo" />
|
<div class="logo-wrapper">
|
||||||
|
<img src="./assets/images/logo.svg" alt="Logo web" class="logo" />
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<nav class="nav">
|
||||||
|
<ul class="nav__lists justify-content-between">
|
||||||
|
<li class="nav__item">
|
||||||
|
<a href="javascript:void(0)" class="nav__item-link text">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav__item">
|
||||||
|
<a href="javascript:void(0)" class="nav__item-link text">Portfolio</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav__item">
|
||||||
|
<a href="javascript:void(0)" class="nav__item-link text">Services</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav__item">
|
||||||
|
<a href="javascript:void(0)" class="nav__item-link text">Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- End header -->
|
||||||
|
|
||||||
|
<!-- Start welcome section -->
|
||||||
|
<section class="welcome d-flex align-item-center">
|
||||||
|
<div class="welcome__content">
|
||||||
|
<div class="welcome__content-text">
|
||||||
|
<span class="welcome__title text--bold">Welcome</span>
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
<a href="javascript:void(0)" class="welcome__btn btn btn-primary text">Explore</a>
|
||||||
<nav class="nav">
|
</div>
|
||||||
<ul class="nav__lists justify-content-between">
|
<div class="welcome-image-container">
|
||||||
<li class="nav__item">
|
<img src="./assets/images/header-image.png" alt="Header Image" class="welcome__image" />
|
||||||
<a href="javascript:void(0)" class="nav__item-link text">Home</a>
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- End welcome section -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<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--bold text--title">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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Logo items -->
|
||||||
|
<ul class="sponsor__logos d-flex">
|
||||||
|
<li class="sponsor__logo-item">
|
||||||
|
<img src="./assets/images/logo-1.png" alt="Logo Sponsor" />
|
||||||
</li>
|
</li>
|
||||||
<li class="nav__item">
|
<li class="sponsor__logo-item">
|
||||||
<a href="javascript:void(0)" class="nav__item-link text">Portfolio</a>
|
<img src="./assets/images/logo-2.png" alt="Logo Sponsor" />
|
||||||
</li>
|
</li>
|
||||||
<li class="nav__item">
|
<li class="sponsor__logo-item">
|
||||||
<a href="javascript:void(0)" class="nav__item-link text">Services</a>
|
<img src="./assets/images/logo-3.png" alt="Logo Sponsor" />
|
||||||
</li>
|
</li>
|
||||||
<li class="nav__item">
|
<li class="sponsor__logo-item">
|
||||||
<a href="javascript:void(0)" class="nav__item-link text">Contact</a>
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- End header -->
|
|
||||||
|
|
||||||
<!-- Start welcome section -->
|
|
||||||
<section class="welcome d-flex align-item-center">
|
|
||||||
<div class="welcome__content">
|
|
||||||
<div class="welcome__content-text">
|
|
||||||
<span class="welcome__title text--bold">Welcome</span>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<a href="javascript:void(0)" class="welcome__btn btn btn-primary text">Explore</a>
|
|
||||||
</div>
|
|
||||||
<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 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--bold text--title">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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Logo items -->
|
|
||||||
<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>
|
|
||||||
<!-- End sponsor section -->
|
|
||||||
|
|
||||||
<!-- Conversation section -->
|
|
||||||
<section class="conversation">
|
|
||||||
<div class="conversation__container divide-content-center">
|
|
||||||
<!-- Conversation image -->
|
|
||||||
<div class="conversation__wrapper-image">
|
|
||||||
<img src="./assets/images/conversation.png" alt="Conversation Image" class="conversation__image" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 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--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>
|
|
||||||
<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>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
<!-- End sponsor section -->
|
||||||
<!-- End conversation section -->
|
|
||||||
|
|
||||||
<!-- Security section -->
|
<!-- Conversation section -->
|
||||||
<section class="security">
|
<section class="conversation">
|
||||||
<div class="security__container divide-content-center">
|
<div class="conversation__container divide-content-center">
|
||||||
<!-- Security content -->
|
<!-- Conversation image -->
|
||||||
<div class="security__content d-flex flex-column">
|
<div class="conversation__wrapper-image">
|
||||||
<h2 class="security__heading text--secondary text--lg">Lorem ipsum dolor sit amet consectetur</h2>
|
<img src="./assets/images/conversation.png" alt="Conversation Image" class="conversation__image" />
|
||||||
<p class="security__description text text--secondary-color text--sm">
|
</div>
|
||||||
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?
|
<!-- Conversation content -->
|
||||||
</p>
|
<div class="conversation__content d-flex flex-column">
|
||||||
<a href="javascript:void(0)" class="btn btn-secondary text">Learn More</a>
|
<h2 class="conversation__heading text--secondary text--lg">Lorem ipsum dolor sit amet consectetur</h2>
|
||||||
|
<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>
|
||||||
|
<a href="javascript:void(0)" class="btn btn-secondary text">Learn More</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- End conversation section -->
|
||||||
|
|
||||||
<!-- Security image -->
|
<!-- Security section -->
|
||||||
<div class="security__wrapper-image">
|
<section class="security">
|
||||||
<img src="./assets/images/security.png" alt="Image Security" class="security__image" />
|
<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--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>
|
||||||
|
<a href="javascript:void(0)" class="btn btn-secondary text">Learn More</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Security image -->
|
||||||
|
<div class="security__wrapper-image">
|
||||||
|
<img src="./assets/images/security.png" alt="Image Security" class="security__image" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
<!-- End security section -->
|
||||||
<!-- End security section -->
|
|
||||||
|
|
||||||
<!-- Team section -->
|
<!-- Team section -->
|
||||||
<section class="team">
|
<section class="team">
|
||||||
<div class="team__container align-center">
|
<div class="team__container align-center">
|
||||||
<!-- 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">Our talents</h2>
|
<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>
|
<p class="team__description text">Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos, ab,</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Avatar Image -->
|
<!-- Avatar Image -->
|
||||||
<div class="team__image-container d-flex">
|
<div class="team__image-container d-flex">
|
||||||
<!-- 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">
|
||||||
<div class="team__wrapper-image">
|
<div class="team__wrapper-image">
|
||||||
<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>
|
||||||
|
<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--secondary-color">Ceo</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<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--secondary-color">Ceo</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 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">
|
||||||
<div class="team__wrapper-image">
|
<div class="team__wrapper-image">
|
||||||
<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>
|
</div>
|
||||||
<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--secondary-color">Cto</span>
|
<span class="team__position text text--sm text--secondary-color">Cto</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 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">
|
||||||
<div class="team__wrapper-image">
|
<div class="team__wrapper-image">
|
||||||
<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>
|
||||||
|
<div class="team__information">
|
||||||
|
<span class="team__name text--secondary">Alexandra stolz</span>
|
||||||
|
<span class="team__position text text--sm text--secondary-color">Designer</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="team__information">
|
|
||||||
<span class="team__name text--secondary">Alexandra stolz</span>
|
|
||||||
<span class="team__position text text--sm text--secondary-color">Designer</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 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">
|
||||||
<div class="team__wrapper-image">
|
<div class="team__wrapper-image">
|
||||||
<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>
|
</div>
|
||||||
<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--secondary-color">Developer</span>
|
<span class="team__position text text--sm text--secondary-color">Developer</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<a href="javascript:void(0)" class="btn btn-secondary text">View Team</a>
|
||||||
</div>
|
</div>
|
||||||
<a href="javascript:void(0)" class="btn btn-secondary text">View Team</a>
|
</section>
|
||||||
</div>
|
<!-- End team section -->
|
||||||
</section>
|
</div>
|
||||||
<!-- End team section -->
|
</main>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<footer class="footer">
|
<div class="background">
|
||||||
<div class="background">
|
<div class="width-container">
|
||||||
<div class="width-container">
|
<footer class="footer">
|
||||||
<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)" class="footer__link">
|
<a href="javascript:void(0)" class="footer__link">
|
||||||
@@ -234,9 +238,9 @@
|
|||||||
|
|
||||||
<span class="footer__text text">© Start, 2022. All rights reserved.</span>
|
<span class="footer__text text">© Start, 2022. All rights reserved.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</div>
|
||||||
<!-- End footer -->
|
<!-- End footer -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -75,7 +75,6 @@
|
|||||||
.header {
|
.header {
|
||||||
padding-top: 35px;
|
padding-top: 35px;
|
||||||
padding-bottom: 40px;
|
padding-bottom: 40px;
|
||||||
margin: auto;
|
|
||||||
width: 1175px;
|
width: 1175px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -87,13 +86,6 @@
|
|||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
|
||||||
/* padding-top: 35px;
|
|
||||||
padding-bottom: 40px; */
|
|
||||||
margin: auto;
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@@ -117,7 +109,6 @@
|
|||||||
|
|
||||||
/* Welcome section */
|
/* Welcome section */
|
||||||
.welcome {
|
.welcome {
|
||||||
margin: auto;
|
|
||||||
gap: 120px;
|
gap: 120px;
|
||||||
padding-bottom: 82.87px;
|
padding-bottom: 82.87px;
|
||||||
width: 1180px;
|
width: 1180px;
|
||||||
|
|||||||
Reference in New Issue
Block a user