<![CDATA[
<div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/XRSQHkzrQGQ?si=OdDcz9w9DFltp465" 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/XRSQHkzrQGQ?si=OdDcz9w9DFltp465" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> Build a Complete Responsive Personal Portfolio Website using HTML CSS JavaScript</b></span></p><p>HTML CSS 및 JavaScript를 사용하여 반응형 개인 포트폴리오 웹사이트 완성  3번째 줄 1번방</p><p> </p><p><br><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="en"> </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> Raju Sheoran - Frontend Web Developer </title> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="icon" type="image/x-icon" href="./Images/favicon.png"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="style.css"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" media="screen and (max-width: 821px)" href="responsive.css"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" target="_blank" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css</a>"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <style> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    @import‎ url('<a href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&family=Ubuntu:wght@300;500;700&display=swap');" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Roboto:wght@500&family=Ubuntu:wght@300;500;700&display=swap');</a></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@import‎ url('<a href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Roboto:wght@500&family=Ubuntu:wght@300;500;700&display=swap');" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Roboto:wght@500&family=Ubuntu:wght@300;500;700&display=swap');</a></b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #1f1f38; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>* { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 0px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 0px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    box-sizing: border-box; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-family: 'Ubuntu', sans-serif; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    scroll-behavior: smooth; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#navbar { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    line-height: 4rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: sticky; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    top: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    left: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    z-index: 100; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-bottom: .5px solid #ffffff52; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-width: 80%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-bottom: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#navbar ul { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    list-style: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#navbar ul li { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 0px 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#navbar ul li a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-decoration: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 0.5rem 0.9rem; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.right { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.checkBtn { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#check { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.nav-col a:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: .4rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #1f1f38; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Home Section */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.home-left, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.home-right { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 48%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.home-right { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.home-left h6, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>h4 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: hsl(240deg 8% 43%); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 1rem 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-left: 3px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 1.2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.home-left h1 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 2.5rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.home-right { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.home-right img { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    left: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    top: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-size: cover; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 62%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.circle { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 17rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 17rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: .5rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* About Section */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.about-left, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.about-right { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 48%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.about-right { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding-right: 4rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.aboout-left { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.about-left img { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 90%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.about-content p { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-bottom: 2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Skills */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#skills { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-top: 3rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.skills-left { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.skills-left img { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 70%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.skills-right { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.skillss-container { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.html { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 90%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: .5rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #e54c21; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 1rem 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 12px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.css { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 80%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: .5rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #00a0e4; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 1rem 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 12px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.js { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 65%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: .5rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: yellow; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 1rem 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 12px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bootstrap { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: .5rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #7952b3; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 1rem 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 12px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.reactjs { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 30%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: .5rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #61dafb; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 1rem 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 12px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.learning { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: .5rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #61dbfb; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 1rem 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 12px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bar { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 2rem 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bar-content { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    bottom: 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.left { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    left: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.right-skills { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    right: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Services Container */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.services-container { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    overflow: hidden; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 80%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.test-item { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 20rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 0 2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: #2c2c6c; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border: .5px solid #2c2c6c; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 1.5rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 2rem 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: all .5s; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.test-item:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: transparent; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.test-item img { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-bottom: 1.3rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 80%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.test-item h1 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 1.2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-bottom: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.services li .fa-solid { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: white; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-bottom: 1.3rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.test-item p { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    line-height: 20px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: .9rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Projects Section */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.projects-container { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    justify-content: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    flex-wrap: wrap; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.image-container { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    bottom: 2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 10rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.image-container img { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.image-container .p-one { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 200px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.p-three { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: url('project.png'); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.p-four { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: url('project.png'); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.projects-item { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    overflow: hidden; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 20rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: #2c2c6c; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 1.5rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 2rem 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.projects-item h1 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 1.2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-bottom: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.projects-item p { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    line-height: 20px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: .9rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Contact me Section */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 80%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 0 2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    justify-content: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form-div input, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>textarea { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border: 2px solid rgba(77, 181, 255, .4); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: .5rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 0.5rem 0rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: .9rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: transparent; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 0.5rem 0rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 0.5rem 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: white; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    resize: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Footer Section  */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#footer { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #4db5ff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding-bottom: 4rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>ul li { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    list-style: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 0 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>ul li a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-decoration: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 1.2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #1f1f38; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: all .5s; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>ul li a:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.font-awesome { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 1.1rem auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.font-awesome li i { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #1f1f38; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 0.6rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border: 1px solid #1f1f38; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 0.5rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: all .4s ease-in-out; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.font-awesome li i:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border: 1px solid #1f1f38; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: .5rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: transparent; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #1f1f38; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#footer p { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #1f1f38; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: .9srem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Scroll Top */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#scroll-top { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #4db5ff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #151527; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 9px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 9px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 35px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 35px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: fixed; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    bottom: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    right: 4%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    justify-content: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    z-index: 2000; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Bottom Navigator */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#bottom { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: fixed; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 6rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    justify-content: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    z-index: 1000; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    bottom: 0rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#bottom .bottom-nav { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 4rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 0 2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #151527; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 3rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    z-index: 1000; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: -webkit-inline-box; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#bottom .bottom-nav li { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 3rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 3rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: all .4s ease-in-out; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#bottom .bottom-nav ul a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-decoration: none; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#bottom .bottom-nav li:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #4db5ff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#bottom .bottom-nav li:active { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #4db5ff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.cpy-white { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: white; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Utility Classes */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.poppins { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-family: 'Poppins', sans-serif; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.roboto { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-family: 'Roboto', sans-serif; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.flex { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.s-between { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    justify-content: space-between; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.s-around { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    justify-content: space-around; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.s-center { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    justify-content: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.items-center { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.f-col { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    flex-direction: column; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.p-relative { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.t-white { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.bg-color { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #1f1f38; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.t-center { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.my-2 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 2rem 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.f-2 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.m-b-1 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-bottom: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.w-50 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.w-80 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 80%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.h-50 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 50vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.mx-1 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 0 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.m-top { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-top: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.m-auto { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-left: 0 .5rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #4db5ff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 0.75rem 1.2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border: 1px solid #4db5ff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 0.4rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: transparent; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-family: 'Poppins', sans-serif; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.buttons a, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#hireme { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-decoration: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #1f1f38; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.live { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #1f1f38; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #4db5ff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    #bottom { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#navbar { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.right { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.list { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 100vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #1f1f38; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    flex-direction: column; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: fixed; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    top: 0rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    justify-content: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    left: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: all 1s; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    z-index: 8000; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.fa-bars { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#check { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.checkBtn { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.nav-col a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#check:checked~ul { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    left: 0%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.cross { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    top: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    right: 1rems; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.cross i { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: white; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    top: 2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    left: 2rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.right-nav { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.right-nav .flex { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.services-container, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#home, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.services-container { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    flex-direction: column; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.services-container { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.about-container { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    flex-direction: column-reverse; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#home, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.about-container, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.services-container { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.home-left, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.home-right { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.services-container { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.about-left, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.about-right { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.about-right img { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 70%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.skills-left { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 80%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.skills-right { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 80%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.about-right { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-bottom: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: .5rem 1rem; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.test-item { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-bottom: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.test-item img { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@media only screen and (max-width: 470px) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    #footer .res { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        flex-direction: column; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        justify-content: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    } </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    #footer .res li { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        margin-bottom: 1rem; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    } </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    #bottom .bottom-nav { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        padding: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><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><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- Navbar Section --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <nav id="navbar" class="flex s-around bg-color"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="left-nav"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <h2 class="t-white">Raju Sheoran</h2> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="right-nav"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <ul class="flex"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><a href="#home" class="t-white roboto">Home</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><a href="#about" class="t-white roboto">About Me</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><a href="#skills" class="t-white roboto">Skills</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><a href="#services" class="t-white roboto">services</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><a href="#projects" class="t-white roboto">Projects</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </nav> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- Bottom Navigator --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <section id="bottom"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="bottom-nav flex s-center items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <ul class="flex s-around items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <a href="#home"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <li class="bottomo-hover flex s-center items-center"><i class="fa-solid fa-house"></i></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <a href="#about"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <li class="bottomo-hover flex s-center items-center"><i class="fa-solid fa-user"></i></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <a href="#skills"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <li class="bottomo-hover flex s-center items-center"><i class="fa-solid fa-code"></i></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <a href="#services"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <li class="bottomo-hover flex s-center items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <i class="fa-solid fa-rocket"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </section> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- Home Section --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <section id="home" class="flex s-around sw-80 m-auto"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="home-left flex items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="home-content"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <h6 class="poppinss">Hi, I'm</h6> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <h1 class="t-white">Raju Sheoran</h1> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <h4 class="poppinss">Frontend Web Developer</h4> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <a href="#" target="_blank"><button </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        class="btn poppins">Resume</button></a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <a class="btn live poppins" id="hireme" href="<a href="https://in.linkedin.com/in/raju-sheoran-b220781b8" target="_blank" class="ke-link">https://in.linkedin.com/in/raju-sheoran-b220781b8</a>" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    target="_blank">Let's Talk</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="home-right flex s-center items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="circle flex s-center items-center" id="mainImage"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <!-- Here in src replace the given link with your image link --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <img src="./Images/main.png" alt=""> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </section> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- About Section --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <section id="about"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <h1 class="t-center my-2 t-white f-2">About Me</h1> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="about-container flex s-around "> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class=" about-left flex s-center items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <!-- Here in src replade the given link with your secondary image link --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <img src="./Images/secondary.jpg" alt="" style="width: 50%;"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="about-right flex"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="about-content"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <h1 class="t-white m-b-1 poppins">Raju Sheoran</h1> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <p class="t-white poppins">A self-tought Frontend Web Developer BCA student looking for </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        an opportunity in Web Development. <br> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        Who is committed to study web development. Mindset to fullfill the life with </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        wonderful memories and knowledge.</p> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <a class="btn live poppins" id="hireme" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        href="<a href="https://in.linkedin.com/in/raju-sheoran-b220781b8" target="_blank" class="ke-link">https://in.linkedin.com/in/raju-sheoran-b220781b8</a>">Hire Me</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </section> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- Skills Section --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <section id="skills"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <h1 class="t-center my-2 t-white f-2">Skills</h1> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="services-container flex s-around h-50""> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class=" skills-left flex s-center items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <img src="/Images/skills.png" alt=""> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="skills-right flex items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="skillss-container"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="html bar p-relative"><span class="bar-content left t-white">HTML</span><span </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        class="bar-content right-skills t-white">90%</span></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="css bar p-relative"><span class="bar-content left t-white">CSS</span><span </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        class="bar-content right-skills t-white">80%</span></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="js bar p-relative"><span class="bar-content left t-white">JavaScript</span><span </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        class="bar-content right-skills t-white">75%</span></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="bootstrap bar p-relative"><span class="bar-content left t-white">Bootstrap</span><span </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        class="bar-content right-skills t-white">50%</span></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="reactjs bar p-relative"><span class="bar-content left t-white">ReactJs</span><span </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        class="bar-content right-skills t-white">30%</span></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </section> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- Services Section --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <section id="services"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <h1 class=" t-center my-2 t-white f-2">Services</h1> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="services-container flex s-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="test-item flex f-col items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <img src="./Images//developer.png" alt=""> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <h1 class="t-white poppins">Web Development</h1> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <p class="t-white poppins">Web Development is envolving everywhere. Every startup and every bussines </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    have their own websites. As my passion I will help you to build your clean and fast website for your </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    startup or your bussines.</p> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="test-item flex f-col items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <img src="./Images//social-media-management.png" alt=""> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <h1 class="t-white poppins">Social Media Management</h1> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <p class="t-white poppins">Social Media is the power of future. So I'll help in developing brand </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    awareness thow managing your social media handles and will to increase customer loyalty.</p> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="test-item flex f-col items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <img src="./Images//startup.png" alt=""> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <h1 class="t-white poppins">Growth Strategies</h1> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <p class="t-white poppins">As a web developer also I will help your brand to grow up . I will provide </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    the growth strategies for your brand. And also help in searching techniques for your brand.</p> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </section> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- Projects Section --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <section id="projects"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <h1 class=" t-center my-2 t-white f-2">Projects</h1> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="projects-container flex s-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="projects-item flex f-col s-center items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="image-container p-one"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <img src="./Images/weatherApp.png" alt=""> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <h1 class="t-white poppins">Weather App</h1> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <p class="t-white poppins"> A weather app using HTML, CSS and JavaScript. Fetch the weather from the </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    openweather app using fetch api.</p> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="buttons flex s-around"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <a href="#" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        target="_blanks" class="btn mx-1 m-top">GitHub</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <a href="#" target="_blanks" class="btn m-top live">Live </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        Link</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="projects-item flex f-col s-center items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="image-container p-one"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <img src="./Images/burgerKing.png" alt=""> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <h1 class="t-white poppins">Burger King</h1> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <p class="t-white poppins">A simple landing page using HTML and CSS. This webiste is for burger shop who </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    provides all the information of thir services at this landing page.</p> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="buttons flex s-around"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <a href="#" target="_blanks" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        class="btn mx-1 m-top">GitHub</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <a href="#" target="_blanks" class="btn m-top live">Live </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        Link</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="projects-item flex f-col s-center items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="image-container p-two"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <img src="./Images/MBA.png" alt=""> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <h1 class="t-white poppins">MBA Chai Wala</h1> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <p class="t-white poppins">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic obcaecati cum </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    nemo </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    recusandae voluptas ipsum.s</sp> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="buttons flex s-around"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <a href="#" target="_blank" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        class="btn mx-1 m-top">GitHub</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <a href="#" target="_blank" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        class="btn m-top live">Live Link</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="projects-item flex f-col s-center items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="image-container p-three"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <img src="./Images/magicNotes.png" alt=""> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <h1 class="t-white poppins">Magic Notes App</h1> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <p class="t-white poppins">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic obcaecati cum </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    nemo </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    recusandae voluptas ipsum.s</p> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="buttons flex s-around"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <a href="#" target="_blank" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        class="btn mx-1 m-top">GitHub</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <a href="#" target="_blank" class="btn m-top live">Live </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        Link</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="projects-item flex f-col s-center items-center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="image-container p-three"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <img src="./Images/login.png" alt=""> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <h1 class="t-white poppins">Login Form</h1> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <p class="t-white poppins">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic obcaecati cum </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    nemo </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    recusandae voluptas ipsum.s</p> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="buttons flex s-around"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <a href="#" target="_blank" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        class="btn mx-1 m-top">GitHub</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <a href="#" target="_blank" class="btn m-top live">Live </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        Link</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </section> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- Contact Me Section --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <section id="contact" class="m-b-1"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <h1 class=" t-center my-2 t-white f-2">Contact Me</h1> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="contact-container flex s-around items-centers"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="form" id="contactForm"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <form action="" id="contactFrom"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <div class="name form-div"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <input type="text" name="name" id="name" class="poppins" placeholder="Enter Your Name"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <div class="email form-div"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <input type="email" name="email" id="email" class="poppins" placeholder="Enter Your Email" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            required> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <div class="phone form-div"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <input type="phone" name="phone" id="phone" class="poppins" placeholder="Enter Your Phone" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            required> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <div class="textarea form-div"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <textarea name="text" id="textarea" cols="30" rows="10" class="poppins" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            placeholder="Enter Messages"></textarea> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <button type="submit" class="btn poppins" id="submit">Send</button> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </form> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </section> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- Footer Section --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <footer id="footer"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <ul class="flex s-center w-80 m-auto my-2 res"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <li><a href="#home" class="poppinss">Home</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <li><a href="#about" class="poppinss">About</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <li><a href="#skills" class="poppinss">Skills</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <li><a href="#projects" class="poppinss">Projects</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <li><a href="#portfolio" class="poppinss">Portfolio</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <ul class="flex s-center w-80 font-awesome "> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <a href="<a href="https://in.linkedin.com/in/raju-sheoran-b220781b8" target="_blank" class="ke-link">https://in.linkedin.com/in/raju-sheoran-b220781b8</a>" target="_blank"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><i class="fa-brands fa-linkedin-in"></i></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <a href="<a href="https://github.com/rajusheoran4" target="_blank" class="ke-link">https://github.com/rajusheoran4</a>" target="_blank"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><i class="fa-brands fa-github"></i></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <a href="<a href="https://www.instagram.com/raju_webdev" target="_blank" class="ke-link">https://www.instagram.com/raju_webdev</a>" target="_blank"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><i class="fa-brands fa-instagram"></i></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <a href="<a href="https://www.youtube.com/channel/UC6ScgVJbFPpHAnRdrOSJMlg" target="_blank" class="ke-link">https://www.youtube.com/channel/UC6ScgVJbFPpHAnRdrOSJMlg</a>" target="_blank"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <li><i class="fa-brands fa-youtube"></i></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <p class="t-center my-2 poppins">&copy; All Rights Reserved - <span class="cpy-white poppins">Raju </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                Sheoran</span></p> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </footer> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div id="scroll-top" xxxxonclick="scrolltop()"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <span><i class="fa-solid fa-arrow-up"></i></span> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><script src="/script.js"></script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>function scrolltop() { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    let a = window.document; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    a = location.href = '#home'; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>let contact = document.getElementById('contactForm'); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>contact.addEventListener('submit', function (e) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    e.preventDefault(); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    alert(‎`Sorry Request cannot be accepted due to some technical errors`); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}) </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></script> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html></b></span> <br><br><br><br><br><br><br><br><br><br><br><br><br></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>html</b></span></p>
<!-- -->
]]>
카페 게시글
♥☞JAVA 영상방◈▶
Website using HTML CSS JavaScript
gyun님
추천 0
조회 7
24.01.01 08:06
댓글 2
북마크 번역하기 공유하기 기능 더보기
다음검색
첫댓글 https://www.google.com/search?q=Build+a+Complete+Responsive+Personal+Portfolio+Website+using+HTML+CSS+JavaScript&sca_esv=594802245&rlz=1C1NDCM_koKR825KR825&tbm=isch&sxsrf=AM9HkKnnZzNZcFcjTIQ3uUArnKQ6MnGnzA:1704064040615&source=lnms&sa=X&ved=2ahUKEwi_yMKe5bqDAxW3sFYBHdCvDl4Q_AUoAnoECAUQBA&biw=1366&bih=641&dpr=1 이미지
3qjs1wnf https://www.geekshelp.in/2022/12/complete-responsive-personal-portfolio-website-only-using-html-css.html