diff --git a/css/style.css b/css/style.css
index 6d69a0c..37bf933 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,4 +1,111 @@
body {
- background-color: #dadada;
- font-size: 10px;
+ background-color: darkgrey;
+ font-size: 26px;
+ margin: auto;
+ width: 100%;
+ overflow: hidden;
+ box-sizing: border-box;
+}
+.container {
+ display: block;
+ width: 100%;
+ position: relative;
+}
+div {
+
+}
+
+.preview-baku {
+ width: 100%;
+ height: 300px;
+ position: relative;
+ background-image: url('../images/baku.jpg');
+ background-size: cover;
+ display: inline-block;
+}
+.preview-london {
+ width: 100%;
+ height: 300px;
+
+ position: relative;
+ background-image: url('../images/london.png');
+ background-size: cover;
+ display: inline-block;
+}
+.preview-madrid {
+ width: 100%;
+ height: 300px;
+ padding-top: 0;
+ position: relative;
+ background-image: url('../images/madrid.jpg');
+ background-size: cover;
+ display: inline-block;
+}
+.preview-rome {
+ width: 100%;
+ height: 300px;
+ padding-top:0;
+ position: relative;
+ background-image: url('../images/rome.jpg');
+ background-size: cover;
+ display: inline-block;
+}
+h1 {
+ font-variant: small-caps;
+ font-family: sans-serif;
+ text-align: center;
+ padding: 40px;
+}
+h2 {
+ position: absolute;
+ font-size: .75em;
+ top: 40px;
+ left: 40px;
+}
+@media all and (min-width: 575px) {
+ .preview-baku {
+ width: 49%;
+ height: 200px;
+ }
+ .preview-madrid {
+ width: 49%;
+ height: 200px;
+ }
+ .preview-london {
+ width: 49%;
+ height: 200px;
+ }
+ .preview-rome {
+ width: 49%;
+ height: 200px;
+ }
+ body {
+ padding-left: 100px;
+ padding-right: 100px;
+ overflow: hidden;
+ box-sizing: border-box;
+ }
+}
+@media all and (min-width: 991px) {
+ .preview-baku {
+ width: 24%;
+ height: 150px;
+ }
+ .preview-madrid {
+ width: 24%;
+ height: 150px;
+ }
+ .preview-london {
+ width: 24%;
+ height: 150px;
+ }
+ .preview-rome {
+ width: 24%;
+ height: 150px;
+ }
+ body {
+ padding-left: 200px;
+ padding-right: 200px;
+ overflow: hidden;
+ box-sizing: border-box;
}
diff --git a/index.html b/index.html
index b06beac..4711f59 100644
--- a/index.html
+++ b/index.html
@@ -1,25 +1,26 @@
+
css exercise four
+ modern luxury travel