|
|
@@ -0,0 +1,423 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+<meta charset="utf-8" />
|
|
|
+<title>Multiple borders vintage frame</title>
|
|
|
+<style>
|
|
|
+:root{
|
|
|
+ --skintone-color: #DE9B72;
|
|
|
+ --dark-color: #3A3D3E;
|
|
|
+}
|
|
|
+
|
|
|
+.main{
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+body{
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
|
|
+ font-size: 1rem;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 1.5;
|
|
|
+ color: #212529;
|
|
|
+ text-align: left;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.body{
|
|
|
+ /*margin: 1em;*/
|
|
|
+ padding: 1em;
|
|
|
+ /*height: 100vh;*/
|
|
|
+ height: calc(100vh - 2em);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ background-size: 140%!important;
|
|
|
+ background-repeat: no-repeat !important;
|
|
|
+ background-position: center !important;
|
|
|
+ background-image: url(five-bells-washed-out-logo.png) , linear-gradient(to right, rgba(58, 61, 62, 1) 0%, rgba(58, 61, 62, 1) 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.text-center{
|
|
|
+ text-align: center !important;
|
|
|
+}
|
|
|
+
|
|
|
+.text-uppercase{
|
|
|
+ text-transform: uppercase !important;
|
|
|
+}
|
|
|
+
|
|
|
+div.container{
|
|
|
+ /*max-width: 960px;*/
|
|
|
+ /*min-height: calc(92vh - 5em + 5px);*/
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 992px){
|
|
|
+ .col-lg-12{
|
|
|
+ -ms-flex: 0 0 100%;
|
|
|
+ flex: 0 0 100%;
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 992px){
|
|
|
+ .body{
|
|
|
+ background-size: 148vh!important;
|
|
|
+ background-repeat: no-repeat !important;
|
|
|
+ background-position: 50% -31vh!important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.row{
|
|
|
+ margin-right: 0;
|
|
|
+ margin-left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+.social-row{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ right: 0;
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 768px){
|
|
|
+ .social-row{
|
|
|
+ position: relative;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.social-row a{
|
|
|
+ width: 2em;
|
|
|
+ height: 2em;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ padding: 1em 0;
|
|
|
+ z-index: 99;
|
|
|
+ margin-bottom: 1em;
|
|
|
+ margin-right: 1em;
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 768px){
|
|
|
+ .social-row a{
|
|
|
+ width: 2.5em;
|
|
|
+ height: 2.5em;
|
|
|
+ padding: 1em 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 1200px){
|
|
|
+ .social-row a{
|
|
|
+ width: 3em;
|
|
|
+ height: 3em;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+*/
|
|
|
+
|
|
|
+.countach{
|
|
|
+ font-family: countach,sans-serif;
|
|
|
+ font-weight: 400;
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.tilda-petite{
|
|
|
+ font-family: tilda-petite,sans-serif;
|
|
|
+ font-weight: 400;
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.montserrat{
|
|
|
+ font-family: montserrat, sans-serif;
|
|
|
+ font-weight: 300;
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.skintone-text{
|
|
|
+ color: var(--skintone-color);
|
|
|
+}
|
|
|
+
|
|
|
+.dark-text{
|
|
|
+ color: var(--dark-color);
|
|
|
+}
|
|
|
+
|
|
|
+.white-text{
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+a:hover{
|
|
|
+ color: #c2c2c2;
|
|
|
+}
|
|
|
+
|
|
|
+.dark-background{
|
|
|
+ background: var(--dark-color);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.logo{
|
|
|
+ width: 20vh;
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 768px){
|
|
|
+ .logo{
|
|
|
+ width: 16em;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 992px){
|
|
|
+ .logo{
|
|
|
+ width: 18em;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 1200px){
|
|
|
+ .logo{
|
|
|
+ width: 28vh;
|
|
|
+ height: 28vh;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+h1{
|
|
|
+ font-size: 4.5vh;
|
|
|
+ letter-spacing: 4px;
|
|
|
+ padding-top: .5em;
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 992px){
|
|
|
+ h1{
|
|
|
+ font-size: 2.75em;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 1200px){
|
|
|
+ h1{
|
|
|
+ font-size: 3em;
|
|
|
+ letter-spacing: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.lead{
|
|
|
+ font-size: 1.5rem;
|
|
|
+ padding-top: 0.5em;
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 992px){
|
|
|
+ .lead{
|
|
|
+ font-size: 2rem;
|
|
|
+ padding-top: 0.5em;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 1200px){
|
|
|
+ .lead{
|
|
|
+ font-size: 2.5rem;
|
|
|
+ padding-top: 1em;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+p.general{
|
|
|
+ font-size: 2.5vh;
|
|
|
+ margin-bottom: 0.5em;
|
|
|
+ line-height: 1.25em;
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 992px){
|
|
|
+ p.general{
|
|
|
+ font-size: 1.25em;
|
|
|
+ line-height: 1.5em;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 1200px){
|
|
|
+ p.general{
|
|
|
+ font-size: 1.5em;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.inner-border{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.outer-border{
|
|
|
+ border: 2px solid #DE9B72;
|
|
|
+ height: 99%;
|
|
|
+ width: 98%;
|
|
|
+ padding: 6px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 992px){
|
|
|
+ .outer-border{
|
|
|
+ height: 94%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.mid-border{
|
|
|
+ border: 6px solid #DE9B72;
|
|
|
+ height: calc(100% - 24px);
|
|
|
+ width: calc(100% - 24px); /* 2*6px border + 2*6px padding = 24px */
|
|
|
+ padding: 6px;
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.inner-border{
|
|
|
+ position: relative;
|
|
|
+ border: 2px solid #DE9B72;
|
|
|
+ height: calc(100% - 4px);
|
|
|
+ width: calc(100% - 4px);
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* Decorations */
|
|
|
+.corner-decoration{
|
|
|
+ position: absolute;
|
|
|
+ width: 3em;
|
|
|
+ margin: -3px;
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 768px){
|
|
|
+ .corner-decoration{
|
|
|
+ width: 3.5em;
|
|
|
+ margin: -4px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 992px){
|
|
|
+ .corner-decoration{
|
|
|
+ width: 4em;
|
|
|
+ margin: -5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 1200px){
|
|
|
+ .corner-decoration{
|
|
|
+ width: 5em;
|
|
|
+ margin: -6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.corner-decoration.corner-left-top{
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.corner-decoration.corner-right-top{
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ -webkit-transform: scaleX(-1);
|
|
|
+ transform: scaleX(-1);
|
|
|
+}
|
|
|
+
|
|
|
+.corner-decoration.corner-right-bottom{
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ -webkit-transform: scale(-1);
|
|
|
+ transform: scale(-1);
|
|
|
+}
|
|
|
+
|
|
|
+.corner-decoration.corner-left-bottom{
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ -webkit-transform: scaleY(-1);
|
|
|
+ transform: scaleY(-1);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.vertical-decoration{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ width: 11em;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+@media (min-width: 768px){
|
|
|
+ .vertical-decoration{
|
|
|
+ width: 16em;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+@media (min-width: 992px){
|
|
|
+ .vertical-decoration{
|
|
|
+ width: 20em;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 1200px){
|
|
|
+ .vertical-decoration{
|
|
|
+ width: 27em;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.vertical-decoration.top{
|
|
|
+ top: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.vertical-decoration.bottom{
|
|
|
+ bottom: 0;
|
|
|
+ -webkit-transform: scaleY(-1);
|
|
|
+ transform: scaleY(-1);
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<div class="body dark-background">
|
|
|
+ <div class="outer-border">
|
|
|
+ <div class="mid-border">
|
|
|
+ <div class="inner-border">
|
|
|
+ <img class="corner-decoration corner-left-top" src="corner-decoration.jpg"></img>
|
|
|
+ <img class="corner-decoration corner-right-top" src="corner-decoration.jpg"></img>
|
|
|
+ <img class="corner-decoration corner-right-bottom" src="corner-decoration.jpg"></img>
|
|
|
+ <img class="corner-decoration corner-left-bottom" src="corner-decoration.jpg"></img>
|
|
|
+ <img class="vertical-decoration top" src="horizontally-centered-vertical-decoration.png"></img>
|
|
|
+ <img class="vertical-decoration bottom" src="horizontally-centered-vertical-decoration.png"></img>
|
|
|
+
|
|
|
+ <!-- Page Content -->
|
|
|
+ <div class="container">
|
|
|
+ <!--
|
|
|
+ <div class="row social-row">
|
|
|
+ <a href="#" target="_blank" class="d-none" style="background-image: url(https://i.ibb.co/k0JQYv4/instagram-social-button.png)"></a>
|
|
|
+ </div>
|
|
|
+ -->
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-lg-12 text-center">
|
|
|
+ <img class="logo" src="five-bells-logo.png" alt="Five Bells logo">
|
|
|
+ <h1 class="text-uppercase white-text countach">Multiple borders vintage frame</h1>
|
|
|
+ <p class="lead skintone-text">
|
|
|
+ <span class="name skintone-text countach">Add your own washed</span>
|
|
|
+ <span class="place skintone-text tilda-petite">Creative Logo<span>
|
|
|
+ </p>
|
|
|
+
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+// https://codepen.io/chris_tudor/pen/OJPeQgb
|
|
|
+// maybe in my code here partial broken height 100%
|
|
|
+// todo corners for light theme
|
|
|
+// https://codepen.io/chris_tudor/full/OJPeQgb
|
|
|
+</script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
221V
