A Pen by Rostislav Ugrynyuk

Developer
Rostislav Ugrynyuk
Size
2,462 Kb
Views
10,120
  1. A Pen by Rostislav Ugrynyuk Previews
  2. A Pen by Rostislav Ugrynyuk HTML Codes
  3. A Pen by Rostislav Ugrynyuk CSS Codes

How do I make an a pen by rostislav ugrynyuk?

What is a a pen by rostislav ugrynyuk? How do you make a a pen by rostislav ugrynyuk? This script and codes were developed by Rostislav Ugrynyuk on 26 December 2022, Monday.

A Pen by Rostislav Ugrynyuk Previews
IQ Test

A Pen by Rostislav Ugrynyuk - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Rostislav Ugrynyuk</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="solutions-block">	<div class="container">	<div class="row">	<div class="col-md-4">	<div class="service-item">	<div class="service-icon">	<i class="icon ion-paper-airplane"></i>	</div>	<h3 class="service-title">Branding</h3> <div class="service-desc animated"> <div class="promo-txt">Lorem ipsum dolor sit amet, adipiscing elit. In maximus ligula semper metus pellentesque mattis. Maecenas volutpat, diam enim.</div> <div class="list"> <ul> <li>PSD to HTML</li> <li>Code Optimization</li> <li>FORM</li> <li>PSD</li> </ul> </div> </div>	</div>	</div>	<div class="col-md-4">	<div class="service-item">	<div class="service-icon">	<i class="icon ion-lightbulb"></i>	</div>	<h3 class="service-title">Marketing</h3> Lorem ipsum dolor sit amet, adipiscing elit. In maximus ligula semper metus pellentesque mattis. Maecenas volutpat, diam enim.	</div>	</div>	<div class="col-md-4">	<div class="service-item">	<div class="service-icon">	<i class="icon ion-arrow-graph-up-right"></i>	</div>	<h3 class="service-title">Analytics</h3> Lorem ipsum dolor sit amet, adipiscing elit. In maximus ligula semper metus pellentesque mattis. Maecenas volutpat, diam enim.	</div>	</div>	</div>	<div class="row">	<div class="col-md-4">	<div class="service-item">	<div class="service-icon">	<i class="icon ion-paintbrush"></i>	</div>	<h3 class="service-title">Web Design</h3> Lorem ipsum dolor sit amet, adipiscing elit. In maximus ligula semper metus pellentesque mattis. Maecenas volutpat, diam enim.	</div>	</div>	<div class="col-md-4">	<div class="service-item">	<div class="service-icon">	<i class="icon ion-code-working"></i>	</div>	<h3 class="service-title">Development</h3> <div class="promo-txt">Lorem ipsum dolor sit amet, adipiscing elit. In maximus ligula semper metus pellentesque mattis. Maecenas volutpat, diam enim.</div> <div></div>	</div>	</div>	<div class="col-md-4">	<div class="service-item">	<div class="service-icon">	<i class="icon ion-happy-outline"></i>	</div>	<h3 class="service-title">Support</h3> Lorem ipsum dolor sit amet, adipiscing elit. In maximus ligula semper metus pellentesque mattis. Maecenas volutpat, diam enim.	</div>	</div>	</div>	</div>
</div>
<!-- !SOLUTIONS -->
</body>
</html>

A Pen by Rostislav Ugrynyuk - Script Codes CSS Codes

.solutions-block { padding: 25px 0 50px;
}
.service-item { margin: 30px 0 0 0; position: relative; height: 250px; padding: 40px 20px; font-size: 15px; font-weight: 300; text-align: center; color: #777; background: #f5f5f5;
}
.service-item { -webkit-transition: background-color 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: background-color 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: background-color 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: background-color 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: background-color 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.service-item:hover{	background: #3D3E43;	color: #fff !important;
}
.service-icon { font-size: 64px; line-height: 1.05;
}
.service-title { font-size: 22px; font-weight: 400; line-height: 0.9;
}
.service-item .service-desc{ position: absolute; text-align: center;
}
.service-item .promo-txt{ opacity: 1;
}
.service-item .list{ opacity: 0; position: absolute; top: 0; left: 20.5%;
}
.list ul{ list-style: none;
}
.service-item .list,
.service-item .promo-txt{ transition: opacity 0.35s;
}
.service-item:hover .promo-txt{ opacity: 0; -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;
}
.service-item:hover .list{ opacity: 1; animation: fadeOutRightBig; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;
}
.list ul{ text-align: center;
}
/**** ANIMATION ****/
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;
}
@-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(350px); }
}
@keyframes fadeOutRightBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(350px); }
}
.fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig;
}
A Pen by Rostislav Ugrynyuk - Script Codes
A Pen by Rostislav Ugrynyuk - Script Codes
Home Page Home
Developer Rostislav Ugrynyuk
Username ugross
Uploaded December 26, 2022
Rating 3
Size 2,462 Kb
Views 10,120
Do you need developer help for A Pen by Rostislav Ugrynyuk?

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!

Rostislav Ugrynyuk (ugross) Script Codes
Name
Scroll Down Animation
Simple article cards
Pomodoro Timer
Simple CSS Pricing Table
Create amazing blog posts 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!