diff --git a/css/style.css b/css/style.css
index 6d69a0c..f231ad3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,4 +1,105 @@
+*, *:before, *:after {
+ box-sizing: border-box;
+}
+
+.container {
+ width: 100%;
+ margin: auto;
+}
+
+.preview {
+ margin: 0% 2% 2% 2% auto;
+ width: 100%;
+ text-align: left;
+}
+
body {
background-color: #dadada;
- font-size: 10px;
+ font-size: 16px;
+}
+
+h1 {
+ text-align: center;
+ font-size: 100%;
+ padding: 5%;
+ font-variant: small-caps;
+ font-family: sans-serif;
+}
+
+h3 {
+ font-size: 150%;
+ text-align: left;
+ padding: 10% 80% 80% 10%;
+}
+
+.baku {
+ background-color: #dadada;
+ background-image:url(../images/baku.jpg);
+ background-position: center;
+ background-size: cover;
+ text-align: left;
+}
+
+.london {
+ background-color: #dadada;
+ background-image:url(../images/london.png);
+ background-position: center;
+ background-size: cover;
+}
+
+.madrid {
+ background-color: #dadada;
+ background-image:url(../images/madrid.jpg);
+ background-position: left;
+ background-size: cover;
+}
+
+.rome {
+ background-color: #dadada;
+ background-image:url(../images/rome.jpg);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+}
+
+/* Smaller Screens */
+
+@media screen and (min-width: 575px){
+ .container {
+ width: 80%;
+ }
+ .preview {
+ margin: 2% auto;
+ width: 50%;
+ float: left;
+ height: 200px;
+ padding: inherit;
+ }
+ h1 {
+ font-size: 100%;
+ }
+ h3 {
+ font-size: 100%;
+ }
+}
+
+/* Larger Screens */
+
+@media screen and (min-width: 991px){
+ .container {
+ width: 70%;
+ }
+ .preview {
+ margin: 1%;
+ width: 23%;
+ float: left;
+ height: 200px;
+ padding: inherit;
+ }
+ h1 {
+ font-size: 125%;
+ }
+ h3 {
+ font-size: 125%;
+ }
}
diff --git a/index.html b/index.html
index b06beac..d78e2f5 100644
--- a/index.html
+++ b/index.html
@@ -5,22 +5,22 @@
css exercise four
+
- Modern luxury travel
+ modern luxury travel
-
Baku
+ Baku
-
London
+ London
-
Madrid
+ Madrid
-
Rome
-
+ Rome