index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <script src="app.js" defer></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="img/logo.jpg" type="image/x-icon">
    <title>Mohammed Ali</title>
</head>

<body>
    <nav id="nav" class="navbar bg">
        <a href="" class="navbar-brand">
            <img src="img/logo.jpg">
            Mohammed Ali
        </a>
        <a href="#" class="toggle-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="navbar-nav">
            <ul style="margin-left: auto;">
                <li class="nav-item">
                    <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#skills">Skills</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#certification">Certifications</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <section class="background-image text-center text-light" id="home">
        <article class="container">
            <div style="padding-top: 3rem; margin-bottom: 100px;">
                <p class="fs-1">
                    Hello, my name is <strong> Mohammed Ali</strong>
                </p>
                <p class="text-white fs-1">I'm <span class="text" style="color:#F6C501;cursor: pointer;" id="text"
                        onmouseover="over()">glad to meet you.</span>
                </p>
                <a class="btn" id="contact-btn" href="#contact">Contact me</a>
            </div>
        </article>
    </section>
    


    <section class="text-dark text-start" style="padding:5rem 0 3rem !important;" id="about">
        <article class="container" style="flex-direction: column;">
            <p class="text-center fs-1">About me</p>
            <div class="centered-items">
                <div class="profile">
                    <img src="img/user.png" style="height: 10em;width: 10em;">
                    <p class="text-center">Mohammed Ali</p>
                </div>
                <div class="personal-info">
                    <p>
                        Hello, my name is <strong> Mohammed Ali</strong>, I'm a frontend, backend, kotlin developer and
                        a competitve programmer from Ethiopia, Addis Ababa currently living in Adama. I like developing
                        <span style="font-size: small;font-weight: bolder;">small</span>
                        and even <span style="font-size: larger;font-weight: bolder;">large</span> projects. If you are
                        seeking an online business or you are an employeer looking to hire, then you came to the right
                        place.

                        I have competed in <strong> EtCPC </strong>or <strong>Ethiopian Collegiate Programming Contest
                        </strong>in 2021.
                        I have good experience in frontend development as well as backend development since I've been
                        working on it for some time.
                        I'm pretty much good at native android app development using <strong> Kotlin </strong>. I've
                        done
                        some small personal projects.
                        One of the most recent projects that I made was the CSE club management system.
                    </p>
                </div>
            </div>
        </article>
    </section>
    
    
    
    <section class="text-dark text-center" style="padding:3rem 0 3rem !important;" id="skills">
        <p class="fs-1">Skills</p>
        <article class="container">
            <div class="row">
                <div class="card shadow-lg" style="width: 10rem">
                    <img src="img/html.png" class="card-img-top pt-3 pb-3" style="size: 10px;">
                    <div class="card-body">
                        <h5 class="card-title">Html</h5>
                    </div>
                </div>
                <div class="card shadow-lg" style="width: 10rem">
                    <img src="img/css.png" class="card-img-top pt-3">
                    <div class="card-body">
                        <h5 class="card-title">Css</h5>
                    </div>
                </div>
                <div class="card shadow-lg" style="width: 10rem">
                    <img src="img/bootstrap.png" class="card-img-top pt-3">
                    <div class="card-body">
                        <h5 class="card-title">Bootstrap</h5>
                    </div>
                </div>
                <div class="card shadow-lg" style="width: 10rem">
                    <img src="img/java.png" class="card-img-top pt-3">
                    <div class="card-body">
                        <h5 class="card-title">Javascript</h5>
                    </div>
                </div>
                <div class="card shadow-lg" style="width: 10rem">
                    <img src="img/jquery-seeklogo.com.svg" class="card-img-top pt-3">
                    <div class="card-body">
                        <h5 class="card-title">JQuery</h5>
                    </div>
                </div>
                <div class="card shadow-lg" style="width: 10rem">
                    <img src="img/python.png" class="card-img-top pt-3">
                    <div class="card-body">
                        <h5 class="card-title">Python</h5>
                    </div>
                </div>
                <div class="card shadow-lg" style="width: 10rem">
                    <img src="img/django.svg" class="card-img-top pt-3">
                    <div class="card-body">
                        <h5 class="card-title">Django</h5>
                    </div>
                </div>
                <div class="card shadow-lg" style="width: 10rem">
                    <img src="img/kotlin.svg" class="card-img-top pt-3">
                    <div class="card-body">
                        <h5 class="card-title">Kotlin</h5>
                    </div>
                </div>
            </div>
        </article>
    </section>


    <section class="text-dark text-center" style="padding:3rem 0 3rem !important;" id="certification">
        <p class="fs-1">Certifications</p>
        <div class="container">
            <div class="images">
                <div class="image active" index="0">
                    <img src="img/1.jpeg" alt="">
                </div>
                <div class="image" index="1">
                    <img src="img/2.jpeg" alt="">
                </div>
                <div class="image" index="1">
                    <img src="img/3.jpeg" alt="">
                </div>
            </div>
        </div>
        <div style="display: flex; justify-content: center;">
            <button class="tab"></button>
            <button class="tab"></button>
            <button class="tab"></button>
        </div>
        <div class="row" style="margin-top: 50px;">
            <button class="btn" id="previous">Previous</button>
            <button class="btn" id="next">Next</button>
        </div>
    </section>


    <section class="text-dark text-center" style="padding:3rem 0 3rem !important;" id="services">
        <p class="fs-1">Services</p>
        <article class="container">
            <div class="row">
                <div class="card shadow-lg" style="width: 10rem">
                    <img src="img/ptb.png" class="card-img-top pt-3 pb-3" style="size: 10px;">
                    <div class="card-body">
                        <h5 class="card-title">Telegram Bot</h5>
                    </div>
                </div>
                <div class="card shadow-lg" style="width: 10rem">
                    <img src="img/web.png" class="card-img-top pt-3">
                    <div class="card-body">
                        <h5 class="card-title">Web Development</h5>
                    </div>
                </div>
                <div class="card shadow-lg" style="width: 10rem">
                    <img src="img/backend.png" class="card-img-top pt-3">
                    <div class="card-body">
                        <h5 class="card-title">Backend Development</h5>
                    </div>
                </div>
            </div>
        </article>
    </section>

    <section class="bg text-light text-center" id="contact">
        <div class="container" style="flex-direction: column;">
            <h1>Contact</h1>
            <p>You can contact me through the following services.</p>
            <div class="contact-info">
                <a class="btn align-center" href="https://t.me/Moham_Ali" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telegram"
                        viewBox="0 0 16 16">
                        <path
                            d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z">
                        </path>
                    </svg><span style="padding-left: 5px;">Telegram</span>
                </a>
                <a class="btn align-center" href="https://www.gmail.com" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-google"
                        viewBox="0 0 16 16">
                        <path
                            d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z">
                        </path>
                    </svg><span style="padding-left: 5px;">Gmail</span>
                </a>
                <a class="btn align-center" href="https://www.linkedin.com/in/mohammed-ali-0170b2203" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin"
                        viewBox="0 0 16 16">
                        <path
                            d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z">
                        </path>
                    </svg>
                    <span>Linked in</span>
                </a>
            
                <a class="btn align-center" href="https://www.instagram.com/mohaali482/" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram"
                        viewBox="0 0 16 16">
                        <path
                            d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z">
                        </path>
                    </svg>
                    <span>Instagram</span>
                </a>
            </div>

            <p style="color:gainsboro;margin-top: 7%;">Copyright 2021</p>
        </div>



    </section>


    <button class="scrollup" id="scroll">
        <img src="img/up.png" style="width: 30px;height: 15px;">
    </button>
</body>

</html>