<div id="profile-section-1"> <div id="profile-info" class="page-subsection"> <div class="page-subsection-wrapper"> <div class="page-subheader"> <p id="profile-info-name" class="page-subheader-text">Jane Doe</p> <div class="page-subheader-separator"></div> </div> <div id="profile-info-pfp-border" class="page-subsection-chunk"> <div id="profile-info-pfp"> <img id="profile-info-pfp-img" src="res/guest_pfp.png" alt="User's Profile Pictuer" /> <div id="profile-info-pfp-vignette"></div> </div> </div> </div> </div> <div id="profile-platforms" class="page-subsection"> <div class="page-subsection-wrapper"> <div class="page-subheader"> <p class="page-subheader-text">Platforms</p> <div class="page-subheader-separator"></div> </div> <div class="profile-list page-subsection-chunk"> <div class="profile-entry accented top"> <img class="profile-entry-icon" src="res/steam.png" alt="Steam Logo" /> <p class="profile-entry-text platform-name">Steam</p> <p class="profile-entry-text accented">Connected</p> </div> <div class="profile-entry"> <img class="profile-entry-icon" src="res/xbox.png" alt="Xbox Logo" /> <p class="profile-entry-text platform-name">Xbox Live</p> <p class="profile-entry-text accented">Connected</p> </div> <div class="profile-entry"> <img class="profile-entry-icon" src="res/psn.png" alt="PSN Logo" /> <p class="profile-entry-text platform-name">PSN</p> <p class="profile-entry-text accented">Connected</p> </div> </div> </div> </div> </div> <div id="profile-section-2"> <div id="profile-games" class="page-subsection"> <div class="page-subsection-wrapper"> <div id="profile-games-header" class="page-subheader"> <p class="page-subheader-text link">Games</p> <div class="page-subheader-separator"></div> </div> <div class="profile-list page-subsection-chunk"> <div class="profile-entry game top"> <img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" /> <p class="profile-entry-text game-name">Latin</p> </div> <div class="profile-entry game"> <img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" /> <p class="profile-entry-text game-name">Latin</p> </div> <div class="profile-entry game"> <img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" /> <p class="profile-entry-text game-name">Latin</p> </div> <div class="profile-entry game"> <img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" /> <p class="profile-entry-text game-name">Latin</p> </div> <div class="profile-entry game"> <img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" /> <p class="profile-entry-text game-name">Latin</p> </div> <div class="profile-entry game"> <img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" /> <p class="profile-entry-text game-name">Latin</p> </div> <div class="profile-entry game"> <img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" /> <p class="profile-entry-text game-name">Latin</p> </div> <div class="profile-entry game"> <img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" /> <p class="profile-entry-text game-name">Latin</p> </div> <div class="profile-entry game"> <img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" /> <p class="profile-entry-text game-name">Latin</p> </div> <div class="profile-entry game"> <img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" /> <p class="profile-entry-text game-name">Latin</p> </div> <div class="profile-entry game"> <img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" /> <p class="profile-entry-text game-name">Latin</p> </div> </div> </div> </div> <div id="profile-achievements" class="page-subsection"> <div class="page-subsection-wrapper"> <div id="profile-achievements-header" class="page-subheader"> <p class="page-subheader-text link">Achievements</p> <div class="page-subheader-separator"></div> </div> <div class="profile-list page-subsection-chunk"> <div class="profile-entry accented top"> <img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" /> <p class="profile-entry-text achievement-name">Lorem Ipsum</p> <p class="profile-entry-text accented">Completed</p> </div> <div class="profile-entry accented"> <img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" /> <p class="profile-entry-text achievement-name">Lorem Ipsum</p> <p class="profile-entry-text accented">Completed</p> </div> <div class="profile-entry accented"> <img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" /> <p class="profile-entry-text achievement-name">Lorem Ipsum</p> <p class="profile-entry-text accented">Completed</p> </div> <div class="profile-entry accented"> <img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" /> <p class="profile-entry-text achievement-name">Lorem Ipsum</p> <p class="profile-entry-text accented">Completed</p> </div> <div class="profile-entry accented"> <img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" /> <p class="profile-entry-text achievement-name">Lorem Ipsum</p> <p class="profile-entry-text accented">Completed</p> </div> <div class="profile-entry accented"> <img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" /> <p class="profile-entry-text achievement-name">Lorem Ipsum</p> <p class="profile-entry-text accented">Completed</p> </div> <div class="profile-entry accented"> <img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" /> <p class="profile-entry-text achievement-name">Lorem Ipsum</p> <p class="profile-entry-text accented">Completed</p> </div> <div class="profile-entry"> <img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" /> <p class="profile-entry-text achievement-name">Lorem Ipsum</p> <p class="profile-entry-text accented">Completed</p> </div> <div class="profile-entry"> <img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" /> <p class="profile-entry-text achievement-name">Lorem Ipsum</p> <p class="profile-entry-text accented">Completed</p> </div> <div class="profile-entry"> <img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" /> <p class="profile-entry-text achievement-name">Lorem Ipsum</p> <p class="profile-entry-text accented">Completed</p> </div> <div class="profile-entry"> <img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" /> <p class="profile-entry-text achievement-name">Lorem Ipsum</p> <p class="profile-entry-text accented">Completed</p> </div> <div class="profile-entry"> <img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" /> <p class="profile-entry-text achievement-name">Lorem Ipsum</p> <p class="profile-entry-text accented">Completed</p> </div> <div class="profile-entry"> <img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" /> <p class="profile-entry-text achievement-name">Lorem Ipsum</p> <p class="profile-entry-text accented">Completed</p> </div> </div> </div> </div> </div>