A Pen by Simone Bernabè on CodePen.
Created
February 4, 2022 17:12
-
-
Save FReichelt/0998f99470b8f39167284548069e2413 to your computer and use it in GitHub Desktop.
Business Card / Portfolio
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body id="body" class="theme--dark"> | |
| <input id="menu" type="checkbox"> | |
| <input id="night" type="checkbox"> | |
| <div id="container"> | |
| <div class="header"> | |
| <div class="logo"></div> | |
| <label class="night-mode" for="night" onclick="enableNight()"> | |
| <i class="fa fa-moon-o"></i> | |
| </label> | |
| </div> | |
| <section class="left-section"> | |
| <img class="profile-pic" src="https://avatars2.githubusercontent.com/u/8122254?s=460&u=5ba2a8137a61e51c481226c8ff6d979a715b2531&v=4"/> | |
| <div class="profile-detail"> | |
| <span class="profile-maps"> | |
| <i class="material-icons">room</i> | |
| Trento, IT | |
| </span> | |
| <p class="profile-name">Simone Bernabè</p> | |
| <span class="profile-summary">Developer, Car Enthusiast and Modeller</span> | |
| <a class="profile-cv" href="#">Download CV</a> | |
| </div> | |
| <div class="profile-pils"> | |
| <span class="pils"><a href="https://twitter.com/simoberny" target="_blank"><i class="fa fa-twitter"></i> Twitter</a></span> | |
| <span class="pils"><a href="https://codepen.io/simoberny/" target="_blank"><i class="fa fa-codepen"></i> Codepen</a></span> | |
| <span class="pils"><a href="https://dribbble.com/simoberny" target="_blank"><i class="fa fa-dribbble"></i> Dribble</a></span> | |
| <span class="pils"><a href="https://www.linkedin.com/in/simone-bernab%C3%A8-6623a4114/" target="_blank"><i class="fa fa-linkedin"></i> Linkedin</a></span> | |
| </div> | |
| </section> | |
| <div class="front-smooth"></div> | |
| </div> | |
| </body> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let enableNight = () => { | |
| var body = document.getElementById("body"); | |
| if (body.classList.contains('theme--light')){ | |
| body.classList.remove('theme--light'); | |
| body.classList.add('theme--dark'); | |
| }else{ | |
| body.classList.remove('theme--dark'); | |
| body.classList.add('theme--light'); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css?family=Open+Sans:300, 400,600&display=swap'); | |
| * { margin: 0; box-sizing: border-box; } | |
| .theme--light { | |
| --back: #dfdfec; | |
| --element: linear-gradient(45deg, #bfbfd9, #fff); | |
| --shadow: #bfbfd9; | |
| --pils-back: rgba(0,0,0,0.05); | |
| --text-primary: #333; | |
| --text-secondary: #555; | |
| --text-third: #000; | |
| --text-cv: #1a53ff; | |
| } | |
| .theme--dark { | |
| --back: #131417; | |
| --element: linear-gradient(45deg, #101010, #2c3e50); | |
| --shadow: #3f5973; | |
| --pils-back: rgba(255,255,255,0.05); | |
| --text-primary: white; | |
| --text-secondary: #6b8cae; | |
| --text-third: #777; | |
| --text-cv: #ef5350; | |
| } | |
| input[type="checkbox"]{ | |
| z-index: -1; | |
| display: none; | |
| } | |
| a:visited, a:link{ | |
| text-decoration: none; | |
| } | |
| html, body { | |
| background: var(--back); | |
| display: flex; | |
| width: 100%; | |
| height: 100%; | |
| justify-content: center; | |
| align-items: center; | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: 0.9rem; | |
| flex-shrink: 0; | |
| } | |
| body{ | |
| transition: all 0.3s ease; | |
| } | |
| #container{ | |
| position: relative; | |
| background: var(--element); | |
| //box-shadow: 12px 12px 0 -4px var(--shadow), 0 5px 15px -4px rgba(0,0,0,0.1); | |
| box-shadow: -5px -5px 15px -4px rgba(0,0,0,0.1); | |
| overflow: hidden; | |
| transition: all 0.6s; | |
| opacity: 0; | |
| transform: scale(0.6); | |
| animation: fade_in 1s forwards; | |
| .header{ | |
| position: absolute; | |
| width: 100%; | |
| height: 65px; | |
| z-index: 50; | |
| h2{ | |
| display: inline-block; | |
| float: left; | |
| font-weight: 400; | |
| margin: 20px 20px; | |
| } | |
| .logo{ | |
| display: block; | |
| width: 65px; | |
| height: 50px; | |
| margin-left: 30px; | |
| margin-top: 20px; | |
| float: left; | |
| background: var(--logo); | |
| background-size: 100%; | |
| background-repeat: no-repeat; | |
| } | |
| .night-mode{ | |
| position: absolute; | |
| right: 0px; | |
| text-align: center; | |
| margin: 10px; | |
| width: 45px; | |
| height: 45px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| &:hover{ | |
| background: rgba(100,100,100,0.1); | |
| } | |
| &:active{ | |
| background: rgba(100,100,100,0.3); | |
| } | |
| i{ | |
| line-height: 45px; | |
| color: var(--text-primary); | |
| font-size: 16px; | |
| } | |
| } | |
| } | |
| .left-section{ | |
| height: 100%; | |
| background: rgba(0,0,0,0.1); | |
| display: flex; | |
| position: relative; | |
| justify-content: space-evenly; | |
| align-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| .profile-pic{ | |
| width: 140px; | |
| flex-basis: 140px; | |
| flex-shrink: 0; | |
| border-radius: 50%; | |
| box-shadow: inset 0 0 10px 6px rgba(0,0,0,0.2); | |
| } | |
| .profile-detail{ | |
| margin-left: 20px; | |
| .profile-name{ | |
| color: var(--text-primary); | |
| font-size: 1.45rem; | |
| padding-bottom: 10px; | |
| } | |
| .profile-maps{ | |
| display: block; | |
| margin-bottom: 10px; | |
| color: var(--text-third); | |
| font-size: 1rem; | |
| i{ | |
| color: var(--text-third); | |
| font-size: 1rem; | |
| } | |
| } | |
| .profile-summary{ | |
| color: var(--text-secondary); | |
| font-size: 0.925rem; | |
| } | |
| .profile-cv{ | |
| display: block; | |
| margin-top: 20px; | |
| color: var(--text-cv); | |
| font-weight: 700; | |
| } | |
| } | |
| } | |
| } | |
| .fa-map-marker{ | |
| padding-right: 10px; | |
| } | |
| .fa-arrow-down{ | |
| padding-left: 10px; | |
| } | |
| .profile-pils{ | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-content: space-between; | |
| .pils{ | |
| background: var(--pils-back); | |
| box-shadow: inset 0 0 0 1px var(--border), 0 10px 30px -10px rgba(0,0,0,0.12); | |
| border-radius: 60px; | |
| transition: all 0.3s; | |
| font-size: 13px; | |
| cursor: pointer; | |
| margin: 5px; | |
| color: var(--text-primary); | |
| a, a:visited, a:link{ | |
| display: block; | |
| text-decoration: none; | |
| color: var(--main-2-fore); | |
| padding: 5px 10px; | |
| i{ | |
| padding-right: 2px; | |
| } | |
| } | |
| &:nth-child(1):hover{ | |
| box-shadow: inset 0 0 0 1px #007cf8, 0 10px 35px -10px rgba(20, 122, 255, 0.5); | |
| i{ | |
| color: #007cf8; | |
| } | |
| } | |
| &:nth-child(2):hover{ | |
| box-shadow: inset 0 0 0 1px #fff, 0 10px 30px -10px rgba(100, 100, 100, 0.6); | |
| } | |
| &:nth-child(3):hover{ | |
| box-shadow: inset 0 0 0 1px #f154ff, 0 10px 35px -10px rgba(255, 59, 245, 0.5); | |
| i{ | |
| color: #f154ff; | |
| } | |
| } | |
| &:nth-child(4):hover{ | |
| box-shadow: inset 0 0 0 1px #163ca3, 0 10px 30px -10px rgba(13, 60, 121, 0.5); | |
| i{ | |
| color: #163ca3; | |
| } | |
| } | |
| } | |
| } | |
| @media screen and (min-width: 768px) { | |
| #container{ | |
| width: 540px; | |
| height: 300px; | |
| .left-section{ | |
| width: 100%; | |
| flex-direction: row; | |
| } | |
| } | |
| .profile-pic{ | |
| margin: 0 15px; | |
| } | |
| .profile-detail{ | |
| flex-basis: 400px; | |
| } | |
| .profile-pils{ | |
| justify-content: flex-end; | |
| margin: 0 10px; | |
| flex-basis: 240px; | |
| } | |
| .pop-up-menu{ | |
| width: 190px; | |
| .list-menu{ | |
| li{ | |
| font-size: 18px; | |
| text-align: right; | |
| margin-bottom: 5px; | |
| } | |
| } | |
| } | |
| } | |
| @media screen and (max-width: 768px) { | |
| #container{ | |
| flex-grow: 1; | |
| height: 100%; | |
| .left-section{ | |
| width: 100%; | |
| flex-direction: column; | |
| justify-content: center; | |
| padding: 10px; | |
| .profile-detail{ | |
| padding: 20px; | |
| } | |
| } | |
| } | |
| .profile-pils{ | |
| justify-content: center; | |
| } | |
| .pop-up-menu{ | |
| width: 100%; | |
| height: 100%; | |
| background: var(--menu); | |
| .list-menu{ | |
| margin-top: 50px; | |
| li{ | |
| font-size: 26px; | |
| text-align: center; | |
| margin-bottom: 30px; | |
| } | |
| } | |
| } | |
| } | |
| /* Action */ | |
| #night:checked{ | |
| &~.foreground .night-mode i{ | |
| color: var(--main-1-fore); | |
| } | |
| } | |
| #menu:checked { | |
| &~#container .pop-up-menu{ | |
| right: 0; | |
| transition: opacity 0.5s, right 0.3s; | |
| opacity: 1; | |
| } | |
| &~#container .menu div{ | |
| width: 20px !important; | |
| transition: all 0.3s; | |
| } | |
| &~#container .menu div:nth-child(2){ | |
| opacity: 0; | |
| } | |
| &~#container .menu div:nth-child(1){ | |
| margin-top: 30px; | |
| transform: rotateZ(-45deg); | |
| } | |
| &~#container .menu div:nth-child(3){ | |
| opacity: 0; | |
| } | |
| &~#container .works{ | |
| transform: translateX(-200px); | |
| transition: transform 0.3s; | |
| } | |
| } | |
| /* Keyframe */ | |
| @keyframes fade_in { | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment