about.html

<!DOCTYPE html>
<html>
<head>
    <title>
        About
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="browser.css">
    <link rel="stylesheet" href="main.css">
    <link href="https://fonts.cdnfonts.com/css/minecraftia" rel="stylesheet">
    <style>
	body {
	    background-color: #1e1e1e;
	    color: #dcdcdc;
	}
		
        p.pixel-font {
            font-family: 'Minecraftia';
            font-weight: normal;
            font-style: normal;
        }

        p.font-large {
            font-size: 200%;
        }

        p.font-mid {
            font-size: 150%;
        }

        p.font-mid-mobile {
            font-size: 150%;
        }

        .skill-bar-container {
            width: 100%;
            background-color: #ddd;
        }

        .skill-bar {
            text-align: right;
            padding-top: 5px;
            padding-bottom: 5px;
            color: white;
        }

        .margin-top {
            margin-top: 40px;
        }
		
        .pink {
            background-color: #FF69B4;
        }

        @media only screen and (max-width: 600px) {
            .margin-top {
                margin-top: 100px;
            }

            p.font-mid-mobile {
                font-size: 100%;
            }
        }
    </style>
</head>
        <body>

            <div class="w3-top dark-grey">
                <div class="w3-bar dark-light-grey w3-center">
                    <a href="https://spawnpeekboi.github.io" style="width:33.33%" class="w3-bar-item w3-button w3-mobile w3-round-large dark-light-grey">Home</a>
                    <div style="width:33.33%" class="w3-bar-item w3-mobile w3-round-large w3-deep-purple">About</div>
                    <a href="social_profile" style="width:33.33%" class="w3-bar-item w3-button w3-mobile w3-round-large dark-light-grey">Social Profile</a>
                </div>
            </div>
            
<!--end of header-->
            <br />
                <div class="w3-row margin-top ">
                    <div class="w3-third w3-container">
                        <!-- left -->
                        <div class="browser_container browser_body w3-margin-bottom">
                            <div class="browser_row">
                                <div class="browser_column browser_left">
                                    <span class="dot" style="background:#ED594A;"></span>
                                    <span class="dot" style="background:#FDD800;"></span>
                                    <span class="dot" style="background:#5AC05A;"></span>
                                </div>
                                <div class="browser_column browser_middle">
                                    <div class="browser_url">
                                        image.png
                                    </div>
                                </div>
                                <div class="browser_column browser_right">
                                    <div style="float:right">
                                        <span class="browser_bar"></span>
                                        <span class="browser_bar"></span>
                                        <span class="browser_bar"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="browser_content">
                                <picture>
                                    <source media="(min-width:601px)" srcset="https://spawnpeekboi.github.io/src/about/portrait.png">
                                    <img src="https://spawnpeekboi.github.io/src/about/portrait_mobile.png" class="w3-image" style="width:auto;">
                                </picture>                               
                            </div>
                        </div>
                    </div>

                    <div class="w3-twothird w3-container">
                        <!-- right -->
                        <div class="browser_container browser_body w3-margin-bottom">
                            <div class="browser_row">
                                <div class="browser_column browser_left">
                                    <span class="dot" style="background:#ED594A;"></span>
                                    <span class="dot" style="background:#FDD800;"></span>
                                    <span class="dot" style="background:#5AC05A;"></span>
                                </div>
                                <div class="browser_column browser_middle">
                                    <div class="browser_url">
                                        about.txt
                                    </div>
                                </div>
                                <div class="browser_column browser_right">
                                    <div style="float:right">
                                        <span class="browser_bar"></span>
                                        <span class="browser_bar"></span>
                                        <span class="browser_bar"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="browser_content">
                                <p class="pixel-font font-large">
                                    About Me
                                </p>
                                <p class="pixel-font font-mid-mobile">
                                    Nursing Student / Student Nurse<br />
                                    Tenor<br />
                                    Average copper R6 enjoyer<br />
                                    Trash-like LOL player<br />
									VR enthusiast<br />
                                    Easily replaceable part in the system<br />
                                    Gasping for hope in this hopeless world<br />

                                </p>

                            </div>
                        </div>

                        <div class="browser_container browser_body w3-margin-bottom">
                            <div class="browser_row">
                                <div class="browser_column browser_left">
                                    <span class="dot" style="background:#ED594A;"></span>
                                    <span class="dot" style="background:#FDD800;"></span>
                                    <span class="dot" style="background:#5AC05A;"></span>
                                </div>
                                <div class="browser_column browser_middle">
                                    <div class="browser_url">
                                        statistics.xls
                                    </div>
                                </div>
                                <div class="browser_column browser_right">
                                    <div style="float:right">
                                        <span class="browser_bar"></span>
                                        <span class="browser_bar"></span>
                                        <span class="browser_bar"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="browser_content">

                                <p class="pixel-font font-large">
                                    Personl Statistics
                                </p>

                                <div class="w3-cell-row">
                                    <div class="w3-cell w3-container" style="width:50%">

                                        <p class="pixel-font font-mid">
                                            Health: severe fatty liver
                                        </p>
                                    </div>

                                    <div class="w3-cell w3-container" style="width:50%">
                                        <p class="pixel-font font-mid">
                                            Wealth: broke
                                        </p>
                                    </div>
                                </div>

                                <div class="w3-cell-row">
                                    <div class="w3-cell w3-container" style="width:50%;">
                                        <div class="skill-bar-container" style="background-color:#444;">
                                            <div class="skill-bar w3-light-green" style="width:20%"><p class="pixel-font w3-center">20%</p></div>
                                        </div>
                                    </div>

                                    <div class="w3-cell w3-container" style="width:50%">
                                        <div class="skill-bar-container" style="background-color:#444;">
                                            <div class="skill-bar w3-deep-orange" style="width:10%"><p class="pixel-font w3-center">10%</p></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="w3-cell-row">
                                    <div class="w3-cell w3-container" style="width:50%">
                                        <p class="pixel-font font-mid">
                                            SIMP: absolutely
                                        </p>
                                    </div>

                                    <div class="w3-cell w3-container" style="width:50%">
                                        <p class="pixel-font font-mid">
                                            Mental State: break down imminent
                                        </p>
                                    </div>
                                </div>

                                <div class="w3-cell-row">
                                    <div class="w3-cell w3-container" style="width:50%">
                                        <div class="skill-bar-container" style="background-color:#444;">
                                            <div class="skill-bar pink" style="width:100%"><p class="pixel-font w3-center">100%</p></div>
                                        </div>
                                    </div>

                                    <div class="w3-cell w3-container" style="width:50%">
                                        <div class="skill-bar-container" style="background-color:#444;">
                                            <div class="skill-bar w3-orange" style="width:25%"><p class="pixel-font w3-center">25%</p></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="w3-cell-row">
                                    <div class="w3-cell w3-container" style="width:50%">
                                        <p class="pixel-font font-mid">
                                            Stamina: can't even run
                                        </p>
                                    </div>

                                    <div class="w3-cell w3-container" style="width:50%">
                                        <p class="pixel-font font-mid">
                                            Gamer: don't even have life
                                        </p>
                                    </div>
                                </div>

                                <div class="w3-cell-row">
                                    <div class="w3-cell w3-container" style="width:50%">
                                        <div class="skill-bar-container" style="background-color:#444;">
                                            <div class="skill-bar w3-blue" style="width:20%"><p class="pixel-font w3-center">20%</p></div>
                                        </div>
                                    </div>

                                    <div class="w3-cell w3-container" style="width:50%">
                                        <div class="skill-bar-container" style="background-color:#444;">
                                            <div class="skill-bar w3-teal" style="width:90%"><p class="pixel-font w3-center">90%</p></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="w3-cell-row">
                                    <div class="w3-cell w3-container" style="width:50%">
                                        <p class="pixel-font font-mid">
                                            IT skills: nearly none
                                        </p>
                                    </div>

                                    <div class="w3-cell w3-container" style="width:50%">
                                        <p class="pixel-font font-mid">
                                            Intelligence Level: doltish
                                        </p>
                                    </div>
                                </div>

                                <div class="w3-cell-row">
                                    <div class="w3-cell w3-container" style="width:50%">
                                        <div class="skill-bar-container" style="background-color:#444;">
                                            <div class="skill-bar w3-indigo" style="width:1%"><p class="pixel-font w3-center">1%</p></div>
                                        </div>
                                    </div>

                                    <div class="w3-cell w3-container" style="width:50%">
                                        <div class="skill-bar-container" style="background-color:#444;">
                                            <div class="skill-bar w3-amber" style="width:30%"><p class="pixel-font w3-center">30%</p></div>
                                        </div>
                                    </div>
                                </div>


                            </div><!--end of browser content-->
                        </div><!--end of browser_about-->
                    </div><!--end of 2-3-->
                </div>
        </body>
</html>