Bruxzir - Sprite Practice

Developer
Juan Gallardo
Size
2,723 Kb
Views
34,408
  1. Bruxzir - Sprite Practice Previews
  2. Bruxzir - Sprite Practice HTML Codes
  3. Bruxzir - Sprite Practice CSS Codes

How do I make an bruxzir - sprite practice?

Just practicing with sprites for background images. What is a bruxzir - sprite practice? How do you make a bruxzir - sprite practice? This script and codes were developed by Juan Gallardo on 18 August 2022, Thursday.

Bruxzir - Sprite Practice Previews
IQ Test

Bruxzir - Sprite Practice - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bruxzir - Sprite Practice</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="containerIphone5"> <div class="innerIphone5"> <div class="wrapper"> <div class="homeHero"> <div class="homeTitle"> <h1> <a href="/">BruxZir</a> </h1> <h2>Solid Zirconia</h2> </div> <div class="international"> <div class="intlButton"> <i class="fa fa-globe"></i> <br> International </div> <!-- Planned functionality for production is not shown in this project --> </div> <!--/ .international --> </div> <!--/ .homeHero --> <div class="intro"> <p>BruxZir<sup>&reg;</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 class="introSelect"> <div> <a href="#"> <span>Dentist</span> </a> </div> <div> <a href="#"> <span>Patient</span> </a> </div> <div> <a href="#"> <span>Lab</span> </a> </div> </div> <!--/ .introSelect --> </div> <!--/ .intro --> </div> <!--/ .wrapper --> </div> <!--/ .inneriPhone --> </div> <!--/ .containerIphone -->
</div> <!--/ .outside -->
</body>
</html>

Bruxzir - Sprite Practice - 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;
}
.containerIphone5{ background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/iphone-5.png'); background-size: 396px 883px; background-color: transparent; width: 396px; height: 883px; margin: auto; position:absolute; top:0; left:0;bottom:0; right:0;
}
.innerIphone5{ background-color: #fff; width: 320px; height: 568px; height: 548px; margin: auto; position:absolute; top:-56px; /* needs improvement */ left:0;bottom:0; right:0;
}
/* Project */
.wrapper { font-family: helvetica; }
sup { font-size: 0.8em; }
.homeHero{ background-color: #333; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/bruxzir-microscope.jpg'); background-size: 360px 300px; height: 300px; width: 100%; position: relative;
}
.homeTitle{ position: absolute; top: 6px; left: 12px;
}
.homeTitle h1 { font-size: 36px; margin:0 0 4px 0;
}
.homeTitle h1 a { color: #fff; text-decoration: none; }
.homeTitle h2{ color: #fff; font-size: 20px; letter-spacing: 1px; margin:0;
}
.international { position: absolute; bottom: 4px; right: 3px;
}
.intlButton { background-color: rgba(225, 225, 225, .7); border-radius: 3px; color: #444; float: right; font-size: 11px; margin: 0 6px 6px 0; padding: 4px 4px 3px 4px; text-align: center;
}
.intlButton i { font-size: 23px; }
.intro{ padding: 12px; text-align: justify;
}
.intro p { margin: 0 0 6px 0; }
.introSelect { text-align:center; }
.introSelect div { display:inline-block; position: relative; text-align: center; background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/bruxzir-user-sprites_1.png') no-repeat; width: 90px;	height: 90px;
}
.introSelect div:nth-of-type(1) { background-position: 0 -180px ; }
.introSelect div:nth-of-type(2) { background-position: -90px -180px; }
.introSelect div:nth-of-type(3) { background-position: -180px -180px; }
.introSelect a { display:block; text-decoration: none; }
.introSelect span { background-color: rgba(152, 216, 242, 0.7); color: #444; font-weight: bold; letter-spacing: 1px; position: absolute; bottom: 0; left: 0; right: 0;
}
Bruxzir - Sprite Practice - Script Codes
Bruxzir - Sprite Practice - Script Codes
Home Page Home
Developer Juan Gallardo
Username JGallardo
Uploaded August 18, 2022
Rating 3
Size 2,723 Kb
Views 34,408
Do you need developer help for Bruxzir - Sprite Practice?

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!

Juan Gallardo (JGallardo) Script Codes
Name
International Sort
BruxZir - Tablet - Home Page
Blog Concept 1
Fixed sticky header when scrolling
Simple Modal
A Pen by Juan Gallardo
Saturn Grid System - Prototype1
BruxZir - Testimonial Section
Template - iPhone 5 - Vertical
Travel Location Select
Create amazing marketing copy with AI!

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!