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

<!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>
        :root {
            --gray-1: #ddd;
            --gray-2: #757575;
            --gray-3: #222;
            --white: #f1f1f1;
            --black: #020202;
            --gradient-black-gray-default: #222;
            --gradient-black-gray: linear-gradient(135deg, #222, #020202);
            --gradient-gray-black-default: #757575;
            --gradient-gray-black: linear-gradient(135deg, #757575, #020202);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Rubik', sans-serif;
            color: var(--gray-2);
            background-color: var(--black);
        }

        .container {
            max-width: 1300px;
            margin: auto;
        }

        nav {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 120px;
            background-color: var(--gradient-black-gray-default);
            background-image: var(--gradient-black-gray);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        nav a {
            color: var(--white);
            text-decoration: none;
            display: block;
            padding: 20px 5px;
            text-align: center;
            transition: all .3s;
            font-size: 14px;
        }

        nav a:hover {
            background-color: var(--black);
        }

        nav a i {
            display: block;
            text-align: center;
            width: 100%;
            margin-bottom: 10px;
            font-size: 26px;
        }

        main {
            margin-left: 120px;
            padding: 0 30px;
        }

        main section {
            margin: 40px 0;
        }

        main section h2 {
            font-weight: normal;
            font-size: 30px;
            margin-bottom: 5px;
            color: var(--white);
        }

        main section h3 {
            font-weight: normal;
            font-size: 22px;
            margin-top: 34px;
            margin-bottom: 15px;
            color: var(--white);
        }

        main section hr {
            max-width: 180px;
            border: none;
            height: 5px;
            background-color: var(--gradient-gray-black-default);
            background-image: var(--gradient-gray-black);
            margin-bottom: 15px;
        }

        main #home {
            text-align: center;
        }

        main #home h1 {
            color: var(--white);
            font-size: 48px;
            font-weight: normal;
            margin-bottom: 15px;
        }

        main #home p {
            font-weight: normal;
            font-size: 20px;
            margin-bottom: 70px;
        }

        main #home img {
            width: 100%;
            max-width: 1000px;
            margin-bottom: 5px;
        }

        main #about p {
            line-height: 28px;
            text-align: justify;
            margin-bottom: 10px;
        }

        main #about ul {
            list-style-position: inside;
            margin-bottom: 20px;
        }

        main #about ul li {
            line-height: 32px;
        }

        main #workout p {
            line-height: 28px;
            text-align: justify;
            margin-bottom: 10px;
        }

        main #workout .grid {
            display: grid;
            gap: 20px;
            grid-template-columns: 1fr 1fr 1fr;
        }

        main #workout .grid .card {
            box-shadow: 2px 2px 5px var(--gray-3);
            border-radius: 5px;
            background-color: var(--gradient-black-gray-default);
            background-image: var(--gradient-black-gray);
        }

        main #workout .grid .card h4 {
            color: var(--gray-1);
            border-bottom: 2px solid var(--gray-3);
            padding: 20px 15px;
            line-height: 30px;
            font-weight: normal;
        }

        main #workout .grid .card ol {
            list-style-position: inside;
            padding: 15px 10px;
        }

        main #workout .grid .card ol li {
            line-height: 32px;
        }

        main #movies p {
            line-height: 28px;
            text-align: justify;
            margin-bottom: 10px;
        }

        main #movies .grid {
            display: grid;
            gap: 20px;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        }

        main #movies .grid img {
            width: 100%;
        }

        main #movies .grid div:nth-child(1) {
            grid-row: 1 / 3;
            grid-column: 1 / 3;
        }

        main #contact p {
            margin-top: 20px;
        }

        main #contact .follow-links {
            display: flex;
            justify-content: center;
            margin-top: 50px;
        }

        main #contact p i {
            font-size: 22px;
            margin-right: 5px;
            vertical-align: middle;
            color: var(--gray-1);
        }

        main #contact .follow-links a {
            display: block;
            color: var(--white);
            background-color: var(--gradient-black-gray-default);
            background-image: var(--gradient-black-gray);
            height: 50px;
            line-height: 50px;
            width: 50px;
            text-align: center;
            border-radius: 50%;
            margin: 5px;
            transition: all .3s;
            font-size: 20px;
        }

        main #contact .follow-links a:hover {
            transform: translateY(-10px);
        }

        @media (max-width:960px) {
            main #workout .grid {
                grid-template-columns: 1fr 1fr;
            }

            main #movies .grid {
                grid-template-columns: 1fr 1fr;
            }

            main #movies .grid div:nth-child(1) {
                grid-row: 1 / 2;
                grid-column: 1 / 2;
            }
        }

        @media (max-width:640px) {

            nav {
                height: auto;
                width: 100%;
                flex-direction: row;
                overflow-x: auto;
            }

            main {
                margin-left: 0;
                padding: 0 20px;
                margin-top: 130px;
            }

            main #workout .grid {
                grid-template-columns: 1fr;
            }

            main #movies .grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <div class="container">

        <nav>
            <a href="#home">
                <i class="fa-solid fa-house-chimney"></i>
                HOME
            </a>
            <a href="#about">
                <i class="fa-solid fa-user"></i>
                ABOUT
            </a>
            <a href="#workout">
                <i class="fa-solid fa-dumbbell"></i>
                WORKOUT
            </a>
            <a href="#movies">
                <i class="fa-solid fa-film"></i>
                MOVIES
            </a>
            <a href="#contact">
                <i class="fa-solid fa-envelope"></i>
                CONTACT
            </a>
        </nav>
        <main>
            <section id="home">
                <h1>Scott Adkins</h1>
                <p>Professional Martial Artist</p>
                <img src="/tutorials/css/templates/scott-adkins.jpg">
            </section>
            <section id="about">
                <h2>About Me</h2>
                <hr>
                <p>Scott Edward Adkins is a British actor, film producer and martial artist. He is best known for his
                    role
                    as the Russian prison fighter Yuri Boyka in the Undisputed franchise. He has played Yuri Boyka in
                    Undisputed II: Last Man Standing (2006) and its two sequels, Undisputed III: Redemption (2010) and
                    Boyka: Undisputed (2017); Casey Bowman in Ninja (2009) and its sequel Ninja: Shadow of a Tear
                    (2013). He
                    also starred as French in The Debt Collector (2018) and its 2020 sequel Debt Collectors (starring
                    alongside Louis Mandylor).</p>
                <h3>Basic Info</h3>
                <ul>
                    <li>Height: 5'10</li>
                    <li>Weight: 178 lb</li>
                    <li>Birthday: 17th of June, 1976</li>
                    <li>Birthplace: The Royal Town of Sutton Coldfield, United Kingdom</li>
                </ul>
            </section>
            <section id="workout">
                <h2>My Workout</h2>
                <hr>
                <p>Adkins focuses a lot on volume training and simple weight training.</p>
                <p>Adkins makes sure to hit the gym five to six days each week and train intensely. He mostly focuses on
                    compound lifts to gain functional strength and gain muscle.</p>
                <p>He mixes up his workouts, training three days with weights and two days with cardio mixed with
                    martial
                    arts. Aside from explosive movements, he performs plyometrics for his lower body. </p>
                <h3>Exercises</h3>
                <p>Here’s Scott Adkins MMA/Cardio routine.</p>
                <div class="grid">
                    <div class="card">
                        <h4>Monday: Triceps and Chest</h4>
                        <ol>
                            <li>Bench Press (3 sets, 8-12 reps)</li>
                            <li>Chest Dips (3 sets, 15 reps)</li>
                            <li>Incline Bench Press (3 sets, 8-12 reps)</li>
                            <li>Overhead Tricep Extension (3 sets, 8-12 reps)</li>
                            <li>Chest Flys (3 sets, 8-12 reps)</li>
                            <li>Tricep Cable Pushdown (3 sets, 8-12 reps)</li>
                            <li>Push Ups (3 sets, 25 reps)</li>
                            <li>Cable or Dumbbell Kick Backs (3 sets, 8-12 reps)</li>
                        </ol>
                    </div>
                    <div class="card">
                        <h4>Tuesday: MMA or Cardio</h4>
                        <ol>
                            <li>Cardio (HIIT for 15-20 min)</li>
                            <li>Treadmill: sprint 6-10 mph (1 min on) walk 2.5-3.5 mph (1 min off)</li>
                            <li>Bike: more than 100 RPMs at about level 10 (1 min on), lower RPMs at about level 3-5 (1
                                min
                                off)</li>
                            <li>Steady Paced Cardio like a bike, treadmill, Stair Master, and Elliptical (15-20 min)
                            </li>
                        </ol>
                    </div>
                    <div class="card">
                        <h4>Wednesday: Biceps and Back</h4>
                        <ol>
                            <li>Deadlift (3 sets, 8-12 reps)</li>
                            <li>Dumbbell Bicep Curl (3 sets, 8-12 reps)</li>
                            <li>Cable Row (3 sets, 8-12 reps)</li>
                            <li>Preacher Curl (3 sets, 8-12 reps)</li>
                            <li>Wide-Grip Pull-Ups (3 sets, 8-12 reps)</li>
                            <li>Hammer Curl (3 sets, 8-12 reps)</li>
                            <li>Lateral Pulldowns (3 sets, 8-12 reps)</li>
                            <li>Barbell Bent-Over Row (3 sets, 8-12 reps)</li>
                        </ol>
                    </div>
                    <div class="card">
                        <h4>Thursday: MMA or Cardio</h4>
                        <ol>
                            <li>Cardio (HIIT for 15-20 min)</li>
                            <li>Treadmill: sprint 6-10 mph (1 min on), walk 2.5-3.5 mph (1 min off)</li>
                            <li>Bike: more than 100 RPMs at about level 10 (1 min on), lower RPMs at about level 3-5 (1
                                min
                                off)</li>
                            <li>Steady Paced Cardio like a bike, treadmill, Stair Master, and Elliptical (15-20 min)
                            </li>
                        </ol>
                    </div>
                    <div class="card">
                        <h4>Friday: Shoulders and Legs</h4>
                        <ol>
                            <li>Back Squats (3 sets, 8-12 reps)</li>
                            <li>Military Press (3 sets, 8-12 reps)</li>
                            <li>Leg Press (3 sets, 8-12 reps)</li>
                            <li>Arnold Press (3 sets, 8-12 reps)</li>
                            <li>Hamstring Curl (3 sets, 8-12 reps)</li>
                            <li>houlder Dumbbell Front Raise (3 sets, 8-12 reps)</li>
                            <li>Calf Raise (3 sets, 8-12 reps)</li>
                            <li>Dumbbell or Barbell Shrugs (3 sets, 8-12 reps)</li>
                        </ol>
                    </div>
                    <div class="card">
                        <h4>Saturday: MMA or Cardio Optional</h4>
                        <ol>
                            <li>Cardio (HIIT for 15-20 min)</li>
                            <li>Treadmill: sprint 6-10 mph (1 min on), walk 2.5-3.5 mph (1 min off)</li>
                            <li>Bike: more than 100 RPMs at about level 10 (1 min on), lower RPMs at about level 3-5 (1
                                min
                                off)</li>
                            <li>Steady Paced Cardio like a bike, treadmill, Stair Master, and Elliptical (15-20 min)
                            </li>
                        </ol>
                    </div>
                    <div class="card">
                        <h4>Sunday: Rest</h4>
                        <ol>
                            <li>Rest and eat good food to recover my body.</li>
                        </ol>
                    </div>
                </div>
            </section>
            <section id="movies">
                <h2>My Movies</h2>
                <hr>
                <p>Here are some of my best films.</p>
                <div class="grid">
                    <div>
                        <img src="/tutorials/css/templates/avengement.jpg">
                    </div>
                    <div>
                        <img src="/tutorials/css/templates/accident-man.jpg">
                    </div>
                    <div>
                        <img src="/tutorials/css/templates/undisputed-1.jpg">
                    </div>
                    <div>
                        <img src="/tutorials/css/templates/undisputed-2.jpg">
                    </div>
                    <div>
                        <img src="/tutorials/css/templates/undisputed-3.jpg">
                    </div>
                    <div>
                        <img src="/tutorials/css/templates/undisputed-4.jpg">
                    </div>
                </div>
            </section>
            <section id="contact">
                <h2>Contact Me</h2>
                <hr>
                <p>
                    <i class="fa-solid fa-location-dot"></i>
                    The Royal Town of Sutton Coldfield, United Kingdom
                </p>
                <p>
                    <i class="fa-solid fa-phone"></i>
                    xxx-xx-xxxxxxx
                </p>
                <p>
                    <i class="fa-solid fa-envelope"></i>
                    scott-adkins@example.com
                </p>
                <div class="follow-links">
                    <a href="#" title="follow on Twitter">
                        <i class="fa-brands fa-twitter"></i>
                    </a>
                    <a href="#" title="follow on Facebook">
                        <i class="fa-brands fa-facebook-f"></i>
                    </a>
                    <a href="#" title="follow on Intagram">
                        <i class="fa-brands fa-instagram"></i>
                    </a>
                </div>
            </section>
        </main>
    </div>
</body>

</html>