Skip to content

Commit

Permalink
create about-us page
Browse files Browse the repository at this point in the history
  • Loading branch information
@AustinNguyen2909
AustinNguyen2909 committed May 11, 2019
1 parent f46ffaf commit 15c0c27
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 8 deletions.
152 changes: 152 additions & 0 deletions about-us.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
<!DOCTYPE html>

<html class="no-js">


<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Help a Platypus</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='icon' href='img/platypus-favicon.png' type='image/x-icon'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>

<body>
<nav class="bg-black fixed-top">
<div class="container navbar-nav navbar-light navbar-expand-lg py-2 nav-flex nav-row">
<a href="index.html" class="navbar-brand"><img src="img/platypus-logo.png" alt="Startup-logo" height="45px"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link nav-linkto " href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link nav-linkto" href="about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link nav-linkto" href="#">Rescued Platypus</a>
</li>
<li class="nav-item res-invisible-1">
<a class="nav-link nav-linkto" href="#">Help A Platypus</a>
</li>
<li class="nav-item res-invisible-1">
<a class="nav-link nav-linkto" href="#">Search</a>
</li>
</ul>
</div>
<form class="form-inline res-invisible-2">
<button class="mx-2 btn btn-nav my-2 my-sm-0" type="submit">HELP A PLATYPUS</button>
<button class="mx-2 btn btn-nav my-2 my-sm-0 search-icon" type="submit"><i
class="fas fa-search"></i></button>
</form>
</div>
</nav>
<header class="">
<div class="container">
<div class="aboutus-header-style">
<h1 class="header-title">WHO ARE WE ?</h1>
<div class="container employees p-5 row">
<div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem; ">
<img src="img/Phil.png " class="avatar-aboutus" alt="Phil 's Avatar">
<div class="card-body">
<h5 class="card-title employee-name-aboutus text-danger px-4">PHIL</h5>
<p class="card-text text-info">Product Owner</p>
<p class="card-text text-warning">I think we shoudl put informations about who we are and what we did in our project</p>
<p class="card-text text-warning">Or do you guys think we should make-up our info about what we did in this "save the platypus campaign"</p>
</div>
</div>
<div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem; ">
<img src="img/Anh.png " class="avatar-aboutus" alt="Anh ' Avatar">
<div class="card-body">
<h5 class="card-title employee-name-aboutus text-danger px-4">ANH</h5>
<p class="card-text text-info">Scrum Master</p>
<p class="card-text text-warning">I think we shoudl put informations about who we are and what we did in our project</p>
<p class="card-text text-warning">Or do you guys think we should make-up our info about what we did in this "save the platypus campaign"</p>
</div>
</div>
</div>
<div class="container employees p-5 row">
<div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem;">
<img src="img/Loc.png" class="avatar-aboutus" alt="Loc's Avatar ">
<div class="card-body ">
<h5 class="card-title employee-name-aboutus text-danger px-4">LOC</h5>
<p class="card-text text-info ">Developer</p>
<p class="card-text text-warning">I think we shoudl put informations about who we are and what we did in our project</p>
<p class="card-text text-warning">Or do you guys think we should make-up our info about what we did in this "save the platypus campaign"</p>
</div>
</div>
<div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem;">
<img src="img/Vy.png" class="avatar-aboutus" alt="Vy's Avatar ">
<div class="card-body ">
<h5 class="card-title employee-name-aboutus text-danger px-4">Vy</h5>
<p class="card-text text-info ">Developer</p>
<p class="card-text text-warning">I think we shoudl put informations about who we are and what we did in our project</p>
<p class="card-text text-warning">Or do you guys think we should make-up our info about what we did in this "save the platypus campaign"</p>
</div>
</div>

</div>
</div>
</div>
</header>
<section></section>
<footer class="">
<div class="container row">
<a href="index.html" 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>
<li><a>Jobs</a></li>
<li><a>Contact</a></li>
</ul>
</div>
<div class="list-header"><a class="font-weight-bold">Communities</a>
<ul class="footer-list text-muted">
<li><a>Rescuers</a></li>
<li><a>Forum</a></li>
<li><a>Investor</a></li>
<li><a>Event</a></li>
</ul>
</div>
<div class="list-header"><a class="font-weight-bold">Useful Links</a>
<ul class="footer-list text-muted">
<li><a>Help</a></li>
<li><a>Health</a></li>
<li><a>Extra Tips</a></li>
</ul>
</div>
</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>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="" async defer></script>
</body>

</html>
8 changes: 4 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,17 @@
<body>
<nav class="bg-black fixed-top">
<div class="container navbar-nav navbar-light navbar-expand-lg py-2 nav-flex nav-row">
<a href="#" class="navbar-brand"><img src="img/platypus-logo.png" alt="Startup-logo" height="45px"></a>
<a href="index.html" class="navbar-brand"><img src="img/platypus-logo.png" alt="Startup-logo" height="45px"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link nav-linkto " href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link nav-linkto " href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link nav-linkto" href="#">About Us</a>
<a class="nav-link nav-linkto" href="about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link nav-linkto" href="#">Rescued Platypus</a>
Expand Down Expand Up @@ -154,7 +154,7 @@ <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>
<a href="index.html" 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">
Expand Down
34 changes: 30 additions & 4 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ header {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 650px;
}

.environment-section {
Expand Down Expand Up @@ -140,6 +139,20 @@ nav ul {
width: 60rem;
}

.aboutus-header-style {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
color: #F09048;
border: 2px solid rgba(48, 24, 24, .9);
background-color: rgba(48, 24, 24, .9);
padding: 20px 0px;
margin: 100px auto 30px auto;
width: 60rem;
}

header .container {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -294,6 +307,13 @@ a:hover {
background-color: aquamarine;
}

.employee-name-aboutus {
font-size: 2em;
font-weight: 600;
background-color: rgb(0, 248, 236);
;
}

.no-border {
border: none;
}
Expand All @@ -305,6 +325,13 @@ a:hover {
border: 8px solid #D86000;
}

.avatar-aboutus {
border-radius: 10%;
width: 75%;
height: auto;
border: 8px solid rgb(0, 248, 236);
}

#header-button {
font-family: 'Sanomat Grab Web Regular', sans-serif;
font-size: 1.146em;
Expand Down Expand Up @@ -384,9 +411,8 @@ s
border: none;
}

.avatar {
border-radius: 50%;
width: 200px;
.aboutus-card {
min-width: 50%;
}


Expand Down

0 comments on commit 15c0c27

Please sign in to comment.