From 1fea635ef2efdec1f9c0f92f1389ca0543075d97 Mon Sep 17 00:00:00 2001 From: Sebastian Richu Antony Date: Mon, 13 May 2024 23:23:07 +0530 Subject: [PATCH] first commit for adding natours header,logo,and content section also adding css. main css properties learned in the sections where clip path:polygon(),transform:translate() and position relative and absolute --- Natours/starter/css/style.css | 55 ++++++++++++++++++++++++++++++++++- Natours/starter/index.html | 17 +++++++++-- 2 files changed, 69 insertions(+), 3 deletions(-) diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index 9b2d76f44e..eee65306cc 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -5,4 +5,57 @@ 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-size: 16px; + font-weight: 400; + line-height: 1.7; + color: #777; + padding: 20px; +} +.header{ + position:relative; + height: 95vh; + background-position: top; + background-size: cover; + background-image: linear-gradient(to right bottom,rgba(126, 213, 111, 0.8),rgba(40, 180, 133, 0.8)),url(../img/hero-small.jpg); + clip-path: polygon(0 0,100% 0,100% 75%,0 100%); +} +.logo-box{ + position:absolute; + top: 40px; + left:40px; +} +.logo{ + height: 35px; +} +.text-box{ + position:absolute; + top:40%; + left:50%; + transform: translate(-50%,-50%); +} +.primary-heading{ + color: #fff; + text-transform: uppercase; +} +.primary-heading-main{ + display: block; + font-size: 60px; + font-weight: 400; + letter-spacing: 35px; +} +.primary-heading-sub{ + display: block; + font-size: 20px; + font-weight: 700; + letter-spacing: 17.4px; +} \ No newline at end of file diff --git a/Natours/starter/index.html b/Natours/starter/index.html index d590f27228..8bc24ffad0 100644 --- a/Natours/starter/index.html +++ b/Natours/starter/index.html @@ -13,7 +13,20 @@ Natours | Exciting tours for adventurous people - - +
+
+ +
+
+

+ + outdoors + + + is where life happens + +

+
+