327 lines
17 KiB
PHP
327 lines
17 KiB
PHP
|
@extends('layout.master')
|
||
|
|
|
||
|
|
@section('content')
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12 grid-margin">
|
||
|
|
<div class="card">
|
||
|
|
<div class="position-relative">
|
||
|
|
<figure class="overflow-hidden mb-0 d-flex justify-content-center">
|
||
|
|
<img src="{{ url('https://via.placeholder.com/1300x272') }}"class="rounded-top" alt="profile cover">
|
||
|
|
</figure>
|
||
|
|
<div class="d-flex justify-content-between align-items-center position-absolute top-90 w-100 px-2 px-md-4 mt-n4">
|
||
|
|
<div>
|
||
|
|
<img class="wd-70 rounded-circle" src="{{ url('https://via.placeholder.com/70x70') }}" alt="profile">
|
||
|
|
<span class="h4 ms-3 text-dark">Amiah Burton</span>
|
||
|
|
</div>
|
||
|
|
<div class="d-none d-md-block">
|
||
|
|
<button class="btn btn-primary btn-icon-text">
|
||
|
|
<i data-feather="edit" class="btn-icon-prepend"></i> Edit profile
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex justify-content-center p-3 rounded-bottom">
|
||
|
|
<ul class="d-flex align-items-center m-0 p-0">
|
||
|
|
<li class="d-flex align-items-center active">
|
||
|
|
<i class="me-1 icon-md text-primary" data-feather="columns"></i>
|
||
|
|
<a class="pt-1px d-none d-md-block text-primary" href="#">Timeline</a>
|
||
|
|
</li>
|
||
|
|
<li class="ms-3 ps-3 border-start d-flex align-items-center">
|
||
|
|
<i class="me-1 icon-md" data-feather="user"></i>
|
||
|
|
<a class="pt-1px d-none d-md-block text-body" href="#">About</a>
|
||
|
|
</li>
|
||
|
|
<li class="ms-3 ps-3 border-start d-flex align-items-center">
|
||
|
|
<i class="me-1 icon-md" data-feather="users"></i>
|
||
|
|
<a class="pt-1px d-none d-md-block text-body" href="#">Friends <span class="text-muted tx-12">3,765</span></a>
|
||
|
|
</li>
|
||
|
|
<li class="ms-3 ps-3 border-start d-flex align-items-center">
|
||
|
|
<i class="me-1 icon-md" data-feather="image"></i>
|
||
|
|
<a class="pt-1px d-none d-md-block text-body" href="#">Photos</a>
|
||
|
|
</li>
|
||
|
|
<li class="ms-3 ps-3 border-start d-flex align-items-center">
|
||
|
|
<i class="me-1 icon-md" data-feather="video"></i>
|
||
|
|
<a class="pt-1px d-none d-md-block text-body" href="#">Videos</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row profile-body">
|
||
|
|
<!-- left wrapper start -->
|
||
|
|
<div class="d-none d-md-block col-md-4 col-xl-3 left-wrapper">
|
||
|
|
<div class="card rounded">
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
||
|
|
<h6 class="card-title mb-0">About</h6>
|
||
|
|
<div class="dropdown">
|
||
|
|
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
|
|
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||
|
|
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
|
||
|
|
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="git-branch" class="icon-sm me-2"></i> <span class="">Update</span></a>
|
||
|
|
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View all</span></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p>Hi! I'm Amiah the Senior UI Designer at NobleUI. We hope you enjoy the design and quality of Social.</p>
|
||
|
|
<div class="mt-3">
|
||
|
|
<label class="tx-11 fw-bolder mb-0 text-uppercase">Joined:</label>
|
||
|
|
<p class="text-muted">November 15, 2015</p>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3">
|
||
|
|
<label class="tx-11 fw-bolder mb-0 text-uppercase">Lives:</label>
|
||
|
|
<p class="text-muted">New York, USA</p>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3">
|
||
|
|
<label class="tx-11 fw-bolder mb-0 text-uppercase">Email:</label>
|
||
|
|
<p class="text-muted">me@nobleui.com</p>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3">
|
||
|
|
<label class="tx-11 fw-bolder mb-0 text-uppercase">Website:</label>
|
||
|
|
<p class="text-muted">www.nobleui.com</p>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 d-flex social-links">
|
||
|
|
<a href="javascript:;" class="btn btn-icon border btn-xs me-2">
|
||
|
|
<i data-feather="github"></i>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:;" class="btn btn-icon border btn-xs me-2">
|
||
|
|
<i data-feather="twitter"></i>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:;" class="btn btn-icon border btn-xs me-2">
|
||
|
|
<i data-feather="instagram"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- left wrapper end -->
|
||
|
|
<!-- middle wrapper start -->
|
||
|
|
<div class="col-md-8 col-xl-6 middle-wrapper">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12 grid-margin">
|
||
|
|
<div class="card rounded">
|
||
|
|
<div class="card-header">
|
||
|
|
<div class="d-flex align-items-center justify-content-between">
|
||
|
|
<div class="d-flex align-items-center">
|
||
|
|
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||
|
|
<div class="ms-2">
|
||
|
|
<p>Mike Popescu</p>
|
||
|
|
<p class="tx-11 text-muted">1 min ago</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="dropdown">
|
||
|
|
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
|
|
<i class="icon-lg pb-3px" data-feather="more-horizontal"></i>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
|
||
|
|
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="meh" class="icon-sm me-2"></i> <span class="">Unfollow</span></a>
|
||
|
|
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="corner-right-up" class="icon-sm me-2"></i> <span class="">Go to post</span></a>
|
||
|
|
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="share-2" class="icon-sm me-2"></i> <span class="">Share</span></a>
|
||
|
|
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="copy" class="icon-sm me-2"></i> <span class="">Copy link</span></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<p class="mb-3 tx-14">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minima delectus nemo unde quae recusandae assumenda.</p>
|
||
|
|
<img class="img-fluid" src="{{ url('https://via.placeholder.com/513x365') }}" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="card-footer">
|
||
|
|
<div class="d-flex post-actions">
|
||
|
|
<a href="javascript:;" class="d-flex align-items-center text-muted me-4">
|
||
|
|
<i class="icon-md" data-feather="heart"></i>
|
||
|
|
<p class="d-none d-md-block ms-2">Like</p>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:;" class="d-flex align-items-center text-muted me-4">
|
||
|
|
<i class="icon-md" data-feather="message-square"></i>
|
||
|
|
<p class="d-none d-md-block ms-2">Comment</p>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:;" class="d-flex align-items-center text-muted">
|
||
|
|
<i class="icon-md" data-feather="share"></i>
|
||
|
|
<p class="d-none d-md-block ms-2">Share</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-12">
|
||
|
|
<div class="card rounded">
|
||
|
|
<div class="card-header">
|
||
|
|
<div class="d-flex align-items-center justify-content-between">
|
||
|
|
<div class="d-flex align-items-center">
|
||
|
|
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||
|
|
<div class="ms-2">
|
||
|
|
<p>Mike Popescu</p>
|
||
|
|
<p class="tx-11 text-muted">5 min ago</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="dropdown">
|
||
|
|
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
|
|
<i class="icon-lg pb-3px" data-feather="more-horizontal"></i>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
|
||
|
|
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="meh" class="icon-sm me-2"></i> <span class="">Unfollow</span></a>
|
||
|
|
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="corner-right-up" class="icon-sm me-2"></i> <span class="">Go to post</span></a>
|
||
|
|
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="share-2" class="icon-sm me-2"></i> <span class="">Share</span></a>
|
||
|
|
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="copy" class="icon-sm me-2"></i> <span class="">Copy link</span></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<p class="mb-3 tx-14">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
||
|
|
<img class="img-fluid" src="{{ url('https://via.placeholder.com/513x365') }}" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="card-footer">
|
||
|
|
<div class="d-flex post-actions">
|
||
|
|
<a href="javascript:;" class="d-flex align-items-center text-muted me-4">
|
||
|
|
<i class="icon-md" data-feather="heart"></i>
|
||
|
|
<p class="d-none d-md-block ms-2">Like</p>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:;" class="d-flex align-items-center text-muted me-4">
|
||
|
|
<i class="icon-md" data-feather="message-square"></i>
|
||
|
|
<p class="d-none d-md-block ms-2">Comment</p>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:;" class="d-flex align-items-center text-muted">
|
||
|
|
<i class="icon-md" data-feather="share"></i>
|
||
|
|
<p class="d-none d-md-block ms-2">Share</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- middle wrapper end -->
|
||
|
|
<!-- right wrapper start -->
|
||
|
|
<div class="d-none d-xl-block col-xl-3">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12 grid-margin">
|
||
|
|
<div class="card rounded">
|
||
|
|
<div class="card-body">
|
||
|
|
<h6 class="card-title">latest photos</h6>
|
||
|
|
<div class="row ms-0 me-0">
|
||
|
|
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||
|
|
<figure class="mb-2">
|
||
|
|
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||
|
|
<figure class="mb-2">
|
||
|
|
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||
|
|
<figure class="mb-2">
|
||
|
|
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||
|
|
<figure class="mb-2">
|
||
|
|
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||
|
|
<figure class="mb-2">
|
||
|
|
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||
|
|
<figure class="mb-2">
|
||
|
|
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||
|
|
<figure class="mb-0">
|
||
|
|
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||
|
|
<figure class="mb-0">
|
||
|
|
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||
|
|
<figure class="mb-0">
|
||
|
|
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-12 grid-margin">
|
||
|
|
<div class="card rounded">
|
||
|
|
<div class="card-body">
|
||
|
|
<h6 class="card-title">suggestions for you</h6>
|
||
|
|
<div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
|
||
|
|
<div class="d-flex align-items-center hover-pointer">
|
||
|
|
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||
|
|
<div class="ms-2">
|
||
|
|
<p>Mike Popescu</p>
|
||
|
|
<p class="tx-11 text-muted">12 Mutual Friends</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
|
||
|
|
<div class="d-flex align-items-center hover-pointer">
|
||
|
|
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||
|
|
<div class="ms-2">
|
||
|
|
<p>Mike Popescu</p>
|
||
|
|
<p class="tx-11 text-muted">12 Mutual Friends</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
|
||
|
|
<div class="d-flex align-items-center hover-pointer">
|
||
|
|
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||
|
|
<div class="ms-2">
|
||
|
|
<p>Mike Popescu</p>
|
||
|
|
<p class="tx-11 text-muted">12 Mutual Friends</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
|
||
|
|
<div class="d-flex align-items-center hover-pointer">
|
||
|
|
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||
|
|
<div class="ms-2">
|
||
|
|
<p>Mike Popescu</p>
|
||
|
|
<p class="tx-11 text-muted">12 Mutual Friends</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
|
||
|
|
<div class="d-flex align-items-center hover-pointer">
|
||
|
|
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||
|
|
<div class="ms-2">
|
||
|
|
<p>Mike Popescu</p>
|
||
|
|
<p class="tx-11 text-muted">12 Mutual Friends</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex justify-content-between">
|
||
|
|
<div class="d-flex align-items-center hover-pointer">
|
||
|
|
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||
|
|
<div class="ms-2">
|
||
|
|
<p>Mike Popescu</p>
|
||
|
|
<p class="tx-11 text-muted">12 Mutual Friends</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- right wrapper end -->
|
||
|
|
</div>
|
||
|
|
@endsection
|