Skip to content

Instantly share code, notes, and snippets.

@phinton2

phinton2/dabblet.css

Last active May 7, 2021 18:35
Show Gist options
  • Save phinton2/fc2c35262719b757f8597cfeb5fef0d7 to your computer and use it in GitHub Desktop.
Save phinton2/fc2c35262719b757f8597cfeb5fef0d7 to your computer and use it in GitHub Desktop.
Download ZIP
Project Luxury Hour
Raw
dabblet.css
/** Project Luxury Hour */
/* FONT IMPORTS */
@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');
/* ENTIRETY */
html {
}
body, body:hover {
}
.phone {
height:1000px;
width:464;
position:relative;
top:-940px;
left:830px;
z-index:5;
}
/* Entire website container */
.phoneFrame {
margin: 0 auto;
height: 980px;
width: 464px;
background-color: transparent;
border: none;
border-radius:5%;
position: relative;
top:70px;
}
/* HEADING */
/* Specifies header container*/
.headBox {
background-position: center;
height: 160px;
border-radius: 1%;
background-color: whitesmoke;
}
.headBackground {
position: relative;
left: 160px;
height: 160px;
opacity: 0.4;
}
/* Title of website found in head container */
.pageTitle {
font-family: Italiana;
font-size: 28px;
letter-spacing: 4px;
text-align:center;
position: relative;
top:-120px;
}
/* Shopping bag icon */
.bagIcon {
position: relative;
left:410px;
top: -74px;
height: 21px;
}
/* Search icon */
.searchIcon {
position: relative;
left: 390px;
top: -74px;
height: 16px;
}
/* MENU */
.menu {
position: relative;
top: -348px;
left: 32px;
}
/* Top menu line */
.line1 {
background-color: rgb(10,10,10);
height: 3px;
width: 30px;
position: absolute;
top: 180px;
border: transparent;
border-radius: 6px;
}
/* Middle menu line */
.line2 {
background-color: rgb(10,10,10);
height: 3px;
width: 16px;
position: absolute;
top: 190px;
border: transparent;
border-radius: 6px;
}
/* Bottom menu line */
.line3 {
background-color: rgb(10,10,10);
height: 3px;
width: 10px;
position: absolute;
top: 200px;
border: transparent;
border-radius: 6px;
}
/* MAIN BODY */
/* Main body container */
.bodyBox {
height: 820px;
}
/* First quote shown underneath head section */
.firstQuote {
font-family: Roboto;
font-weight:300;
text-align:center;
font-size: 14px;
}
/* Title of showcase which reads "On Display" */
.ourFinest {
font-family: Lora;
text-align:center;
font-weight: 600;
}
/* Arrow for display section facing the left */
.leftArrow {
position: relative;
top: 60px;
left:20px;
height: 40px;;
}
/* Arrow for display section facing the right */
.rightArrow {
position: relative;
top: 60px;
left: 360px;
height: 40px;
transform: rotate(180deg);
}
.startShopping {
font-family: Lora;
font-weight: 600;
text-align:center;
}
/* Background image to main body */
.bodyBackground {
height: 100%;
width: 470px;
position: relative;
left: -3px;
background-size: 220% 100%;
background-repeat: no-repeat;
background-position: center;
background-image: url('');
opacity: 0.8;
}
Raw
dabblet.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Luxury Watches</title>
</head>
<body>
<div class="phoneFrame">
<!-- Heading container -->
<div class="headBox">
<!-- Head images -->
<img src="https://cdn3.iconfinder.com/data/icons/line-icons-medium-version/64/shopping-bag-512.png" class="bagIcon">
<!--<img src="https://th.bing.com/th/id/R9ac6080ae413e03f98284a05d907c0ca?rik=VxtXf1nDTiocBQ&riu=http%3a%2f%2fcdn.onlinewebfonts.com%2fsvg%2fimg_409821.png&ehk=IzKQusEg7RLX66lFszBvH4JnJFbhxpta0jeowDFR%2fiM%3d&risl=&pid=ImgRaw" class="searchIcon">-->
<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="headBackground">
<h1 class="pageTitle">LUXURY HOUR</h1>
<!-- Menu container -->
<div class="menu">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="bodyBox">
<h3 class="firstQuote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore." <br> ― <b>Jane Doe</b></h3>
<br><br>
<div class="Finest">
<h2 class="ourFinest">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>
</div>
<div class="shopping">
<h2 class="startShopping">Start Shopping</h2>
</div>
<div class="bodyBackground"></div>
<label id="greetings"></label>
</div>
</div>
<img src="https://i.imgur.com/rgW5saf.png" class="phone">
</body>
</html>
Raw
dabblet.js
var myDate = new Date();
var hrs = myDate.getHours();
var greet;
if (hrs < 12)
greet = 'Good Morning';
else if (hrs >= 12 && hrs <= 17)
greet = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
greet = 'Good Evening';
document.getElementById('greetings').innerHTML =
greet + ' and welcome to the Luxury Hour website!';
Raw
settings.json
{"view":"split","fontsize":"70","seethrough":"1","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment