Merge pull request #12 from vietanhdtd/branch-anh

edit the footer
vietanhdtd · May 10, 2019 · 5549ded · 5549ded
2 parents ce488a5 + 9ccd768
commit 5549ded
Show file tree

Hide file tree

Showing 2 changed files with 218 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -112,8 +112,9 @@ <h5 class="card-title employee-name text-danger px-4">ANH</h5>
     </section>
     <footer class="">
         <div class="container row">
-            <a href="#" class="navbar-brand" style="margin-top: 50px;"><img src="img/platypus-logo.png" alt="Startup-logo" height="85px"></a>
-            <div class="footer-links d-flex col-6">
+            <a href="#" class="navbar-brand" style="margin-top: 50px;"><img src="img/platypus-logo.png" alt="Startup-logo"
+                    height="85px"></a>
+            <div class="footer-links d-flex col-7">
                 <div class="list-header"><a class="font-weight-bold">Company</a>
                     <ul class="footer-list text-muted">
                         <li><a>About</a></li>
@@ -137,19 +138,14 @@ <h5 class="card-title employee-name text-danger px-4">ANH</h5>
                     </ul>
                 </div>
             </div>
-            <div class="social-media-btn col-4">
-                <ul class="row">
-                    <li>
-                        <a href="#" class="fa fa-instagram"></a>
-                    </li>
-                    <li>
-                        <a href="#" class="fa fa-twitter"></a>
-                    </li>
-                    <li>
-                        <a href="#" class="fa fa-facebook"></a>
-                    </li>
-                </ul>
-            </div>
+                <div class="social-media-btn col-3">
+                    <ul class="row">
+                        <li><a href="#" class="fa fa-instagram"></a></li>
+                        <li><a href="#" class="fa fa-twitter"></a></li>
+                        <li><a href="#" class="fa fa-facebook"></a></li>
+                    </ul>
+                </div>
+
 
         </div>
     </footer>

diff --git a/style.css b/style.css
@@ -1,3 +1,209 @@
+
+/* page-structure */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Sanomat Grab Web Regular', sans-serif;
+    font-size: 1.146em;
+    font-weight: 400;
+}
+
+nav {
+    color: white;
+}
+
+header {
+    background-color: white;
+    min-height: 400px;
+    background-image: url("img/platypus-hero2.jpg");
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    height: 650px;
+}
+
+.environment {
+    min-height: 300px;
+    display: flex;
+    justify-content: space-around;
+    text-align: center;
+}
+
+.employees {
+    min-height: 300px;
+    display: flex;
+    justify-content: space-around;
+    text-align: center;
+}
+
+footer {
+    background-color: #301818;
+    min-height: 100px;
+    color: white;
+}
+
+
+/*nav-style*/
+
+.bg-black {
+    background-color: rgba(48, 24, 24, .8);
+}
+
+.nav-linkto {
+    color: #F09048 !important;
+    font-weight: 400;
+    transition: all 0.3s;
+}
+
+.nav-linkto:hover {
+    color: #189090!important;
+}
+
+.btn-nav {
+    color: #F09048;
+    border: 2px solid #F09048;
+    transition: all 0.3s;
+    font-weight: 400;
+}
+
+.btn-nav:hover {
+    color: white;
+    border-color: #189090;
+    background-color: #189090;
+}
+
+.search-icon {
+    border: none;
+}
+
+
+/* header style */
+
+.header-style {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    top: 200px;
+    color: #F09048;
+    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: 15px;
+    color: #D86000;
+}
+
+.header-subtitle {
+    font-size: 18px;
+    font-weight: 300;
+    font-family: 'Sanomat Grab Web Regular', sans-serif;
+    letter-spacing: 1px;
+    padding-bottom: 20px;
+}
+
+/* footer style */
+
+
+footer .container  {
+    display: flex;
+    justify-content: space-between;
+    margin: auto;
+    padding-top: 30px;
+}
+
+footer li {
+    list-style: none;
+    color: #F09048;
+}
+
+footer li:hover{
+    color: #189090;
+    cursor: pointer;
+}
+
+.list-header {
+    width: 150px;
+    color: #D86000;
+    line-height: 50px;
+    margin-top: 50px;
+    padding-bottom: 70px;
+}
+
+.social-media-btn {
+    justify-content: center;
+    display: flex;
+    margin-top: 50px;
+}
+
+.fa {
+    margin: 0px 20px 0 0;
+    padding: 15px;
+    font-size: 50px;
+    text-align: center;
+    border-radius: 50%;
+    color: #D86000;
+    text-decoration: none;
+}
+.fa:hover{
+    color: #189090;
+    cursor: pointer;
+}
+footer a:hover {
+    text-decoration: none;
+}
+
+/* environment-style */
+
+.card-body-flex {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+
+/* employees-style */
+
+.employee-name {
+    font-size: 2em;
+    font-weight: 600;
+}
+
+.no-border {
+    border: none;
+}
+
+.avatar {
+    border-radius: 50%;
+    width: 200px;
+}
+
+#header-button {
+    font-family: 'Sanomat Grab Web Regular', sans-serif;
+    font-size: 1.146em;
+    font-weight: 400;
+    color: #D86000;
+    border-color: #D86000;
+}
+
+#header-button:hover {
+    background-color: black;
+}
+=======
     /*page-structure*/
 
     * {
@@ -223,4 +429,4 @@
 
     #header-button:hover {
         background-color: black
-    }
+    }