محرر ويب أونلاين

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">

    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
        integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --blue: #11b8de;
            --black: #000;
            --gray-1: #868789;
            --gray-2: #3f3f41;
            --gray-3: #25292a;
            --white: white;
            --white-smoke: #d5d5d5;
        }

        body {
            font-family: 'Rubik', sans-serif;
            color: var(--gray-3);
        }

        main {
            display: grid;
            grid-template-columns: 1fr 2fr;
            max-width: 1000px;
            margin: 0 auto;
            box-shadow: 0 0 5px var(--gray-1);
        }

        main>div {
            padding: 40px 30px;
        }

        main .left-area {
            background-color: var(--gray-3);
        }

        main .left-area img {
            display: block;
            max-width: 100%;
            width: 100%;
            border-radius: 50%;
        }

        main .left-area h1 {
            font-size: 26px;
            margin: 30px 0;
            text-align: center;
            color: var(--white-smoke);
        }

        main .left-area h1 small {
            display: block;
            margin-top: 5px;
            padding-left: 15px;
            font-size: 18px;
            font-weight: normal;
        }

        main .left-area section {
            margin: 40px 0;
        }

        main .left-area section h2 {
            color: var(--white);
            font-weight: normal;
            font-size: 22px;
            padding-bottom: 6px;
            border-bottom: 2px solid var(--white);
            margin-bottom: 24px;
            padding-left: 24px;
            position: relative;
        }

        main .left-area section h2::before {
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            font: var(--fa-font-solid);
            content: "\f0da";
            position: absolute;
            left: 0;
            top: 3px;
            color: var(--blue);
        }

        main .left-area .contact p {
            font-size: 14px;
            color: var(--gray-1);
            margin-bottom: 10px;
        }

        main .left-area .contact p i {
            color: var(--white);
            background-color: var(--blue);
            border-radius: 50%;
            height: 26px;
            line-height: 26px;
            width: 26px;
            font-size: 12px;
            text-align: center;
            margin-right: 6px;
        }

        main .left-area .follow-me h3 {
            color: var(--white);
            font-weight: normal;
            font-size: 16px;
            margin-bottom: 2px;
        }

        main .left-area .follow-me p {
            color: var(--gray-1);
            font-weight: normal;
            font-size: 14px;
            margin-bottom: 12px;
        }

        main .left-area .languages p {
            color: var(--gray-1);
            font-weight: normal;
            font-size: 14px;
            margin-bottom: 8px;
        }

        main .left-area .languages>div {
            position: relative;
            height: 8px;
            border-radius: 4px;
            background-color: var(--gray-2);
            margin-bottom: 14px;
        }

        main .left-area .languages>div>div {
            position: absolute;
            top: 0;
            left: 0;
            height: 8px;
            border-radius: 4px;
            background-color: var(--blue);
            border: 1px solid var(--gray-2);
        }

        main .right-area h1 {
            font-size: 40px;
        }

        main .right-area h1 small {
            display: block;
            padding-left: 15px;
            font-size: 20px;
            font-weight: normal;
            color: var(--gray-2);
        }

        main .right-area section {
            margin: 40px 0;
        }

        main .right-area section h2 {
            font-weight: normal;
            font-size: 22px;
            padding-bottom: 6px;
            border-bottom: 2px solid var(--white-smoke);
            margin-bottom: 24px;
            padding-left: 24px;
            position: relative;
        }

        main .right-area section h2::before {
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            font: var(--fa-font-solid);
            content: "\f0da";
            position: absolute;
            left: 0;
            top: 3px;
            color: var(--blue);
        }

        main .right-area section .grid {
            display: grid;
            column-gap: 10px;
            grid-template-columns: 200px 30px auto;
            position: relative;
        }

        /* لإخفاء الجزء الأخير من الخط الذي يظهر كأنه
            ينزل من آخر كل نقطة حتى يبدو بطول النص */
        main .right-area section .grid::after {
            content: '';
            display: block;
            position: absolute;
            bottom: -3px;
            left: 0;
            height: 27px;
            width: 100%;
            background-color: var(--white);
        }

        main .right-area section .grid .point {
            margin-top: 3px;
            height: 100%;
            width: 2px;
            background-color: var(--white-smoke);
            position: relative;
        }

        main .right-area section .grid .point::before {
            content: '';
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: var(--white);
            border: 2px solid var(--blue);
            display: block;
            position: absolute;
            left: -8px;
            top: 0px;
        }

        main .right-area section .grid h3 {
            color: var(--gray-2);
            font-size: 16px;
            margin-bottom: 4px;
        }

        main .right-area section .grid p {
            color: var(--gray-1);
            font-weight: normal;
            font-size: 14px;
            line-height: 24px;
            margin-bottom: 20px;
        }

        .desktop-only {
            display: block;
        }

        .mobile-only {
            display: none;
        }

        @media (max-width: 764px) {
            .desktop-only {
                display: none;
            }

            .mobile-only {
                display: block;
            }

            main {
                grid-template-columns: 1fr;
            }

            main .left-area img {
                max-width: 240px;
                margin: auto;
            }

            main .right-area section .grid .point {
                display: none;
            }

            main .right-area section .grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <main>
        <div class="left-area">
            <img src="/tutorials/css/templates/profile.png"/>

            <h1 class="mobile-only">MHAMAD HARMUSH
                <small>Full Stack Developer</small>
            </h1>

            <section class="contact">
                <h2>CONTACT</h2>
                <p>
                    <i class="fa-solid fa-phone-volume"></i>
                    +961-01-234-567
                </p>
                <p>
                    <i class="fa-regular fa-envelope"></i>
                    mhamad@example.com
                </p>
                <p>
                    <i class="fa-solid fa-globe"></i>
                    Harmash.com
                </p>
            </section>

            <section class="follow-me">
                <h2>FOLLOW ME</h2>
                <h3>Facebook</h3>
                <p>facebook.com/MhamadHarmush</p>
                <h3>Twitter</h3>
                <p>twitter.com/MhamadHarmush</p>
                <h3>Telegram</h3>
                <p>t.me/MhamadHarmush</p>
            </section>

            <section class="languages">
                <h2>LANGUAGES</h2>
                <p>Arabic</p>
                <div>
                    <div style="width:100%;"></div>
                </div>
                <p>English</p>
                <div>
                    <div style="width:80%;"></div>
                </div>
                <p>French</p>
                <div>
                    <div style="width:60%;"></div>
                </div>
            </section>

        </div>
        <div class="right-area">
            <div>
                <h1 class="desktop-only">MHAMAD HARMUSH
                    <small>Full Stack Developer</small>
                </h1>
                <section>
                    <h2>EXPERIENCE</h2>
                    <div class="grid">
                        <div>
                            <h3>Frontend Developer</h3>
                            <p>2014-2015</p>
                        </div>
                        <div class="point"></div>
                        <div>
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi excepturi error incidunt
                                hic rem fugiat dolores, eum facilis magnam reprehenderit facere voluptate.</p>
                        </div>
                        <div>
                            <h3>Fullstack Developer</h3>
                            <p>2014-2019</p>
                        </div>
                        <div class="point"></div>
                        <div>
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi excepturi error incidunt
                                hic rem fugiat dolores, eum facilis magnam reprehenderit facere voluptate voluptatum
                                molestias.</p>
                        </div>
                        <div>
                            <h3>Game Developer</h3>
                            <p>2019-2023</p>
                        </div>
                        <div class="point"></div>
                        <div>
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi excepturi error incidunt
                                hic rem fugiat dolores, eum facilis magnam reprehenderit.</p>
                        </div>
                    </div>
                </section>
                <section>
                    <h2>EDUCATION</h2>
                    <div class="grid">
                        <div>
                            <h3>Networks And Systems</h3>
                            <p>2012-2014</p>
                        </div>
                        <div class="point"></div>
                        <div>
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi excepturi error incidunt
                                hic rem fugiat dolores, eum facilis magnam reprehenderit facere voluptate.</p>
                        </div>
                        <div>
                            <h3>Computer Sicence</h3>
                            <p>2014-2017</p>
                        </div>
                        <div class="point"></div>
                        <div>
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi excepturi error incidunt
                                hic rem fugiat dolores, eum facilis magnam reprehenderit facere voluptate voluptatum
                                molestias.</p>
                        </div>
                    </div>
                </section>
                <section>
                    <h2>REFERENCES</h2>
                    <div class="grid">
                        <div>
                            <h3>Omar El koussa</h3>
                            <p>Manager at company</p>
                        </div>
                        <div class="point"></div>
                        <div>
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi excepturi error incidunt
                                hic rem fugiat dolores, eum facilis magnam reprehenderit facere voluptate.</p>
                        </div>
                        <div>
                            <h3>James Matta</h3>
                            <p>Manager at company</p>
                        </div>
                        <div class="point"></div>
                        <div>
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi excepturi error incidunt
                                hic rem fugiat dolores, eum facilis magnam reprehenderit facere voluptate voluptatum
                                molestias.</p>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </main>
</body>

</html>