portfolio html

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

<head>
    <title>PORTFOLIO</title>
    <!-- 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.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body data-spy="scroll" data-target="#scroll" data-offset="56">
    <header class="header" id="home">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="scroll">
            <div class="container">
                <a class="navbar-brand" href="#">Portfolio</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">
                            <a class="nav-link" href="#home">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="cover container-fluid text-white">
            <div class="cover-content d-flex flex-column justify-content-center align-items-center">
                <img src="img/portrait.jpg" alt="" class="rounded-circle">
                <h1 class="display-2 text-capitalize">I am john doe</h1>
                <h6 class="h4 text-light pt-3">Graphic Artist - Web Designer - Illustrator</h6>
            </div>
        </div>
    </header>

    <section class="portfolio container py-5" id="portfolio">
        <div class="section-title text-center pt-2">
            <h4 class="h1 pb-2">Portfolio</h4>
            <p class="text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non fugit, animi doloribus
                atque amet magni.</p>
        </div>
        <div class="row pt-5 pb-2">
            <div class="col-md-6 col-lg-4 mb-5">
                <img class="img-fluid img-thumbnail" src="img/project1.jpg" alt="">
            </div>
            <div class="col-md-6 col-lg-4 mb-5">
                <img class="img-fluid img-thumbnail" src="img/project2.jpg" alt="">
            </div>
            <div class="col-md-6 col-lg-4 mb-5">
                <img class="img-fluid img-thumbnail" src="img/project3.jpg" alt="">
            </div>
            <div class="col-md-6 col-lg-4 mb-5">
                <img class="img-fluid img-thumbnail" src="img/project4.jpg" alt="">
            </div>
            <div class="col-md-6 col-lg-4 mb-5">
                <img class="img-fluid img-thumbnail" src="img/project5.jpg" alt="">
            </div>
            <div class="col-md-6 col-lg-4 mb-5">
                <img class="img-fluid img-thumbnail" src="img/project6.jpg" alt="">
            </div>
        </div>
    </section>
    <section class="about" id="about">
        <div class="about-content container py-5">
            <div class="section-title text-center pt-2">
                <h4 class="h1 pb-2">About Me</h4>
                <p class="text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non fugit, animi
                    doloribus atque amet magni.</p>
            </div>
            <div class="row pb-3">
                <div class="col-md-5 pt-5">
                    <h3 class="pb-3 text-center">Who Am I?</h3>
                    <p class="text-muted text-justify pt-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Nihil
                        totam assumenda natus magni vero inventore. Deleniti similique autem itaque obcaecati?Lorem
                        ipsum dolor sit amet.</p>
                    <p class="text-muted text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Doloremque provident, id aperiam facilis velit temporibus culpa sint suscipit deleniti
                        blanditiis! Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Doloremque provident!</p>
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-6 pt-5">
                    <h3 class="pb-3 text-center">What Skills Do I Have?</h3>
                    <h6>HTML:</h6>
                    <div class="progress bg-white my-2 border border-primary">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                            aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">75%</div>
                    </div>
                    <h6>CSS:</h6>
                    <div class="progress bg-white my-2 border border-success">
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                            role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"
                            style="width: 50%">50%</div>
                    </div>
                    <h6>JS:</h6>
                    <div class="progress bg-white my-2 border border-warning">
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
                            role="progressbar" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"
                            style="width: 62%">62%</div>
                    </div>
                    <h6>BOOTSTRAP:</h6>
                    <div class="progress bg-white my-2 border border-danger">
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger"
                            role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                            style="width: 20%">20%</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="contact" id="contact">
        <div class="contact-content container py-5">
            <div class="section-title text-center pt-2">
                <h4 class="h1 pb-2">Contact Me</h4>
                <p class="text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non fugit, animi
                    doloribus atque amet magni.</p>
            </div>
            <div class="row">
            <form class="col-md-10 mx-auto py-5">
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
                        else.</small>
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1">
                </div>
                <div class="form-group form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Check me out</label>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
        </div>
    </section>

    <footer class="text-center bg-dark py-3 w-100">
        <p class="text-white mb-0">@All Right Reserved || Made by (NAME)</p>
    </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>

Leave a Reply

Your email address will not be published. Required fields are marked *