Skip to content

Commit 01bf12b

Browse files
author
Eren
committed
ninth commit
0 parents  commit 01bf12b

24 files changed

+996
-0
lines changed

‎1.using.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Using CSS</title>
8+
<link rel="stylesheet" href="css/style.css">
9+
<!-- <style>
10+
/*
11+
selector {
12+
css-özelliği : value
13+
}
14+
15+
*/
16+
17+
h1 {
18+
color: blue;
19+
background: red;
20+
}
21+
22+
</style> -->
23+
</head>
24+
<body>
25+
<!-- <h1 style="color: red">Başlık 1</h1> -->
26+
<h1>Başlık 1</h1>
27+
<h1>Başlık 2</h1>
28+
<h2>Başlık 3</h2>
29+
</body>
30+
</html>

‎10.margin.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS - Margin</title>
8+
<style>
9+
div.box-1 {
10+
/* top right bottom left */
11+
/* margin: 50p 20px 50px 20px; */
12+
/* top-bottom, right-left */
13+
/* margin: 50px 20px; */
14+
background: #a7a7a7;
15+
width: 50%;
16+
17+
/* margin-left: auto;
18+
margin-right: auto; */
19+
20+
margin: 0 auto;
21+
/*margin-left: 50px;
22+
margin-right: 50px;
23+
margin-top: 50px;
24+
margin-bottom: 50px; */
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
30+
<div class="box-1">
31+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, ducimus.
32+
</div>
33+
34+
</body>
35+
</html>

‎11.padding.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS - Padding</title>
8+
<style>
9+
*{
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
div.box-1 {
15+
width: 500px;
16+
height: 200px;
17+
border: 5px solid black;
18+
/* padding-left: 20px;
19+
padding-right: 20px;
20+
padding-bottom: 20;
21+
padding-top: 20px;
22+
top right bottom left
23+
padding: 20px 20px 20px 20px;
24+
padding: 20px;
25+
padding: 20px 50px; */
26+
padding: 40px;
27+
28+
}
29+
30+
div.box-2 {
31+
width: 500px;
32+
height: 200px;
33+
border: 5px solid black;
34+
padding: 30px;
35+
}
36+
37+
38+
</style>
39+
</head>
40+
<body>
41+
<div class="box-1">
42+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, unde.
43+
</div>
44+
<div class="box-2">
45+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, unde.
46+
</div>
47+
</body>
48+
</html>

‎12.texts.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS - Texts</title>
8+
<style>
9+
/*
10+
h1 {
11+
background: seashell;
12+
13+
}
14+
15+
.heading1 {
16+
text-align: center;
17+
}
18+
19+
.heading2 {
20+
text-align: left;
21+
}
22+
23+
.heading3 {
24+
text-align: right;
25+
} */
26+
27+
div {
28+
width: 400px;
29+
height: 400px;
30+
border: 1px solid black;
31+
text-align: center;
32+
33+
}
34+
35+
p {
36+
letter-spacing: 1px;
37+
}
38+
39+
span {
40+
text-decoration: line-through;
41+
}
42+
43+
a {
44+
text-decoration: none;
45+
}
46+
47+
h1 {
48+
text-transform: uppercase;
49+
}
50+
51+
</style>
52+
53+
54+
</head>
55+
<body>
56+
<div>
57+
<h1>article 1</h1>
58+
<p>
59+
Lorem <span>ipsum</span> <a href="#">dolar</a> sit amet consectetur, adipisicing elit. Officiis, dolore?
60+
</p>
61+
</div>
62+
<!-- <h1 class="heading1">Başlık 1</h1>
63+
<h1 class="heading2">Başlık 2</h1>
64+
<h1 class="heading3">Başlık 3</h1> -->
65+
66+
</body>
67+
</html>

‎13.fonts.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS - Fonts</title>
8+
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
9+
<style>
10+
/* html {
11+
font-size: 10px;
12+
}
13+
h1 {
14+
font-family: "Open Sans", sans-serif;
15+
}
16+
p {
17+
font-size: 1.5rem;
18+
line-height: 1.5em;
19+
}
20+
div {
21+
width: 400px;
22+
height: 400px;
23+
border: 1px solid black;
24+
25+
}
26+
div span {
27+
font-size: 75%;
28+
} */
29+
30+
p {
31+
font-size: 1.5rem;
32+
font-style: italic;
33+
font-weight: bold;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<h1>Başlık</h1>
39+
<div>
40+
<p>
41+
Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit. Rerum, tenetur.
42+
</p>
43+
</div>
44+
<!--
45+
<h1>Başlık 1</h1>
46+
<p>
47+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat quam in omnis voluptate libero molestias nemo minus ipsa eos temporibus. Eum doloribus, distinctio vel non corporis quia nobis voluptas eveniet voluptatum dolore fuga adipisci accusamus sequi. Architecto excepturi, cum dolorum temporibus debitis nihil sed quos optio expedita, minus tempore beatae.
48+
</p> -->
49+
50+
</body>
51+
</html>

‎14.icons.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS - Icons</title>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
9+
</head>
10+
<body>
11+
<i class="fas fa-compass"></i>
12+
<i class="fas fa-search"></i>
13+
14+
</body>
15+
</html>

‎15.PseudoClass.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Pseudo Class(State)</title>
8+
<style>
9+
10+
a {
11+
color: white;
12+
font-size: 1.5em;
13+
display: inline-block;
14+
background: blue;
15+
padding: 10px;
16+
text-decoration: none;
17+
border-radius: 5px;
18+
19+
}
20+
21+
a:hover {
22+
background: white;
23+
color: blue;
24+
border: 1px solid blue;
25+
}
26+
27+
/*
28+
selector: pseudo_class {
29+
30+
}
31+
*/
32+
/* a {
33+
font-size: 24px;
34+
}
35+
a:link {
36+
color: green;
37+
38+
}
39+
a:hover {
40+
color: red;
41+
42+
}
43+
44+
a:visited {
45+
color: black;
46+
}
47+
a:active {
48+
color: blue;
49+
} */
50+
51+
/* input {
52+
font-size: 1.5em;
53+
padding: 10px;
54+
border-radius: 4px;
55+
border: 1px solid black;
56+
57+
}
58+
59+
input:focus {
60+
outline: 0;
61+
border: 2px solid red;
62+
63+
} */
64+
65+
</style>
66+
</head>
67+
<body>
68+
<a href="#">Facebook</a>
69+
<!-- <input type="text" placeholder="Name" /> -->
70+
</body>
71+
</html>

‎16.PseudoElements.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS - Pseudo Element</title>
8+
<style>
9+
.para1 {
10+
font-size: 1.5em;
11+
letter-spacing: 2px;
12+
line-height: 1.5em;
13+
}
14+
15+
/* .para1::first-line {
16+
color:red;
17+
}
18+
.para1::first-letter {
19+
color: blue;
20+
font-size: 50px;
21+
} */
22+
23+
.para1::after {
24+
content: "Paragraf Sonrasi";
25+
}
26+
/* .para1::after {
27+
content: url("link");
28+
}*/
29+
.para1::before {
30+
content: "Paragraf Öncesi";
31+
}
32+
33+
</style>
34+
</head>
35+
<body>
36+
<p class="para1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptatum officiis facere nisi quisquam aut neque assumenda delectus corrupti! Est animi, recusandae perspiciatis impedit dolorum velit quis quas minus voluptatem commodi nemo. Totam dolore commodi porro ad laborum, pariatur nihil quisquam, fugit consectetur a amet dolorum, corporis error molestiae sunt doloremque. Ab assumenda fugit accusantium laudantium id nihil, sint perferendis cumque, voluptate rem beatae eveniet quasi placeat quo atque animi doloribus similique tempora impedit debitis alias quas veritatis vel eligendi? Eligendi, enim. Eos possimus sed recusandae autem porro id illo distinctio! Corrupti velit eius vero dolorum nostrum, sit maxime ullam.</p>
37+
</body>
38+
</html>

0 commit comments

Comments
 (0)