Skip to content

Commit

Permalink
Merge pull request #19 from vietanhdtd/branch-loc
Browse files Browse the repository at this point in the history 
Edited responsive and about-us page
  • Loading branch information
@vietanhdtd
vietanhdtd authored May 12, 2019
2 parents 75663cf + 7aafca8 commit ff79bd6
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 19 deletions.
10 changes: 5 additions & 5 deletions about-us.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,12 @@
</form>
</div>
</nav>
<header class="">
<header class="header-aboutus">
<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; ">
<div class="card bg-transparent no-border card-body-flex aboutus-page-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>
Expand All @@ -63,7 +63,7 @@ <h5 class="card-title employee-name-aboutus text-danger px-4">PHIL</h5>
<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; ">
<div class="card bg-transparent no-border card-body-flex aboutus-page-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>
Expand All @@ -74,7 +74,7 @@ <h5 class="card-title employee-name-aboutus text-danger px-4">ANH</h5>
</div>
</div>
<div class="container employees p-5 row">
<div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem;">
<div class="card bg-transparent no-border card-body-flex aboutus-page-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>
Expand All @@ -83,7 +83,7 @@ <h5 class="card-title employee-name-aboutus text-danger px-4">LOC</h5>
<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;">
<div class="card bg-transparent no-border card-body-flex aboutus-page-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>
Expand Down
Binary file added img/about-us-bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 8 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,8 @@ <h1 style="color: #1d9df3; font-family: Arial; text-decoration: none;">WHAT IS A
</section>
<section class="environment-section">
<div class="environment container no-stretch py-3">
<<!--img src="img/medium-bg.png" alt="environment-picture" class="environment-bg" />-->
<div class="card environment-card " style="width: 18rem ">
<!--img src="img/medium-bg.png" alt="environment-picture" class="environment-bg" />-->
<div class="card environment-card col-12 col-lg-4 p-3" style="width: 18rem ">
<img src="img/platypus-food.webp " class="card-img-top " alt="Platypus and Food ">
<div class="card-body card-body-flex ">
<p>
Expand All @@ -140,7 +140,7 @@ <h1 style="color: #1d9df3; font-family: Arial; text-decoration: none;">WHAT IS A
</div>
</div>
</div>
<div class="card environment-card " style="width: 18rem ">
<div class="card environment-card col-12 col-lg-4 p-3" style="width: 18rem ">
<img src="img/platypus-environment.jpg " class="card-img-top " alt="Platypus Environment ">
<div class="card-body card-body-flex ">
<p>
Expand All @@ -158,7 +158,7 @@ <h1 style="color: #1d9df3; font-family: Arial; text-decoration: none;">WHAT IS A
</div>
</div>

<div class="card environment-card " style="width: 18rem ">
<div class="card environment-card col-12 col-lg-4 p-3" style="width: 18rem ">
<img src="img/platypus-tips.jpg " class="card-img-top " alt="Some Tips ">
<div class="card-body card-body-flex ">
<p>
Expand Down Expand Up @@ -210,28 +210,28 @@ <h1 style="color:#F09048; font-family: Arial; text-decoration: underline;">RESCU
</section>
<section class=" " style="background-color: #189090 ">
<div class="container employees p-5 ">
<div class="card bg-transparent no-border card-body-flex " style="width: 18rem; ">
<div class="card bg-transparent no-border card-body-flex aboutus-card col-sm-12 col-md-6 col-lg-3" style="width: 18rem; ">
<img src="img/Phil.png " class="avatar " alt="Phil 's Avatar">
<div class="card-body">
<h5 class="card-title employee-name text-danger px-4">PHIL</h5>
<p class="card-text text-warning">Product Owner</p>
</div>
</div>
<div class="card bg-transparent no-border card-body-flex" style="width: 18rem;">
<div class="card bg-transparent no-border card-body-flex aboutus-card col-sm-12 col-md-6 col-lg-3" style="width: 18rem;">
<img src="img/Loc.png" class="avatar" alt="Loc's Avatar ">
<div class="card-body ">
<h5 class="card-title employee-name text-danger px-4">LOC</h5>
<p class="card-text text-warning ">Developer</p>
</div>
</div>
<div class="card bg-transparent no-border card-body-flex" style="width: 18rem;">
<div class="card bg-transparent no-border card-body-flex aboutus-card col-sm-12 col-md-6 col-lg-3" style="width: 18rem;">
<img src="img/Vy.png" class="avatar" alt="Vy's Avatar ">
<div class="card-body ">
<h5 class="card-title employee-name text-danger px-4">Vy</h5>
<p class="card-text text-warning ">Developer</p>
</div>
</div>
<div class="card bg-transparent no-border card-body-flex " style="width: 18rem; ">
<div class="card bg-transparent no-border card-body-flex aboutus-card col-sm-12 col-md-6 col-lg-3" style="width: 18rem; ">
<img src="img/Anh.png " class="avatar " alt="Anh ' Avatar">
<div class="card-body">
<h5 class="card-title employee-name text-danger px-4">ANH</h5>
Expand Down
27 changes: 21 additions & 6 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,22 @@ nav {

header {
background-color: white;
min-height: 400px;
min-height: 600px;
background-image: url("img/platypus-hero2.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.header-aboutus {
background-image: url("img/about-us-bg.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.environment-section {
background-image: url("img/environment-background.jpg");
background-attachment: fixed;
Expand All @@ -38,6 +46,7 @@ header {
min-height: 300px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
text-align: center;
position: relative;
overflow: hidden;
Expand All @@ -48,6 +57,7 @@ header {
display: flex;
justify-content: space-around;
text-align: center;
flex-wrap: wrap;
}

footer {
Expand Down Expand Up @@ -146,8 +156,8 @@ nav ul {
align-items: center;
position: relative;
color: #F09048;
border: 2px solid rgba(48, 24, 24, .9);
background-color: rgba(48, 24, 24, .9);
border: 2px solid rgba(48, 24, 24, .8);
background-color: rgba(48, 24, 24, .8);
padding: 20px 0px;
margin: 100px auto 30px auto;
width: 60rem;
Expand Down Expand Up @@ -247,6 +257,7 @@ a:hover {
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: rgba(0, 0, 0, .7);
}

.environment-text {
Expand All @@ -255,7 +266,7 @@ a:hover {
}

.environment-card {
background-color: rgba(0, 0, 0, .7);
background-color: rgba(0, 0, 0, 0);
border: none;
z-index: 2;
}
Expand Down Expand Up @@ -320,8 +331,8 @@ a:hover {

.avatar {
border-radius: 50%;
width: 200px;
height: 200px;
width: 75%;
height: auto;
border: 8px solid #D86000;
}

Expand Down Expand Up @@ -501,6 +512,10 @@ s
}

.aboutus-card {
min-width: 25%;
}

.aboutus-page-card {
min-width: 50%;
}

Expand Down

0 comments on commit ff79bd6

Please sign in to comment.