|
|
| Line 11: |
Line 11: |
| [[Category:Portal subpages]] | | [[Category:Portal subpages]] |
| </noinclude> | | </noinclude> |
| <div class="rightbox">
| |
| <div class="rb-container">
| |
| <ul class="rb">
| |
| <li class="rb-item" ng-repeat="itembx">
| |
| <div class="timestamp">
| |
| 3rd May 2020<br> 7:00 PM
| |
| </div>
| |
| <div class="item-title">Chris Serrano posted a photo on your wall.</div>
| |
|
| |
| </li>
| |
| <li class="rb-item" ng-repeat="itembx">
| |
| <div class="timestamp">
| |
| 19th May 2020<br> 3:00 PM
| |
| </div>
| |
| <div class="item-title">Mia Redwood commented on your last post.</div>
| |
|
| |
| </li>
| |
|
| |
| <li class="rb-item" ng-repeat="itembx">
| |
| <div class="timestamp">
| |
| 17st June 2020<br> 7:00 PM
| |
| </div>
| |
| <div class="item-title">Lucas McAlister just send you a message.</div>
| |
|
| |
| </li>
| |
|
| |
| </ul>
| |
|
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <style>
| |
| @import url("https://fonts.googleapis.com/css2?family=PT+Sans&display=swap");
| |
|
| |
| body {
| |
| background: #e8cbc0;
| |
| }
| |
|
| |
| .container {
| |
| background: #232931;
| |
| width: 540px;
| |
| height: 500px;
| |
| margin: 0 auto;
| |
| position: relative;
| |
| margin-top: 10%;
| |
| box-shadow: 2px 5px 20px rgba(119, 119, 119, 0.5);
| |
| }
| |
|
| |
| .leftbox {
| |
| top: -5%;
| |
| left: 5%;
| |
| position: absolute;
| |
| width: 15%;
| |
| height: 110%;
| |
| background-color: #50d890;
| |
| box-shadow: 3px 3px 15px rgba(119, 119, 119, 0.5);
| |
| }
| |
|
| |
| nav {
| |
| margin: 2.6em auto;
| |
| }
| |
|
| |
| nav a {
| |
| list-style: none;
| |
| padding: 35px;
| |
| color: #232931;
| |
| font-size: 1.1em;
| |
| display: block;
| |
| transition: all 0.5s ease-in-out;
| |
| }
| |
|
| |
| .rightbox {
| |
| padding: 0em 34rem 0em 0em;
| |
| height: 100%;
| |
| }
| |
|
| |
| .rb-container {
| |
| font-family: "PT Sans", sans-serif;
| |
| width: 50%;
| |
| margin: auto;
| |
| display: block;
| |
| position: relative;
| |
| }
| |
|
| |
| .rb-container ul.rb {
| |
| margin: 2.5em 0;
| |
| padding: 0;
| |
| display: inline-block;
| |
| }
| |
|
| |
| .rb-container ul.rb li {
| |
| list-style: none;
| |
| margin: auto;
| |
| margin-left: 10em;
| |
| min-height: 50px;
| |
| border-left: 1px dashed #fff;
| |
| padding: 0 0 50px 30px;
| |
| position: relative;
| |
| }
| |
|
| |
| .rb-container ul.rb li:last-child {
| |
| border-left: 0;
| |
| }
| |
|
| |
| .rb-container ul.rb li::before {
| |
| position: absolute;
| |
| left: -18px;
| |
| top: -5px;
| |
| content: " ";
| |
| border: 8px solid rgba(255, 255, 255, 1);
| |
| border-radius: 500%;
| |
| background: #50d890;
| |
| height: 20px;
| |
| width: 20px;
| |
| transition: all 500ms ease-in-out;
| |
| }
| |
|
| |
| .rb-container ul.rb li:hover::before {
| |
| border-color: #232931;
| |
| transition: all 1000ms ease-in-out;
| |
| }
| |
|
| |
| ul.rb li .timestamp {
| |
| color: #50d890;
| |
| position: relative;
| |
| width: 100px;
| |
| font-size: 12px;
| |
| }
| |
|
| |
| .item-title {
| |
| color: #fff;
| |
| }
| |
|
| |
| .container-3 {
| |
| width: 5em;
| |
| vertical-align: right;
| |
| white-space: nowrap;
| |
| position: absolute;
| |
| }
| |
|
| |
| .container-3 input#search {
| |
| width: 150px;
| |
| height: 30px;
| |
| background: #fbfbfb;
| |
| border: none;
| |
| font-size: 10pt;
| |
| color: #262626;
| |
| -webkit-border-radius: 5px;
| |
| -moz-border-radius: 5px;
| |
| border-radius: 5px;
| |
| margin: 0.9em 0 0 28.5em;
| |
| box-shadow: 3px 3px 15px rgba(119, 119, 119, 0.5);
| |
| }
| |
|
| |
| .container-3 .icon {
| |
| margin: 1.3em 3em 0 31.5em;
| |
| position: absolute;
| |
| width: 150px;
| |
| height: 30px;
| |
| z-index: 1;
| |
| color: #4f5b66;
| |
| }
| |
|
| |
| input::placeholder {
| |
| padding: 5em 5em 1em 1em;
| |
| color: #50d890;
| |
| }
| |
| <style> | | <style> |