Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
added custom css
  • Loading branch information
@mas12038
mas12038 committed Dec 10, 2016
1 parent 8a317b4 commit caa9572
Show file tree
Hide file tree
Showing 4 changed files with 238 additions and 94 deletions.
61 changes: 37 additions & 24 deletions antibiotic.html
View file
Expand Up @@ -10,6 +10,8 @@
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
Expand All @@ -20,37 +22,43 @@
</head>
<body>
<div class="container">
<a href="index.html"><h1>ABXinRLS</h1></a>
<div class="col-xs-6">
<h1>ABXinRLS</h1>
</div>
<div class="col-xs-6">
<a href="#" class="btn btn-info btn-lg pull-right user-btn">
<i class="material-icons md-48">account_circle</i>
</a>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="col-xs-12 col-md-6 col-md-offset-3">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg" placeholder="Enter Diagnosis" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
<i class="material-icons md-18">search</i>
</button>
</span>
</div>
</div>
</div>
<div class="col-md-3">
<a href="user.html" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</a>
</div>
</div>

<div class="row">
<div class="col-md-10">
<div class="col-md-8 col-md-offset-2">
<h2 class="page-name">Antibiotic Name</h2>
</div>
</div>
</div>

<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading"><h2>Antibiotic Notes</h2></div>
<div class="panel-heading">
<h4 class="panel-title">
Antibiotic Notes
</h4>
</div>
<div class="panel-body">Antibiotic Content Info</div>
</div>
</div>
Expand All @@ -60,58 +68,63 @@
<div class="col-md-8 col-md-offset-2">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-heading" data-toggle="collapse" href="#collapse1">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Related Diagnosis List</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body"> <a data-toggle="collapse" href="#collapse3">Diagnosis Result 1</a></div>
<div class="panel-body" data-toggle="collapse" href="#collapse3"> <a data-toggle="collapse" href="#collapse3">Diagnosis Result 1</a></div>
<i class="material-icons md-48 pull-right abx-result">keyboard_arrow_down</i>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-footer">
<p>Diagnosis Result 1 Information</p>
<a class="more-link" href="diagnosis.html">More <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
</div>
</div>

<div class="panel-body"> <a data-toggle="collapse" href="#collapse4">Diagnosis Result 2</a></div>
<div class="panel-body" data-toggle="collapse" href="#collapse4"> <a data-toggle="collapse" href="#collapse4">Diagnosis Result 2</a></div>
<i class="material-icons md-48 pull-right abx-result">keyboard_arrow_down</i>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-footer">
<p>Diagnosis Result 2 Information</p>
<a class="more-link" href="diagnosis.html">More <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
</div>
</div>

<div class="panel-body"> <a data-toggle="collapse" href="#collapse5">Diagnosis Result 3</a></div>
<div class="panel-body" data-toggle="collapse" href="#collapse5"> <a data-toggle="collapse" href="#collapse5">Diagnosis Result 3</a></div>
<i class="material-icons md-48 pull-right abx-result">keyboard_arrow_down</i>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-footer">
<p>Diagnosis Result 3 Information</p>
<a class="more-link" href="diagnosis.html">More <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
</div>
</div>

<div class="panel-body"> <a data-toggle="collapse" href="#collapse6">Diagnosis Result 4</a></div>
<div class="panel-body" data-toggle="collapse" href="#collapse6"> <a data-toggle="collapse" href="#collapse6">Diagnosis Result 4</a></div>
<i class="material-icons md-48 pull-right abx-result">keyboard_arrow_down</i>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-footer">
<p>Diagnosis Result 4 Information</p>
<a class="more-link" href="diagnosis.html">More <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
</div>
</div>

<div class="panel-body"> <a data-toggle="collapse" href="#collapse7">Diagnosis Result 5</a></div>
<div class="panel-body" data-toggle="collapse" href="#collapse7"> <a data-toggle="collapse" href="#collapse7">Diagnosis Result 5</a></div>
<i class="material-icons md-48 pull-right abx-result">keyboard_arrow_down</i>
<div id="collapse7" class="panel-collapse collapse">
<div class="panel-footer">
<p>Diagnosis Result 5 Information</p>
<a class="more-link" href="diagnosis.html">More <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


</div>


Expand All @@ -120,4 +133,4 @@
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
</html>
113 changes: 111 additions & 2 deletions css/main.css
View file
@@ -1,5 +1,7 @@
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900');

.page-name{
text-align: right;
text-align: left;
}
.panel{
margin:auto;
Expand All @@ -11,6 +13,11 @@
.classification{
text-align: right;
font-style: italic;
background-color: #311B92;
color: #fff;
min-height: 3em;
margin-top: -15px;
padding: 10px;
}
.profile-button{
padding:60px 0 60px 0;
Expand All @@ -22,4 +29,106 @@
#profile-edit{
display:block;
text-align: center;
}
}
/*headings*/
h1 {
font-family: Roboto,sans-serif;
font-weight: 900;
color: #4527A0;
}
h2 {
font-family: Roboto,sans-serif;;
font-weight: 700;
}
/*search bar*/
.form-control {
border-width: 0.5px;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);
transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.form-control:focus {
box-shadow: 0 3px 6px rgba(0,0,0,0.25), 0 4px 4px rgba(0,0,0,0.22);
}
.input-group.col-md-12 {
width: 100%;
}
/*button*/
.btn-info {
background-color: #4527A0;
border-radius: 4px;
}
.btn-info:hover {
background-color: #212121;
}
.btn-info:focus {
background-color: #4527A0;
}
/*user button*/
.user-btn {
margin-top: 0.5em;
padding: 5px 30px 1px 30px;
}
i.material-icons.md-48 {
font-size: 36px;
}
.input-group-btn {
position: absolute;
right: 30px;
top: 8px;
}
#custom-search-input button {
border: 0;
background: none;
padding: 0;
margin-top: 2px;
/* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color:#4527A0;
z-index: 3;
}
/*title card*/
.page-name {
background-color: #4527A0;
color: #fff;
min-height: 5em;
padding: 4.5em 0 1em 0.5em;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
/*panels*/
.panel-group {
margin-bottom: 10px;
}
.panel-default>.panel-heading {
color: #fff;
background-color: #424242;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.panel-default>.panel-heading:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.abx-result {
margin: -40px 15px 0 0;
z-index: 3;
}
.panel-title {
font-family: Roboto, sans-serif;
font-weight: 400;
padding: 2.5em 0 0.5em 0;
font-size: 1.5em;
}
.panel-body a {
font-family: Roboto,sans-serif;
font-weight: 700;
color: #424242;
}
.more-link {
color: #4527A0;
}
.panel-footer {
background-color: #fff;
}

0 comments on commit caa9572

Please sign in to comment.