diff --git a/css/style.css b/css/style.css
index 6d69a0c..15ab661 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,4 +1,88 @@
-body {
+
+* {
+ box-sizing: border-box;
+}
+
+body{
background-color: #dadada;
font-size: 10px;
+ width: 100%;
+ background-color: white;
+ margin: 0 auto;
+}
+
+
+#baku {
+ background-image: url("../images/baku.jpg");
+}
+
+#london {
+ background-image: url("../images/london.png");
+}
+
+#madrid {
+ background-image: url("../images/madrid.jpg");
+}
+
+#rome {
+ background-image: url("../images/rome.jpg");
+}
+
+.preview {
+ background-size: 420px 340px;
+ background-repeat: no-repeat;
+ background-position: center;
+ position: relative;
+ z-index: 1;
+ padding: 50px 50px;
+ object-fit: cover;
+ object-position: 30%;
+ width: 100%;
+ height: 280px;
+ margin: 10px auto;
+}
+
+h1 {
+ font-family: 'Roboto', sans-serif;
+ text-transform: uppercase;
+ text-align: center;
+ padding: 20px 20px;
+}
+
+.preview h1 {
+ text-transform: capitalize;
+ text-align: left;
+ position: absolute;
+ top: 10%;
+ left: 10%;
+ z-index: 1;
+}
+
+.container {
+ background-color: lightgrey;
+ width: 100%;
+ height: 100%;
+}
+
+@media only screen and (min-width: 575px) {
+ #baku, #london, #madrid, #rome {
+ margin: 1%;
+ width: 98%;
+ display: inline-block;
+ }
+
+}
+
+@media only screen and (min-width: 760px) {
+ #baku, #london, #madrid, #rome {
+ width: 47%;
+ }
+
+
+}
+
+@media only screen and (min-width: 1200px) {
+ #baku, #london, #madrid, #rome {
+ width: 22%;
+ }
}
diff --git a/index.html b/index.html
index b06beac..1944284 100644
--- a/index.html
+++ b/index.html
@@ -3,22 +3,24 @@
css exercise four
+
+