#31 Edit html and css file

This commit is contained in:
2023-06-29 16:09:27 +07:00
parent 13d0e754af
commit ddc9a837e3
4 changed files with 31 additions and 25 deletions
+7 -7
View File
@@ -13,18 +13,18 @@
<header>
<div class="container">
<img src="./assets/images/logo.svg" alt="" class="logo" />
<nav>
<nav class="nav">
<ul class="nav__lists">
<li class="nav_item">
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link">Home</a>
</li>
<li class="nav_item">
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link">Portfolio</a>
</li>
<li class="nav_item">
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link">Services</a>
</li>
<li class="nav_item">
<li class="nav__item">
<a href="javascript:void(0)" class="nav__item-link">Contact</a>
</li>
</ul>
@@ -32,7 +32,7 @@
</div>
</header>
<section class="welcome__container">
<section class="welcome">
<div class="welcome__content">
<span class="welcome__title">Welcome</span>
<h1 class="welcome__heading">
@@ -47,7 +47,7 @@
</div>
<img
src="./assets/images/header-image.png"
alt="header-image"
alt="Header Image"
class="welcome__image"
/>
</section>
@@ -6,9 +6,9 @@
--fs-sm: 15px;
--fs-md: 20px;
--fs-lg: 40px;
--ff-crimsontext-regular: CrimsonText-Regular;
--ff-crimsontext-700: CrimsonText-700;
--ff-worksans-500: WorkSans-500;
--ff-worksans-700: WorkSans-700;
--ff-worksans-regular: WorkSans-Regular;
--ff-secondary-regular: CrimsonText-Regular;
--ff-secondary-bold: CrimsonText-Bold;
--ff-primary-medium: WorkSans-Medium;
--ff-primary-bold: WorkSans-Bold;
--ff-primary-regular: WorkSans-Regular;
}
+3 -3
View File
@@ -4,18 +4,18 @@
}
@font-face {
font-family: CrimsonText-700;
font-family: CrimsonText-Bold;
src: url(../../font/CrimsonText-700.ttf);
font-weight: 700;
}
@font-face {
font-family: WorkSans-500;
font-family: WorkSans-Medium;
src: url(../../font/WorkSans-500.ttf);
}
@font-face {
font-family: WorkSans-700;
font-family: WorkSans-Bold;
src: url(../../font/WorkSans-700.ttf);
}
+16 -10
View File
@@ -14,7 +14,7 @@
padding-bottom: 40px;
margin: auto;
color: var(--white);
font-family: var(--ff-worksans-regular);
font-family: var(--ff-primary-regular);
font-size: var(--fs-md);
}
@@ -39,7 +39,7 @@
color: var(--text-dark);
}
.welcome__container {
.welcome {
margin: auto;
width: 1180px;
display: flex;
@@ -60,7 +60,7 @@
}
.welcome__title {
font-family: var(--ff-worksans-700);
font-family: var(--ff-primary-bold);
letter-spacing: 5px;
text-transform: uppercase;
color: var(--white);
@@ -68,7 +68,7 @@
.welcome__heading {
font-size: var(--fs-lg);
font-family: var(--ff-crimsontext-700);
font-family: var(--ff-secondary-bold);
line-height: 125%;
color: var(--white);
}
@@ -77,13 +77,14 @@
text-transform: none;
font-size: var(--fs-sm);
letter-spacing: 0px;
font-family: var(--ff-worksans-regular);
font-family: var(--ff-primary-regular);
line-height: 125%;
color: var(--white);
margin-bottom: 25px;
}
.btn {
/* Display & Box Models */
border-radius: 5px;
display: flex;
align-items: center;
@@ -91,15 +92,20 @@
width: 170px;
height: 48px;
border: none;
/* Color */
color: var(--black);
background-color: var(--white);
/* Text */
font-family: var(--ff-primary-regular);
font-size: var(--fs-md);
text-decoration: none;
line-height: 125%;
/* Other */
cursor: pointer;
transition: 0.2s;
text-decoration: none;
font-size: var(--fs-md);
font-family: Work Sans;
line-height: 125%;
font-family: var(--ff-worksans-regular);
}
.btn:hover {