Commit 9ef860e6 authored by mdsecurity's avatar mdsecurity

commiing to look at other branch

parent 41a9eef8
<div class="app-container">
<div class="sidebar">
<h5 class="sidebar-heading">Sidebar Heading</h5>
<img class="sidebar-icon" src="{{icon1}}">
<img class="sidebar-icon" src="{{icon2}}">
<img class="sidebar-icon" src="{{icon3}}">
</div>
<div class="main-content">
<!--<button (click)="showSidebar = !showSidebar;">Toggle style</button>-->
<nav class="navbar navbar-light nav-whats-open">
<h1 class="navbar-brand mb-0"> Title Here</h1>
<nav class="navbar navbar-light bg-faded">
<div class="centered">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="supportedContentDropdown" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="supportedContentDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-secondary fa fa-search " type="submit"></button>
<!--<input class="form-control" type="text" placeholder="Search">-->
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</nav>
<h1 style="color:#2f363b;margin-left:1rem;">The Johnson Center</h1>
<hr>
<div class="card-content">
<div *ngFor="let location of locations" class="location-card card col-xs">
<img class="location-background-picture" src="{{location.picture}}" alt="Card image">
<img class="location-circle-picture" src="{{secondPic}}" alt="Card image">
<div class="card-block">
<h4 class="card-title mb-0">{{location._name}}</h4>
<p class="card-text">Opening Time: {{location.openTimes[dayOfTheWeek] | date:'shortTime'}}</p>
<p class="card-text">Closing Time: {{location.closeTimes[dayOfTheWeek] | date:'shortTime'}}</p>
</div>
</div>
</div>
</nav>
<div class="mountain-backgound">
</div>
</div>
......@@ -14,99 +14,13 @@ $card-circle-picture-diameter:7rem;
@import '../../styles.scss';
.app-container {
@extend .container;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
padding-right: 0;
padding-left: 0;
margin-right: 0;
margin-left: 0;
display: flex;
.centered {
margin-left: auto;
margin-right: auto;
width:66%;
}
.location-card {
width: $card-width;
height: $card-height;
margin: $card-spacing;
padding: 0px;
border-radius: $card-border-radius;
border: 0;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
margin:.5rem;
}
.location-card:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.location-background-picture {
height: $card-background-height;
width: 100%;
margin-bottom:$card-circle-picture-diameter/2;
}
.location-circle-picture {
position: absolute;
right:($card-width/2) - ($card-circle-picture-diameter/2);
top:$card-background-height - ($card-circle-picture-diameter/2);
border-radius:50%;
border:5px solid rgba(255, 255, 255, 1);
box-shadow: 0 0 1px white;
height: $card-circle-picture-diameter;
width: $card-circle-picture-diameter;
}
.sidebar {
height: 100%;
width: 98px;
//20%
background-color: #2b2b2b;
transition:all .5s cubic-bezier(0.55, 0, 0.1, 1);
color: #D7D7D4;
}
.main-content {
width:100%;
height:100%;
background: center center no-repeat scroll #f2f2f2;// #f5f5ef light cream
background-image: url('../assets/clock.png'); // possible use the mason M logo here
background-repeat: repeat;
}
.card-content {
display:flex;
margin-left: .5rem;
margin-right: .5rem;
}
hr {
display: block;
margin:.5rem;
margin-right: auto;
// border-style: inset;
border-top: 1px solid rgba(0, 0, 0, 1);
border-width: 2px;
max-width: 75%;
color: black;
}
.sidebar-heading {
margin-top: .5rem;
margin-left: .5rem;
}
.sidebar-icon {
// right:($card-width/2) - ($card-circle-picture-diameter/2);
// top:$card-background-height - ($card-circle-picture-diameter/2);
border-radius:50%;
// border:5px solid rgba(255, 255, 255, 1);
// box-shadow: 0 0 1px white;
height: $sidebar-icon-diameter;
width: $sidebar-icon-diameter;
.mountain-backgound{
background-image: "../assets/montains.png";
}
@mixin transition($transition...) {
-moz-transition: $transition;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment