diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css
index 9b2d76f44e..dab3c1bc1c 100644
--- a/Natours/starter/css/style.css
+++ b/Natours/starter/css/style.css
@@ -5,4 +5,186 @@ 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;
+}
+
+.header {
+ height: 95vh;
+ background-image: linear-gradient(
+ to right bottom,
+ rgba(126, 213, 111, 0.8),
+ rgba(40, 180, 131, 0.8)),
+ url(../img/hero.jpg);
+ background-size: cover;
+ background-position: top;
+ clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
+ position: relative;
+}
+
+.logo-box {
+ position: absolute;
+ top: 40px;
+ left: 40px;
+}
+
+.logo {
+ height: 35px;
+}
+
+.logo:hover {
+ animation: moveInLeft 1s ease-out;
+
+}
+
+.text-box {
+ position: absolute;
+ top: 40%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+}
+
+.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: moveInLeft;
+ animation-duration: 2s;
+ animation-timing-function: ease-out;
+}
+
+.heading-primary-sub {
+ display: block;
+ font-size: 20px;
+ font-weight: 700;
+ letter-spacing: 17px;
+ animation: moveInRight;
+ animation-duration: 2s;
+ animation-timing-function: ease-out;
+}
+
+
+@keyframes moveInLeft {
+ 0% {
+ opacity: 0;
+ transform: translateX(-100px);
+ }
+
+ 80% {
+ transform: translateX(10px);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translateX(0);
+ }
+
+}
+
+
+@keyframes moveInRight {
+ 0% {
+ opacity: 0;
+ transform: translateX(100px);
+ }
+
+ 80% {
+ transform: translateX(-10px);
+
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+.btn:link,
+.btn:visited {
+ text-transform: uppercase;
+ text-decoration: none;
+ padding: 15px 40px;
+ display: inline-block;
+ border-radius: 100px;
+ transition: all .2s;
+ position: relative;
+}
+
+.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-white {
+ background-color: #fff;
+ color: #777;
+}
+
+.btn::after {
+ content: "";
+ display: inline-block;
+ height: 100%;
+ width: 100%;
+ border-radius: 100px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ transition: all .4s;
+}
+
+.btn-white::after {
+ background-color: #fff;
+ color: #777;
+}
+
+.btn:hover::after {
+ transform: scaleX(1.2) scaleY(1.5);
+ opacity: 0;
+}
+
+
+@keyframes moveInBottom {
+ 0% {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+.btn-animated {
+ animation: moveInBottom .5s ease-out .75s;
+ animation-fill-mode: backwards;
+}
+
diff --git a/Natours/starter/index.html b/Natours/starter/index.html
index d590f27228..7da66dfe13 100644
--- a/Natours/starter/index.html
+++ b/Natours/starter/index.html
@@ -13,7 +13,21 @@
<title>Natours | Exciting tours for adventurous people</title>
</head>
<body>
-
-
+ <header class="header">
+ <div>
+ <div class ="logo-box">
+ <img src="img/logo-white.png" alt="logo" class="logo">
+ </div>
+ </div>>
+ <div class ="text-box">
+ <h1 class="heading-primary">
+ <span class="heading-primary-main"> Outdoors </span>
+ <span class="heading-primary-sub"> is there life happens </span>
+ </h1>
+ <a href="#" class="btn btn-white btn-animated">
+ discover out tours
+ </a>
+ </div>
+ </header>
</body>
</html>