diff --git a/src/cards/lovelaceCard/LovelaceCard.jsx b/src/cards/lovelaceCard/LovelaceCard.jsx new file mode 100644 index 0000000..dffb59a --- /dev/null +++ b/src/cards/lovelaceCard/LovelaceCard.jsx @@ -0,0 +1,27 @@ +import React from "react"; +import './lovelaceCard.scss' +import image from "./lovelace.png"; + +function LovelaceCard() { + return ( +
+
+ lovelace-profile +
+
+

Ada Lovelace

+

The first computer programmer

+ + Wikipedia + +
+
+ ); +} + +export default LovelaceCard; diff --git a/src/cards/lovelaceCard/lovelace.png b/src/cards/lovelaceCard/lovelace.png new file mode 100644 index 0000000..06bd426 Binary files /dev/null and b/src/cards/lovelaceCard/lovelace.png differ diff --git a/src/cards/lovelaceCard/lovelaceCard.scss b/src/cards/lovelaceCard/lovelaceCard.scss new file mode 100644 index 0000000..d818270 --- /dev/null +++ b/src/cards/lovelaceCard/lovelaceCard.scss @@ -0,0 +1,27 @@ +.lovelaceCardContainer { + background-image: linear-gradient(315deg, #ffffff 0%, #ecdbc9 34%); + display: flex; + height: 100%; + padding: 2rem 1rem; +} + +.lovelaceCardContainer .card img { + box-shadow: -5px 3px 0 5px #e2a860; +} + +.name-h3 { + color: rgb(176, 68, 0); +} + +.social-link { + background-color: #E2A860; + margin-right: 5px; + color: #000; + border: solid 1px gray; + padding: 5px; + border-radius: 10px; +} + +.text-blue { + color: rgb(29, 50, 89); +} diff --git a/src/cardsDisplay.jsx b/src/cardsDisplay.jsx index 5c4c102..ff0aecb 100644 --- a/src/cardsDisplay.jsx +++ b/src/cardsDisplay.jsx @@ -20,6 +20,7 @@ import JordanCard from "./cards/mjordanCard/jordanCard"; import RonisCard from "./cards/ronisCard/roniCard"; import ParastouCard from "./cards/parastouCard/parastouCard"; import AudreaCard from "./cards/audreasCard/audreaCard" +import LovelaceCard from "./cards/lovelaceCard/LovelaceCard"; function CardsDisplay() { const contributors = useContext(CardContext); @@ -74,6 +75,9 @@ function CardsDisplay() {
+
+ +
{Object.keys(contributors).map((contributor) => { if ( contributor !== "brielle" &&