simple web portfolio
Web fortfolio created by phseeekerunknown
plain_text
3 years ago
3.3 kB
11
Indexable
<!DOCTYPE html> <html lang="en-us"> <head> <title>portfolio </title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <style type="text/css"> @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'); *{ padding:0; margin:0; font-family: 'Josefin Sans', sans-serif; box-sizing:border-box; } body,html{ background-image:linear-gradient(#3378ff,#9442fe); background-repeat: no-repeat; height:120em; margin:0; } img{ width:200px; height:200px; margin-top:5em; margin-bottom:2em; border-radius:100%; border:1px solid silver; } /*typing effect*/ .wrapper { height: 10px; position: relative; } .typing-demo { width: 210px; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 20px; color: white; } @keyframes typing { from { width: 0; } } @keyframes blink { 50% { border-color: transparent; } } /*end of typing effects*/ h1{ color:white; transform: rotate(-10deg); margin-left:10px; font-size:25px; } h2{ color:white; margin-left:10px; margin-top:10em; font-size:30px; } /*/* From uiverse.io by @adamgiebl */ .cssbuttons-io { position: relative; font-family: inherit; font-weight: 500; font-size: 18px; letter-spacing: 0.05em; border-radius: 0.8em; border: none; background: linear-gradient(to right, #8e2de2, #4a00e0); color: ghostwhite; overflow: hidden; top:10em; outline:none; margin-left:10px; } .cssbuttons-io svg { width: 1.2em; height: 1.2em; margin-right: 0.5em; } .cssbuttons-io span { position: relative; z-index: 10; transition: color 0.4s; display: inline-flex; align-items: center; padding: 0.8em 1.2em 0.8em 1.05em; } .cssbuttons-io::before, .cssbuttons-io::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .cssbuttons-io::before { content: ""; background: #3386ff; width: 120%; left: -10%; transform: skew(30deg); transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1); } .cssbuttons-io:hover::before { transform: translate3d(100%, 0, 0); } .cssbuttons-io:active { transform: scale(0.95); } /*card*/ #card{ background:white; width:80%; height:13em; border-radius :20px; margin-top:3em; } </style> </head> <body> <h1> Phseeker </h1> <center> <img src="me.jpg"/> <div class="wrapper"> <strong><span style="color: white;"> HELLO I AM</span> <br> <div class="typing-demo"> <strong> JOSHUA <span style="color:white;">DALIVA</span></strong> </div> </div> </strong> </center> <button class="cssbuttons-io"> <span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M24 12l-5.657 5.657-1.414-1.414L21.172 12l-4.243-4.243 1.414-1.414L24 12zM2.828 12l4.243 4.243-1.414 1.414L0 12l5.657-5.657L7.07 7.757 2.828 12zm6.96 9H7.66l6.552-18h2.128L9.788 21z" fill="currentColor"></path></svg> Download cv</span> </button> <br> <br> <br><br><br> <h2>soon projects </h2> <center> <div id="card"> </div> <div id="card"> </div> <div id="card"> </div> </center> </body> </html>
Editor is loading...