Wisconsin Kitchen Mart UX Styling

Developer
Tyler Einberger
Size
6,369 Kb
Views
16,192
  1. Wisconsin Kitchen Mart UX Styling Previews
  2. Wisconsin Kitchen Mart UX Styling HTML Codes
  3. Wisconsin Kitchen Mart UX Styling CSS Codes

How do I make an wisconsin kitchen mart ux styling?

What is a wisconsin kitchen mart ux styling? How do you make a wisconsin kitchen mart ux styling? This script and codes were developed by Tyler Einberger on 10 December 2022, Saturday.

Wisconsin Kitchen Mart UX Styling Previews
IQ Test

Wisconsin Kitchen Mart UX Styling - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wisconsin Kitchen Mart UX Styling</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--div wrapper to emulate wkm.inetwd.com-->
<div
<!--div wrapper to emulate wkm.inetwd.com-->
<div class="content-grid"> <div class="col-half tabletWidth100" style="text-align:center">
<div class="bigImgTxtWrap tabletWidth100" ><img class="tabletWidth100" src="http://wkm.inetwd.com/Content/files/Granite/Granite.png" /> <div class="imgTxtOverlayCenter"><h2>GRANITE</h2></div> </div> </div> <div class="col-half tabletWidth100 padding-left"> <div class="customResist tabletWidth75" style="margin:0 auto" > <h2>RESISTANT TO:</h2> <div class="customImgBenefits"> <img src="http://wkm.inetwd.com/Content/files/Granite/ScratchesSpillsHeatBacter.png"/></div> </div>
</div> </div> <h2>Exquisite Material for Quality Counters</h2>
<p>With granite countertops, you’ll have beauty, elegance, and style at every corner of your kitchen or bath. In addition to granite, we fabricate other stone counters, including:</p>
<div class="content-grid"> <div class="col-four tabletWidth50 mobileNoPadding"> <div class="smImgTxtWrap"><img src="http://wkm.inetwd.com/Content/files/Granite/Limestone.png" /> <div class="smTxtOverlayCenter"><h2>LIMESTONE</h2></div></div> </div> <div class="col-four tabletWidth50 mobileNoPadding"> <div class="smImgTxtWrap"><img src="http://wkm.inetwd.com/Content/files/Granite/Marble.png" /> <div class="smTxtOverlayCenter"><h2>MARBLE</h2></div></div> </div> <div class="col-four tabletWidth50 mobileNoPadding"> <div class="smImgTxtWrap"><img src="http://wkm.inetwd.com/Content/files/Granite/Slate.png" /> <div class="smTxtOverlayCenter"><h2>SLATE</h2></div></div> </div> <div class="col-four tabletWidth50 mobileNoPadding"> <div class="smImgTxtWrap"> <img src="http://wkm.inetwd.com/Content/files/Granite/Quartz.png" /> <div class="smTxtOverlayCenter"><h2>QUARTZ</h2></div></div> </div> </div>
</div>
<hr style="height:20px;background-color:red;border-color:red;"> <h1>Cabinet and Woodworking Craftspeople in Milwaukee</h1> <h2>Custom Cabinetry for Kitchen Remodeling</h2>
<p>At Wisconsin Kitchen Mart, anything but the finest workmanship goes against the grain. We have our very own cabinet and woodworking craftspeople to give you the ultimate variety in custom cabinetry, including our own Hampton and Greenfield lines. Our expert woodworkers handle more than just cabinets, crafting custom doors and even dining room tables!</p>
<p>We have 3 lines of custom wood cabinets available. Plato, Hampton, and Greenfield cabinets are all crafted specifically for your kitchen or bathroom remodel. Select from oak, maple, cherry, walnut, or a more exotic hardwood for your home.</p>
<p>Learn more about our cabinet lines now:</p> <div class="imgTxt3PackWrap"> <div class="imgTxt3Pack" ><img src="http://wkm.inetwd.com/Content/files/CabinetInstall/HamptonCabinetryIn.png"style="max-width:500px;"/><p>At Kitchen Mart, we believe in combining beauty with craftsmanship. Our Hampton Cabinet line will give your family years of use and enjoyment in your remodeled kitchen. Our cabinet specialists adapt the Hampton Cabinet line with highly usable features, like 120 degree open cabinet doors, offering the greatest storage space accessibility.</p>
<p>Each cabinet begins with hand selected hardwood, chosen specifically for your custom kitchen designs. Unlike cabinet shops, our carpenters do not stop with detailing the exterior of your cabinets. We stain inside and out to give your cabinetry a refined and finished look.</p></div> <div class="imgTxt3Pack altTextColor"><img src="http://wkm.inetwd.com/Content/files/CabinetInstall/PlatoWoodworkInstall.png"style="max-width:500px;"/><p>Started over 100 years ago in Plato, Minnesota, by the Pinske family, the Plato Cabinet line has come a long way from its local beginnings. With such fine woodworking, the Plato Cabinet line inevitably won national attention and became a must-have for kitchens across the country. Plato kitchen cabinets have adapted to modern demands while retaining their classical style.</p><p>The Plato Company is still owned by the Pinske family today. When you decide on Plato Cabinets for your kitchen remodel, you’re bringing hardwood with heritage into your home.</p></div> <div class="imgTxt3Pack"><img src="http://wkm.inetwd.com/Content/files/CabinetInstall/GreenfieldCabinetryInstal.png" style="max-width:500px;"/><p>The semi-custom cabinetry of the Greenfield line is based off standardized designs. From this standardized framework, our cabinetmakers will customize your cabinet setup to perfectly fit the design concept. We use the same exceptional workmanship and high quality hardwood to make every piece unique.</p>
<p>There are several styles of Greenfield cabinets for you to choose from. Visit our cabinet showroom to see all of our cabinet selections.</p></div> </div>
</div>
<hr style="height:20px;background-color:red;border-color:red;">
<div class="img6PackAllWrap">
<div class="img6PackWrap"> <img src="http://wkm.inetwd.com/Content/files/Craftspeople/Carpenters.png"/ style="max-width:100%;"> <div class="imgTxtOverlay"><h2>CARPENTERS</h2> <p>"Measure twice, cut once" is the mantra for Wisconsin Kitchen Mart carpenters. Our in-house finish carpenters handcraft beautiful cabinets, doors, and dining room tables custom designed to fit perfectly into your design concept. Our high-end Plato, Hampton, and Greenfield lines imbue a traditional elegance and modern efficiency your friends and family will envy.</p> </div></div>
<div class="img6PackWrap"> <img src="http://wkm.inetwd.com/Content/files/Craftspeople/Plumbers.png"/ style="max-width:100%;"> <div class="imgTxtOverlay"><h2>PLUMBERS</h2> <p>WKM’s certified plumbers flawlessly install top of the line faucets, sinks, disposals and dishwashers in remodeled bathrooms and kitchens. You’ll get the fixture design look you want, with perfect functionality to match.</p> </div></div> <div class="img6PackWrap"> <img src="http://wkm.inetwd.com/Content/files/Craftspeople/Electricians.png"/ style="max-width:100%;"> <div class="imgTxtOverlay"><h2>ELECTRICIANS</h2> <p>You want the latest in high-tech appliances, and our certified electricians have the skills to set them up for effortless use. No job is done until everything is up to code, working as designed and ready for your input. Our electricians power the future of your kitchen.</p> </div></div> <div class="img6PackWrap"> <img src="http://wkm.inetwd.com/Content/files/Craftspeople/Drywallers.png"/ style="max-width:100%;"> <div class="imgTxtOverlay"><h2>DRYWALLERS</h2> <p>Seamless drywall work and custom texturing you have to touch – your newly remodeled kitchen or bath will take on a whole different dimension when our drywall experts are done plying their trade. Drywall is your design canvas, and our experts provide the perfect framework to highlight the elegance of your kitchen design concept.</p> </div></div> <div class="img6PackWrap"> <img src="http://wkm.inetwd.com/Content/files/Craftspeople/FloorInstallers.png"/ style="max-width:100%;"> <div class="imgTxtOverlay"><h2>FLOOR INSTALLERS</h2> <p>Whether your design taste favors the luxurious natural dark wood of an East Asian yoga studio, or a honey-colored plank to lighten up your craftsman design, our flooring specialists have the materials and the mastery to satisfy. Come to Wisconsin Kitchen Mart for the solid wood flooring and custom tile working skills needed to fully transform your kitchen or bathroom.</p> </div></div> <div class="img6PackWrap"> <img src="http://wkm.inetwd.com/Content/files/Craftspeople/TileSetters.png"/ style="max-width:100%;"> <div class="imgTxtOverlay"><h2>TILE SETTERS</h2> <p>Cutting ceramic tile is an art, and our tile setters are regular Rembrandts with the saw and square. Whether you’re looking for a sleek and minimalistic tile floor or are dreaming of a Mediterranean villa, our tile setters are experienced enough to give you the floor, wall, backsplash or countertop tile design you want.</p> </div></div>
</div>
</body>
</html>

Wisconsin Kitchen Mart UX Styling - Script Codes CSS Codes

/** DEMO CSS ONLY**/
/** DEMO CSS ONLY**/
/** DEMO CSS ONLY**/
@font-face { font-family: 'Open Sans'; src: url("/Content/fonts/OpenSans-Light.eot"); src: url("/Content/fonts/OpenSans-Light.eot?#iefix") format("embedded-opentype"), url("/Content/fonts/OpenSans-Light.woff") format("woff"), url("/Content/fonts/OpenSans-Light.ttf") format("truetype"), url("/Content/fonts/OpenSans-Light.svg#OpenSans-Light") format("svg"); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Open Sans'; src: url("/Content/fonts/OpenSans-Regular.eot"); src: url("/Content/fonts/OpenSans-Regular.eot?#iefix") format("embedded-opentype"), url("/Content/fonts/OpenSans-Regular.woff") format("woff"), url("/Content/fonts/OpenSans-Regular.ttf") format("truetype"), url("/Content/fonts/OpenSans-Regular.svg#OpenSans-Regular") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Open Sans'; src: url("/Content/fonts/OpenSans-Semibold.eot"); src: url("/Content/fonts/OpenSans-Semibold.eot?#iefix") format("embedded-opentype"), url("/Content/fonts/OpenSans-Semibold.woff") format("woff"), url("/Content/fonts/OpenSans-Semibold.ttf") format("truetype"), url("/Content/fonts/OpenSans-Semibold.svg#OpenSans-Semibold") format("svg"); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Open Sans'; src: url("/Content/fonts/OpenSans-Bold.eot"); src: url("/Content/fonts/OpenSans-Bold.eot?#iefix") format("embedded-opentype"), url("/Content/fonts/OpenSans-Bold.woff") format("woff"), url("/Content/fonts/OpenSans-Bold.ttf") format("truetype"), url("/Content/fonts/OpenSans-Bold.svg#OpenSans-Bold") format("svg"); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Open Sans'; src: url("/Content/fonts/OpenSans-ExtraBold.eot"); src: url("/Content/fonts/OpenSans-ExtraBold.eot?#iefix") format("embedded-opentype"), url("/Content/fonts/OpenSans-ExtraBold.woff") format("woff"), url("/Content/fonts/OpenSans-ExtraBold.ttf") format("truetype"), url("/Content/fonts/OpenSans-Bold.svg#OpenSans-ExtraBold") format("svg"); font-weight: 900; font-style: normal; }
body{font-family: 'Open Sans', sans-serif; overflow-x:hidden; font-size: 14px; letter-spacing:.06em; -webkit-font-variant-ligatures:common-ligatures; font-variant-ligatures:common-ligatures;background-color:black; color:white;}
.wrapper{width:100%; max-width:1500px; padding:0 15px; margin:0 auto;
}
.HomeBody .SiteContent{clear:both;width:100%;background:#FFF; position: relative; z-index:2; color:#000;}.mainContent{padding:30px 0;}.mainContent h1{color:#98120f;font-size:20px;}.mainContent h2{color:#FFF;font-size:16px;font-style:italic;}.mainContent h3{color:#2a4464;font-size:15px;}.mainContent h5{color:#98120f;}.mainContent a{color:#98120f;}.mainContent a:hover{color:#FFF; text-decoration:none;}.HomeBody .mainContent h2{color:#2a4464;}.mainContent p{line-height:1.5;}
/**END OF DEMO CSS**/
/**END OF DEMO CSS**/
/*CONTENT GRID=================================================*/
/*******Content Utility Classes*******/
/*--General Responsive Styles--*/
/*desktopPhotoLimit, tabletPhotoLimit, and mobilePhotoLimit classes are applied to a div with an inline height declaration, wrapped around a photo. Adding one (or multiple) of these classes will make the image cropped at the selected screen size(s), to the height declared. For other widths, the height will be equal to the dimensions of the photo.*/
.content-grid img{max-width:100%}
.content-grid *{box-sizing:border-box;}
@media screen and (min-width: 1000px){	.desktopHide{display:none!important} .desktopWidth100{width:50%!important;} .desktopWidth75{width:75%!important;} .desktopWidth66{width:66.6666%!important;}	.desktopWidth50{width:50%!important;} .desktopWidth33{width:33.3333%!important;} .desktopWidth25{width:25%!important;} .desktopWidth16{width:16.6666%!important;}	.desktopPhotoLimit{overflow:hidden;position:relative;}	.tabletPhotoLimit:not(.desktopPhotoLimit),.mobilePhotoLimit:not(.desktopPhotoLimit){height:100%!important;}	.desktopNoTranslateY{transform:translateY(0)!important}
}
@media screen and (min-width:649px) and (max-width: 1000px){	.tabletHide{display:none!important;}	.tabletWidth100{width:100%!important;} .tabletWidth75{width:75%!important;} .tabletWidth66{width:66.6666%!important;}	.tabletWidth50{width:50%!important;}	.tabletWidth33{width:33.3333%!important;}	.tabletWidth25{width:25%!important;} .tabletWidth16{width:16.6666%!important;}	.tabletPhotoLimit{overflow:hidden}	.tabletCenter{margin:0 auto;display:block;}	.desktopPhotoLimit:not(.tabletPhotoLimit),	.mobilePhotoLimit:not(.tabletPhotoLimit){height:100%!important;}	.tabletNoTranslateY{transform:translateY(0)!important}
}
@media screen and (max-width: 648px){	.mobileHide{display:none!important;}	.mobileWidth100{width:100%!important;} .mobileWidth75{width:75%!important;} .mobileWidth66{width:66.6666%!important;}	.mobileWidth50{width:50%!important;}	.mobileWidth33{width:33.3333%!important;}	.mobileWidth25{width:25%!important;} .mobileWidth16{width:16.6666%!important;}	.mobilePhotoLimit{overflow:hidden;}	.desktopPhotoLimit:not(.mobilePhotoLimit),	.tabletPhotoLimit:not(.mobilePhotoLimit){height:100%!important;}	.mobileNoTranslateY{transform:translateY(0)!important} .floatRight{margin-left:0;float:none;}	.floatLeft{margin-right:0;float:none;} .mobileNoPadding{padding:0!important}
} .floatRight{float:right;margin-left:5px;} .floatLeft{float:left;margin-right:5px;}
/*--Grid Column Styles--*/
.content-grid, .content-grid .row{	width:100%; float:left; display:block ;clear:both; padding:20px 0; }	.content-grid .row {	border-bottom:1px solid #a5a5a5;	}	.content-grid .row:first-child {	border-top:1px solid #a5a5a5;	margin-top:20px;	} .col-full, .col-half, .col-third, .col-twoThird, .col-four, .col-threeFourth, .col-five, .col-twoFifth, .col-threeFifth, .col-fourFifth, .col-six, .col-fiveSixth {	float: left;	width: 100%;	margin-left: 0%;	padding:10px 0;	}
.content-grid .row.oneRow{border:none;margin:0;padding:0}
@media (min-width: 648px) { .col-full, .col-half, .col-third, .col-twoThird, .col-four, .col-threeFourth, .col-five, .col-twoFifth, .col-threeFifth, .col-fourFifth, .col-six, .col-fiveSixth {padding:0; } .padding-right {padding-right: 10px;} .padding-left {padding-left:10px;} .col-half {width: 50%;} .col-third {width: 33.33333%;} .col-four {width: 25%;} .col-five {width: 20%;} .col-six {width: 16.66666667%;} .col-twoFifth {width: 40%;} .col-threeFifth {width: 60%;} .col-twoThird { width: 66.66666%; } .col-threeFourth { width: 75%;} .col-fourFifth {width: 80%;} .col-fiveSixth {width: 83.33333333333333%;}
}
/*Granite Page text overlays*/
.bigImgTxtWrap*{
box-sizing:border-box;
}
.bigImgTxtWrap{ display:inline-block; position:relative;
}
.imgTxtOverlayCenter { text-align:center; position: absolute; background-color: #000; overflow: hidden; transition: 1s ease; opacity:0.80; display:block; box-sizing:border-box; width:70%; padding: 2% 1%; top:50%;left:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
.customResist{ font-size:2em; display:block; vertical-align:top; padding:5px; width:80%; margin: 0 0 0 10%; text-align:center;
}
.customResist h2{text-align:left;margin:0}
@media screen and (max-width:1000px){
.customResist h2{font-size:.8em} .customResist{width:90%; margin-left:5%;}
}
@media screen and (max-width:1000px){}
.customImgBenefits{ text-align:center; display:inline-block; box-sizing:border-box;
}
.smImgTxtWrap{ display:inline-block; position:relative; box-sizing:border-box; width:100%;
}
.smImgTxtWrap img{width:100%;}
.smTxtOverlayCenter { text-align:center; position: absolute; background-color: #000; overflow: hidden; transition: 1s ease; opacity:0.80; display:block; box-sizing:border-box; width:65%; padding: 2% 1%; top:50%;left:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
/*image text 3 pack*/
.imgTxt3PackWrap{ padding-top:15px; text-align:center;
}
.imgTxt3Pack {
text-align:left; padding:0.5%; color:#fff; display:inline-block; width:30%; vertical-align:top;
}
.imgTxt3Pack img{ width:100%;
} .altTextColor { color:#E99D7F;}
@media (max-width:900px){ .imgTxt3Pack{width:100%; } .imgTxt3Pack img{margin: 0 auto; display:block; }
}
/*Image 6 pack overlay*/
.img6PackAllWrap *{
box-sizing:border-box;
}
.img6PackAllWrap{ text-align:center;
}
.img6PackWrap img{width:100%;}
.img6PackWrap{ display:inline-block; position:relative; width:49%;
}
.imgTxtOverlay { text-align:left; position: absolute; background-color: #000; overflow: hidden; height: 70px; transition: 1s ease; opacity:0.80; display:block; box-sizing:border-box; bottom:0;left:0; padding: 2% 5%;
}
.img6PackWrap:hover .imgTxtOverlay { height: 100%; position:absolute; transition: .7s; display:inline-block;
}
@media screen and (max-width:1150px){ .img6PackWrap{font-size:0.95em;} .img6PackWrap h2{font-size:1.7em;}
}
@media screen and (max-width:1000px){ .img6PackWrap{width:100%;} .img6PackWrap h2{font-size:1.7em;}
}
@media screen and (max-width:700px){ .imgTxtOverlay {height: 100%;} .imgTxtOverlay h2{ margin:0px;;}
}
@media screen and (max-width:500px){ .img6PackWrap img{height:230px;} .imgTxtOverlay{opacity:.8; 0.9em}
}
Wisconsin Kitchen Mart UX Styling - Script Codes
Wisconsin Kitchen Mart UX Styling - Script Codes
Home Page Home
Developer Tyler Einberger
Username TylerEinberger
Uploaded December 10, 2022
Rating 3
Size 6,369 Kb
Views 16,192
Do you need developer help for Wisconsin Kitchen Mart UX Styling?

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!

Tyler Einberger (TylerEinberger) Script Codes
Name
Pump Jumplinks
WKM-Craftspeople
Temp Heating Jumplinks
WKM -Cabinet Install Content CSS
Mobile Responsive Family Tree
LCS-Location-ImgBtns
EAchieve AP
INET Web - Geo Top Nav
ConsensioHealth - SensER Page
EAchieve Grade Buttons Grouped
Create amazing sales emails 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!