portfoliowebsite.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>portfolio</title>
        <link rel="stylesheet" href="portfolio1.css">
    </head>
    <body>
        <header>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#aboutme">About me</a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#contactme">Contact me</a></li>
                </ul>
            </nav>
        </header>
       
        <section id="aboutme-main">
            <div id="aboutme-head" >
                
                <img src="C:\Users\user\Desktop\HARINI PROFILE PHOTO.jpeg" alt="" style="float:right;margin-right: 10%;margin-top:3%;border-radius: 75%;width:250px">
                <br>
                <br>
                <h1 style="font-size: 39px;font-style: italic;">Hello,</h1>
                <h1 style="font-size: 39px;font-style: italic;">I'm Harini Sayani</h1>
                <h1 style="font-size: 39px;font-style: italic;">A passionate web developer.</h1>
                
                <br>
            </div>
            
            </div>
        </section>
        <section id="aboutme" >
            <div id="aboutme-topic">
                <h1 style="font-size: 60px;text-align: center; color:chartreuse;font-style:italic">About me</h1>
                <h2 style="font-style: italic;text-align: center; color:blueviolet ;font-style: italic;font-size:30px">I am currently pursuing B Tech second year.<br><br>
                    I love programming.I have good knowledge in <br><br>
                    frontend development.I always try to learn new  <br><br>
                    programming languages.
                    
                    <br>
                    <br>
                </h2>

            </div>
        </section>


        <section id="skills">
            <br>
            <div class="section-skills">
                <h2 style="font-style: italic;font-size: 45px;color:chocolate">My Skills</h2>
            </div>
            <div class="skills-main">
                <div class="section-html">
                    <div class="info">
                        <p>HTML</p>
                        <p>90%</p>
                    </div>
                    <div class="bar">
                        <span class="html"></span>
                    </div>
                </div>
                <div class="section-html">
                    <div class="info">
                        <p>CSS</p>
                        <p>90%</p>
                    </div>
                    <div class="bar">
                        <span class="html"></span>
                    </div>
                </div>
                <div class="section-html">
                    <div class="info">
                        <p>PYTHON</p>
                        <p>90%</p>
                    </div>
                    <div class="bar">
                        <span class="html"></span>
                    </div>
                </div>
                <div class="section-html2">
                    <div class="info">
                        <p>C</p>
                        <p>95%</p>
                    </div>
                    <div class="bar">
                        <span class="html"></span>
                    </div>
                </div>
                <div class="section-html3">
                    <div class="info">
                        <p>C++</p>
                        <p>92%</p>
                    </div>
                    <div class="bar">
                        <span class="html"></span>
                    </div>
                </div>
                <div class="section-html1">
                    <div class="info">
                        <p>SQL</p>
                        <p>85%</p>
                    </div>
                    <div class="bar">
                        <span class="html"></span>
                    </div>
                </div>
            </div>
            
    </section >


    <section id="projects">
        <div id="my-projects">
        <br>
        <br>
        <h1 style="text-align: center;font-style: italic;font-size:45px;color:red">Projects</h1>
        <div class="p">
                <div id="project1">
                    <br>
                    <h1 style="text-align: center;">Temperature converter</h1>
                    <img id="img-1"src="temp.png"style="margin-left:25%">
                    <p style="margin-left:10%;text-align:center;font-size:30px;color:chocolate">I have developed a temperature converter using html and css .</p>
                 </div>
                <div id="project2">
                    <h1 style="text-align: center;">Quiz Game</h1>
                    <img id="img-2"src="quiz.png"style="margin-left:60px">
                    <p style="margin-left:10%;text-align: center;font-size: 30px;color:chocolate">I have developed a simple  quiz game project using python tkinter</p>
                </div>
                <div id="project3">

                    <h1 style="text-align:center;">&nbsp;&nbsp;&nbsp;Calculator</h1>
                    <img id="img-3"src="cal.png" style="margin-left:150px; padding:3px">
                    <p style="margin-left:10%;text-align: center;font-size: 30px;color:chocolate">I have developed a simple calculator using python tkinter</p>
                </div>
        </div>
        <br>
        <br>
        <br>
    </div>
    </section>
    <section id="contactme">
        <div id="contactme-head">
            <div style="float:left;">
                <br>
                <h1 style="text-align:center;color:violet;font-size:50px;font-style:italic;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact Me :</h1>
                <label style="font-size: 40px;font-style: italic;color:brown">&nbsp;&nbsp;&nbsp;Email:-</label>
                <label style="font-size:30px;font-style: italic;margin-left:0;color:blue">harinisayani3@gmail.com</label><br>
                
                
            </div>
            <div style="float:center;">
                <br>
                <br>
                <br>
                <form>
                    <br>
                    <br>
                <fieldset style="height:450px; width:50%;margin-top:10%;margin-bottom:5%;background-color: white;padding-right:40%;margin-left:7%;box-shadow: 0px 6px 11px 0px black;border-radius: 25%;">
                        <br>
                        <br>
                        <label style="font-size: 30px;font-style:italic;color:chocolate;display:left;">&nbsp;&nbsp;&nbsp;&nbsp;Name:&nbsp;</label>
                        <input type="text" placeholder="Enter your name" size="40" required  style="font-size:16pt;display:right; margin-left:6%"><br>
                        <br>
                        <label style="font-size: 30px;font-style:italic;color:chocolate;">&nbsp;&nbsp;&nbsp;&nbsp;Phone no:&nbsp;</label>
                        <input type="text" placeholder="Phone no" size="40" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required style="font-size:16pt;margin-left:6%"><br>
                        <br>
                        <label style="font-size: 30px;font-style:italic;color:chocolate;">&nbsp;&nbsp;&nbsp;&nbsp;Message:</label><br>
                        <textarea  type="text" placeholder="Enter your message" required style="padding:50px;font-size:20px;padding-right:40%;margin-left:22%;"></textarea>
                        <br>
                        <br>
                        <input type="submit" name="Send" style="margin-left:70%;padding:10px;padding-left:25px;padding-right:25px;color:chocolate;font-style:italic;font-size :15px;">
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                    </fieldset>
                </form>
            </div>
        </div>
    </section>
    </body>

</html>