<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>index_html</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> index_css5 </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> index_javascript</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><br><!DOCTYPE html <br><html lang="en <br><head <br>    <meta charset="UTF-8 <br>    <meta http-equiv="X-UA-Compatible" content="IE=edge <br>    <meta name="viewport" content="width=device-width, initial-scale=1.0 <br>    <title> Raju Sheoran - Frontend Web Developer </title <br>    <link rel="icon" type="image/x-icon" href="./Images/favicon.png <br>    <link rel="stylesheet" href="style.css <br>    <link rel="stylesheet" media="screen and (max-width: 821px)" href="responsive.css <br>    <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><br></head <br><body> <br><br>    <!-- Navbar Section --> <br>    <nav id="navbar" class="flex s-around bg-color <br>        <div class="left-nav <br>            <h2 class="t-white">Raju Sheoran</h2 <br>        </div> <br>        <div class="right-nav"> <br>            <ul class="flex"> <br>                <li><a href="#home" class="t-white roboto">Home</a></li> <br>                <li><a href="#about" class="t-white roboto">About Me</a></li> <br>                <li><a href="#skills" class="t-white roboto">Skills</a></li> <br>                <li><a href="#services" class="t-white roboto">services</a></li> <br>                <li><a href="#projects" class="t-white roboto">Projects</a></li> <br>            </ul> <br>        </div> <br>    </nav> <br><br>    <!-- Bottom Navigator --> <br>    <section id="bottom"> <br>        <div class="bottom-nav flex s-center items-center"> <br>            <ul class="flex s-around items-center"> <br>                <a href="#home"> <br>                    <li class="bottomo-hover flex s-center items-center"><i class="fa-solid fa-house"></i></li> <br>                </a> <br>                <a href="#about"> <br>                    <li class="bottomo-hover flex s-center items-center"><i class="fa-solid fa-user"></i></li> <br>                </a> <br>                <a href="#skills"> <br>                    <li class="bottomo-hover flex s-center items-center"><i class="fa-solid fa-code"></i></li> <br>                </a> <br>                <a href="#services"> <br>                    <li class="bottomo-hover flex s-center items-center"> <br>                        <i class="fa-solid fa-rocket"></i> <br>                    </li> <br>                </a> <br>            </ul> <br>        </div> <br>    </section> <br><br>    <!-- Home Section --> <br>    <section id="home" class="flex s-around sw-80 m-auto"> <br>        <div class="home-left flex items-center"> <br>            <div class="home-content"> <br>                <h6 class="poppinss">Hi, I'm</h6> <br>                <h1 class="t-white">Raju Sheoran</h1> <br>                <h4 class="poppinss">Frontend Web Developer</h4> <br>                <a href="#" target="_blank"><button <br>                        class="btn poppins">Resume</button></a> <br>                <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>" <br>                    target="_blank">Let's Talk</a> <br>            </div> <br>        </div> <br>        <div class="home-right flex s-center items-center"> <br>            <div class="circle flex s-center items-center" id="mainImage"> <br>                <!-- Here in src replace the given link with your image link --> <br>                <img src="./Images/main.png" alt=""> <br>            </div> <br><br>        </div> <br>    </section> <br><br>    <!-- About Section --> <br>    <section id="about"> <br>        <h1 class="t-center my-2 t-white f-2">About Me</h1> <br>        <div class="about-container flex s-around "> <br>            <div class=" about-left flex s-center items-center"> <br>                <!-- Here in src replade the given link with your secondary image link --> <br>                <img src="./Images/secondary.jpg" alt="" style="width: 50%;"> <br>            </div> <br><br>            <div class="about-right flex"> <br>                <div class="about-content"> <br>                    <h1 class="t-white m-b-1 poppins">Raju Sheoran</h1> <br>                    <p class="t-white poppins">A self-tought Frontend Web Developer BCA student looking for <br>                        an opportunity in Web Development. <br> <br>                        Who is committed to study web development. Mindset to fullfill the life with <br>                        wonderful memories and knowledge.</p> <br>                    <a class="btn live poppins" id="hireme" <br>                        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> <br>                </div> <br>            </div> <br>        </div> <br>    </section> <br><br>    <!-- Skills Section --> <br>    <section id="skills"> <br>        <h1 class="t-center my-2 t-white f-2">Skills</h1> <br>        <div class="services-container flex s-around h-50""> <br>        <div class=" skills-left flex s-center items-center"> <br>            <img src="/Images/skills.png" alt=""> <br>        </div> <br><br>        <div class="skills-right flex items-center"> <br>            <div class="skillss-container"> <br>                <div class="html bar p-relative"><span class="bar-content left t-white">HTML</span><span <br>                        class="bar-content right-skills t-white">90%</span></div> <br>                <div class="css bar p-relative"><span class="bar-content left t-white">CSS</span><span <br>                        class="bar-content right-skills t-white">80%</span></div> <br>                <div class="js bar p-relative"><span class="bar-content left t-white">JavaScript</span><span <br>                        class="bar-content right-skills t-white">75%</span></div> <br>                <div class="bootstrap bar p-relative"><span class="bar-content left t-white">Bootstrap</span><span <br>                        class="bar-content right-skills t-white">50%</span></div> <br>                <div class="reactjs bar p-relative"><span class="bar-content left t-white">ReactJs</span><span <br>                        class="bar-content right-skills t-white">30%</span></div> <br>            </div> <br>        </div> <br>        </div> <br>    </section> <br><br>    <!-- Services Section --> <br>    <section id="services"> <br>        <h1 class=" t-center my-2 t-white f-2">Services</h1> <br>        <div class="services-container flex s-center"> <br>            <div class="test-item flex f-col items-center"> <br>                <img src="./Images//developer.png" alt=""> <br>                <h1 class="t-white poppins">Web Development</h1> <br>                <p class="t-white poppins">Web Development is envolving everywhere. Every startup and every bussines <br>                    have their own websites. As my passion I will help you to build your clean and fast website for your <br>                    startup or your bussines.</p> <br>            </div> <br>            <div class="test-item flex f-col items-center"> <br>                <img src="./Images//social-media-management.png" alt=""> <br>                <h1 class="t-white poppins">Social Media Management</h1> <br>                <p class="t-white poppins">Social Media is the power of future. So I'll help in developing brand <br>                    awareness thow managing your social media handles and will to increase customer loyalty.</p> <br>            </div> <br>            <div class="test-item flex f-col items-center"> <br>                <img src="./Images//startup.png" alt=""> <br>                <h1 class="t-white poppins">Growth Strategies</h1> <br>                <p class="t-white poppins">As a web developer also I will help your brand to grow up . I will provide <br>                    the growth strategies for your brand. And also help in searching techniques for your brand.</p> <br>            </div> <br><br>        </div> <br>    </section> <br><br>    <!-- Projects Section --> <br>    <section id="projects"> <br>        <h1 class=" t-center my-2 t-white f-2">Projects</h1> <br>        <div class="projects-container flex s-center"> <br>            <div class="projects-item flex f-col s-center items-center"> <br>                <div class="image-container p-one"> <br>                    <img src="./Images/weatherApp.png" alt=""> <br>                </div> <br>                <h1 class="t-white poppins">Weather App</h1> <br>                <p class="t-white poppins"> A weather app using HTML, CSS and JavaScript. Fetch the weather from the <br>                    openweather app using fetch api.</p> <br>                <div class="buttons flex s-around"> <br>                    <a href="#" <br>                        target="_blanks" class="btn mx-1 m-top">GitHub</a> <br>                    <a href="#" target="_blanks" class="btn m-top live">Live <br>                        Link</a> <br>                </div> <br>            </div> <br>            <div class="projects-item flex f-col s-center items-center"> <br>                <div class="image-container p-one"> <br>                    <img src="./Images/burgerKing.png" alt=""> <br>                </div> <br>                <h1 class="t-white poppins">Burger King</h1> <br>                <p class="t-white poppins">A simple landing page using HTML and CSS. This webiste is for burger shop who <br>                    provides all the information of thir services at this landing page.</p> <br>                <div class="buttons flex s-around"> <br>                    <a href="#" target="_blanks" <br>                        class="btn mx-1 m-top">GitHub</a> <br>                    <a href="#" target="_blanks" class="btn m-top live">Live <br>                        Link</a> <br>                </div> <br>            </div> <br>            <div class="projects-item flex f-col s-center items-center"> <br>                <div class="image-container p-two"> <br>                    <img src="./Images/MBA.png" alt=""> <br>                </div> <br><br>                <h1 class="t-white poppins">MBA Chai Wala</h1> <br>                <p class="t-white poppins">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic obcaecati cum <br>                    nemo <br>                    recusandae voluptas ipsum.s</sp> <br>                <div class="buttons flex s-around"> <br>                    <a href="#" target="_blank" <br>                        class="btn mx-1 m-top">GitHub</a> <br>                    <a href="#" target="_blank" <br>                        class="btn m-top live">Live Link</a> <br>                </div> <br>            </div> <br>            <div class="projects-item flex f-col s-center items-center"> <br>                <div class="image-container p-three"> <br>                    <img src="./Images/magicNotes.png" alt=""> <br>                </div> <br><br>                <h1 class="t-white poppins">Magic Notes App</h1> <br>                <p class="t-white poppins">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic obcaecati cum <br>                    nemo <br>                    recusandae voluptas ipsum.s</p> <br>                <div class="buttons flex s-around"> <br>                    <a href="#" target="_blank" <br>                        class="btn mx-1 m-top">GitHub</a> <br>                    <a href="#" target="_blank" class="btn m-top live">Live <br>                        Link</a> <br>                </div> <br>            </div> <br>            <div class="projects-item flex f-col s-center items-center"> <br>                <div class="image-container p-three"> <br>                    <img src="./Images/login.png" alt=""> <br>                </div> <br><br>                <h1 class="t-white poppins">Login Form</h1> <br>                <p class="t-white poppins">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic obcaecati cum <br>                    nemo <br>                    recusandae voluptas ipsum.s</p> <br>                <div class="buttons flex s-around"> <br>                    <a href="#" target="_blank" <br>                        class="btn mx-1 m-top">GitHub</a> <br>                    <a href="#" target="_blank" class="btn m-top live">Live <br>                        Link</a> <br>                </div> <br>            </div> <br><br>        </div> <br>    </section> <br><br>    <!-- Contact Me Section --> <br>    <section id="contact" class="m-b-1"> <br>        <h1 class=" t-center my-2 t-white f-2">Contact Me</h1> <br>        <div class="contact-container flex s-around items-centers"> <br>            <div class="form" id="contactForm"> <br>                <form action="" id="contactFrom"> <br>                    <div class="name form-div"> <br>                        <input type="text" name="name" id="name" class="poppins" placeholder="Enter Your Name"> <br>                    </div> <br>                    <div class="email form-div"> <br>                        <input type="email" name="email" id="email" class="poppins" placeholder="Enter Your Email" <br>                            required> <br>                    </div> <br>                    <div class="phone form-div"> <br>                        <input type="phone" name="phone" id="phone" class="poppins" placeholder="Enter Your Phone" <br>                            required> <br>                    </div> <br>                    <div class="textarea form-div"> <br>                        <textarea name="text" id="textarea" cols="30" rows="10" class="poppins" <br>                            placeholder="Enter Messages"></textarea> <br>                    </div> <br>                    <button type="submit" class="btn poppins" id="submit">Send</button> <br>                </form> <br>            </div> <br>        </div> <br>    </section> <br><br>    <!-- Footer Section --> <br>    <footer id="footer"> <br>        <ul class="flex s-center w-80 m-auto my-2 res"> <br>            <li><a href="#home" class="poppinss">Home</a></li> <br>            <li><a href="#about" class="poppinss">About</a></li> <br>            <li><a href="#skills" class="poppinss">Skills</a></li> <br>            <li><a href="#projects" class="poppinss">Projects</a></li> <br>            <li><a href="#portfolio" class="poppinss">Portfolio</a></li> <br>        </ul> <br>        <ul class="flex s-center w-80 font-awesome "> <br>            <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"> <br>                <li><i class="fa-brands fa-linkedin-in"></i></li> <br>            </a> <br>            <a href="<a href="https://github.com/rajusheoran4" target="_blank" class="ke-link">https://github.com/rajusheoran4</a>" target="_blank"> <br>                <li><i class="fa-brands fa-github"></i></li> <br>            </a> <br>            <a href="<a href="https://www.instagram.com/raju_webdev" target="_blank" class="ke-link">https://www.instagram.com/raju_webdev</a>" target="_blank"> <br>                <li><i class="fa-brands fa-instagram"></i></li> <br>            </a> <br>            <a href="<a href="https://www.youtube.com/channel/UC6ScgVJbFPpHAnRdrOSJMlg" target="_blank" class="ke-link">https://www.youtube.com/channel/UC6ScgVJbFPpHAnRdrOSJMlg</a>" target="_blank"> <br>                <li><i class="fa-brands fa-youtube"></i></li> <br>            </a> <br>        </ul> <br>        <p class="t-center my-2 poppins">&copy; All Rights Reserved - <span class="cpy-white poppins">Raju <br>                Sheoran</span></p> <br><br>    </footer> <br><br>    <div id="scroll-top" xxxxonclick="scrolltop()"> <br>        <span><i class="fa-solid fa-arrow-up"></i></span> <br>    </div> <br><br></body> <br><script src="/script.js"></script> <br><br></html>  <br><br><br><br><br>CSS TAG   <br><br>@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><br>@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><br><br>body { <br>    background-color: #1f1f38; <br>} <br><br>* { <br>    margin: 0px; <br>    padding: 0px; <br>    box-sizing: border-box; <br>    font-family: 'Ubuntu', sans-serif; <br>    scroll-behavior: smooth; <br>} <br><br>#navbar { <br>    line-height: 4rem; <br>    position: sticky; <br>    top: 0; <br>    left: 0; <br>    z-index: 100; <br>    border-bottom: .5px solid #ffffff52; <br>    border-width: 80%; <br>    margin-bottom: 1rem; <br>} <br><br>#navbar ul { <br>    list-style: none; <br>} <br><br>#navbar ul li { <br>    margin: 0px 1rem; <br>} <br><br>#navbar ul li a { <br>    text-decoration: none; <br>    padding: 0.5rem 0.9rem; <br><br>} <br><br>.right { <br>    display: none; <br>} <br><br>.checkBtn { <br>    display: none; <br>} <br><br>#check { <br>    display: none; <br>} <br><br>.nav-col a:hover { <br>    border-radius: .4rem; <br>    color: #1f1f38; <br>    background-color: #fff; <br>} <br><br><br>/* Home Section */ <br>.home-left, <br>.home-right { <br>    width: 48%; <br>    padding: 2rem; <br>} <br><br>.home-right { <br>    padding: 0; <br>} <br><br>.home-left h6, <br>h4 { <br>    color: hsl(240deg 8% 43%); <br>    margin: 1rem 0; <br>    margin-left: 3px; <br>    font-size: 1.2rem; <br>} <br><br>.home-left h1 { <br>    font-size: 2.5rem; <br>} <br><br>.home-right { <br>    position: relative; <br>} <br><br>.home-right img { <br>    position: absolute; <br>    width: 100%; <br>    left: 0; <br>    top: 0; <br>    background-size: cover; <br>    border-radius: 62%; <br>    height: 100%; <br>} <br><br>.circle { <br>    width: 17rem; <br>    height: 17rem; <br>    border-radius: 50%; <br>    padding: .5rem; <br>    position: relative; <br>} <br><br>/* About Section */ <br>.about-left, <br>.about-right { <br>    width: 48%; <br>} <br><br>.about-right { <br>    padding-right: 4rem; <br>} <br><br>.aboout-left { <br>    position: relative; <br>} <br><br>.about-left img { <br>    width: 90%; <br>    border-radius: 1rem; <br>} <br><br>.about-content p { <br>    margin-bottom: 2rem; <br>} <br><br><br>/* Skills */ <br>#skills { <br>    margin-top: 3rem; <br>} <br><br>.skills-left { <br>    width: 50%; <br>} <br><br>.skills-left img { <br>    width: 70%; <br>} <br><br>.skills-right { <br>    width: 50%; <br>} <br><br>.skillss-container { <br>    width: 100%; <br>} <br><br>.html { <br>    width: 90%; <br>    height: .5rem; <br>    background-color: #e54c21; <br>    margin: 1rem 0; <br>    border-radius: 12px; <br>} <br><br>.css { <br>    width: 80%; <br>    height: .5rem; <br>    background-color: #00a0e4; <br>    margin: 1rem 0; <br>    border-radius: 12px; <br>} <br><br>.js { <br>    width: 65%; <br>    height: .5rem; <br>    background-color: yellow; <br>    margin: 1rem 0; <br>    border-radius: 12px; <br>} <br><br>.bootstrap { <br>    width: 50%; <br>    height: .5rem; <br>    background-color: #7952b3; <br>    margin: 1rem 0; <br>    border-radius: 12px; <br>} <br><br>.reactjs { <br>    width: 30%; <br>    height: .5rem; <br>    background-color: #61dafb; <br>    margin: 1rem 0; <br>    border-radius: 12px; <br>} <br><br>.learning { <br>    width: 100%; <br>    height: .5rem; <br>    background-color: #61dbfb; <br>    margin: 1rem 0; <br>    border-radius: 12px; <br>} <br><br>.bar { <br>    margin: 2rem 0; <br>} <br><br>.bar-content { <br>    position: absolute; <br>    bottom: 10px; <br>} <br><br>.left { <br>    left: 0; <br>} <br><br>.right-skills { <br>    right: 0; <br>} <br><br><br>/* Services Container */ <br>.services-container { <br>    margin: auto; <br>    overflow: hidden; <br>    width: 80%; <br>} <br><br>.test-item { <br>    width: 20rem; <br>    margin: 0 2rem; <br>    background: #2c2c6c; <br>    border: .5px solid #2c2c6c; <br>    border-radius: 1.5rem; <br>    padding: 2rem 1rem; <br>    text-align: center; <br>    transition: all .5s; <br>} <br><br>.test-item:hover { <br>    background-color: transparent; <br>} <br><br>.test-item img { <br>    margin-bottom: 1.3rem; <br>    width: 80%; <br>} <br><br>.test-item h1 { <br>    font-size: 1.2rem; <br>    margin-bottom: 1rem; <br>} <br><br>.services li .fa-solid { <br>    font-size: 2rem; <br>    color: white; <br>    margin-bottom: 1.3rem; <br>} <br><br>.test-item p { <br>    line-height: 20px; <br>    font-size: .9rem; <br>} <br><br><br>/* Projects Section */ <br>.projects-container { <br>    justify-content: center; <br>    align-items: center; <br>    margin: auto; <br>    flex-wrap: wrap; <br>} <br><br>.image-container { <br>    bottom: 2rem; <br>    height: 10rem; <br>    position: relative; <br>} <br><br>.image-container img { <br>    border-radius: 1rem; <br>} <br><br>.image-container .p-one { <br>    width: 200px; <br>} <br><br>.p-three { <br>    background: url('project.png'); <br>} <br><br>.p-four { <br>    background: url('project.png'); <br>} <br><br>.projects-item { <br>    overflow: hidden; <br>    width: 20rem; <br>    margin: 1rem; <br>    background: #2c2c6c; <br>    border-radius: 1.5rem; <br>    padding: 2rem 1rem; <br>    text-align: center; <br>} <br><br>.projects-item h1 { <br>    font-size: 1.2rem; <br>    margin-bottom: 1rem; <br>} <br><br>.projects-item p { <br>    line-height: 20px; <br>    font-size: .9rem; <br>} <br><br><br><br>/* Contact me Section */ <br>.form { <br>    display: flex; <br>    width: 80%; <br>    padding: 0 2rem; <br>    margin: auto; <br>    justify-content: center; <br>    align-items: center; <br>} <br><br>.form-div input, <br>textarea { <br>    border: 2px solid rgba(77, 181, 255, .4); <br>    border-radius: .5rem; <br>    width: 100%; <br>    margin: 0.5rem 0rem; <br>    font-size: .9rem; <br>    background: transparent; <br>    margin: 0.5rem 0rem; <br>    padding: 0.5rem 1rem; <br>    color: white; <br>    resize: none; <br>} <br><br><br><br>/* Footer Section  */ <br>#footer { <br>    background-color: #4db5ff; <br>    padding: 2rem; <br>    padding-bottom: 4rem; <br>} <br><br>ul li { <br>    list-style: none; <br>    margin: 0 1rem; <br>} <br><br>ul li a { <br>    text-decoration: none; <br>    font-size: 1.2rem; <br>    color: #1f1f38; <br>    transition: all .5s; <br>} <br><br>ul li a:hover { <br>    color: #fff; <br>} <br><br><br>.font-awesome { <br>    margin: 1.1rem auto; <br>} <br><br>.font-awesome li i { <br>    background-color: #1f1f38; <br>    padding: 0.6rem; <br>    border: 1px solid #1f1f38; <br>    color: #fff; <br>    border-radius: 0.5rem; <br>    cursor: pointer; <br>    transition: all .4s ease-in-out; <br>} <br><br>.font-awesome li i:hover { <br>    border: 1px solid #1f1f38; <br>    border-radius: .5rem; <br>    background: transparent; <br>    color: #1f1f38; <br>} <br><br>#footer p { <br>    color: #1f1f38; <br>    font-size: .9srem; <br>} <br><br><br>/* Scroll Top */ <br>#scroll-top { <br>    background-color: #4db5ff; <br>    color: #151527; <br>    padding: 9px; <br>    border-radius: 9px; <br>    width: 35px; <br>    height: 35px; <br>    position: fixed; <br>    bottom: 1rem; <br>    right: 4%; <br>    font-size: 1rem; <br>    display: flex; <br>    justify-content: center; <br>    align-items: center; <br>    cursor: pointer; <br>    z-index: 2000; <br>} <br><br><br><br>/* Bottom Navigator */ <br>#bottom { <br>    position: fixed; <br>    width: 100%; <br>    height: 6rem; <br>    display: none; <br>    justify-content: center; <br>    align-items: center; <br>    z-index: 1000; <br>    bottom: 0rem; <br>} <br><br>#bottom .bottom-nav { <br>    height: 4rem; <br>    padding: 0 2rem; <br>    background-color: #151527; <br>    border-radius: 3rem; <br>    z-index: 1000; <br>    display: -webkit-inline-box; <br>} <br><br>#bottom .bottom-nav li { <br>    color: #fff; <br>    width: 3rem; <br>    height: 3rem; <br>    cursor: pointer; <br>    padding: 1rem; <br>    border-radius: 50%; <br>    transition: all .4s ease-in-out; <br>} <br><br>#bottom .bottom-nav ul a { <br>    text-decoration: none; <br><br>} <br><br>#bottom .bottom-nav li:hover { <br>    background-color: #4db5ff; <br>} <br><br>#bottom .bottom-nav li:active { <br>    background-color: #4db5ff; <br>} <br><br>.cpy-white { <br>    color: white; <br>} <br><br><br>/* Utility Classes */ <br>.poppins { <br>    font-family: 'Poppins', sans-serif; <br>} <br><br>.roboto { <br>    font-family: 'Roboto', sans-serif; <br>} <br><br>.flex { <br>    display: flex; <br>} <br><br>.s-between { <br>    justify-content: space-between; <br>} <br><br>.s-around { <br>    justify-content: space-around; <br>} <br><br>.s-center { <br>    justify-content: center; <br>} <br><br>.items-center { <br>    align-items: center; <br>} <br><br>.f-col { <br>    flex-direction: column; <br>} <br><br><br>.p-relative { <br>    position: relative; <br>} <br><br>.t-white { <br>    color: #fff; <br>} <br><br>.bg-color { <br>    background-color: #1f1f38; <br>} <br><br>.t-center { <br>    text-align: center; <br>} <br><br>.my-2 { <br>    margin: 2rem 0; <br>} <br><br>.f-2 { <br>    font-size: 2rem; <br>} <br><br>.m-b-1 { <br>    margin-bottom: 1rem; <br>} <br><br>.w-50 { <br>    width: 50%; <br>} <br><br>.w-80 { <br>    width: 80%; <br>} <br><br>.h-50 { <br>    height: 50vh; <br>} <br><br>.mx-1 { <br>    margin: 0 1rem; <br>} <br><br>.m-top { <br>    margin-top: 1rem; <br>} <br><br>.m-auto { <br>    margin: auto; <br>} <br><br>.btn { <br>    margin-left: 0 .5rem; <br>    font-size: 1rem; <br>    color: #4db5ff; <br>    cursor: pointer; <br>    padding: 0.75rem 1.2rem; <br>    border: 1px solid #4db5ff; <br>    border-radius: 0.4rem; <br>    background: transparent; <br>    font-family: 'Poppins', sans-serif; <br>} <br><br>.buttons a, <br>#hireme { <br>    text-decoration: none; <br>} <br><br>.btn:hover { <br>    color: #1f1f38; <br>    border-color: #fff; <br>    background-color: #fff; <br>} <br><br>.live { <br>    color: #1f1f38; <br>    background-color: #4db5ff; <br>} <br><br><br><br>JAVASCRIPT <br><br>#bottom { <br>    display: flex; <br>} <br><br>#navbar { <br>    display: none; <br>} <br><br>.right { <br>    display: block; <br>} <br><br>.list { <br>    width: 100%; <br>    height: 100vh; <br>    background-color: #1f1f38; <br>    text-align: center; <br>    display: flex; <br>    flex-direction: column; <br>    position: fixed; <br>    top: 0rem; <br>    justify-content: center; <br>    left: 100%; <br>    transition: all 1s; <br>    z-index: 8000; <br>} <br><br>.fa-bars { <br>    color: #fff; <br>    font-size: 2rem; <br>} <br><br>#check { <br>    display: none; <br>} <br><br>.checkBtn { <br>    display: block; <br>} <br><br>.nav-col a { <br>    color: #fff; <br>} <br><br>#check:checked~ul { <br>    left: 0%; <br>} <br><br>.cross { <br>    position: absolute; <br>    top: 1rem; <br>    right: 1rems; <br>} <br><br>.cross i { <br>    font-size: 2rem; <br>    color: white; <br>    position: absolute; <br>    top: 2rem; <br>    left: 2rem; <br>} <br><br>.right-nav { <br>    display: block; <br>} <br><br>.right-nav .flex { <br>    display: none; <br>} <br><br>.services-container, <br>#home, <br>.services-container { <br>    flex-direction: column; <br>} <br><br>.services-container { <br>    align-items: center; <br>} <br><br>.about-container { <br>    flex-direction: column-reverse; <br>} <br><br>#home, <br>.about-container, <br>.services-container { <br>    align-items: center; <br>} <br><br>.home-left, <br>.home-right { <br>    width: auto; <br>} <br><br>.services-container { <br>    height: auto; <br>} <br><br>.about-left, <br>.about-right { <br>    width: auto; <br>} <br><br>.about-right img { <br>    width: 70%; <br>} <br><br>.skills-left { <br>    width: 80%; <br>} <br><br>.skills-right { <br>    width: 80%; <br>} <br><br>.about-right { <br>    margin-bottom: 1rem; <br>    text-align: center; <br>    padding: .5rem 1rem; <br><br>} <br><br>.test-item { <br>    margin-bottom: 1rem; <br>    width: 100%; <br>} <br><br>.test-item img { <br>    width: 50%; <br>} <br><br>@media only screen and (max-width: 470px) { <br>    #footer .res { <br>        flex-direction: column; <br>        justify-content: center; <br>        align-items: center; <br>    } <br><br>    #footer .res li { <br>        margin-bottom: 1rem; <br>    } <br><br>    #bottom .bottom-nav { <br>        padding: 0; <br>    } <br>} <br><br></b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="https://www.geekshelp.in/2022/12/complete-responsive-personal-portfolio-website-only-using-html-css.html" target="_blank" class="ke-link">https://www.geekshelp.in/2022/12/complete-responsive-personal-portfolio-website-only-using-html-css.html</a></b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML <br><br><br><br><br><br><br><br><br><br><br><br><br></b></span></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> index_html </b></span></p>
<!-- -->]]>
카페 게시글
검색이 허용된 게시물입니다.
♥☞JAVA 메모방◈▶
Re: 반응형 개인 포트폴리오 웹사이트 완성
gyun님
추천 0
조회 4
24.01.01 08:37
댓글 1
다음검색
첫댓글 https://www.geekshelp.in/2022/12/complete-responsive-personal-portfolio-website-only-using-html-css.html