1-mustaqil-ish-nodir pdf



Yüklə 313,57 Kb.
Pdf görüntüsü
səhifə7/8
tarix07.01.2024
ölçüsü313,57 Kb.
#208700
1   2   3   4   5   6   7   8
web sinow


<
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
>
contact@example.com
p
>
<
p
><
i
class
=
"fa-solid fa-phone"
>i
>
+998 88 888 88 88
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


Yüklə 313,57 Kb.

Dostları ilə paylaş:
1   2   3   4   5   6   7   8




Verilənlər bazası müəlliflik hüququ ilə müdafiə olunur ©azkurs.org 2024
rəhbərliyinə müraciət

gir | qeydiyyatdan keç
    Ana səhifə


yükləyin