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
+21 -9
View File
@@ -9,7 +9,6 @@
<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">
@@ -19,18 +18,18 @@
</div> </div>
</a> </a>
<nav class="nav"> <nav class="nav">
<ul class="nav__lists d-flex justify-content-between"> <ul class="nav__lists justify-content-between">
<li class="nav__item"> <li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link">Home</a> <a href="javascript:void(0)" class="nav__item-link text">Home</a>
</li> </li>
<li class="nav__item"> <li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link">Portfolio</a> <a href="javascript:void(0)" class="nav__item-link text">Portfolio</a>
</li> </li>
<li class="nav__item"> <li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link">Services</a> <a href="javascript:void(0)" class="nav__item-link text">Services</a>
</li> </li>
<li class="nav__item"> <li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link">Contact</a> <a href="javascript:void(0)" class="nav__item-link text">Contact</a>
</li> </li>
</ul> </ul>
</nav> </nav>
@@ -40,14 +39,16 @@
<!-- 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>
<a href="javascript:void(0)" class="welcome__btn btn btn-primary text">Explore</a>
</div> </div>
<div class="welcome-image-container"> <div class="welcome-image-container">
<img src="./assets/images/header-image.png" alt="Header Image" class="welcome__image" /> <img src="./assets/images/header-image.png" alt="Header Image" class="welcome__image" />
@@ -55,7 +56,6 @@
</section> </section>
<!-- End welcome section --> <!-- End welcome section -->
</div> </div>
</div>
<div class="width-container"> <div class="width-container">
<!-- Sponsor section --> <!-- Sponsor section -->
@@ -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 -->
<div class="conversation__wrapper-image">
<img src="./assets/images/conversation.png" alt="Conversation Image" class="conversation__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,8 +125,10 @@
</div> </div>
<!-- Security image --> <!-- Security image -->
<div class="security__wrapper-image">
<img src="./assets/images/security.png" alt="Image Security" class="security__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">
<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"> <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">
<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 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">
<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"> <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">
<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 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;
} }