1-mustaqil-ish-nodir pdf

<
div
id
=
"service"
>
<
div
class
=
"container"
>
<
h1
class
=
"sub-title"
>
Service
h1
>
<
div
class
=
"service-list"
>

---

<
div
>
<
i
class
=
"fa-solid fa-pen-nib"
>i
>
<
h2
>
Dasturchi
h2
>
<
br
>
<
p
>
Lorem ipsum dolor sit amet consectetur adipisicing 
elit. Maiores, accusamus? Animi rerum officiis soluta, corrupti
p
>
<
a
href
=
"#"
>
Learn more
a
>
div
>
<
div
>
<
i
class
=
"fa-solid fa-computer"
>i
>
<
h2
>
Mobil dasturchi
h2
>
<
br
>
<
p
>
Lorem ipsum dolor sit amet consectetur adipisicing 
elit. Maiores, accusamus? Animi rerum officiis soluta, corrupti
p
>
<
a
href
=
"#"
>
Learn more
a
>
div
>
div
>
div
>
div
>

<
div
id
=
"contact"
>
<
div
class
=
"container"
>
<
div
class
=
"row"
>
<
div
class
=
"contact-left"
>
<
h1
class
=
"sub-title"
>
Contact Me
h1
>
<
p
><
i
class
=
"fa-solid fa-paper-
plane"
>i
>
[e-mail]
p
>
<
p
><
i
class
=
"fa-solid fa-phone"
>i
>
[phone]
p
>
<
div
class
=
"social-icons"
>

---

<
a
href
=
"https:/facebook.com/"
><
i
class
=
"fa-brands 
fa-facebook"
>i
>a
>
<
a
href
=
""
><
i
class
=
"fa-brands fa-twitter-
square"
>i
>a
>
<
a
href
=
""
><
i
class
=
"fa-brands fa-instagram"
>i
>a
>
<
a
href
=
""
><
i
class
=
"fa-brands fa-linkedin"
>i
>a
>
div
>
<
a
href
=
""
class
=
"btn btn2"
>
Download CV
a
>
div
>
<
div
class
=
"contact-right"
>
<
form
>
<
input
type
=
"text"
name
=
"Name"
placeholder
=
"Your 
Name"
required
>
<
input
type
=
"email"
name
=
"Email"
placeholder
=
"Your 
Email"
required
>
<
textarea
name
=
"Masseage"
rows
=
"6"
placeholder
=
"Your 
Masseage"
>textarea
>
<
button
type
=
"submit"
class
=
"btn 
btn2"
>
Submit
button
>
form
>
div
>
div
>
div
>
<
script
>
var
tablinks
=
document
.
getElementsByClassName
(
"tab-links"
)
var
tabcontents
=
document
.
getElementsByClassName
(
"tab-contents"
)
function
opentab
(
tabname
)
{
for
(
tablink
of
tablinks
){
tablink
.
classList
.
remove
(
"active-link"
);

---

}
for
(
tabcontent
of
tabcontents
){
tabcontent
.
classList
.
remove
(
"active-tab"
);
}
event
.
currentTarget
.
classList
.
add
(
"active-link"
);
document
.
getElementById
(
tabname
)
.
classList
.
add
(
"active-tab"
);
}
script
>
body
>
html
>
CSS
*
{
margin
: 
0
;
padding
: 
0
;
font-family
: 
Arial
, 
Helvetica
, 
sans-serif
;
box-sizing
: 
border-box
;
}
body
{
background
: 
rgb
(
240
, 
228
, 
228
);
color
: 
grey
;
}
#header
{
width
: 
100%
;
height
: 
100vh
;
background-image
: 
url
(
/img/nodir.png
);
background-size
: 
cover
;
background-position
: 
center
;
}
.container
{

---

padding
: 
10px
10%
;
}
nav
{
display
: 
flex
;
align-items
: 
center
;
justify-content
: 
space-between
;
flex-wrap
: 
wrap
;
}
.logo
{
width
: 
140px
;
}
nav
ul
li
{
display
: 
inline-block
;
list-style
: 
none
;
margin
: 
10px
20px
;
}
nav
ul
li
a
{
color
: #
grey
;
text-decoration
: 
none
;
font-size
: 
18px
;
position
: 
relative
;
}
nav
ul
li
a
::after
{
content
:
''
;
width
: 
0%
;
height
: 
3px
;
background
: 
grey
;
position
: 
absolute
;
left
: 
0
;
bottom
: 
-6px
;
transition
: 
0.3s
;
}
nav
ul
li
a
:hover::after
{

---

width
: 
100%
;
}
.header-text
{
margin-top
: 
20%
;
font-size
: 
32px
;
}
.header-text
h1
{
font-size
: 
56px
;
margin-top
: 
20px
;
}
.header-text
p
{
color
: 
grey
}
.header-text
h1
span
{
color
: 
grey
;
}
/* -----------about--------------- */
#about
{
padding
: 
80px
0
;
color
: 
grey
;
}
.row
{
display
: 
flex
;
justify-content
: 
space-between
;
flex-wrap
: 
wrap
;
}
.about-col-1
{
flex-basis
: 
35%
;
}
.about-col-1
img
{
width
: 
100%
;
border-radius
: 
100px
;
}

---

.about-col-2
{
flex-basis
: 
60%
;
}
.sub-title
{
font-size
: 
60px
;
font-weight
: 
600
;
color
: 
grey
}
.tab-titles
{
display
: 
flex
;
margin
: 
20px
0
40px
;
}
.tab-links
{
margin-right
: 
50px
;
font-size
: 
18px
;
font-weight
: 
500
;
cursor
: 
pointer
;
position
: 
relative
;
}
.tab-links
::after
{
content
: 
''
;
width
: 
0px
;
height
: 
3px
;
background
: 
grey
position: 
absolute
;
left
: 
0
;
bottom
: 
-8px
;
transition
: 
0.3s
;
}
.tab-links.active-link
::after
{
width
: 
50%
;
}
.tab-contents
ul
li
{

---

list-style
: 
none
;
margin
: 
10px
0
;
}
.tab-contents
ul
li
span
{
color
: 
grey
font-size: 
14px
;
}
.tab-contents
{
display
: 
none
;
}
.tab-contents.active-tab
{
display
: 
block
;
}
/* ----------service----------- */
#service
{
padding
: 
30px
0
;
}
.service-list
{
display
: 
grid
;
grid-template-columns
: 
repeat
(
auto-fit
, 
minmax
(
250px
, 
1fr
));
grid-gap
: 
40px
;
margin-top
: 
50px
;
}
.service-list
div
{
background
: 
#
262626
;
padding
: 
40px
;
font-size
: 
13px
;
font-weight
: 
300
;
border-radius
: 
10px
;
transition
: 
background
0.3s
transform 
0.3s
;

---

}
.service-list
div
i
{
font-size
: 
50px
;
margin-bottom
: 
30px
;
}
.service-list
div
h2
{
font-size
: 
30px
;
font-weight
: 
500
;
margin-bottom
: 
15
;
}
.service-list
div
a
{
text-decoration
: 
none
;
color
: 
grey
;
font-size
: 
12px
;
margin-top
: 
20px
;
display
: 
inline-block
;
}
.service-list
div
:hover
{
background
: 
grey
;
transform
: 
translateY
(
-10px
);
}
/*---------blog--------------- */
#portfolio
{
padding
: 
50px
0
;
}
.work-list
{
display
: 
grid
;
grid-template-columns
: 
repeat
(
auto-fit
, 
minmax
(
250px
, 
1fr
));
grid-gap
: 
40px
;
margin-top
: 
50px
;
}
.work
{

---

border-radius
: 
10px
;
position
: 
relative
;
overflow
: 
hidden
;
}
.work
img
{
width
: 
100%
;
border-radius
: 
10px
;
display
: 
block
;
transition
: transform 
0.5s
;
}
.layer
{
width
: 
100%
;
height
: 
0%
;
background
: 
linear-gradient
(
rgba
(
0
,
0
,
0
,
0.6
), 
#
AEFF62
);
border-radius
: 
10px
;
position
: 
absolute
;
left
: 
0
;
bottom
: 
0
;
overflow
: 
hidden
;
display
: 
flex
;
align-items
: 
center
;
justify-content
: 
center
;
flex-direction
: 
column
;
padding
: 
0
, 
40px
;
text-align
: 
center
;
font-size
: 
14px
;
transition
: height 
0.5s
;
}
.layer
h3
{
font-weight
: 
500
;
margin-bottom
: 
20px
;
}
.layer
a
{

---

margin-top
: 
20px
;
color
: 
grey
;
text-decoration
: 
none
;
font-size
: 
18px
;
line-height
: 
60px
;
background
: 
#
fff
;
width
: 
60px
;
height
: 
60px
;
border-radius
: 
50%
;
text-align
: 
center
;
}
.work
:hover
img
{
transform
: 
scale
(
1.1
);
}
.work
:hover
.layer
{
height
: 
100%
;
}
.btn
{
display
: 
block
;
margin
: 
50px
auto
;
width
: 
fit-content
;
border
: 
1px
solid
grey
;
padding
: 
14px
50px
;
border-radius
: 
6px
;
text-decoration
: 
none
;
color
: