BruxZir - Tablet - Home Page
How do I make an bruxzir - tablet - home page?
What is a bruxzir - tablet - home page? How do you make a bruxzir - tablet - home page? This script and codes were developed by Juan Gallardo on 19 January 2023, Thursday.
BruxZir - Tablet - Home Page - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>BruxZir - Tablet - Home Page</title> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="outside"> <div class="containerIpadAir"> <div class="innerIpadAir"> <div class="wrapper"> <div class="homeHero"> <div class="bg2"> <div class="headerNav"> <div class="headerTitle"> <h1><a href="/">BruxZir</a></h1> </div> <div class="headerMenu"> <!-- <a href="#" class="dd">≡</a> --> <ul> <li><a href="#">Features</a></li> <li><a href="#">Science</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Cases</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Find an authorized Lab</a></li> </ul> </div> </div> <!--/ .headerNav --> <div class="international"> <span class="intlFlag"></span> <span>North America</span> <span class="intlButton"> <a href="#"> <!-- link pending --> <i class="fa fa-globe"></i> </a> </span> </div> <!--/ .international --> </div> <!--/ .bg2 --> </div> <!--/ .homeHero --> <div class="intro"> <p>BruxZir<sup>®</sup> Solid Zirconia is a monolithic zirconia crown, bridge, screw-retained implant crown, inlay or onlay with no porcelain overlay. That provides a durable, more esthetic alternative for demanding situations.</p> </div> <!--/ .intro --> <ul class="mainOptions"> <li> <div class="optionIcon"> <i class="fa fa-book"></i> </div> <div class="optionLinks"> <h2>General Information</h2> <ul> <li><a href="#">Features of Awesome Product</a></li> <li><a href="#">Science of Awesome Product</a></li> <li><a href="#">Videos</a></li> </ul> </div> </li> <li> <div class="optionIcon"> <i class="fa fa-user-md"></i> </div> <div class="optionLinks"> <h2>Dentists</h2> <ul> <li><a href="#">Find a Laboratory</a></li> <li><a href="#">Marketing Resources</a></li> </ul> </div> </li> <li> <div class="optionIcon"> <i class="fa fa-hospital-o"></i> </div> <div class="optionLinks"> <h2>Laboratories</h2> <ul> <li><a href="#">Become an Authorized Laboratory</a></li> <li><a href="#">Marketing Resources</a></li> <li><a href="#">Outsource to Milling Center</a></li> </ul> </div> </li> </ul> </div> <!--/ .wrapper --> </div> <!--/ .inneriPhone --> </div> <!--/ .containerIphone -->
</div> <!--/ .outside -->
</body>
</html>
BruxZir - Tablet - Home Page - Script Codes CSS Codes
/* resets */
body { margin:0; padding:0; }
/* outer container */
.outside{ background: #e5e5e5; height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: -10;
}
.containerIpadAir{ background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/ipad-air-vertical.png'); background-size: 883px 1251px; background-color: transparent; width: 883px; height: 1251px; margin: auto; position:absolute; top:12px; left:0;bottom:0; right:0;
}
.innerIpadAir{ background-color: #fff; width: 768px; height: 1024px; height: 1004px; margin: auto; position:absolute; top:40px; /* needs improvement */ left:0;bottom:0; right:0;
}
/* ====== Project ====== */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
.wrapper { font-family: 'Open Sans', sans-serif; color: #444; }
sup { font-size: 0.8em; }
.homeHero { background-color: #333; width: 100%; height: 300px; position: relative;
}
/* for background */
.homeHero { background-image: url('https://shared-assets.s3.amazonaws.com/codepen/bruxzir/bruxzir-milling-machines.jpg'); background-size: cover; background-repeat: no-repeat; background-position: top center;
}
/* test */
.bg2 { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/dental-lab-services.png'); background-size: cover; background-repeat: no-repeat; background-position: top center; width: 100%; height: 300px; position: relative;
}
.headerNav { background-color:rgba(30,30,30, 0.3); height: 60px; position: relative;
}
.headerTitle { position: absolute; left: 12px;
}
.headerTitle h1 { font-size: 30px; line-height: 60px; margin: 0;
}
.headerTitle h1 a { color: #fff; text-decoration: none;
}
.headerMenu { line-height: 60px; position: absolute; top: 0; right: 12px;
}
.headerMenu a { color:#fff; text-decoration:none; }
.headerMenu ul { font-size: 16px; list-style-type: none; margin:0;
}
.headerMenu ul li { display:inline;
}
.headerMenu ul li a{ font-weight: 300; letter-spacing: 0.6px; padding: 4px 6px; background-color: rgb(26,26,32); border-radius:8px;
}
.international { background-color: rgba(96, 80, 80, 0.3); color: #fff; font-size: 18px; line-height: 42px; margin: auto; position: absolute; bottom: 0; left: 0; right: 0; width: 100%;
}
/* only on tablet */
.international { max-width: 240px; }
.international > span { display: inline-block; line-height: 42px; margin-left: 6px; vertical-align: middle;
}
.intlFlag { background-color: #fff; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/flag-sprite.png'); height: 28px; width: 44px;
}
.usFlag { background-position: 0px 0px; }
.intlButton { float: right; font-size: 24px; margin-right: 6px;
}
.intlButton a { color: #444; }
.intlButton i { background-color: rgba(225, 225, 225, 0.7); border-radius: 3px; padding: 4px;
}
.intro { border-top: 1px #777 solid; padding: 12px; text-align: justify;
}
.intro p { font-size: 23px; margin: 0; }
.mainOptions { list-style-type: none; padding-left: 0; }
.mainOptions { padding: 0 12px; } /* only in testing */
.mainOptions > li { margin-bottom: 12px; }
.optionIcon { background-color: #fee804; border-radius: 2px; height: 144px; width: 120px;
}
.optionIcon { clear: left; margin-bottom: 18px; }
.optionIcon, .optionLinks { float: left; }
.optionLinks { padding-left: 12px; }
.optionLinks h2 { letter-spacing: 1px; margin: 6px 0 12px 0; }
.optionLinks ul { font-size: 19px; letter-spacing: 1.2px; line-height: 24px; list-style-type: none; padding-left: 18px
}
.optionLinks ul li { border-bottom: #888 1px dashed; margin-bottom: 8px;
}
.optionLinks a { color: #444; font-weight: bold; text-decoration: none;
}
.optionIcon { text-align: center; }
.optionIcon i { font-size: 56px; margin-top: 13px;
}
Developer | Juan Gallardo |
Username | JGallardo |
Uploaded | January 19, 2023 |
Rating | 3 |
Size | 3,414 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Saturn Grid System - Prototype1 | 1,806 Kb |
Blog Concept 3 | 4,382 Kb |
Template - iPad Air - Vertical | 1,859 Kb |
Demo - swipe.js | 3,351 Kb |
Travel Location Select | 2,218 Kb |
A Pen by Juan Gallardo | 1,823 Kb |
Testimonial - Concept 1 | 1,880 Kb |
Foundation - Sample Header | 1,825 Kb |
Blog Concept 1 | 9,972 Kb |
Button - Test | 2,834 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Incremental game | Eprouver | 5,868 Kb |
Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
Intake Form Page 2 | Ijantje | 4,983 Kb |
Classy Blockquote Styling | Andrewwright | 3,212 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Mandelbrot Fractal | _Billy_Brown | 2,706 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Materializecss input form | Jasonchan | 1,443 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!