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 13:38:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix comments 2

Browse Source
This commit is contained in:
nezumi
2023-07-06 14:52:23 +07:00
parent 0c1c645e3f
commit 841a9c6f91
2 changed files with 103 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+56 -44
View File
@@ -9,52 +9,52 @@
<body> <body>
<div class="background"> <div class="background">
<div class="width-container"> <!-- Start header -->
<!-- Start header --> <header class="header">
<header class="header"> <div class="container divide-content-center text text--md">
<div class="container divide-content-center text text--md"> <a href="javascript:void(0)" class="logo-link">
<a href="javascript:void(0)" class="logo-link"> <div class="logo-wrapper">
<div class="logo-wrapper"> <img src="./assets/images/logo.svg" alt="Logo web" class="logo" />
<img src="./assets/images/logo.svg" alt="Logo web" class="logo" /> </div>
</div> </a>
</a> <nav class="nav">
<nav class="nav"> <ul class="nav__lists 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 text">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 text">Portfolio</a>
<a href="javascript:void(0)" class="nav__item-link">Portfolio</a> </li>
</li> <li class="nav__item">
<li class="nav__item"> <a href="javascript:void(0)" class="nav__item-link text">Services</a>
<a href="javascript:void(0)" class="nav__item-link">Services</a> </li>
</li> <li class="nav__item">
<li class="nav__item"> <a href="javascript:void(0)" class="nav__item-link text">Contact</a>
<a href="javascript:void(0)" class="nav__item-link">Contact</a> </li>
</li> </ul>
</ul> </nav>
</nav> </div>
</div> </header>
</header> <!-- End header -->
<!-- End header -->
<!-- Start welcome section --> <!-- Start welcome section -->
<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">
<div class="welcome__content-text">
<span class="welcome__title text--bold">Welcome</span> <span class="welcome__title text--bold">Welcome</span>
<h1 class="welcome__heading text--secondary text--lg">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"> <p class="welcome__description text text--sm">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit nemo hic quos, ab, dolor aperiam nobis 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? cum est eos error ipsum, voluptate culpa nesciunt delectus iste?
</p> </p>
<a href="javascript:void(0)" class="btn btn-primary text">Explore</a>
</div> </div>
<div class="welcome-image-container"> <a href="javascript:void(0)" class="welcome__btn btn btn-primary text">Explore</a>
<img src="./assets/images/header-image.png" alt="Header Image" class="welcome__image" /> </div>
</div> <div class="welcome-image-container">
</section> <img src="./assets/images/header-image.png" alt="Header Image" class="welcome__image" />
<!-- End welcome section --> </div>
</div> </section>
<!-- End welcome section -->
</div> </div>
<div class="width-container"> <div class="width-container">
@@ -94,7 +94,9 @@
<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 src="./assets/images/conversation.png" alt="Conversation Image" class="conversation__image" /> <div class="conversation__wrapper-image">
<img src="./assets/images/conversation.png" alt="Conversation Image" class="conversation__image" />
</div>
<!-- Conversation content --> <!-- Conversation content -->
<div class="conversation__content d-flex flex-column"> <div class="conversation__content d-flex flex-column">
@@ -123,7 +125,9 @@
</div> </div>
<!-- Security image --> <!-- Security image -->
<img src="./assets/images/security.png" alt="Image Security" class="security__image" /> <div class="security__wrapper-image">
<img src="./assets/images/security.png" alt="Image Security" class="security__image" />
</div>
</div> </div>
</section> </section>
<!-- End security section --> <!-- End security section -->
@@ -143,7 +147,9 @@
<!-- 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 src="./assets/images/avatar-1.png" alt="Avatar Image" class="team__image" /> <div class="team__wrapper-image">
<img src="./assets/images/avatar-1.png" alt="Avatar Image" class="team__image" />
</div>
<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--secondary-color">Ceo</span> <span class="team__position text text--sm text--secondary-color">Ceo</span>
@@ -154,7 +160,9 @@
<!-- 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 src="./assets/images/avatar-2.png" alt="Avatar Image" class="team__image" /> <div class="team__wrapper-image">
<img src="./assets/images/avatar-2.png" alt="Avatar Image" class="team__image" />
</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>
@@ -165,7 +173,9 @@
<!-- 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 src="./assets/images/avatar-3.png" alt="Avatar Image" class="team__image" /> <div class="team__wrapper-image">
<img src="./assets/images/avatar-3.png" alt="Avatar Image" class="team__image" />
</div>
<div class="team__information"> <div class="team__information">
<span class="team__name text--secondary">Alexandra stolz</span> <span class="team__name text--secondary">Alexandra stolz</span>
<span class="team__position text text--sm text--secondary-color">Designer</span> <span class="team__position text text--sm text--secondary-color">Designer</span>
@@ -176,7 +186,9 @@
<!-- 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 src="./assets/images/avatar-4.png" alt="Avatar Image" class="team__image" /> <div class="team__wrapper-image">
<img src="./assets/images/avatar-4.png" alt="Avatar Image" class="team__image" />
</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>
src/styles/main.css
+47 -4
View File
@@ -75,6 +75,8 @@
.header { .header {
padding-top: 35px; padding-top: 35px;
padding-bottom: 40px; padding-bottom: 40px;
margin: auto;
width: 1175px;
} }
.logo-wrapper { .logo-wrapper {
@@ -99,12 +101,14 @@
.nav__lists { .nav__lists {
list-style: none; list-style: none;
gap: 30px; gap: 30px;
display: inline-flex;
} }
.nav__item-link { .nav__item-link {
text-decoration: none; text-decoration: none;
color: var(--white); color: var(--white);
transition: 0.3s; transition: 0.3s;
padding: 0.5px;
} }
.nav__item-link:hover { .nav__item-link:hover {
@@ -116,6 +120,7 @@
margin: auto; margin: auto;
gap: 120px; gap: 120px;
padding-bottom: 82.87px; padding-bottom: 82.87px;
width: 1180px;
} }
.welcome__content { .welcome__content {
@@ -123,6 +128,12 @@
gap: 15px; gap: 15px;
} }
.welcome__content-text {
display: flex;
flex-direction: column;
gap: 15px;
}
.welcome__title { .welcome__title {
letter-spacing: 5px; letter-spacing: 5px;
text-transform: uppercase; text-transform: uppercase;
@@ -135,8 +146,11 @@
} }
.welcome__description { .welcome__description {
color: var(--white); color: rgba(255, 255, 255, 0.75);
margin-bottom: 25px; }
.welcome__btn {
margin-top: 25px;
} }
.welcome-image-container { .welcome-image-container {
@@ -145,8 +159,8 @@
} }
.welcome__image { .welcome__image {
max-width: 100%; width: 100%;
max-height: 100%; height: 100%;
} }
.btn { .btn {
@@ -214,10 +228,13 @@
.sponsor__logos { .sponsor__logos {
gap: 68px; gap: 68px;
width: 1159px;
height: 50px;
} }
.sponsor__logo-item { .sponsor__logo-item {
transition: 0.3s; transition: 0.3s;
cursor: pointer;
} }
.sponsor__logo-item:hover { .sponsor__logo-item:hover {
@@ -234,6 +251,16 @@
gap: 16px; gap: 16px;
} }
.conversation__wrapper-image {
width: 600px;
height: 431px;
}
.conversation__image {
width: 100%;
height: 100%;
}
/* Security section */ /* Security section */
.security__container { .security__container {
margin-top: 73px; margin-top: 73px;
@@ -244,6 +271,16 @@
gap: 16px; gap: 16px;
} }
.security__wrapper-image {
width: 600px;
height: 566px;
}
.security__image {
width: 100%;
height: 100%;
}
/* Team section */ /* Team section */
.team__container { .team__container {
@@ -274,6 +311,7 @@
height: 299px; height: 299px;
box-shadow: 3px 4px 12px 1px rgba(0, 0, 0, 0.25); box-shadow: 3px 4px 12px 1px rgba(0, 0, 0, 0.25);
transition: 0.3s; transition: 0.3s;
cursor: pointer;
} }
.team__frame:hover { .team__frame:hover {
@@ -286,6 +324,11 @@
} }
.team__image { .team__image {
width: 100%;
height: 100%;
}
.team__wrapper-image {
width: 175px; width: 175px;
height: 175px; height: 175px;
} }