#72 #73

Author: Gizmotronn

apps/readriordan/welcome.html

@@ -31,7 +31,7 @@
     </div>
   </div>
   <div class="delete-me-section">
-    <h1>Hi, <span ms-data="first-name">firstName</span> <span ms-data="last-name">lastName</span><br>Welcome to Riordanmore - Basic</h1>
+    <h1>Hi, <span ms-data="first-name">firstName</span> <br>Welcome to Riordanmore - Basic</h1>
     <div class="w-richtext">
       <p>Thanks for joining the riordanmore community. We've got a lot of work to do to finish the site, but we're glad you've taken the plunge and joined us!</p>
       <p>‍</p>

basic/account.html

@@ -35,7 +35,7 @@
           <div>This link is only visible to premium members 😁</div>
           <div class="black-diamond"></div>
         </div>-->
-      </a><a href="#" ms-profile="true" class="nav-link w-nav-link">Profile</a><a href="https://acord.software/apps/readriordan/welcome.html" class="nav-link w-nav-link">Read Riordan</a><a data-ms-content="dashboards" href="https://acord.software/basic/workspace/tutorials.html" class="nav-link w-nav-link">My Workspace</a><a data-ms-content="dashboards" href="https://acord.software/account/dashboard/elijah.html" class="button navbar-cta w-nav-link">Your Models</a></nav>
+      </a><a href="#" ms-profile="true" class="nav-link w-nav-link">Profile</a><a href="https://acord.software/apps/readriordan/welcome.html" class="nav-link w-nav-link">Read Riordan</a><a data-ms-content="dashboards" href="https://acord.software/basic/workspace/index.html" class="nav-link w-nav-link">My Workspace</a><a data-ms-content="dashboards" href="https://acord.software/account/dashboard/elijah.html" class="button navbar-cta w-nav-link">Your Models</a></nav>
     <div class="menu-button w-nav-button">
       <div class="w-icon-nav-menu"></div>
     </div>

basic/workspace/Onepage.html

@@ -0,0 +1,202 @@
+/******************************************************
+* #### jQuery-Youtube-Channels-Playlist v7.0 ####
+* Coded by Ican Bachors 2014.
+* https://github.com/bachors/jQuery-Youtube-Channels-Playlist
+* Updates will be posted to this site.
+******************************************************/
+
+.ycp {
+	font-family: "Roboto","Helvetica","Arial",sans-serif;
+	font-size: 1em;
+	color: #444;
+	background: #000;
+	display: block;
+	width: 100%;
+	height: 500px;
+	box-shadow: 0 4px 4px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+}
+
+.ycp,
+.ycp .belah {
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+.ycp .belah {
+	display: inline-block;
+	vertical-align: top;
+	height: 100%;
+}
+
+.ycp .belah:first-of-type {
+	width: 65%;
+}
+
+.ycp .belah:last-of-type {
+	width: 35%;
+}
+
+.ycp .belah .luhur {
+	color: #fff;
+	background: #222;
+	display: block;
+	width: 100%;
+	height: 70px;
+	box-sizing: border-box;
+	padding: 10px;
+	margin: 0;
+}
+
+.ycp .belah .handap {
+	color: #ddd;
+	background: #111;
+	height: calc(100% - 70px);
+	padding: 0;
+	overflow-y: auto;
+	-moz-box-shadow: inset 0 0 10px #000;
+	-webkit-box-shadow: inset 0 0 10px #000;
+	box-shadow: inset 0 0 10px #000;
+}
+
+.ycp .belah .handap,
+.ycp .belah .bingkay {
+	display: block;
+	width: 100%;
+	box-sizing: border-box;
+	margin: 0;
+}
+
+.ycp .belah .bingkay {
+	height: 100%;
+	border: 0;
+}
+
+.ycp .belah .luhur span.tombol {
+	margin-right: 20px;
+	color: silver;
+}
+
+.ycp .belah .luhur span.about {
+	float: right;
+	background: #111;
+	padding: 2px;
+	border-radius: 50%;
+	width: 20px;
+	height: 20px;
+	text-align: center;
+}
+
+.ycp a {
+	text-decoration: none;
+	outline: 0;
+}
+
+.ycp a img {
+	border: 0;
+}
+
+.ycp .belah.ycp_vid_play {
+	cursor: pointer;
+}
+
+.ycp .belah.ycp_vid_play a {
+	background: #e52d27;
+	width: 120px;
+	height: 75px;
+	display: block;
+	border-radius: 10%;
+	position: relative;
+	top: calc(50% - 35px);
+	left: calc(50% - 60px);
+	text-align: center;
+}
+
+.ycp .belah.ycp_vid_play a::before {
+	color: #fff;
+	content: "\25B6";
+	z-index: 100;
+	font-size: 50px;
+}
+
+.ycp .belah .thumb {
+	float: left;
+	margin-right: 10px;
+	position: relative;
+	height: 61px;
+}
+
+.ycp .belah .thumb span {
+	position: absolute;
+	right: 2px;
+	bottom: -2px;
+	padding: 2px;
+	background: #000;
+	color: silver;
+	font-size: .8em;
+}
+
+.ycp .belah .play {
+	margin: 0;
+	padding: 10px;
+	display: block;
+	overflow: hidden;
+	*overflow: visible;
+}
+
+.ycp .belah .luhur div.title {
+	color: #fff;
+	border-bottom: 1px solid #111;
+	padding-bottom: 5px;
+	margin-bottom: 5px;
+}
+
+.ycp .belah .handap div.title {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.ycp .belah span.mute,
+.ycp .belah span.about a {
+	color: #767676;
+	font-size: .8em;
+}
+
+.ycp .belah .thumb img {
+	width: 80px;
+	height: 100%;
+	border: 2px solid #000;
+}
+
+.ycp .belah .play:hover,
+.ycp .belah .vid-active {
+	background: #000;
+}
+
+.ycp .belah .luhur .vid-prev,
+.ycp .belah .luhur .vid-next,
+.ycp .belah .play {
+	cursor: pointer;
+}
+
+@media screen and (max-width:767px) {
+	.ycp {
+		height: 1000px;
+	}
+
+	.ycp .belah,
+	.ycp .belah:first-of-type,
+	.ycp .belah:last-of-type {
+		width: 100%;
+		display: block;
+	}
+
+	.ycp .belah:first-of-type {
+		height: 40%;
+	}
+
+	.ycp .belah:last-of-type {
+		height: 60%;
+	}
+}