Testimonials Compuware layout

Developer
Kdooley
Size
3,832 Kb
Views
18,216
  1. Testimonials Compuware layout Previews
  2. Testimonials Compuware layout HTML Codes
  3. Testimonials Compuware layout CSS Codes
  4. Testimonials Compuware layout JS Codes

How do I make an testimonials compuware layout?

What is a testimonials compuware layout? How do you make a testimonials compuware layout? This script and codes were developed by Kdooley on 25 September 2022, Sunday.

Testimonials Compuware layout Previews
IQ Test

Testimonials Compuware layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Testimonials Compuware layout</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="testamonials section"> <div class="inside"> <div class="testamonial"> <h3>"Let Compuware APM Do The Work For You"</h3> <div class="author"> <a href="#">Jane Gress</a> </div> </div> <div class="faces"> <div class="line"> <a href="#" data-order="0" class="face face1 selected"></a> <a href="#" data-order="1" class="face face2"></a> <a href="#" data-order="2" class="face face3"></a> <a href="#" data-order="3" class="face face4"></a> <a href="#" data-order="4" class="face face5"></a> </div> </div> </div> </div>
<div class="testamonials section"> <div class="inside"> <div class="testamonial"> <h3>"SOME THINGS ARE JUST BETTER WITH US."</h3> <div class="author"> QUOTE ONE </div> </div> <div class="faces"> <div class="line"> <a href="#" data-order="0" class="face face1 selected"></a> <a href="#" data-order="1" class="face face2"></a> <a href="#" data-order="2" class="face face3"></a> <a href="#" data-order="3" class="face face4"></a> <a href="#" data-order="4" class="face face5"></a> </div> </div> </div> </div> <script src="js/index.js"></script>
</body>
</html>

Testimonials Compuware layout - Script Codes CSS Codes

.testamonials { padding: 60px 0; border-top: 1px solid rgba(0, 0, 0, 0.1); text-align: center; position: relative; background: white;
}
.testamonials .testamonial { opacity: 1; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; height: 200px;
}
.testamonials .testamonial.invisible { opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out;
}
.testamonials .testamonial h3 { max-width: 740px; font-family: 'Roboto', sans-serif; text-transform: UPPERCASE; font-size: 36px; color: #7A7A7A; line-height: 43px; margin: 28px auto 34px auto;
}
.testamonials .testamonial .author { font-size: 19px; font-family: 'Titillium Web', sans-serif;
}
.testamonials .testamonial .author a { color: #05c3f9;
}
.testamonials .testamonial .author span { color: #545454; font-family: 'din-light', sans-serif;
}
.testamonials .faces { display: inline-block; margin: 48px auto 9px auto;
}
.testamonials .faces .line { overflow: hidden;
}
.testamonials .faces .line:nth-child(2n) { position: relative; top: -11px; left: 35px;
}
.testamonials .faces .face { width: 70px; height: 70px; float: left; margin-right: 5px; opacity: .5; -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; border-radius: 50px;
}
.testamonials .faces .face.selected { opacity: 1;
}
.testamonials .faces .face.face1 { background: url("http://placehold.it/350x350&text=ONE") no-repeat; background-size: 100%;
}
.testamonials .faces .face.face2 { background: url("http://placehold.it/350x350&text=TWO") no-repeat; background-size: 100%;
}
.testamonials .faces .face.face3 { background: url("http://placehold.it/350x350&text=THREE") no-repeat; background-size: 100%;
}
.testamonials .faces .face.face4 { background: url("http://placehold.it/350x350&text=FOUR") no-repeat; background-size: 100%;
}
.testamonials .faces .face.face5 { background: url("http://placehold.it/350x350&text=FIVE") no-repeat; background-size: 100%;
}
.testamonials .faces .face:last-child { margin-right: 0px;
}
.testamonials .faces .face:hover { opacity: 1; -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out;
}
.author a { text-decoration: none;
}

Testimonials Compuware layout - Script Codes JS Codes

 var faces = document.querySelectorAll('.face'); var testamonial = document.querySelector('.testamonial'); var testamonialHeadline = testamonial.querySelector('h3'); var testamonialName = testamonial.querySelector('a'); var setFace = function(current) { for (var i=0; i<faces.length; i++) { faces[i].classList.remove('selected'); } faces[current].classList.add('selected'); }; var setTestamonial = function(quote) { testamonial.classList.add('invisible'); setTimeout(function() { testamonialHeadline.innerHTML = quote.quote; testamonialName.innerHTML = quote.name; testamonial.classList.remove('invisible'); }, 350); }; var testamonialsCurrent = 1; var quotes = [ { name: 'Quote One', quote: '"SOME THINGS ARE JUST BETTER WITH US."' }, { name: 'QUOTE TWO', quote: '"I can already see it improving my life when I\'m communicating with people."' }, { name: 'QUOTE THREE', quote: '"It\'s also helped my speaking, because I\'m little bit more considerate about overusing words."' }, { name: 'QUOTE FOUR', quote: '"Elevate allows me to better my communication personally and professionally."' }, { name: 'QUOTE FIVE', quote: '"I\'m seeing myself improve in different ways that I didn\'t know I could."' } ]; for (var i=0; i<faces.length; i++) { faces[i].addEventListener('click', function(e) { e.preventDefault(); this.classList.add('selected'); testamonialsCurrent = this.dataset.order; setTestamonial(quotes[testamonialsCurrent]); setFace(testamonialsCurrent); testamonialsCurrent++; }); }
Testimonials Compuware layout - Script Codes
Testimonials Compuware layout - Script Codes
Home Page Home
Developer Kdooley
Username kdooley89
Uploaded September 25, 2022
Rating 4
Size 3,832 Kb
Views 18,216
Do you need developer help for Testimonials Compuware layout?

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!

Kdooley (kdooley89) Script Codes
Name
DoorChampion Login Page
Leadership Bio Buildout
DevOps Submenu
Features Slider
Login Screen
Color Swatches
VSCO Emulation
MobileDev App Page
Fixed-Background-Panels
A Pen by Kdooley
Create amazing Facebook ads 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!