diff --git a/assets/cat.png b/assets/cat.png new file mode 100644 index 00000000..c9883ae5 Binary files /dev/null and b/assets/cat.png differ diff --git a/assets/creative-coder.png b/assets/creative-coder.png deleted file mode 100644 index f92b313d..00000000 Binary files a/assets/creative-coder.png and /dev/null differ diff --git a/index.html b/index.html index 42b5ba47..7af75473 100644 --- a/index.html +++ b/index.html @@ -1,59 +1,74 @@ - + - - - FDND Visitekaartje - + + + + + Halima's card - -
- -
- -

Jane Doe

- -

Creatieve Frontend Developer in spé

- - - -
- - - -
-
HTML
-
🏆🏆🏆
- -
CSS
-
🏆🏆
- -
JavaScript
-
🏆🏆🏆🏆
-
- -

Het WEB is te gek!
Met HTML, CSS en JS kan ik vette, interactieve web apps maken.

- -
- - - + +

Hello, I'm Halima!

+ +
+ +
+ +
+ +
+ +

Technical Skills

+ +
+ +
    +
  • HTML
    • +
  • CSS
    • +
  • Javascript & Typescript
    • +
  • SQL
    • +
+ +
+ +

Hobbies & Interests

+ +
+
+ palette + Digital art +
+
+ movie + Movies +
+
+ book + Reading +
+
+ + +

Contact Me!

+ +
+
+ location_on + Amsterdam, Noord-Holland +
+
+ email + dinleh@hva.com +
+
+ link + >GitHub +
+
+ +
+
+ diff --git a/style.js b/style.js new file mode 100644 index 00000000..66d4285a --- /dev/null +++ b/style.js @@ -0,0 +1,15 @@ +function expand() { + const cardTwo = document.getElementById("card-two"); + const cardContainer = document.querySelector(".card-container"); + + cardTwo.classList.toggle('visible'); + + if(cardTwo.classList.contains('visible')) { + cardTwo.style.display = "block"; + cardContainer.classList.add("expanded"); + } else { + cardTwo.style.display = "none"; + cardContainer.classList.remove("expanded"); + } + +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 5bf9573f..27afdec4 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,173 +1,175 @@ * { - box-sizing: border-box; -} - -html { - height: 100vh; + padding: 0; + margin: 0; } body { + height: 100vh; + width: 100vw; display: flex; justify-content: center; align-items: center; - height: 100vh; - font-family: open sans; - color: #10214e; + flex-direction: column; + background-color: #E3E0DA; } -article { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-end; - width: 50vw; - max-width: 25em; - min-width: 20em; - border-radius: 1rem; - background: rgb(0,239,255); - background: linear-gradient(0deg, rgba(0,239,255,1) 40%, #4e54c8 100%); - box-shadow: 0 0 20px 20px rgba(0,0,0,.1); - transition: .25s; -} - -header { +/* Title styling*/ + +#title { + font-family:Lucida; + font-weight: bolder; + color: black; + text-align: center; + margin-bottom: 20px; + animation: zoomup 2s ease; + animation-delay: calc(200ms * var(--i)); +} + +/* Cards & Card container styling*/ +.card-container { display: flex; - flex-direction: column; justify-content: center; align-items: center; - justify-content: flex-end; + position: relative; + transition: transform 0.3s ease; + cursor: pointer; } -h1 { - margin: 2rem 0 1rem; - color: rgba(0,239,255,1); +.card { + width: 200px; + height: 400px; + border: 3px black solid; + margin-right: 20px; } -button { - position: absolute; - right: 1rem; - top: 1rem; - width: 2.5rem; - height: 2.5rem; - padding: .25rem; - border: none; - border-radius: 50%; - background: rgba(0,239,255,1); - transform: scale(.8); - transition: .25s; -} -button:focus { - outline: none; - background: #202592; -} -button:focus svg { - stroke: rgba(0,239,255,1); -} - -svg { +#card-one { + background-color: #160201; + border-radius: 0.2em; + box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; + color: white; + padding: 10px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + z-index: 100; +} + +#card-one img { + height: 400px; + width: 190px; + object-fit: cover; +} + +#card-two { + background-color: #160201; + color: #E3E0DA; + font-family: sans-serif; + display: none; + padding: 10px; + border-radius: 0em 1em 1em 0em; + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; + animation: animatetop 0.3s ease; + height: 386px; + width: 620px; position: absolute; - top: calc(1.25rem - 12px); - left: calc(1.25rem - 12px); - stroke: #4e54c8; - transition-delay: .25s; + top: 0.5em; + bottom: 0.5em; + left: 220px; + overflow: hidden; } -button svg:nth-of-type(2) { - opacity: 0; - transition-delay: 0ms; + +/* Skills, hobby's and contact info styling*/ + +.hobbies-title { + font-family:Lucida; + margin-top: 1em; + margin-bottom: 1em; } -img { - position: relative; - top: 2rem; - width: 10em; - height: auto; - border: 5px solid #fff; - border-radius: 10em; - box-shadow: 0 0 2px 2px rgba(0,0,0,.2); - transition: .25s .15s; -} - -dl { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-template-areas: - "html-dd css-dd js-dd" - "html-dt css-dt js-dt" - ; - justify-items: center; - align-items: start; - width: 100%; - margin-top: -3rem; - margin-bottom: 0; - padding: 5rem 0 3rem; - text-align: center; - background: rgb(255,255,255); -} - -dt { - margin-top: .25rem; - padding-top: .25rem; - border-top: 1px solid rgba(0,0,0,0.3); - font-weight: bold; -} -dt:nth-of-type(1) { - grid-area: html-dt; -} -dt:nth-of-type(2) { - grid-area: css-dt; - transform: translateY(1rem); -} -dt:nth-of-type(3) { - grid-area: js-dt; -} - -dd { - margin: 0; - padding-left: .3rem; - transition: .25s .3s; +.hobbies-info { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + gap: 3em; + font-size: small; } -dd:nth-of-type(2){ - transform: translateY(1rem); + +.hobbies-item { + display: flex; + flex-direction: column; + align-items: center; } -p { - margin: 0; +#skills-title{ + font-family: Lucida; + font-weight: bolder; + margin-top: 1em; +} + +.skills-list { + display: flex; + flex-wrap: wrap; + list-style-type: none; + margin-top: 1em; } -article > p { - width: 100%; - margin-top: 0; - padding: 3rem 2rem; - border-radius: 0 0 1rem 1rem; - text-align: center; - background: rgba(255,255,255, 0.5); +.skills-list li { + flex: 1 1 50%; + box-sizing: border-box; + padding: 5px; + font-size: small; } -/* expand content */ -body.expand { - font-size: 1.15em; +#icons-hobby{ + margin-bottom: 0.5em; } -body.expand article { - width: 60vw; - max-width: 60vw; +#contact-title{ + font-family:Lucida Sans; + margin-top: 3em; + margin-bottom: 1em; + } + +.contact-info { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + gap: 3em; + font-size: small; } -body.expand button svg:first-of-type { - opacity: 0; - transition-delay: 0ms; +.contact-item { + display: flex; + flex-direction: column; + align-items: center; } -body.expand button svg:nth-of-type(2) { - opacity: 1; - transition-delay: .25s; +/* Animation for title and card */ + + +@keyframes zoomup { + 0%, + 100% { + transform: scale(1); + } + + 50% { + transform: scale(1.2) translateY(-50px); + filter: blur(1px); + opacity: 0; + } } -body.expand dd { - font-size: 1.75em; +@keyframes animatetop { + from { + width: 0; + } + to { + width: 500px; + } } -body.expand img { - width: 15em; +.expanded { + transform: translateX(-120px); }