Skip to content

[starts #161673247] Repeat the profile page creation #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ipaullly merged 1 commit into from
Nov 2, 2018
Merged

[starts #161673247] Repeat the profile page creation #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 151 additions & 0 deletions UI/css/profile_style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
body{
font: 15px/1.5 'Montserrat', sans-serif;
padding: o;
margin: 0;
background-color: #A2D7E9;
}

/* Global */
.container{
width: 70%;
margin: auto;
overflow: hidden;
}

article#about-col{
float: right;
width: 65%;
}
aside#leftbar .create input{
float: left;
width: 30%;
margin-top: 10px;
}

ul{
margin: 0;
padding: 0;
}
.button_1{
height: 38px;
background: #08242D;
border: none;
padding-right: 20px;
padding-left: 20px;
color: #cccccc;
}

ul#orders li{
list-style: none;
padding: 20px;
border: #cccccc solid 1px;
margin-bottom: 5px;
background: #D8F6FF;
}
.label{
margin-bottom: 40px;
}

/* header */
header{
background: #0B5068;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
}

header a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #brand{
float: left;
}
header #brand h1{
margin: 0;
}
header nav{
float: right;
margin-top: 10px;
}
header .highlight{
color: #A2D7E9;
font-weight: bold;
}
header a:hover{
color: #cccccc;
font-weight: bold;
}

/* display */

#display{
min-height: 400px;
background: url('../img/showcase.jpg') no-repeat 0 -400px;
text-align: center;

}
#display h1{
margin-top: 130px;
font-size: 55px;
margin-bottom: 10px;

}
#display p{
font-size: 20px;
}
/* square */
#squares{
margin-top: 20px;
}

#squares .box{
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#squares .box img{
width: 90px;
border-radius: 50%;
}

/* footer */
footer{
padding: 20px;
margin-top: 20px;
color: #ffffff;
background-color: #0B5068;
text-align: center;
}

/* Media queries*/
@media(max-width: 768px){
header #brand,
header nav,
header nav li,
#squares .box
article#about-col,
aside#leftbar{
float: none;
text-align: center;
width: 100%;
}
header{
padding-bottom: 20px;
}
#display h1{
margin-top: 40px;
}
.order button{
display: block;
width: 100%;
}
}
85 changes: 85 additions & 0 deletions UI/profile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Profile page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/profile_style.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<div id="brand">
<h1><span class="highlight">Profile</span>Page</h1>
</div>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="orders_display_users.html">View Orders</a></li>
<li><a href="index.html">Logout</a></li>
</ul>
</nav>
</div>
</header>



<section>
<div class="container">
<article id="about-col">
<h3>Personal Info</h3>
<p>Username: SiriusBlack</p>
<p>DOB: 20th March 1978</p>
<p>Address: Dagoretti Corner, Nairobi County</p>
<p>Phone: +254721*****6</p>
<ul id="orders">
<li>
<h3>Delivered Orders : 4</h3>
<p>Thirty geography textbooks</p>
<p>ten marker pens</p>
<p>Two ink catridges</p>
<p>Fourteen HB pencils</p>
</li>
<li>
<h3>Orders yet to arrive: 2</h3>
<p>Eight square-ruled counterbooks</p>
<p>Fifty pieces of manilla paper</p>
</li>
</ul>
</article>

<aside id="leftbar">
<div class="navy">
<h3>Update Personal info</h3>
<form class="create">
<div class="label">
<label>Username:</label><br>
<input type="text" placeholder="username">
</div>
<div class="label">
<label>Date of birth:</label><br>
<input type="text" placeholder="DOB">
</div>
<div class="label">
<label>Physical residence:</label><br>
<input type="text" placeholder="address">
</div>
<div class="label">
<label>Phone no.:</label><br>
<input type="text" placeholder="+254********">
</div>
<button class="button_1" type="submit">Update</button>
</form>
</div>
</aside>
</div>
</section>

<footer>
<p>Send-IT, Copyright &copy; 2018</p>
</footer>

</body>
</html>