<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Profile</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Raleway',Sans-Serif;
background-color: AliceBlue;
color: Black;
}
main {
width: 720px;
margin: 40px auto;
background-color: #fff;
border: 1px solid #f4f6f7;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
display: flex;
flex-direction: column;
}
section {
padding: 40px;
}
a, a:active, a:visited {
color: #212121;
}
a:hover {
color: #0067f4;
font-weight: 500;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 3rem;
}
h3 {
font-size: 1.125rem;
}
.profile-info {
display: flex;
flex-flow: row nowrap;
}
.profile-info > img {
width: 40%;
object-fit: contain;
background-color: #f4f6f7;
margin-right: 40px;
}
.profile-info > div {
flex-grow: 1;
}
.profile-info > div > div {
margin: 16px 0;
font-size: 16px;
font-weight: 300;
line-height: 1.75;
hyphens: auto;
}
.profile-info > div > div > label {
font-size: 14px;
color: #696969;
}
/* Links */
.profile-info .links-container {
margin-top: 0;
padding-inline-start: 0;
list-style: none;
}
.profile-info .links-container > li {
margin-right: 16px;
vertical-align: middle;
}
/* Send Me a Message Button */
.profile-info button {
background-color: AliceBlue;
border: 1px solid #0c1440;
color: #0c1440;
padding: 8px;
font-size: 16px;
}
.profile-info button:hover {
border-color: #0067f4;
color: #0067f4;
}
#projects {
display: flex;
flex-flow: column nowrap;
width: 100%;
}
#projects > div {
display: flex;
flex-direction: row;
padding: 16px 0;
border-bottom: 1px solid AliceBlue;
}
#projects > div:hover {
background-color: AliceBlue;;
}
#projects img {
width: 160px;
object-fit: cover;
object-position: 50% 50%;
border: 1px solid AliceBlue;
margin-right: 32px;
}
#projects h3 {
margin-top: 0.5em;
}
#projects p {
color: AliceBlue;
}
</style>
<style>
@media only screen and (max-width: 760px) {
main {
width: 100%;
margin-top: 20px;
}
section {
padding: 40px 20px 0;
}
.profile-info {
flex-flow: column;
align-items: center;
}
.profile-info > img {
margin-right: 0;
}
.profile-info > div {
text-align: center;
}
#projects > div {
flex-direction: column;
}
#projects img {
width: 100%;
margin-right: 0;
margin-bottom: 16px;
}
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<script type='module'>
const projectData = {{myprojects}}
, $projects = document.querySelector('#projects')
;
projectData.forEach(p => {
const link = p.link.startsWith('https://') || p.link.startsWith('http://')
? p.link : `/${p.folder}/${p.link}`
const $div = document.createElement('div')
, defaultProjectImg = "{{defaultProjectImg}}"
, template = `
<img src='${p.media[0] || defaultProjectImg }'>
<div>
<h3>${p.name}</h3>
<p>${p.description}</p>
<a href='https://bravefish0.qoom.space/homepage.html' target='_blank'>View</a>
</div>
`
$div.innerHTML = template;
$projects.appendChild($div)
});
</script>
</head>
<body>
<img border="0" src="https://www.freelogodesign.org/file/app/client/thumb/29a1512d-3f5f-4097-94c6-d7e6873f2846_200x200.png?1607292388287" width="300" height="300"></h2>
<main>
<div class="w3-display-bottomleft w3-text-grey w3-large" style="padding:24px 48px">
<!-- Button to open the modal login form -->
<center><button onclick="document.getElementById('id01').style.display='block'"><strong>Login to Your ForDa Hub Account</strong></button></center>
<p>
</p>
<!-- The Modal -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'"
class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" action="/action_page.php">
<div class="imgcontainer">
<img src="https://icons-for-free.com/iconfiles/png/512/avatar+human+people+profile+user+icon-1320168139431219590.png" width="25" height="225" alt="Avatar" class="avatar">
</div>
<p></p>
<div class="container">
<center><label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname"
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw"</center>
<p></p>
<a href="https://bravefish0.qoom.space/homepage.html"><h1 style="font-family:Trebuchet MS">Sign In</h1></a>
<p>
</p>
<label>
<p>
</p>
<p>
</p>
<input type="checkbox" checked="checked" name="remember"> Remember me
<span class="psw">Forgot <a href="#">password?</a></span>
</label>
</div>
<p></p>
<div class="container" style="background-color:#f1f1f1">
</div>
</form>
</div>
</section>
</main>
</body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #083b66;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
</html>