{"id":83,"date":"2026-03-13T13:31:49","date_gmt":"2026-03-13T13:31:49","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/c_menhart\/?p=83"},"modified":"2026-03-13T13:31:49","modified_gmt":"2026-03-13T13:31:49","slug":"friday","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/c_menhart\/2026\/03\/13\/friday\/","title":{"rendered":"Friday"},"content":{"rendered":"\n<p>so today i made a tiktok style back screen <\/p>\n\n\n\n<p>this is my html i asked ai how to make something like this <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>PC Style TikTok&lt;\/title>\n    &lt;link rel=\"stylesheet\" href=\"styles.css\">\n&lt;\/head>\n&lt;body>\n&lt;div class=\"video-container\">\n    &lt;video class=\"video\" src=\"video1.mp4\" autoplay loop muted>&lt;\/video>\n\n    &lt;div class=\"overlay\">&lt;\/div>\n\n    &lt;div class=\"sidebar\">\n        &lt;div>\u2764\ufe0f&lt;\/div>\n        &lt;div>\ud83d\udcac&lt;\/div>\n        &lt;div>\ud83d\udd17&lt;\/div>\n    &lt;\/div>\n\n    &lt;div class=\"bottom-info\">\n        &lt;h3>@blackscreenuser193&lt;\/h3>\n        &lt;p>TikTok caption&lt;\/p>\n        &lt;p class=\"sound\">\ud83c\udfb5 Original Sound - User&lt;\/p>\n    &lt;\/div>\n    &lt;div class=\"search-container\">\n    &lt;input class=\"search-box\" type=\"text\" placeholder=\"Search videos, users...\">\n&lt;\/div>\n&lt;\/div>\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n\n\n\n<p>and more my styles i had ai to help me alot <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n    body {\n        margin: 0;\n        background: #000;\n        font-family: Arial, sans-serif;\n        overflow: hidden;\n    }\n\n    .video-container {\n        position: relative;\n        height: 100vh;\n        width: 100vw;\n    }\n\n    .video {\n        height: 100%;\n        width: 100%;\n        object-fit: cover;\n    }\n\n\n    .overlay {\n        position: absolute;\n        bottom: 0;\n        width: 100%;\n        height: 40%;\n        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);\n        pointer-events: none;\n    }\n\n    .sidebar {\n        position: absolute;\n        right: 25px;\n        bottom: 150px;\n        color: white;\n        font-size: 32px;\n        text-align: center;\n        line-height: 55px;\n        cursor: pointer;\n    }\n\n    .sidebar div:hover {\n        transform: scale(1.2);\n        transition: 0.2s;\n    }\n\n    .bottom-info {\n        position: absolute;\n        bottom: 30px;\n        left: 20px;\n        color: white;\n        font-size: 18px;\n    }\n\n    .bottom-info h3 {\n        margin: 0;\n        font-size: 20px;\n    }\n\n    .sound {\n        opacity: 0.8;\n        font-size: 14px;\n    }\n\n\n.search-container {\n    position: absolute;\n    top: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 40%;\n}\n\n.search-box {\n    width: 100%;\n    padding: 12px 20px;\n    border-radius: 30px;\n    border: none;\n    outline: none;\n    background: #1a1a1a;\n    color: white;\n    font-size: 16px;\n    box-shadow: 0 0 10px rgba(0,0,0,0.4);\n}\n.search-box::placeholder {\n    color: #888;\n}\n\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>so today i made a tiktok style back screen this is my html i asked ai how to make something [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-83","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/83","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/comments?post=83"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/83\/revisions"}],"predecessor-version":[{"id":85,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/83\/revisions\/85"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/media?parent=83"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/categories?post=83"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/tags?post=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}