First-Responsive-Site/styles.css at main · ruru-dev/First-Responsive-Site · 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
98
99
body {
  background-color: rgb(63, 57, 57);;
}

.container-main {
  margin: auto;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 500px auto;
}

.container-header {
  grid-column: 1/2;
  grid-row: 1/2;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("header_picture.jpg");
}

.header-message {
  font-family: 'Dancing Script', cursive;
  font-size: 60px;
  color: white;
  text-align: center;
}
.container-articles {
  display: flex;
  grid-column: 1/2;
  grid-row: 2/3;
  flex-direction: row;
  justify-content: space-evenly;
  padding-top: 50px;
  background-color: rgb(63, 57, 57);
  color: white;
}

.article-header {
  font-family: 'Dancing Script', cursive;
  font-size: 30px;
  text-align: center;
  padding: 10px 0;
}

.article-header-color {
  width: auto;
  height: 30px;
}

.article {
  width: 20%;
}
.article-1 > .article-header-color {
  background-color: rgb(82, 128, 82);
}

.article-2 > .article-header-color {
  background-color: rgb(93, 111, 190);
}

.article-3 > .article-header-color {
  background-color: rgb(170, 52, 52);
}

.summary {
  font-family: 'Eagle Lake', cursive;
  padding-bottom: 20px;
}

@media (max-width: 576px) {
  .container-articles {
    flex-direction: column;
    align-items: center;
  }

  .article {
    width: 65%;
    margin-top: 20px;
  }

  .container-header {
    background-position: center;
  }
}

@media (min-width: 576px) {
  .container-main {
    width: 1000px;
  }

  .container-header {
    background-position:center ;
    background-repeat: no-repeat;
    background-color: rgb(63, 57, 57);
  }
}

/* Phone	@media (min-width: 576px) { ... } */
/* Desktop	@media (min-width: 992px) { ... } */