FSWEB-S3D4-Workintech-Revisions/index.css at master · Workintech/FSWEB-S3D4-Workintech-Revisions · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
body {
  font-family: 'Montserrat';
}

.btn {
  padding: 10px 15px;
  cursor: pointer;
}

.active {
  background: black;
  color: white;
}

/*. **** header **** */

/* css-1 header içindeki 2 item'ı;
 üstlü altlı olacak ve yatayda ortalanacak şekilde
 ve aralıklarını dokümanın default font değerinin 2 katı olacak şekilde flex ayarları ile yapalım. */
header {
  margin: 10px 20px;
}

nav {
  display: flex;
  align-items: center;
}

nav a {
  padding: 15px 20px;
  border: 1px solid black;
  background-color: gray;
  color: white;
  text-decoration: none;
}

/* **** Main **** */
/* css-2 .main-container class'ı için kural tanımlayalım ve içindeki yazıları ortalayalım.*/
/* css-3 .main-container'ın genişliği ekranın %80'i olsun ve maksimum genişliği 750px olsun.*/
/* css-4 .main-container'ın blok olarak yatayda ortalı olsun */
/* css-5 iç dolgusu %5 olsun.*/

/* css-6 h1 başlığı büyük harfler olsun */

/* css-7 .main-section içindeki imajı ekranın sağına ve soluna dayayalım. */
.main-section img {
}

/* **** Advantages **** */
/*
  css-8 advantages-section class'ında;
  display flex uygulayalım,
  itemların arası flex özelliği ile eşit dağılıtılsın.
  dış boşluğu yukarıdan 5% olsun sağa*-sola yaslansın.
*/

.bold {
  font-weight: bold;
}

/*
css-9 advantages-section classındaki resimlerin;
genişliği bulunduğu alanın %15'i olsun
en/boy oranı 1/4 olsun
*/
.advantages-section img {
}

/*
css-10 advantages-section classının içindeki div'ler için;
genişliği bulunduğu alanın %15'i olsun
css-11 iç boşlukları doküman font ölçüsüyle aynı olsun
css-12 flex kullanarak column yönünde dikeyde ve yatayda ortalı olsun.
css-13 metinler ortalansın
*/
.advantages-section div {
}

/* **** footer **** */
footer {
  width: 100%;
  background: gray;
  padding: 20px 0;
}

footer button {
  display: block;
  margin: 20px auto;
}

/* css-14 responsive tasarım için maksimum genişlik 500px için media query yazalım.
css-15 body tag'ini kullanarak sayfanın 300px'den küçük olmasını engelleyelim.
css-16 advantages-section class'ı için sığmayan item'ların aşağı kayması(wrap) için flex ve satır arasını ana font boyutunun 1 katını flex özelliklerini kullanarak ayarlayalım.
css-17 advantages-section class'ı içindeki imagelar yatay'da 2 tane olsun diye genişliğini %45 yapalım.
css-18 advantages-section class'ı içindeki div, diğer resimlerle beraber flex davrandığı için dar görünüyor. Nasıl bulunduğu alanı kaplamasını sağlayabiliriz?
css-19 navigasyon menüsünün içindeki itemların column olmasını, genişliğinin 50% olmasını, metinlerin ortalanmasını ve tüm itemların aynı genişliğe esnemesini sağlayalım.
*/