├── README.md
└── Новая папка
├── download.jpg
├── wp9641838.jpg
├── index2.html
├── index.html
├── styles2.css
└── styles.css
/README.md:
--------------------------------------------------------------------------------
1 | # Mente-Academy-5-ci-Ders
2 | Html Css
3 |
--------------------------------------------------------------------------------
/Новая папка/download.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IsrafilliRamin/Mente-Academy-5-ci-Ders/HEAD/Новая папка/download.jpg
--------------------------------------------------------------------------------
/Новая папка/wp9641838.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IsrafilliRamin/Mente-Academy-5-ci-Ders/HEAD/Новая папка/wp9641838.jpg
--------------------------------------------------------------------------------
/Новая папка/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
9 | w3schools
16 |
17 |
22 |
23 |
24 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis veniam aspernatur blanditiis nostrum natus
25 | accusantium voluptatem, a molestias quas quam amet aut laborum incidunt nisi voluptates debitis voluptatum
26 | obcaecati! Minus nisi reiciendis, esse accusantium sunt laborum qui, voluptatem repudiandae vel soluta at
27 | consequatur. Iusto sed quo eveniet rem. Asperiores, deserunt.
28 |
29 |
30 |
31 | Mente academy
32 | Mente academy
33 |
34 | Document
9 |
15 |
16 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa consequatur tenetur praesentium rem. Aliquid
17 | aspernatur quibusdam asperiores, deleniti quod commodi, numquam officia at pariatur consectetur eligendi,
18 | corrupti perferendis quos tempora sint officiis necessitatibus quis accusantium. Atque eveniet repellat ad.
19 | Optio vero atque eveniet tempora molestias. Velit harum repellendus repudiandae minima.
20 |
22 |
1
23 |
2
24 |
3
25 |
4
26 |
5
27 |
w3schools
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/Новая папка/styles2.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Gravitas+One&family=Playfair+Display&family=Poppins&family=Zen+Dots&display=swap');
2 |
3 |
4 | p{
5 | font-weight: 700; /* qalinlasdirir */
6 | font-family: 'Zen Dots', cursive; /* srifti deyismek */
7 | }
8 |
9 | input:focus{
10 | background-color: chocolate; /* focuslamaq */
11 | }
12 | input:hover{
13 | background-color: rgb(30, 210, 195); /* hover */
14 | }
15 |
16 | input[type="password"]{
17 | background-color: cornflowerblue; /* typle tutmaq inputu */
18 | }
19 |
20 | .container{
21 | position: relative;
22 | left: 300px;
23 | top: 300px;
24 | background-color: blueviolet;
25 | width: 100px;
26 | height: 100px;
27 | overflow: hidden; /* dasmani gizletmek */
28 | }
29 |
30 | .box{
31 | background-color: yellow;
32 | width: 70px;
33 | height: 110px;
34 | transition: .4s ease-in all; /* sureti azaltmaq */
35 | }
36 |
37 | .box:hover{
38 | background-color: red;
39 | margin-left: 20px;
40 | transform: scale(0.7); /* default veziyyetden olcunu deyismek */
41 |
42 | }
43 |
44 |
45 | a:hover{
46 | background-color: yellow;
47 | }
48 | a:active{
49 | background-color: green; /* active edende ise salmaq */
50 | }
51 |
52 | a:link{
53 | background-color: red; /* default veziyyet */
54 | }
55 |
56 | p{
57 | background: linear-gradient(blue,red,green); /* bir nece reng vermek bir elemente */
58 | }
59 |
60 |
61 | #div{
62 | height: 100px;
63 | width: 100px;
64 | background-color: tomato;
65 | padding: 20px;
66 | border: 3px solid black;
67 | box-sizing: border-box; /* olculeri qoruyub saxlamaq */
68 |
69 | }
70 | #div1{
71 | height: 100px;
72 | width: 100px;
73 | background-color: lightgreen;
74 |
75 | }
76 |
77 |
78 | img{
79 | height: 200px;
80 | width: 200px;
81 | object-fit: cover; /* sekili on hisseye getirerek olcusnu deyismeden keyfiyetini artirir */
82 | }
83 |
84 | #div3{
85 |
86 | background-image: url(wp9641838.jpg); /* div arxa hissesine sekil vermek */
87 | background-size: 700px;
88 | background-repeat: no-repeat; /* tekrarlamani qarsini almaq */
89 | object-fit: cover;
90 | background-position: left; /* yerini mueyyen etmek */
91 | height: 500px;
92 | width: 500px;
93 | position: relative;
94 | }
95 |
96 | .p{
97 | position: absolute;
98 | top: 50px;
99 | left: 0;
100 | }
--------------------------------------------------------------------------------
/Новая папка/styles.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Poppins&display=swap');
2 | *{
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | }
7 | img{
8 | height: 400px;
9 | width: 400px;
10 | object-fit: cover;
11 | }
12 | .img{
13 | width:800px;
14 | height: 800px;
15 | background: url(download.jpg);
16 | background-repeat: no-repeat;
17 | object-fit: cover !important;
18 | }
19 |
20 | .bor{
21 | display: block;
22 | width: 200px;
23 | height: 200px;
24 | background-color: #1b5b3b;
25 | padding: 30px;
26 |
27 | }
28 | /* */
29 | p{
30 | font-weight: 900;
31 | font-family: sans-serif;
32 | font-family: 'Playfair Display', serif;
33 | }
34 |
35 |
36 |
37 |
38 | .container{
39 | top: 200px;
40 | left: 200px;
41 | position: relative;
42 | background-color: chocolate;
43 | width: 500px;
44 | height: 500px;
45 |
46 | }
47 | .container .iki{
48 | background-color: black;
49 | }
50 | /* a:active{
51 | activ olan anda bir effekt verir
52 | background-color: green;
53 | } */
54 |
55 | a:link{
56 | background-color: red;
57 | }
58 |
59 |
60 | a:hover{
61 | background-color: yellow;
62 | }
63 |
64 | a:active{
65 | background-color: green;
66 | }
67 |
68 | .bir{
69 | position: absolute;
70 | left: 40%;
71 | top: 40%;
72 | height: 100px;
73 | width: 100px;
74 | border: 1px solid black;
75 | background : linear-gradient(90deg, #1b5b3b, #e05e82);
76 | transition: 0.5s ease-in all;
77 |
78 |
79 | }
80 |
81 | .bir:hover{
82 |
83 |
84 |
85 | }
86 |
87 |
88 | .iki{
89 | position: absolute;
90 | right: 0;
91 | top: 0;
92 | height: 100px;
93 | width: 100px;
94 | border: 1px solid black;
95 | background-color: green;
96 | }
97 | .uc{
98 | position: absolute;
99 | left: 0;
100 | bottom: 0;
101 | height: 100px;
102 | width: 100px;
103 | border: 1px solid black;
104 | background-color: red;
105 | }
106 | .dord{
107 | position: absolute;
108 | right: 0;
109 | bottom: 0;
110 | height: 100px;
111 | width: 100px;
112 | border: 1px solid black;
113 | background-color: aliceblue;
114 | }
115 | .bes{
116 | position: absolute;
117 | left: 0;
118 | top: 0;
119 | height: 100px;
120 | width: 100px;
121 | border: 1px solid black;
122 | background-color: blue;
123 | }
--------------------------------------------------------------------------------
35 | 
14 |
15 |
16 |