On Click Flip Effect
Testimonial Section Layout
July 23, 2022
Infinity Carousal
July 23, 2022
Output
MIKO
Miko represents Nuit Solutions! He is the bridge, an interconnector between us and our clients. Miko, our Tech-Teddy is a very important member of our team as he creates strong brand awareness and a user-friendly environment. From informative posts, to blogs, email and website updates, he establishes an emotional bond and a sense of continuity that makes the client feel comfortably connected to us. Miko is a unique entity, a face that lends NUIT Solutions a personality.
Familiarity leads to popularity and a familiar teddy is sometimes all we need to feel secure.
NINA
Nina is the driving force of NUIT Solutions. Having 13 years of experience in Business Communication and Information Technology, she is an expert at conceptualizing new ideas and establishing business goals for clients to build up their online presence. She provides the right Vision to the entire team and is an effective role model. She inspires, influences and guides new members of the team to participate in a common effort. Apart from valuable propositions, she facilitates opportunities for learning and builds a comfortable work environment.
Every connection matters and grows stronger with the collective utilization of abilities.
UDAY
Uday is the Vita-M of our system, mentor and multivitamin, always around to boost our morale and mend our work pattern. He ensures efficiency and quick output, through training and evaluation, thus strengthening the head-and-hands of the web development team. With 8+ years of experience and vast knowledge of all languages and frameworks, he is adept at resolving technical queries or pointing out deficiencies in coding and helps to overcome them. His strong presence is vital to the Team, and his personality helps imbibe qualities of hardwork and perseverance.
You go ONE LEVEL UP with every 'slight' effort you make!
LORETTA
Loretta provides a clear vision for NUIT Initiatives and propels the ideas into action. She heads the Prayers and Petitions Team, as NUIT Solutions believes that working for man alone is not sufficient, but utilizing our skills for God's glory is what brings value and meaning to our work. From writing daily reflections to music and digital art, Loretta enables the soul of the company to develop with faith and perseverance. She reviews every project undertaken, from website designs to digital media - video creation, social media posts and more, and gives priceless inputs to better the way and style of functioning.
True gratification lies in the exploration of unlimited resources that creates a trademark in everything we do.
R. L. NARASIMHAN
RLN is our financial advisor and oversees all records and transactions of the company. Being a veteran, with 35+ years of experience in Mahindra & Mahindra, he helps prepare our profit goals and monitors the growth of the company. He builds confidence as we cater to our daily work with ease, knowing that, with him around, we can focus purely on delivering our best and not on finanical returns. He adds value to our profit, assists with records and tracks the monthly performance of each member in the team, with suitable rewards to lend appreciation. A silent worker, he is truly the backbone that keeps us going strong.
It is people that contribute to a company, and people who benefit from the growth.
ESHTON
Eshton is the hands-on expert who manages websites and e-commerce projects with an end-to-end approach. He is extremely energetic with a deep passion to explore new methods. He embraces inevitable challenges and is great at researching possible solutions. He efficiently handles the development team, ensuring quick execution of tasks, sharing his expertise with others, to help them grow. Along with technical abilities, he also has a variety of soft skills that makes him an exceptional manager.
Structured development is a game-changer with infinite possibilities of success.
SHIRLEY
Shirley acts as the cataylst in the team, with the key goal being not just success of each project, but also complete client success. With a pleasant disposition and good communication, she gels easily with the team, and ensures quality results. From aligning business goals to constructing work plans and analyzing and maintaining records, she handles every task smoothly and also coordinates with clients. Her creative ideas and suggestions facilitate the movement of tasks and the continuity of website projects. Her joyful nature brings positivity and enthusiasm to the working environment.
Providing light is not enough, you need to build a strategy with immense planning to reach successfully on the other side of the tunnel!
YUTIKA
Yutika brings life into a brand with powerful infographics, social media creatives, web , thus managing the visual aspect of our digital marketing services. She finds motivation in the challenge that a task presents. Girdled with imaginative ideas, she finds inspiration in everyday things. Being realistic in approach towards work, she sets perfect timelines for running projects that require coordination and continuity. She pushes all boundaries and is a natural out-of-the-box thinker who loves experimenting to achieve perfection.
Just having it isn't enough: the 'way' we 'depict' who we are matters!
BHASKAR
Bhaskar, the 'silent-worker', is a true coder at heart! He is extremely proficient in creating databases, developing smart user interfaces, troubleshooting issues and implementing new features. His knack of understanding client feedback and incorporating clean code is remarkable! From custom functionality based projects to highly complex visual animations, he is keen on tackling it all. A quick learner who adapts to changing priorities, he is surely a huge asset to the team!
Learning never fails when you delve just deep enough to catch a glimpse of the solution!
KINNARI
Kinnari plays the role of assisting in building and maintaining websites. She is eager to learn more and is passionate about work. She embraces the inevitable challenges that come with work and is able to suggest creative ideas and solutions. She has a desire to keep up with the latest trends. With experience in working with different page builders, she has a good understanding of web design. She pays strong attention to details and keeps an eye on the bigger picture. With effective soft skills, she is a fast learner and enhances collaboration with the team that keeps her on top of her game.
Strengthening of capabilities leads to development of oneself as well as advancement of a whole organization.
VILITA
Vilita is a bridge that connects our work to the world. She handles all media aspects – social media pages, Youtube channel content and blogs. She also contributes to lead generation, advertising aspects and client coordination. With brilliant ideas and innovative goals, she provides easy strategies that are implemented to build effective online presence. She is well-immersed in the social environment and builds relationships through social media. With good leadership and communication skills, Vilita is dependable and detail oriented.
The world is full of great people waiting for a greater influence.
PURVESH
Purvesh is an expert at creating strategies to increase a website's performance. With his thorough analysis and eye for detail, he not only recommends, but also executes most of the improvements that are required for a website to rank high in the Google Search Engine. Apart from SEO, his experience in coding, makes him an ace at building customized applications, of complex nature and intricate computation. Being consistent, pro-active and reliable, he is an asset to the team.
Nothing can be achieved without a strong will, persistent efforts, and a bit of wear-and-tear, be it by man or machine!
UJWAL
Ujwal is a passionate developer who is well versed in business logic and user experience. His forte is designing and constructing a website. His creativity and expertise in web development help him and the team to acquire the desired result at the given time set. A fast learner and a passionate worker, Ujwal ensures client satisfaction with designs and also the smooth functioning of websites. His consistent hard work and immense knowledge make him a great asset to the team.
Focus and determination combined with faith in the impossible is what makes a developer love his code.
HTML
<body>
<div class='container'>
<div class='center list flex-column'>
<div class='card flex-row open'>
<video autoplay="autoplay" playsinline="" muted="" loop="" width="100%" height="100%" class="book">
<source src="https://www.nuitsolutions.com/wp-content/uploads/2021/01/Miko.mp4" type="video/mp4">
</video>
<div class='flex-column info'>
<div class='title'>MIKO</div>
<div class='author'>The Waymaker - Our Mascot</div>
<div class='hidden bottom summary big'>
Miko represents Nuit Solutions! He is the bridge, an interconnector between us and our clients. Miko, our Tech-Teddy is a very important member of our team as he creates strong brand awareness and a user-friendly environment. From informative posts, to blogs, email and website updates, he establishes an emotional bond and a sense of continuity that makes the client feel comfortably connected to us. Miko is a unique entity, a face that lends NUIT Solutions a personality.
<blockquote>Familiarity leads to popularity and a familiar teddy is sometimes all we need to feel secure.</blockquote>
</div>
</div>
</div>
<div class='card flex-row'>
<video autoplay="autoplay" playsinline="" muted="" loop="" width="100%" height="100%" class="book">
<source src="https://www.nuitsolutions.com/wp-content/uploads/2021/01/Nina.mp4" type="video/mp4">
</video>
<div class='flex-column info'>
<div class='title'>NINA</div>
<div class='author'>The Thinker</div>
<div class='hidden bottom summary big'>
Nina is the driving force of NUIT Solutions. Having 13 years of experience in Business Communication and Information Technology, she is an expert at conceptualizing new ideas and establishing business goals for clients to build up their online presence. She provides the right Vision to the entire team and is an effective role model. She inspires, influences and guides new members of the team to participate in a common effort. Apart from valuable propositions, she facilitates opportunities for learning and builds a comfortable work environment.
<blockquote>Every connection matters and grows stronger with the collective utilization of abilities.</blockquote>
</div>
</div>
</div>
<div class='card flex-row'>
<video autoplay="autoplay" playsinline="" muted="" loop="" width="100%" height="100%" class="book">
<source src="https://www.nuitsolutions.com/wp-content/uploads/2021/11/Uday_Joshi_Mentor.mp4" type="video/mp4">
</video>
<div class='flex-column info'>
<div class='title'>UDAY</div>
<div class='author'>The Mentor</div>
<div class='hidden bottom summary big'>
Uday is the Vita-M of our system, mentor and multivitamin, always around to boost our morale and mend our work pattern. He ensures efficiency and quick output, through training and evaluation, thus strengthening the head-and-hands of the web development team. With 8+ years of experience and vast knowledge of all languages and frameworks, he is adept at resolving technical queries or pointing out deficiencies in coding and helps to overcome them. His strong presence is vital to the Team, and his personality helps imbibe qualities of hardwork and perseverance.
<blockquote>You go ONE LEVEL UP with every 'slight' effort you make!</blockquote>
</div>
</div>
</div>
<div class='card flex-row'>
<video autoplay="autoplay" playsinline="" muted="" loop="" width="100%" height="100%" class="book">
<source src="https://www.nuitsolutions.com/wp-content/uploads/2021/01/Loretta.mp4" type="video/mp4">
</video>
<div class='flex-column info'>
<div class='title'>LORETTA</div>
<div class='author'>The Reviewer</div>
<div class='hidden bottom summary big'>
Loretta provides a clear vision for NUIT Initiatives and propels the ideas into action. She heads the Prayers and Petitions Team, as NUIT Solutions believes that working for man alone is not sufficient, but utilizing our skills for God's glory is what brings value and meaning to our work. From writing daily reflections to music and digital art, Loretta enables the soul of the company to develop with faith and perseverance. She reviews every project undertaken, from website designs to digital media - video creation, social media posts and more, and gives priceless inputs to better the way and style of functioning.
</div>
</div>
</div>
<div class='card flex-row'>
<video autoplay="autoplay" playsinline="" muted="" loop="" width="100%" height="100%" class="book">
<source src="https://www.nuitsolutions.com/wp-content/uploads/2021/11/RLN_NUIT.mp4" type="video/mp4">
</video>
<div class='flex-column info'>
<div class='title'>R. L. NARASIMHAN</div>
<div class='author'>The Evaluator</div>
<div class='hidden bottom summary big'>
RLN is our financial advisor and oversees all records and transactions of the company. Being a veteran, with 35+ years of experience in Mahindra & Mahindra, he helps prepare our profit goals and monitors the growth of the company. He builds confidence as we cater to our daily work with ease, knowing that, with him around, we can focus purely on delivering our best and not on finanical returns. He adds value to our profit, assists with records and tracks the monthly performance of each member in the team, with suitable rewards to lend appreciation. A silent worker, he is truly the backbone that keeps us going strong.
<blockquote>It is people that contribute to a company, and people who benefit from the growth.</blockquote>
</div>
</div>
</div>
<div class='card flex-row'>
<video autoplay="autoplay" playsinline="" muted="" loop="" width="100%" height="100%" class="book">
<source src="https://www.nuitsolutions.com/wp-content/uploads/2021/01/Eshton.mp4" type="video/mp4">
</video>
<div class='flex-column info'>
<div class='title'>ESHTON</div>
<div class='author'>The Pacesetter</div>
<div class='hidden bottom summary big'>
Eshton is the hands-on expert who manages websites and e-commerce projects with an end-to-end approach. He is extremely energetic with a deep passion to explore new methods. He embraces inevitable challenges and is great at researching possible solutions. He efficiently handles the development team, ensuring quick execution of tasks, sharing his expertise with others, to help them grow. Along with technical abilities, he also has a variety of soft skills that makes him an exceptional manager.
<blockquote>Structured development is a game-changer with infinite possibilities of success.</blockquote>
</div>
</div>
</div>
<div class='card flex-row'>
<video autoplay="autoplay" playsinline="" muted="" loop="" width="100%" height="100%" class="book">
<source src="https://www.nuitsolutions.com/wp-content/uploads/2021/11/Shirley_NUIT.mp4" type="video/mp4">
</video>
<div class='flex-column info'>
<div class='title'>SHIRLEY</div>
<div class='author'>The Facilitator</div>
<div class='hidden bottom summary big'>
Shirley acts as the cataylst in the team, with the key goal being not just success of each project, but also complete client success. With a pleasant disposition and good communication, she gels easily with the team, and ensures quality results. From aligning business goals to constructing work plans and analyzing and maintaining records, she handles every task smoothly and also coordinates with clients. Her creative ideas and suggestions facilitate the movement of tasks and the continuity of website projects. Her joyful nature brings positivity and enthusiasm to the working environment.
<blockquote>Providing light is not enough, you need to build a strategy with immense planning to reach successfully on the other side of the tunnel!</blockquote>
</div>
</div>
</div>
<div class='card flex-row'>
<video autoplay="autoplay" playsinline="" muted="" loop="" width="100%" height="100%" class="book">
<source src="https://www.nuitsolutions.com/wp-content/uploads/2021/01/Yutika.mp4" type="video/mp4">
</video>
<div class='flex-column info'>
<div class='title'>YUTIKA</div>
<div class='author'>The Illustrator</div>
<div class='hidden bottom summary big'>
Yutika brings life into a brand with powerful infographics, social media creatives, web , thus managing the visual aspect of our digital marketing services. She finds motivation in the challenge that a task presents. Girdled with imaginative ideas, she finds inspiration in everyday things. Being realistic in approach towards work, she sets perfect timelines for running projects that require coordination and continuity. She pushes all boundaries and is a natural out-of-the-box thinker who loves experimenting to achieve perfection.
<blockquote>Just having it isn't enough: the 'way' we 'depict' who we are matters!</blockquote>
</div>
</div>
</div>
<div class='card flex-row'>
<video autoplay="autoplay" playsinline="" muted="" loop="" width="100%" height="100%" class="book">
<source src="https://www.nuitsolutions.com/wp-content/uploads/2022/06/BhaskAR.mp4" type="video/mp4">
</video>
<div class='flex-column info'>
<div class='title'>BHASKAR</div>
<div class='author'>The Ignitor</div>
<div class='hidden bottom summary big'>
Bhaskar, the 'silent-worker', is a true coder at heart! He is extremely proficient in creating databases, developing smart user interfaces, troubleshooting issues and implementing new features. His knack of understanding client feedback and incorporating clean code is remarkable! From custom functionality based projects to highly complex visual animations, he is keen on tackling it all. A quick learner who adapts to changing priorities, he is surely a huge asset to the team!
<blockquote>Learning never fails when you delve just deep enough to catch a glimpse of the solution!</blockquote>
</div>
</div>
</div>
<div class='card flex-row'>
<video autoplay="autoplay" playsinline="" muted="" loop="" width="100%" height="100%" class="book">
<source src="https://www.nuitsolutions.com/wp-content/uploads/2021/07/Kinanri-new.mp4" type="video/mp4">
</video>
<div class='flex-column info'>
<div class='title'>KINNARI</div>
<div class='author'>The Navigator</div>
<div class='hidden bottom summary big'>
Kinnari plays the role of assisting in building and maintaining websites. She is eager to learn more and is passionate about work. She embraces the inevitable challenges that come with work and is able to suggest creative ideas and solutions. She has a desire to keep up with the latest trends. With experience in working with different page builders, she has a good understanding of web design. She pays strong attention to details and keeps an eye on the bigger picture. With effective soft skills, she is a fast learner and enhances collaboration with the team that keeps her on top of her game.
<blockquote>Strengthening of capabilities leads to development of oneself as well as advancement of a whole organization.</blockquote>
</div>
</div>
</div>
<div class='card flex-row'>
<video autoplay="autoplay" playsinline="" muted="" loop="" width="100%" height="100%" class="book">
<source src="https://www.nuitsolutions.com/wp-content/uploads/2021/01/Vilita.mp4" type="video/mp4">
</video>
<div class='flex-column info'>
<div class='title'>VILITA</div>
<div class='author'>The Mediator</div>
<div class='hidden bottom summary big'>
Vilita is a bridge that connects our work to the world. She handles all media aspects – social media pages, Youtube channel content and blogs. She also contributes to lead generation, advertising aspects and client coordination. With brilliant ideas and innovative goals, she provides easy strategies that are implemented to build effective online presence. She is well-immersed in the social environment and builds relationships through social media. With good leadership and communication skills, Vilita is dependable and detail oriented.
<blockquote>The world is full of great people waiting for a greater influence.</blockquote>
</div>
</div>
</div>
<div class='card flex-row'>
<video autoplay="autoplay" playsinline="" muted="" loop="" width="100%" height="100%" class="book">
<source src="https://www.nuitsolutions.com/wp-content/uploads/2022/02/purvesh.mp4" type="video/mp4">
</video>
<div class='flex-column info'>
<div class='title'>PURVESH</div>
<div class='author'>The Analyzer</div>
<div class='hidden bottom summary big'>
Purvesh is an expert at creating strategies to increase a website's performance. With his thorough analysis and eye for detail, he not only recommends, but also executes most of the improvements that are required for a website to rank high in the Google Search Engine. Apart from SEO, his experience in coding, makes him an ace at building customized applications, of complex nature and intricate computation. Being consistent, pro-active and reliable, he is an asset to the team.
<blockquote>Nothing can be achieved without a strong will, persistent efforts, and a bit of wear-and-tear, be it by man or machine!
</blockquote>
</div>
</div>
</div>
<div class='card flex-row'>
<video autoplay="autoplay" playsinline="" muted="" loop="" width="100%" height="100%" class="book">
<source src="https://www.nuitsolutions.com/wp-content/uploads/2022/06/ujwal.mp4" type="video/mp4">
</video>
<div class='flex-column info'>
<div class='title'>UJWAL</div>
<div class='author'>The Actualizer</div>
<div class='hidden bottom summary big'>
Ujwal is a passionate developer who is well versed in business logic and user experience. His forte is designing and constructing a website. His creativity and expertise in web development help him and the team to acquire the desired result at the given time set. A fast learner and a passionate worker, Ujwal ensures client satisfaction with designs and also the smooth functioning of websites. His consistent hard work and immense knowledge make him a great asset to the team.
<blockquote>Focus and determination combined with faith in the impossible is what makes a developer love his code.
</blockquote>
</div>
</div>
</div>
</div>
</div>
</body>
CSS
body {
background-color: #131325;
}
.big{
font-size: 16px;
line-height: 28px;
font-weight: 400;
letter-spacing: 0px;
}
blockquote{
font-size: 1.4em;
width: 70%;
margin: 5px auto;
font-style: italic;
color: #555555;
padding: 1.2em 30px 1.2em 75px;
border-left: 8px solid #4c4f51;
line-height: 1.6;
position: relative;
background: #EDEDED !important;
top: 15px;
}
blockquote::before {
font-family: Arial;
content: "\201C";
color: #4c4f51;
font-size: 4em;
position: absolute;
left: 10px;
top: -10px;
bottom: auto;
}
.flex-row {
display: flex;
flex-flow: row;
align-items: center;
}
.flex-column {
display: flex;
flex-flow: column;
}
.center {
align-items: center;
top: 230%;
left: 50%;
}
.list {
border-radius: 3px;
overflow: hidden;
}
.list .card {
cursor: url("miko.png"),auto;
min-width: 700px;
margin-bottom: 10px;
perspective: 600px;
transition: all 0.1s;
background-color: #212140;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
height: 90px;
}
.list .card .bottom {
height: 0px;
overflow: hidden;
width: 200px;
font-size: 12px;
color: #777;
font-weight: normal;
}
.list .card.open {
padding: 30px;
height: auto;
}
.list .card.open .bottom {
margin-top: 10px;
height: 100%;
overflow: visible;
width: 100%;
color: white;
}
.list .card.open .book {
transform: rotateY(50deg);
box-shadow: -10px 10px 10px 2px rgba(0, 0, 0, 0.2), -2px 0px 0px 0px #888;
transition: all 0.5s;
transition-delay: 0.05s;
}
.list .card.open .info {
transform: translate(0, -10px);
width: 500px;
}
.list .card.open .members {
padding: 15px 20px;
border-radius: 4px;
align-self: flex-start;
}
.list .card button.simple {
cursor: pointer;
color: #CCC;
border: none;
outline: none;
border-radius: 4px;
background-color: #1ea94b;
padding: 15px 20px;
font-family: "Montserrat";
font-weight: bold;
transition: all 0.1s;
}
.list .card button.simple:hover {
box-shadow: 0px 15px 20px -5px rgba(0, 0, 0, 0.3);
transform: translate(0, -2px);
}
.list .card .book {
transition: all 0.5s;
width: 120px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
overflow: hidden;
width: 180px;
}
.list .card .info {
transition: all 0.2s;
min-width: 200px;
padding: 0px 30px;
font-family: "Montserrat";
font-weight: bold;
}
.list .card .info .title {
font-size: 24px;
color: white;
line-height: 28px;
font-weight: 700;
letter-spacing: 0px;
}
.list .card .info .author {
font-size: 16px;
font-weight: normal;
color: #fb6c3b;;
}
JS / JQ / CDN
/* Links for head area */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
/* Script at bottom */
<script type="text/javascript">
old = $('.card').get(0);
$('.card').click(function(){
if(old!==null && $(old).hasClass('open'))
$(old).toggleClass('open');
$(this).toggleClass('open');
old = this;
})
</script>
