-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
634d62d
commit 3082890
Showing
1 changed file
with
192 additions
and
0 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,192 @@ | ||
| <html><head> | ||
| <title>Contact</title> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald"> | ||
|
|
||
| <link rel="icon" type="image/x-icon" href="https://koalateen.github.io/img/favicon.ico"> | ||
|
|
||
| </head> | ||
| <style> | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
| body { | ||
| height: 100vh; | ||
| display: -webkit-box; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-box-pack: center; | ||
| -ms-flex-pack: center; | ||
| justify-content: center; | ||
| -webkit-box-align: center; | ||
| -ms-flex-align: center; | ||
| align-items: center; | ||
| -webkit-perspective: 1000px; | ||
| perspective: 1000px; | ||
| -webkit-transform-style: preserve-3d; | ||
| transform-style: preserve-3d; | ||
| position: relative; | ||
| background-color: #111; | ||
| font-family: "Montserrat"; | ||
|
|
||
| } | ||
|
|
||
| .container { | ||
| min-width: 700px; | ||
| min-height: 350px; | ||
| border-radius: 20px; | ||
| position: relative; | ||
| -webkit-transition: 1.5s ease-in-out; | ||
| transition: 1.5s ease-in-out; | ||
| transform-style: preserve-3d; | ||
| } | ||
|
|
||
| .side { | ||
| position: absolute; | ||
| text-align: center; | ||
| width: 100%; | ||
| height: 100%; | ||
| padding: 20px 50px; | ||
| color: #fff; | ||
| transform-style: preserve-3d; | ||
| backface-visibility: hidden; | ||
| border-radius: 20px; | ||
| } | ||
| a{ | ||
| text-decoration: none; | ||
| color:white; | ||
|
|
||
| font-weight:700; | ||
| } | ||
| .content { | ||
| transform: translatez(70px) scale(0.8); | ||
| line-height: 1.5em; | ||
| } | ||
| .content h1 { | ||
| position: relative; | ||
| } | ||
| .content p { | ||
| margin-top: 50px; | ||
| line-height: 2em; | ||
| } | ||
| .content h1:before { | ||
| content: ""; | ||
| position: absolute; | ||
| bottom: -20px; | ||
| height: 3px; | ||
| background-color: #3e3; | ||
| width: 70px; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| } | ||
| .front { | ||
| z-index: 2; | ||
| background-size: 100vh; | ||
| background-size: cover; | ||
| background-image: url(https://koalateen.github.io/img/profilecard.jpg); | ||
| } | ||
| .back { | ||
| background-color: #333; | ||
| transform: rotateY(180deg); | ||
| z-index: 0; | ||
| padding-top: 10px; | ||
| background-image: url(https://koalateen.github.io/img/profilecard.jpg); | ||
| } | ||
| .container:hover { | ||
| -webkit-transform: rotateY(180deg); | ||
| transform: rotateY(180deg); | ||
| } | ||
| form { | ||
| text-align: left; | ||
| } | ||
| .back h1 { | ||
| margin: 0; | ||
| } | ||
| form label, | ||
| form input { | ||
| display: block; | ||
| } | ||
| form input, | ||
| form textarea { | ||
| background: transparent; | ||
| border: 0; | ||
| border-bottom: 2px solid #444; | ||
| padding: 5px; | ||
| width: 100%; | ||
| color: #fff; | ||
| } | ||
| form label { | ||
| margin: 15px 0; | ||
| } | ||
| .downloadbtn{ | ||
| text-decoration: none; | ||
|
|
||
| background-color: #122; | ||
| border-radius: 3px; | ||
| color: #fff; | ||
| transition: 0.35s ease-in-out; | ||
|
|
||
|
|
||
| text-align:center; | ||
| font-family: "Montserrat"; | ||
| display: block; | ||
| width: auto; | ||
|
|
||
| border: 3px solid #555; | ||
| border-radius: 4px; | ||
| color: #fff; | ||
| cursor: pointer; | ||
|
|
||
| } | ||
| /* my button style */ | ||
| .white-mode { | ||
| text-decoration: none; | ||
| padding: 7px 10px; | ||
| background-color: #122; | ||
| border-radius: 3px; | ||
| color: #fff; | ||
| transition: 0.35s ease-in-out; | ||
| position: fixed; | ||
|
|
||
| font-family: "Montserrat"; | ||
| } | ||
|
|
||
| .white-mode:hover { | ||
| opacity:75%; | ||
|
|
||
| } | ||
|
|
||
|
|
||
| </style> | ||
| <div class="container"> | ||
| <div class="front side"> | ||
| <div class="content"> | ||
| <h1>Marco van der Vlag</h1> | ||
| <p>I am a young learning webdesigner. If you want to get in contact with me please contact me on one of these platforms. | ||
| </p> | ||
| <li>E-mail</li> | ||
| <li>Whatsapp</li> | ||
| <li>Download my CV</li> | ||
| </div> | ||
| </div> | ||
| <div class="back side"> | ||
| <div class="content"> | ||
| <h1>Contact Me</h1> | ||
| <form> | ||
| <label>E-mail :</label> | ||
| <a href="mailto:marcovandervlag@outlook.com"id="cvregel1">marcovandervlag@outlook.com</a> | ||
| <label>Phone number :</label> | ||
| +31 6 57253820 | ||
| <label>Download my CV</label> | ||
| <button class="white-mode"><i class="fa fa-download"></i><a href="https://koalateen.github.io/img/cv.pdf" download="proposed_file_name" class="downloadbtn1"> Download</a></button> | ||
|
|
||
| </form> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </html> |