Skip to content

Commit

Permalink
New Card Design (rocktimsaikia#112)
Browse files Browse the repository at this point in the history 
* Reowrk Card Design

* Update Cards

* Fix Country Names
  • Loading branch information
@rocktimsaikia
rocktimsaikia authored Oct 14, 2019
1 parent 6403ca9 commit 045b9e3
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 87 deletions.
175 changes: 113 additions & 62 deletions public/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,158 @@
@import url("https://fonts.googleapis.com/css?family=Krub|Open+Sans|Raleway");
:root {
--lightgreen: #68e074;
--darkgrey: #333333;
--lightgrey: #c4c4c4;
--darkgreen: #4ecf8a;
}

body {
background: #fff;
font-family: "Open Sans", sans-serif;
font-family: 'Open Sans', sans-serif;
}

ul {
padding: 0;
}

p {
margin: 0px;
}

#hero-page {
font-family: "Krub", sans-serif;
font-family: 'Krub', sans-serif;
text-align: center;
background: rgb(92, 67, 67);
background: var(--darkgrey);
color: #fff;
border: 2px solid #fff;
padding: 2rem;
}

.cards-wrapper {
display: table;
margin: auto;
margin-top: 3em;
}

.cards {
position: relative;
display: grid;
list-style: none;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
font-family: "Raleway";
grid-gap: 3vw;
grid-template-columns: repeat(4, 20vw);
font-family: 'Roboto';
}
.cards > .info_card > li > img {
margin: 7px 0 4px 40px;
}
.cards > .info_card > li > h4 {
color: #333;
padding-left: 40px;
margin-bottom: 3px;

.info_card {
color: var(--darkgrey);
width: 20vw;
float: left;
font-weight: 600;
line-height: 1;
background: #fff;
color: #333;
box-shadow: 6px 6px 20px -5px rgba(51, 51, 51, 0.6);
padding: 1.3vw;
display: inherit;
}
.cards > .info_card > li > p {
color: rgb(161, 161, 161);
padding-left: 40px;
margin: 0;

.info_card img {
width: 100%;
height: 12vw;
object-fit: cover;
object-position: 100% 0%;
border-radius: 0.6em;
}

.info_card h4 {
font-size: 2vw;
font-weight: bold;
margin-bottom: 1.3vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 0.5vw;
}

.info_card p.role {
font-size: 1vw;
font-weight: 600;
display: inline;
padding-left: 0.5vw;
}
.cards > .info_card > li > .tech-stack {
margin: 10px 0 0 60px;

.info_card p.country {
font-size: 1vw;
background-color: var(--lightgrey);
border: solid var(--lightgrey);
border-radius: 0.4em;
padding: 0em 0.5em;
float: right;
max-width: 10vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cards > .info_card > li > .tech-stack > ol {
margin: 0 18px 20px 0;

.info_card p.country > i {
vertical-align: middle;
}
.cards > .info_card {
font-weight: 600;
padding: 0 20px;
background: #fff;
color: #333;
box-shadow: 0 16px 48px #e3e7eb;
border-top: 6px solid #5aff62;
border-radius: 10px;

.info_card li {
overflow: hidden;
}

.tech-stack {
margin-top: 0.7vw;
}
.info_card:hover{
box-shadow:0 10px 30px #5aff62;

.tech-stack > ul {
list-style-type: none;
white-space: nowrap;
overflow: hidden;
}
.info_card > li {
margin-top: 20px;

.tech-stack li {
font-size: 1vw;
background-color: var(--lightgrey);
border: solid var(--lightgrey);
border-radius: 0.4em;
margin-top: 0.5vw;
text-overflow: ellipsis;
overflow: inherit;
padding: 0vw 1vw;
}

.info_card > a {
font-size: 30px;
margin: 10px;
}
.tech-stack > p {
margin: 0;
}
.tech-stack > ol {
margin-left: 0;

.social-row {
margin-top: -2vw;
margin-bottom: 3vw;
}

.social-media {
background-color: #f66767;
padding: 6px;
background-color: var(--lightgreen);
border: solid var(--lightgreen);
border-radius: 0.6em;
margin: 0;
display: inline-flex;
align-items: center;
line-height: 17px;
width: 2vw;
height: 2vw;
padding: 0vw 1.5vw;
justify-content: center;
}

.social-media:hover {
background-color: #d35656;
background-color: var(--darkgreen);
border: solid var(--darkgreen);
}
.social-media > a:hover {

.social-row > a:hover {
text-decoration: none;
}

.social-media > i {
font-size: 23px;
font-size: 1.5vw;
color: black;
margin: 0 auto;
padding: 3px;
vertical-align: middle;
}

@media only screen and (max-width: 1040px) {
.cards {
grid-template-columns: 2fr 50%;
}
}

@media only screen and (max-width: 600px) {
.cards {
grid-template-columns: 1fr;
}
}
54 changes: 29 additions & 25 deletions views/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,47 +66,51 @@
</div>
</div>
<!--Hero page starts-->
<div class="container-fluid mt-5">
<div class="cards-wrapper">
<ul class="cards">
<% List.forEach((obj)=>{%>
<div class="info_card">
<li>
<img src="https://avatars.githubusercontent.com/<%=obj.github_username%>" alt="<%=obj.name%>" style="width:200px;height:200px;">
<img src="https://avatars.githubusercontent.com/<%=obj.github_username%>" alt="<%=obj.name%>" onerror="this.src='https://avatars.githubusercontent.com/404'">
<div class="social-row">
<a href="https://github.com/<%=obj.github_username%>" class="social-media col" target="_blank" style="float: left">
<i class="fab fa-github"></i>
</a>
<a href="https://twitter.com/<%=obj.twitter_username%>" class="social-media col" target="_blank" style="float: right">
<i class="fab fa-twitter"></i>
</a>
</div>
<div>
<h4><%=obj.name%></h4>
<% if (obj.role){ %>
<p><%=obj.role%></p>
<p class="role"><%=obj.role%></p>
<% } else { %>
<p class="role">To be filled</p>
<% } %>
<p><%=obj.country%></p>
<p class="country"><i class="fas fa-globe-americas"></i> <%=obj.country%></p>
</div>
<div class="tech-stack">
<p>My Tech Stack:</p>
<ol>
<ul>
<% if (obj.tech_stack[0]){ %>
<li><%= obj.tech_stack[0] %></li>
<% } %>
<% if (obj.tech_stack[1]){ %>
<li><%= obj.tech_stack[1] %></li>
<% } %>
<% if (obj.tech_stack[2]){ %>
<li><%= obj.tech_stack[2] %></li>
</ol>
<% } %>
</ul>
</div>
</li>
<div class="row">
<a
href="https://github.com/<%=obj.github_username%>"
class="social-media col"
target="_blank"
>
<i class="fab fa-github-square"></i>
</a>
<a
href="https://twitter.com/<%=obj.twitter_username%>"
class="social-media col"
target="_blank"
>
<i class="fab fa-twitter-square"></i>
</a>
</div>
</div>
<%}) %>
</ul>
</ul>
</div>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="/reload/reload.js"></script>
Expand Down

0 comments on commit 045b9e3

Please sign in to comment.