diff --git a/css/reset.css b/css/reset.css
index ed11813..d678be9 100644
--- a/css/reset.css
+++ b/css/reset.css
@@ -46,3 +46,4 @@ table {
border-collapse: collapse;
border-spacing: 0;
}
+
diff --git a/css/style.css b/css/style.css
index 6d69a0c..f489b3d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,4 +1,77 @@
+*, *:before, *:after {
+ box-sizing: border-box;
+}
+
body {
+ background-color: #d9d9d9;
+ font-family: serif;
+ font-size: 14px;
+}
+
+.header {
+ background-color: #d9d9d9;
+ color: #000000;
+ padding: 15px;
+ font-family: sans-serif;
+ text-align: center;
+ text-transform: uppercase;
+}
+
+.container {
+ margin: 0 auto;
+ padding: 0px;
+ width: 100%;
background-color: #dadada;
- font-size: 10px;
+ text-align: left;
+ display: inline-block;
+}
+
+.location-img {
+ height: 300px;
+ width: 100%;
+ object-fit: cover;
+}
+
+.location {
+ color: #000000;
+ font-size: 1.5em;
+ padding: 30px;
+ position: absolute;
+ top: 0;
+}
+
+.preview-baku, .preview-london, .preview-madrid, .preview-rome{
+ margin:0px auto;
+ padding-bottom: 6px;
+ float:left;
+ position: relative;
+}
+
+@media screen and (min-width: 575px) {
+ .container {
+ padding: 0px 30px;
+ }
+ .preview-baku, .preview-london, .preview-madrid, .preview-rome {
+ width:50%;
+ padding: 6px 6px;
+ }
+ .location-img {
+ height: 300px;
+ }
+}
+
+@media screen and (min-width: 991px) {
+ .container {
+ padding: 0px 50px;
+ }
+ .preview-baku, .preview-london, .preview-madrid, .preview-rome {
+ width:25%;
+ padding: 0px 6px;
+ }
+ .location-img {
+ height: 200px;
+ }
+ .location {
+ padding: 15px;
+ }
}
diff --git a/index.html b/index.html
index b06beac..a73678f 100644
--- a/index.html
+++ b/index.html
@@ -2,24 +2,29 @@
+
css exercise four
- Modern luxury travel
-
-
Baku
+
+
+
+
Baku
-
-
London
+
+
+
London
-
-
Madrid
+
+
+
Madrid
-
-
Rome
+
+
+
Rome