index.html


<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Hristo Ivanov Portfolio</title>
</head>

<body>

    <nav class="navbar navbar-custom navbar-expand-lg navbar-light fixed-top">
        <a class="navbar-brand" href="index.html">Hristo Ivanov</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="Resume.html">Resume<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="Projects.html">Projects <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="contactMe.html">Let's talk<span class="sr-only">(current)</span></a>
                </li>
            </ul>
            <button id="SingInProfileButton" class="btn btn-outline-success my-2 my-sm-0" onclick="showLogin()">Sing
                    in</button>

            <!-- <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form> -->
        </div>
    </nav>
    <div class="load">
        <div id="dot">
        </div>
    </div>

    <!-- particles.js container -->
    <div id="particles-js">
        <div class="container">
            <div class="alert" role="alert">
                <strong>Login successfully!</strong>

            </div>
        </div>


        <div class="col-md-12 m-0 p-0">
            <div class="row">
                <div class="col-8" id="name">
                    <h1 class="bigText">Hello</h1>
                    <h1 class="bigText">I am</h1>
                    <h1 class="bigText">Hristo Ivanov</h1>
                    <h2>.Net Developer</h2>
                </div>

                <div class="col-4" id="position" onclick="flipDiv()">
                    <img class="img-fluid" src="images/logo.png " alt="Programer Icon">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12" id="certificatesHeader">
                <h1 class="bigText">Certificates</h1>
            </div>
        </div>
        <div class="row d-flex justify-content-center">
            <div id="carouselExampleIndicators" class="carousel slide w-50 p-3" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>

                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="d-block w-100" src="images/HackeRank.png" alt="First slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="images/Adastra.png" alt="Second slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="images/Softuni.png" alt="Third slide">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="row">


            <div class="col-md-4 certificates">
                <div class="polaroid ">
                    <img class="certificateImage " src="images/HackeRank.png " alt="Programer " style="width:100% ">
                    <div class="container">
                        <p>HackerRank</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 certificates">
                <div class="polaroid ">
                    <img class="certificateImage " src="images/Adastra.png " alt="Adastra " style="width:100% ">
                    <div class="container">
                        <p>Adastra</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 certificates">
                <div class="polaroid ">
                    <img class="certificateImage " src="images/Softuni.png " alt="SoftUni " style="width:100% ">
                    <div class="container ">
                        <p>SoftUni</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 certificates">
                <div class="polaroid ">
                    <img class="certificateImage" src="images/System and Network Compromising.png " alt="SoftUni " style="width:100% ">
                    <div class="container ">
                        <p>SoftUni</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 certificates">
                <div class="polaroid ">
                    <img class="certificateImage " src="images/HackathonVarna.jpg " alt="SoftUni " style="width:100% ">
                    <div class="container ">
                        <p>Smart Solutions</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 certificates">
                <div class="polaroid ">
                    <img class="certificateImage " src="images/Open Source Intelligence.png " alt="SoftUni " style="width:100% ">
                    <div class="container ">
                        <p>SoftUni</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 certificates">
                <div class="polaroid ">
                    <img class="certificateImage " src="images/Compromising Platforms.png " alt="SoftUni " style="width:100% ">
                    <div class="container ">
                        <p>SoftUni</p>
                    </div>
                </div>
            </div>
        </div>

        <div id="id01">
            <form class="modal-content animate" id="login-form" action="javascript:;" onsubmit="showLoginHide()">
                <div class="imgcontainer">
                    <span onclick="document.getElementById('id01').style.display='none'" class="close1" title="Close">&times;</span>
                </div>

                <div class="container">
                    <div class="md-form mb-5">
                        <label for="uname"><b class="login">User name</b></label>
                        <input type="text" class="form-control input-sm" placeholder="User name" id="uname" required>
                    </div>

                    <div class="md-form mb-5">

                        <label for="psw"><b class="login">Password</b></label>
                        <input type="password" placeholder="Password" id="psw" autocomplete="new-password" class="form-control input-sm" required>
                    </div>

                    <button class="btn btn-outline-success my-2 my-sm-0" onclick="showAlert()" type="submit">Login</button>
                    <label class="login">
                            <input type="checkbox" checked="checked" name="remember"> Remember me
                        </label>
                </div>
                <div class="container">
                    <span class="psw login"><a onclick="showReg()" href="#">Register</a></span>
                    <span class="psw login"><a onclick="pswForget()" href="#">Forgot password</a></span>
                </div>
            </form>
        </div>

        <div id="id02">
            <form class="modal-content animate" id="login-form1" action="javascript:;" onsubmit="showProfileHide()">
                <div class="imgcontainer">
                    <span onclick="document.getElementById('id02').style.display='none'" class="close1" title="Close">&times;</span>
                </div>

                <div class="container">
                    <div class="md-form mb-5">
                        <label for="uname"><b class="login">Change user name</b></label>
                        <input type="text" class="form-control input-sm" placeholder="Change user name" name="uname" required>
                    </div>

                    <div class="md-form mb-5">

                        <label for="psw"><b class="login">Change password</b></label>
                        <input type="password" placeholder="Change password" name="psw" autocomplete="new-password" class="form-control input-sm" required>
                    </div>

                    <button class="btn btn-outline-success my-2 my-sm-0" onclick="showAlert()" type="submit">Save</button>
                </div>
                <div class="container">
                </div>
            </form>
        </div>

    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
    <script src="js/motus.js" defer></script>
    <!-- jQuery first, then Bootstrap JS -->
    <!-- CSS -->
    <link rel="stylesheet " href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <!-- jQuery and JS bundle w/ Popper.js -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous" defer>
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js " integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx " crossorigin="anonymous" defer>
    </script>
    <!-- Personal JavaScript -->
    <script src="js/main.js " defer></script>
    <!-- Optional JavaScript -->
    <script src="js/particles.js "></script>
    <script src="js/jquery-3.2.1.min.js "></script>
    <script src="js/bootstrap.min.js "></script>

</body>

</html>