<![CDATA[
<div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/S9NOXjdipl4?si=4xGXu-zE1D52--9A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>"><div data-ke-class="article"><iframe width="560" height="315" src="https://www.youtube.com/embed/S9NOXjdipl4?si=4xGXu-zE1D52--9A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><p>Animated Portfolio Website Template in HTML CSS & JS | Personal Website with Text Typing</p><p> </p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html>         </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="KO"></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta charset="UTF-8"></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta http-equiv="X-UA-Compatible" content="IE=edge"></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta name="viewport" content="width=device-width, initial-scale=1.0"></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>Card Website</title><br></b></span>    <span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> <span style="color: #4f5d6a; background-color: #f5f5f5;"><</span><span style="color: #0986ff; background-color: #f5f5f5;"><span style="color: #0986ff;">link</span></span> <span style="color: #4f9fcf; background-color: #f5f5f5;"><span style="color: #4f9fcf;">href</span></span><span style="color: #4f5d6a; background-color: #f5f5f5;">=</span><span style="color: #d35e5e; background-color: #f5f5f5;"><span style="color: #d35e5e;">'<a href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'" target="_top" class="ke-link">https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'</a></span></span> <span style="color: #4f9fcf; background-color: #f5f5f5;"><span style="color: #4f9fcf;">rel</span></span><span style="color: #4f5d6a; background-color: #f5f5f5;">=</span><span style="color: #d35e5e; background-color: #f5f5f5;"><span style="color: #d35e5e;">'stylesheet'</span></span><span style="color: #4f5d6a; background-color: #f5f5f5;">></span></b></span> <br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="style.css"></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b><style></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>* {</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>    margin: 0;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>    padding: 0;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>    box-sizing: border-box;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>    font-family: 'poppins', sans-serif;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>}</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>body {</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>       background: #1f242d;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>}</b></span></p><p style="text-align: left;"> </p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>.header {</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>       position: fixed;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>       top: 0;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>       left: 0;<br>       width: 100%;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>       padding: 20px 10%;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>       background: transparent;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>       display: flex;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>       justify-content: space-between;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>       align-items: center;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>       z-index: 100;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>}</b></span></p><p style="text-align: left;"> </p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>.logo {</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>        font-size: 25px;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>        color: #fff;</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>        text-decoration: none;    30</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>}</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b></style></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       <header class="header"></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                 <a href="#" class="logo">SEONGGYUN님 홈피.</a></b></span></p><p style="text-align: left;"> </p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                 <nav class="navbar"></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                          <a href="#">Home</a></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                          <a href="#">About </a></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                          <a href="#">Skillo </a></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                          <a href="#">Portfolio</a></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                          <a href="#">Contact</a> </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                 </nav></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      </header></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      <section class="home"></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>               <div class="home-content"></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                       <h3>Hello, lt's Me</h3></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                       <h1>John Kerndric</h1></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                       <h3>Andl'm a <span>Frontend Developl</span></h3></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                      <p></b></span><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>Lorem ipsum dolor sit amet, consectertur adipisicing alit </b></span><b></b><b></b></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>                     Possimus nullo </b></span><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>sed saepe rerum, animi expedita</b></span><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></p></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                      <div class="social-media"></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                              <a href="#"><i class="bx bx1-facebook"></b></span><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></li></a></b></span></p><p style="text-align: left;"> </p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                              <a href="#"><i class="bx bx1-twitter"></li></a></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                              <a href="#"><i class="bx bx1-instagram-alt"></li></a></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                              <a href="#"><i class="bx bx1-linkedin"</lio></a> </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                     </div></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                     <a href="#" class="btn">Down load CV</a></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>               </div></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>               <div class="home-img"></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                       <img src="home.png" alt=""></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>               </div></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      </section></b></span></p><p style="text-align: left;"> </p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      <script src="script.js"></script  ></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body></b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html></b></span></p><p style="text-align: left;"> </p><p style="text-align: left;"> </p><p style="text-align: left;"> </p><p style="text-align: left;"> </p><p style="text-align: left;"> </p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>꿀팁: html&css52 tag A </b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>boxicons.com [ <a href="https://boxicons.com/" target="_blank" class="ke-link">https://boxicons.com/</a> ]</b></span></p><p style="text-align: left;"> </p><p style="text-align: left;"> </p><p style="text-align: left;"> </p><p style="text-align: left;"> </p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>Porttollo.                                 Home  About   Skillo  Portfolio  Contact</b></span></p><p style="text-align: left;"> </p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>Hello, lt's Me _  John Kerndric _ Andl'm a Frontend Developl</b></span></p><p style="text-align: left;"> </p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>Lorem ipsum dolor sit amet, consectertur adipisicing alit Possimus nullo</b></span></p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>sed saepe rerum, animi exp;edita   Download Cv</b></span></p><p style="text-align: left;"> </p><p style="text-align: left;"> </p><p style="text-align: left;"> </p><p style="text-align: left;"> </p><p style="text-align: left;"> </p><p style="text-align: left;"> </p><p style="text-align: left;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>꿀팁: html&css52 tag B</b></span></p><p> </p><p> </p><p> </p><p> </p><p>Animated Portfolio Website Template in HTML CSS & JS | Personal Website with Text Typing</p>
<!-- -->]]>
카페 게시글
검색이 허용된 게시물입니다.
◈─---… HTML 소스실
Personal Website with Text Typing
gyun님
추천 0
조회 3
23.11.20 15:36
댓글 2
다음검색
첫댓글 https://www.google.com/search?q=Animated+Portfolio+Website+Template+in+HTML+CSS+%26+JS+%7C+Personal+Website+with+Text+Typing+Animation&client=avast-a-1&sca_esv=583899177&tbm=isch&sxsrf=AM9HkKlk5UFQpaH82-G8PSP9r8J_uiuaBA:1700462311934&source=lnms&sa=X&ved=2ahUKEwjB3Lng-9GCAxURdfUHHXDJAwAQ_AUoAXoECAQQAw&biw=1920&bih=958&dpr=1
옷구매 https://www.pinterest.co.kr/news_hub/5331996969237798571/?utm_campaign=HOMEFEED_NEW_PINS&utm_medium=2902&utm_source=67&e_t=XDgSgKLKw%3A147&tracking_id=738d91f4fee043fc9076459087a0fc1a&scoring_id=738d91f4fee043fc9076459087a0fc1a&snapshot_id=193d761cb1e248c7a65b05d128070c68