Skip to content

Commit

Permalink
about me page imp
Browse files Browse the repository at this point in the history
  • Loading branch information
@VJAI
VJAI committed Feb 2, 2022
1 parent 4e70061 commit cc929d5
Show file tree
Hide file tree
Showing 8 changed files with 147 additions and 96 deletions.
16 changes: 12 additions & 4 deletions about-us.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,9 @@ <h4 class="cmp__section-heading">
<div class="cmp__card-title">
<h5>Triton Maxwell</h5>
</div>
<img src="assets/triton.jpeg" />
<div class="cmp__card-image">
<img src="assets/triton.jpeg" />
</div>
</div>
<div class="cmp__card-footer">
<p class="cmp__italic">
Expand All @@ -159,7 +161,9 @@ <h5>Triton Maxwell</h5>
<div class="cmp__card-title">
<h5>Martin Trowler</h5>
</div>
<img src="assets/martin.jpeg" />
<div class="cmp__card-image">
<img src="assets/martin.jpeg" />
</div>
</div>
<div class="cmp__card-footer">
<p class="cmp__italic">
Expand All @@ -184,7 +188,9 @@ <h5>Martin Trowler</h5>
<div class="cmp__card-title">
<h5>Julie Anand</h5>
</div>
<img src="assets/julie.jpeg" />
<div class="cmp__card-image">
<img src="assets/julie.jpeg" />
</div>
</div>
<div class="cmp__card-footer">
<p class="cmp__italic">
Expand All @@ -209,7 +215,9 @@ <h5>Julie Anand</h5>
<div class="cmp__card-title">
<h5>Tanny Herbert</h5>
</div>
<img src="assets/tanny.jpeg" />
<div class="cmp__card-image">
<img src="assets/tanny.jpeg" />
</div>
</div>
<div class="cmp__card-footer">
<p class="cmp__italic">
Expand Down
16 changes: 12 additions & 4 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,9 @@ <h4 class="cmp__section-heading">
<div class="cmp__card-title">
<h5>Lorem ipsum</h5>
</div>
<img src="assets/blog_resources/agriculture-apple-small.jpeg" />
<div class="cmp__card-image">
<img src="assets/blog_resources/agriculture-apple-small.jpeg" />
</div>
</div>
<div class="cmp__card-footer">
<p>
Expand Down Expand Up @@ -168,7 +170,9 @@ <h5>Lorem ipsum</h5>
<div class="cmp__card-title">
<h5>Lorem ipsum</h5>
</div>
<img src="assets/blog_resources/agriculture-apple-small.jpeg" />
<div class="cmp__card-image">
<img src="assets/blog_resources/agriculture-apple-small.jpeg" />
</div>
</div>
<div class="cmp__card-footer">
<p>
Expand Down Expand Up @@ -196,7 +200,9 @@ <h5>Lorem ipsum</h5>
<div class="cmp__card-title">
<h5>Lorem ipsum</h5>
</div>
<img src="assets/blog_resources/agriculture-apple-small.jpeg" />
<div class="cmp__card-image">
<img src="assets/blog_resources/agriculture-apple-small.jpeg" />
</div>
</div>
<div class="cmp__card-footer">
<p>
Expand Down Expand Up @@ -224,7 +230,9 @@ <h5>Lorem ipsum</h5>
<div class="cmp__card-title">
<h5>Lorem ipsum</h5>
</div>
<img src="assets/blog_resources/agriculture-apple-small.jpeg" />
<div class="cmp__card-image">
<img src="assets/blog_resources/agriculture-apple-small.jpeg" />
</div>
</div>
<div class="cmp__card-footer">
<p>
Expand Down
2 changes: 1 addition & 1 deletion detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1211,7 +1211,7 @@ <h3>Lorem ipsum dolor sit amet</h3>
<script>
WebFont.load({
google: {
families: ['Space Mono']
families: ['JetBrains Mono']
},
timeout: 5000,
fontactive: function () {
Expand Down
93 changes: 53 additions & 40 deletions fibonacci.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,7 +336,7 @@ figure figcaption, figure .cmp__figcaption, .cmp__figure figcaption, .cmp__figur
}
figure figcaption code, figure .cmp__figcaption code, .cmp__figure figcaption code, .cmp__figure .cmp__figcaption code {
font-size: var(--xs-size);
font-family: "Space Mono", Courier, monospace;
font-family: "JetBrains Mono", Courier, monospace;
}
figure .cmp__table-wrapper, .cmp__figure .cmp__table-wrapper {
padding: var(--sm-size) var(--lg-size);
Expand Down Expand Up @@ -383,7 +383,7 @@ pre code {
overflow-x: auto;
overflow-y: hidden;
font-size: var(--xs-size);
font-family: "Space Mono", Courier, monospace;
font-family: "JetBrains Mono", Courier, monospace;
line-height: 1.2;
letter-spacing: normal;
}
Expand Down Expand Up @@ -491,7 +491,7 @@ pre code::after {

var, kbd, .cmp__code {
padding: 0 0.146rem;
font-family: "Space Mono", Courier, monospace;
font-family: "JetBrains Mono", Courier, monospace;
font-size: 0.9em;
font-style: normal;
letter-spacing: -0.5px;
Expand Down Expand Up @@ -925,7 +925,6 @@ cmp-progress .cmp__squares-container .cmp__square:not(:last-child) {
display: flex;
flex-wrap: wrap;
margin-bottom: var(--xl-size);
padding: 0 var(--sm-size);
}
.cmp__cards-list .cmp__card {
margin-bottom: var(--xl-size);
Expand All @@ -938,49 +937,76 @@ cmp-progress .cmp__squares-container .cmp__square:not(:last-child) {
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0;
transition: rgba(0, 0, 0, 0.1) 0 1px 2px 0 0.5s;
text-shadow: none;
background: url("assets/background.png"), linear-gradient(135deg, #f7f7f7, #efefef);
}
.cmp__card:hover {
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.cmp__card:hover .cmp__card-header .cmp__card-title {
background-color: rgba(0, 0, 0, 0.1);
.cmp__card:hover .cmp__card-header .cmp__card-image:after {
background-color: transparent;
}
.cmp__card:hover .cmp__card-header img {
transform: scale(1.1) rotate(5deg);
.cmp__card:hover .cmp__card-header .cmp__card-image img {
transform: scale(1.1);
}
.cmp__card .cmp__card-header {
display: block;
overflow: hidden;
position: relative;
background-color: #333333;
display: block;
}
.cmp__card .cmp__card-header .cmp__card-title {
position: absolute;
width: 100%;
height: 100%;
padding: 0.382rem;
background-color: rgba(0, 0, 0, 0.2);
transition: background-color 0.5s;
z-index: 10;
margin-top: var(--sm-size);
position: relative;
left: calc(-2 * 3px);
width: calc(100% + 4 * 3px);
overflow: visible;
text-shadow: none;
}
.cmp__card .cmp__card-header .cmp__card-title h5 {
margin: 0;
color: #f7f7f7;
padding: 0.382rem;
font-size: var(--sm-size);
color: #f7f7f7;
background: url("assets/background.png") rgba(0, 0, 0, 0.6);
}
.cmp__card .cmp__card-header .cmp__card-title::before, .cmp__card .cmp__card-header .cmp__card-title::after {
content: "";
position: absolute;
top: calc(-2 * 3px);
height: 3px;
border: solid 3px #333333;
border-top-color: transparent;
}
.cmp__card .cmp__card-header .cmp__card-title::before {
left: 0;
border-left-color: transparent;
}
.cmp__card .cmp__card-header img {
.cmp__card .cmp__card-header .cmp__card-title::after {
right: 0;
border-right-color: transparent;
}
.cmp__card .cmp__card-header .cmp__card-image {
position: relative;
overflow: hidden;
}
.cmp__card .cmp__card-header .cmp__card-image img {
width: 100%;
height: 100%;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
transition: transform 0.5s;
object-fit: cover;
transition: transform 0.5s;
}
.cmp__card .cmp__card-header .cmp__card-image:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
transition: background-color 0.5s;
}
.cmp__card .cmp__card-footer {
padding: var(--sm-size);
display: flex;
flex-direction: column;
background: url("assets/background.png"), linear-gradient(120deg, white, #f7f7f7);
}
.cmp__card .cmp__card-footer p {
text-shadow: none;
Expand Down Expand Up @@ -2707,6 +2733,7 @@ menu menu {
}

.cmp__cards-list {
padding: 0 var(--sm-size);
justify-content: space-between;
}
.cmp__cards-list .cmp__card {
Expand Down Expand Up @@ -3750,20 +3777,6 @@ blockquote.cmp__responsive {
right: 0;
}
}
@keyframes go-top {
0% {
top: -6px;
}
25% {
top: -12px;
}
75% {
top: -3px;
}
100% {
top: -6px;
}
}
.cmp__tab-hide {
display: none;
}
Expand Down Expand Up @@ -3904,11 +3917,11 @@ blockquote.cmp__responsive {
margin: 0 0.51rem;
}

.cmp__project-card .cmp__card-header {
.cmp__project-card .cmp__card-image {
height: 240px;
}

.cmp__person-card .cmp__card-header {
.cmp__person-card .cmp__card-image {
height: 360px;
}

Expand Down
8 changes: 4 additions & 4 deletions scss/_about.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,15 @@

// Project card.
.cmp__project-card {
.cmp__card-header {
height: fibVars.$project-card-header-height;
.cmp__card-image {
height: fibVars.$project-card-image-height;
}
}

// Person Card.
.cmp__person-card {
.cmp__card-header {
height: fibVars.$person-card-header-height;
.cmp__card-image {
height: fibVars.$person-card-image-height;
}
}

Expand Down
Loading

0 comments on commit cc929d5

Please sign in to comment.