added header title and sub title.

vietanhdtd · May 9, 2019 · 8979e1a · 8979e1a
1 parent 94c77ee
commit 8979e1a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -19,10 +19,6 @@
 </head>
 
 <body>
-    <!--[if lt IE 7]>
-            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
-        <![endif]-->
-
     <nav class="bg-black fixed-top row">
         <div class="container navbar-nav navbar-light navbar-expand-lg py-2">
             <a href="#" class="navbar-brand"><img src="img/platypus-logo.png" alt="Startup-logo" height="45px"></a>
@@ -47,8 +43,10 @@
     </nav>
     <header class="">
         <div class="container">
-            <p>try to update</p>
-        </div>
+            <div class="header-style">
+            <h1 class="header-title">Be a Hero! Resucue a Platypus.</h1>
+            <h4 class="header-subtitle">"Because the platypus both lays eggs and produces milk, <br/> it's one of the few animals that can make it's own custard."</h4>
+        </div></div>
     </header>
     <section class="environment">
         <div class="container">

diff --git a/style.css b/style.css
@@ -78,4 +78,38 @@ footer {
 
 .search-icon {
     border: none;
-}
+}
+
+/* header style */
+
+.header-style {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    top: 300px;
+    color: #D86000;
+    border: 2px solid rgba(48, 24, 24, .9);
+    background-color: rgba(48, 24, 24, .9);
+    padding: 20px 0px;
+    margin: 0px auto;
+    width: 60rem;
+}
+
+.header-title {
+    font-size: 60px;
+    font-family: 'Sanomat Grab Web Regular', sans-serif;
+    padding-bottom: 20px;
+}
+
+.header-subtitle {
+    font-size: 18px;
+    font-weight: 300;
+    font-family: 'Sanomat Grab Web Regular', sans-serif;
+    letter-spacing: 1px;
+    padding-bottom: 20px;
+}
+
+
+