diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css
index 9b2d76f44e..d1d7700647 100644
--- a/Natours/starter/css/style.css
+++ b/Natours/starter/css/style.css
@@ -5,4 +5,178 @@ Light green: #7ed56f
Medium green: #55c57a
Dark green: #28b485
-*/
\ No newline at end of file
+*/
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "Lato", sans-serif;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 1.7;
+ color: #777;
+ padding: 30px;
+}
+
+.header {
+ height: 95vh;
+ background-image: linear-gradient(
+ to right bottom,
+ rgba(126, 213, 111, 0.8),
+ rgba(39, 180, 133, 0.8)
+ ),
+ url(../img/hero.jpg);
+ background-size: cover;
+ background-position-y: top;
+ position: relative;
+
+ clip-path: polygon(0 0, 100% 0, 100% 70vh, 0 100%);
+}
+
+.logo-box {
+ position: absolute;
+ top: 40px;
+ left: 40px;
+}
+
+.logo {
+ height: 35px;
+}
+
+.heading-primary {
+ color: #fff;
+ text-transform: uppercase;
+
+ backface-visibility: hidden;
+ margin-bottom: 60px;
+}
+
+.heading-primary-main {
+ display: block;
+ font-size: 60px;
+ font-weight: 400;
+ letter-spacing: 35px;
+
+ animation-name: moveInLeft;
+ animation-duration: 1s;
+ animation-timing-function: ease-in;
+}
+
+.heading-primary-sub {
+ display: block;
+ font-size: 20px;
+ font-weight: 700;
+ letter-spacing: 17.4px;
+
+ animation-name: moveInRight;
+ animation-duration: 1s;
+ animation-timing-function: ease-in-out;
+}
+
+.text-box {
+ position: absolute;
+ top: 45%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+}
+
+@keyframes moveInLeft {
+ 0% {
+ opacity: 0;
+ transform: translate(-100px);
+ }
+ 80% {
+ transform: translate(10px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translate(0);
+ }
+}
+
+@keyframes moveInRight {
+ 0% {
+ opacity: 0;
+ transform: translate(50px);
+ }
+ 80% {
+ transform: translate(-10px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translate(0);
+ }
+}
+
+@keyframes moveInBotton {
+ 0% {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translate(0);
+ }
+}
+
+.btn:link,
+btn:visited {
+ text-transform: uppercase;
+ text-decoration: none;
+ padding: 15px 40px;
+ display: inline-block;
+ border-radius: 100px;
+
+ transition: all 0.2s;
+ position: relative;
+}
+
+.btn-white {
+ background: #fff;
+ color: #777;
+}
+
+.btn:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.btn:active {
+ transform: translateY(-1px);
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+.btn::after {
+ content: "";
+ display: inline-block;
+ height: 100%;
+ width: 100%;
+ border-radius: 100px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ transition: all 0.4s;
+}
+
+.btn-white::after {
+ background-color: red;
+}
+
+.btn:hover::after {
+ transform: scaleX(1.4) scaleY(1.6);
+ opacity: 0;
+}
+
+.btn-animated {
+ animation-name: moveInBotton;
+ animation-duration: 0.5s;
+ animation-timing-function: ease-in-out;
+ animation-delay: 0.75s;
+ animation-fill-mode: backwards;
+}
diff --git a/Natours/starter/index.html b/Natours/starter/index.html
index d590f27228..2c41c88c4d 100644
--- a/Natours/starter/index.html
+++ b/Natours/starter/index.html
@@ -1,19 +1,33 @@
-
-
-
-
-
+
+
+
-
-
-
-
- Natours | Exciting tours for adventurous people
-
-
-
-
-
+
+
+
+
+
+
+ Natours | Exciting tours for adventurous people
+
+
+
+
+