Skip to content

Commit

Permalink
Merge pull request #148 from Manik445/manik
Browse files Browse the repository at this point in the history 
Hover effect in organisations cards for grow out effect and adding po…
  • Loading branch information
@skyrmi
skyrmi committed Feb 16, 2023
2 parents 26a6623 + e26e2cf commit 46fa76c
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 3 deletions.
13 changes: 13 additions & 0 deletions src/components/organisations/organisations.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,3 +187,16 @@
border-style: none;
border-radius: 5px;
}

.orgs-image-container .orgs-image-rows .CardItem{
transition: all 500ms ease-in-out;
}

.orgs-image-container .orgs-image-rows .CardItem:hover {
cursor: pointer;
/* box-shadow: 0px 12px 30px 0px rgba(0, 0, 0, 0.9); */
transform: scale(1.3);
/* border: none; */
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}

32 changes: 32 additions & 0 deletions src/components/organisations/organisations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ const Organisations = (props) => {
</div>
<div className="orgs-image-container">
<div className="orgs-image-rows row-stretch">
<div className="CardItem">
<a
href="https://moja.global/"
alt="Moja Global"
Expand All @@ -61,6 +62,8 @@ const Organisations = (props) => {
alt="Moja Global logo"
></img>
</a>
</div>
<div className="CardItem">
<a
href="https://gdevelop.io/"
alt="GDevelop"
Expand All @@ -72,6 +75,8 @@ const Organisations = (props) => {
alt="GDevelop logo"
></img>
</a>
</div>
<div className="CardItem">
<a
href="https://polyaxon.com/"
alt="Polyaxon"
Expand All @@ -83,6 +88,10 @@ const Organisations = (props) => {
alt="Polyaxon logo"
></img>
</a>
</div>
<div className="CardItem">
</div>
<div className="CardItem">
<a
href="https://opencodeyard.tech/"
alt="openCY"
Expand All @@ -94,9 +103,11 @@ const Organisations = (props) => {
alt="openCY logo"
></img>
</a>
</div>
</div>

<div className="orgs-image-rows row-stagger">
<div className="CardItem">
<a
href="https://www.clueless.tech/"
alt=""
Expand All @@ -108,6 +119,8 @@ const Organisations = (props) => {
alt="clueless logo"
></img>
</a>
</div>
<div className="CardItem">
<a
href="https://github.com/orgs/asyncapi/discussions/556"
alt="ASyncAPI"
Expand All @@ -119,6 +132,8 @@ const Organisations = (props) => {
alt="Async API logo"
></img>
</a>
</div>
<div className="CardItem">
<a
href="https://eduhub.technology/"
alt="EduHub"
Expand All @@ -130,6 +145,8 @@ const Organisations = (props) => {
alt="Eduhub logo"
></img>
</a>
</div>
<div className="CardItem">
<a
href="https://hackforcode.hashnode.dev/"
alt="HackForCode"
Expand All @@ -141,9 +158,11 @@ const Organisations = (props) => {
alt="HackForCode logo"
></img>
</a>
</div>
</div>

<div className="orgs-image-rows row-stretch">
<div className="CardItem">
<a
href="https://vedvyas.org/"
alt="GitaInit"
Expand All @@ -155,6 +174,8 @@ const Organisations = (props) => {
alt="Gita Init logo"
></img>
</a>
</div>
<div className="CardItem">
<a
href="https://www.open-emr.org/winter-of-code/"
alt="OpenEMR"
Expand All @@ -166,6 +187,8 @@ const Organisations = (props) => {
alt="OpenEMR logo"
></img>
</a>
</div>
<div className="CardItem">
<a
href="https://github.com/Code4GovTech/C4GT/wiki/Samagra-:-WoC-3.0-Project-Ideas"
alt="SamagraX"
Expand All @@ -177,6 +200,8 @@ const Organisations = (props) => {
alt="samagraX logo"
></img>
</a>
</div>
<div className="CardItem">
<a
href="https://devscript.org/"
alt="DevScript"
Expand All @@ -188,9 +213,11 @@ const Organisations = (props) => {
alt="devscript logo"
></img>
</a>
</div>
</div>

<div className="orgs-image-rows row-stagger">
<div className="CardItem">
<a
href="http://www.styava.com/"
alt="styava"
Expand All @@ -202,13 +229,17 @@ const Organisations = (props) => {
alt="styavaDev logo"
></img>
</a>
</div>
<div className="CardItem">
<a
href="https://www.alpha-dot.co.uk/"
alt="alpha dot"
rel="noopener noreferrer"
>
<img className="org-image" src={alphadot} alt="alpha dot"></img>
</a>
</div>
<div className="CardItem">
<a
href="https://developers.google.com/community/gdsc"
alt="GDSC"
Expand All @@ -220,6 +251,7 @@ const Organisations = (props) => {
alt="GDSC logo"
></img>
</a>
</div>
</div>

<div className="orgs-image-rows"></div>
Expand Down
50 changes: 47 additions & 3 deletions src/components/projects/project.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,16 +98,60 @@
}

.projects-button {
background-color: white;
/* background-color: white;
color: #042042;
font-weight: 1000;
font-size: calc(1em);
margin-top: 7.5%;
padding: 3% 8% 3% 8%;
border-style: none;
border-radius: 15px;
transition: all 0.5s;
}
transition: all 0.5s; */
align-items: center;
appearance: none;
background-color: #FCFCFD;
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: #36395A;
cursor: pointer;
display: inline-flex;
font-family: "JetBrains Mono",monospace;
height: 48px;
justify-content: center;
line-height: 1;
list-style: none;
overflow: hidden;
/* padding-left: 16px;
padding-right: 16px; */
padding: 3% 8% 3% 8%;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(1em);

}

.projects-button:focus {
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.projects-button:hover {
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}

.projects-button:active {
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}

@media screen and (max-width: 1200px) {
.projects-image-grid {
Expand Down

0 comments on commit 46fa76c

Please sign in to comment.