Proper Luxury Hour

dabblet.css

/**
 * Proper Luxury Hour
 */


/* FONTS USED */
@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

 


/* GENERAL ENTIRETY */
* {
cursor:url(''), auto;
}


/* Phone device frame */
.phone {
height:980px;
position: relative;
left: 840px;
top:60px;
z-index:10;
}


/* Phone battery icon */
.phoneBattery {
position: relative;
height:18px;
top:-860px;
left:720px;
z-index:2;
transform:rotate(90deg);
}


/* Displays user's current time on phone */
#phoneTime {
color: red;
font-family:sans-serif;
font-size:200px;
font-weight:100;
position: relative;
top:0px;
left:0px;
z-index:20;
}


/* Mobile phone wifi icon */
.phoneWifi {
position: relative;
height:22px;
top:-858px;
left:660px;
z-index:2;
}


/* Grey bar border that envelops phone camera */
.camLine {
background-color: rgb(30,30,30);
height:50px;
width: 438px;
border-radius:40px 40px 0px 0px;
position: relative;
top:-900px;
left:868px;
z-index:;
}










/* HEADING SECTION */
       
/* This is heading section container */
.headBox {
height: 120px;
width:438px;
background-color: whitesmoke;
position: relative;
top:-900px;
left:868px;
border-radius:0px;
}


/* Heading background (displays watch image) */
.headBackdrop {
height:120px;
position: relative;
left:185px;
opacity:0.5;
}


/* Title of webpage shown in header container */
.brandTitle {
font-family: Italiana;
font-size:26px;
letter-spacing:4px;
position: relative;
text-align:center;
top: -96px;
color: white;
background:linear-gradient(rgb(80,80,80), rgba(5,5,5));
-webkit-text-fill-color: transparent;
-webkit-background-clip:text;
}


/* Shopping bag icon */
.shopBag {
height:20px;
position: relative;
right:-310px;
top:-50px;
}




/* MENU SECTION */

/* This is menu section container */
.menuBox {
position: relative;
top: -970px;
left:900px;
}


/* Top menu line */
.menuLine1 {
background-color: black;
height:3px;
width: 24px;
position: relative;
border-radius:5px;
}


/* Middle menu line */
.menuLine2 {
background-color: black;
height:3px;
width: 16px;
position: relative;
top:6px;
border-radius: 5px;
}


/* Bottom menu line */
.menuLine3 {
background-color: black;
height:3px;
width: 10px;
position: relative;
top:12px;
border-radius:5px;
}











/* MAIN BODY SECTION */

/* This is main body section container */
.bodyBox {
background-color: transparent;
height:780px;
width:446px;
position: relative;
top:-910px;
left:860px;
}


/* This is search section container */
.searchBackdrop {
position: relative;
top:0px;
opacity:0.85;
background-image:url('https://www.meitalstudios.com/wp-content/uploads/2018/09/Creative-Watch-Photo-Black-Gold.jpg');
background-repeat:no-repeat;
background-size:648px 546px;
background-position: bottom;
background-position-x:-100px;
background-position-y:-90px;
height:300px;
width:446px;
}

/* This is input box for search */
.search {
opacity:0.95;
margin-right:20px;
background-color:rgb(240,240,240);
position: relative;
top:-170px;
left:80px;
width:280px;
height:28px;
border-radius:2px;
border:1px solid black;
z-index: 2;
}


/* Styling of search placeholder */
::placeholder {
color:black;
padding:10px;
font-size:12px;
font-family: Lora;
font-size:14px;
}


/* Box that contains search icon */
.searchIconBox {
background-color: rgba(10,10,10,1);
border-radius:2px;
height:32px;
width:32px;
position: relative;
left:334px;
top:-202px;
z-index:3;
}


/* Search icon */
.searchIcon {
height:24px;
position: relative;
top: 4px;
left:4px;
z-index:3;
}


/* Contains body content */
.mainContent {
position:relative;
top:-94px;
background-color:white;
width:446px;
height:378px;
border-radius:0px 0px 40px 40px;
}


/* Display title */
.onDisplay {
font-family: Lora;
position:relative;
left:166px;
font-weight: 600;
}


/* Start Shopping title */
.startShopping {
font-family: Lora;
text-align:center;
font-weight: 600;
}


/* Left display arrow */
.leftArrow {
height:30px;
width:20px;
position: relative;
left:40px;
}


/* Right display arrow */
.rightArrow {
height:30px;
width:20px;
transform:rotate(180deg);
position: relative;
left:370px;
}

dabblet.html

<!-- content to be placed inside <body>…</body> -->


<!-- Phone device frame -->
<img src="https://i.imgur.com/rgW5saf.png" class="phone">
<img src="https://i.imgur.com/SVTLrvE.png" class="phoneBattery">
<img src="https://i.imgur.com/WXKvpSL.png" class="phoneWifi">
<div id="phoneTime"></div>
<div class="camLine"></div>


<!--=====================================================
                        HEADING
                        ↓  ↓  ↓
======================================================-->
<!-- Heading container -->
<div class="headBox">
	<img src="https://th.bing.com/th/id/R335eace45ab4a5f98fd5f117a9ec0abc?rik=3QWgtLB2S11%2b2g&riu=http%3a%2f%2fwww.pngall.com%2fwp-content%2fuploads%2f2%2fRolex-Watch-PNG-Clipart.png&ehk=BWfZ5SVqRbmLDSnZUtVo9hpB4X2Sa6XbBhRwZdT4rcI%3d&risl=&pid=ImgRaw" class="headBackdrop"></img>
	<img src="https://i.imgur.com/lxurQV6.png" class="shopBag">
	<h1 class="brandTitle">LUXURY HOUR</h1>
</div>



<!--=====================================================
               MENU BUTTON & MENU DISPLAY
======================================================-->
<!-- Menu Button Container -->
<div class="menuBox">
	<div class="menuLine1"></div>
	<div class="menuLine2"></div>
	<div class="menuLine3"></div>
</div>


<!--=====================================================
                        MAIN BODY
                         ↓  ↓  ↓
======================================================-->
<!-- Body container -->
<div class="bodyBox">

<!-- Below is search section -->
<div class="searchBackdrop"></div>
<input type="text" placeholder="Search..." class="search">
<div class="searchIconBox">
<img src="https://i.imgur.com/wFvc5cR.png" class="searchIcon"></img>
</div>

<div class="mainContent">
<br><br>
<h2 class="onDisplay">On Display</h2>
<img src="https://maxcdn.icons8.com/Share/icon/win8/Arrows/chevron_left1600.png" class="leftArrow">
<img src="https://maxcdn.icons8.com/Share/icon/win8/Arrows/chevron_left1600.png" class="rightArrow">
<br><br><br><br> <br><br><br><br> <br><br><br><br>
<h2 class="startShopping">Start Shopping</h2>
</div>
</div>

dabblet.js

// alert('Hello world!');


// Realtime clock below by Code Instinct; visit tutorial here ==> https://youtu.be/C2CrBlGvbEM 

function realtimeClock() {
var rtClock = new Date();
var hours = rtClock.getHours();
var minutes = rtClock.getMinutes();

// AM and PM systems
var amPm = (hours < 12) ? "am" : "pm";
hours = (hours > 12) ? hours - 12 : hours;

// Pad hours and minutes with leading zeros
hours = ("0" + hours).slice(-2);
minutes = ("0" + minutes).slice(-2);

// Display clock
document.getElementById('phoneTime').innerHTML = hours + ":" + minutes + " " + amPm;
var t = setTimeout(realtimeClock, 500); 
}

settings.json

{"view":"separate","fontsize":"110","seethrough":"1","prefixfree":"1","page":"html"}