diff --git a/README.md b/README.md
index a7c36a6..cbf8b86 100644
--- a/README.md
+++ b/README.md
@@ -11,10 +11,6 @@ Notes:
- Look up `@media for tablet` (css).
-### The website look like this on website
-Our App
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tem
- Services
+ Services
diff --git a/style/style.css b/style/style.css
new file mode 100644
index 0000000..5d748ea
--- /dev/null
+++ b/style/style.css
@@ -0,0 +1,163 @@
+html, body {
+ margin:0;
+ padding: 0;
+ height:100%;
+}
+
+
+header{
+ background-image: url(../images/HeaderBackground1920x1280.jpg);
+ background-size: cover;
+ height:500px ;
+}
+ul{
+ color: white;
+ font-weight: bold;
+ font-size: 20px;
+ list-style-type:none;
+ display: flex;
+ justify-content: end;
+
+}
+li{
+ padding: 20px;
+}
+
+main {
+ text-align: center;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+
+main>h1{
+ flex-direction: column;
+ flex: 0 1 100%;
+}
+main>div{
+ flex: 1 0 10%;
+}
+
+.introduction{
+ color: white;
+ font-size:20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 100px;
+
+}
+#logo{
+ margin: 0;
+ padding: 0;
+ color: red;
+}
+.part-services{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items: center;
+}
+
+.services-content{
+ padding-left: 5%;
+ padding-right: 5%;
+ text-align: justify;
+ }
+
+ a:link {
+ color: white;
+ background-color: transparent;
+ text-decoration: none;
+ }
+ a:visited {
+ color: white;
+ background-color: transparent;
+ text-decoration: none;
+ }
+ a:hover {
+ color: white;
+ background-color: transparent;
+ text-decoration: underline;
+ }
+ a:active {
+ color: white;
+ background-color: transparent;
+ text-decoration: underline;
+ }
+/* mobile view */
+@media only screen and (max-width: 720px) {
+
+ html, body {
+ margin:0;
+ padding: 0;
+
+ height:100%;
+ }
+
+
+ header{
+ background-image: url(../images/HeaderBackground1920x1280.jpg);
+ width:100%;
+ height:100%;
+
+ }
+ ul{
+ color: white;
+ font-weight: bold;
+ font-size: 20px;
+ list-style-type:none;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ main{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+
+ .introduction{
+ color: white;
+ margin-left: 30px;
+
+ }
+ #logo{
+ margin-left:20px;
+ color: red;
+ }
+ .part-services{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .services-content{
+ padding-left: 5%;
+ padding-right: 5%;
+ text-align: justify;
+ ;}
+
+ a:link {
+ color: white;
+ background-color: transparent;
+ text-decoration: none;
+ }
+ a:visited {
+ color: white;
+ background-color: transparent;
+ text-decoration: none;
+ }
+ a:hover {
+ color: white;
+ background-color: transparent;
+ text-decoration: underline;
+ }
+ a:active {
+ color: white;
+ background-color: transparent;
+ text-decoration: underline;
+ }
+
+ }
\ No newline at end of file
-
-
### The website look like this before add @mdeia when they open it on mobile
diff --git a/images/Our App.png b/images/Our App.png
deleted file mode 100644
index 252ebc7..0000000
Binary files a/images/Our App.png and /dev/null differ
diff --git a/index.html b/index.html
index 2bd6da5..614f6a1 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@