diff --git a/css-exercise-four-master/README.md b/css-exercise-four-master/README.md
new file mode 100644
index 0000000..bbdcad5
--- /dev/null
+++ b/css-exercise-four-master/README.md
@@ -0,0 +1,2 @@
+# css-exercise-four
+Exercise focused on the usage of media queries
diff --git a/css-exercise-four-master/css/reset.css b/css-exercise-four-master/css/reset.css
new file mode 100644
index 0000000..ed11813
--- /dev/null
+++ b/css-exercise-four-master/css/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
diff --git a/css-exercise-four-master/css/style.css b/css-exercise-four-master/css/style.css
new file mode 100644
index 0000000..964e184
--- /dev/null
+++ b/css-exercise-four-master/css/style.css
@@ -0,0 +1,109 @@
+*, *:before, *:after {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #dadada;
+ margin: auto;
+ font-size: 10px;
+ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+section {
+ display: inline-block;
+ /* align-items: center; */
+ background-position: center;
+ /* align-items: center; */
+}
+
+
+
+.modern-luxury h1 {
+ font-size: 2em;
+ font-weight: 400;
+ text-transform: uppercase;
+ padding: 25px 0 30px 0;
+ position: absolute;
+ margin: 2% 0;
+ /* padding: 10% 0 20% 50%; */
+ top: 5%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.preview {
+ display: inline-flex;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ /* align-items: center; */
+ margin: 1% 1%;
+ padding: 20px 25px;
+ width: 25em;
+ height: 25em;
+ /* width: 200px;
+ height: 200px; */
+}
+
+.preview.baku {
+ background-image: url("../images/baku.jpg");
+}
+
+.preview.baku h1 {
+ font-size: 1.2em;
+
+ /* position: absolute;
+ top: 8px;
+ left: 16px */
+}
+
+.preview.london {
+ background-image: url("../images/london.png");
+}
+
+.preview.london h1 {
+ font-size: 1.2em;
+ /* position: absolute; */
+ top: 8px;
+ left: 8px;
+}
+
+.preview.madrid {
+ background-image: url("../images/madrid.jpg");
+}
+
+.preview.madrid h1 {
+ font-size: 1.2em;
+ /* position: absolute; */
+ top: 8px;
+ left: 8px;
+}
+
+
+
+.preview.rome h1 {
+ font-size: 1.2em;
+ /* position: absolute; */
+ top: 8px;
+ left: 8px;
+}
+
+.preview.rome {
+ background-image: url("../images/rome.jpg");
+}
+
+
+
+@media screen and (min-width: 575px){
+ div {
+ margin: 1%;
+ width: 48%;
+ }
+}
+
+@media screen and (min-width: 991px){
+ div {
+ margin: 1%;
+ width: 25%;
+ }
+}
diff --git a/css-exercise-four-master/images/baku.jpg b/css-exercise-four-master/images/baku.jpg
new file mode 100644
index 0000000..ffa694b
Binary files /dev/null and b/css-exercise-four-master/images/baku.jpg differ
diff --git a/css-exercise-four-master/images/london.png b/css-exercise-four-master/images/london.png
new file mode 100644
index 0000000..7a91210
Binary files /dev/null and b/css-exercise-four-master/images/london.png differ
diff --git a/css-exercise-four-master/images/madrid.jpg b/css-exercise-four-master/images/madrid.jpg
new file mode 100644
index 0000000..baff622
Binary files /dev/null and b/css-exercise-four-master/images/madrid.jpg differ
diff --git a/css-exercise-four-master/images/rome.jpg b/css-exercise-four-master/images/rome.jpg
new file mode 100644
index 0000000..26f8e88
Binary files /dev/null and b/css-exercise-four-master/images/rome.jpg differ
diff --git a/css-exercise-four-master/index.html b/css-exercise-four-master/index.html
new file mode 100644
index 0000000..11cddc3
--- /dev/null
+++ b/css-exercise-four-master/index.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+ css exercise four
+
+
+
+
+
+
+ Modern luxury travel
+
+
+
+
+
Baku
+
+
+
+
+
London
+
+
+
+
+
Madrid
+
+
+
+
+
Rome
+
+
+
+
+
diff --git a/index.html b/index.html
index b06beac..2dba19a 100644
--- a/index.html
+++ b/index.html
@@ -2,25 +2,38 @@
+
css exercise four
+
+
Modern luxury travel
+
+
+
Baku
+
London
+
Madrid
+
Rome