Glassmorphism Website Service Section

Glassmorphism Website is a recent trend in Web design. Many Website designers use this trend o make their apps and website. Hello, friends, Today we will share a snippet with Glassmorphism or Frosted Glass Effect. First, we will create a responsive website service section with HTML and CSS then we will apply the glassmorphism effect to each service box to make it look more beautiful. In addition, we have also used the Tilt Parallax effect so that when you hover over the service boxes, you get the same beautiful tilt effect. We have shared many such videos on our YouTube channel. If you have time, you can visit our channel once. Watch the video tutorial below before collecting the code so that you can understand the code well.

I hope you have watched the video and understood. Now the question is what is glassmorphism? Or How do you use Glassmorphism? Glass morphism or frosted glass effect is basically a semi-transparent background. It is made using CSS transparency and background blur options. Glassmorphism website is very popular nowadays. With this glassmorphism, designers design a variety of apps and UI. The interface made with this design style is very attractive for the users. This greatly increases the user's engagement. Glassmorphism web design is also a recent trend. Many responsive websites nowadays are also designed with this design style.

You May Also like:

Glassmorphism Website Service Section [ Source Code ]:

Before creating this project, you need to create two files. The first one is the HTML file with the .html extension and, the second one is the CSS file with the .css extension. Please copy the code below and paste them into the appropriate file and save it. If you have a problem with the code below, you can download the code from the download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Responsive Service Section with Glassmorphism</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div id="container">
		<div class="box">
			<h1>Awesome Services</h1>
			<div class="cards">
				<article class="card">
					<div class="icons">
						<i class="fa fa-stethoscope"></i>
					</div>
					<div class="card-content">
						<h2>Cardiac Surgery</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sed cupiditate, consectetur deserunt rerum, optio consequatur a rem sint libero.</p>
					</div>
				</article>
				<article class="card">
					<div class="icons">
						<i class="fa fa-user-md"></i>
					</div>
					<div class="card-content">
						<h2>Gyno Surgery</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sed cupiditate, consectetur deserunt rerum, optio consequatur a rem sint libero.</p>
					</div>
				</article>
				<article class="card">
					<div class="icons">
						<i class="fa fa-heartbeat"></i>
					</div>
					<div class="card-content">
						<h2>Heart Surgery</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sed cupiditate, consectetur deserunt rerum, optio consequatur a rem sint libero.</p>
					</div>
				</article>
			</div>
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">
	</script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.0.3/tilt.jquery.min.js">
	</script> 
	<script>
	           const tilt = $('.card').tilt({
	               scale:1.01,
	               glare: true,
	               maxGlare: .5
	           });
	</script>
</body>
</html>

ADD CSS:

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	background: url(1.jpg);
	color: #3d3935;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	font-family: 'Montserrat', sans-serif;
}
#container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
}
.box {
	width: 100%;
	max-width: 1170px;
	padding: 15px;
}
.box h1 {
	margin: 30px 0;
	color: #ddd;
	font-size: 35px;
	text-align: center;
	text-transform: uppercase;
}
.cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	text-align: center;
}
.card {
	width: 30%;
	padding: 30px 20px;
	border-radius: 3px;
	transition: transform .3s;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(30px);
}
.card-content {
	color: #fff;
}
.card-content h2 {
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
}
.card-content p {
	font-size: 14px;
	line-height: 1.9;
}
.icons {
	background: #ddd;
	display: inline-block;
	border-radius: 50%;
	height: 80px;
	width: 80px;
	margin-bottom: 20px;
}
.icons i {
	text-align: center;
	line-height: 75px;
	padding: 0px 25px;
	font-size: 35px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	#container {
		height: auto;
	}
	.box {
		padding: 20px;
	}
	.card {
		width: 100%;
		margin-bottom: 30px;
	}
}
@media only screen and (max-width: 767px) {
	.box h1 {
		font-size: 1.5rem
	}
	.cards {
		justify-content: center;
	}
	.card {
		margin-bottom: 20px;
		width: 100%;
	}
}

I hope you have implemented the code well. In our blog, we have shared a lot of code about HTML, CSS, javascript, responsive website design, material CSS, jquery plugin implementation, etc. Take a look at them if you want. Please share the articles with like-minded people. Thank you for visiting our website.

DOWNLOAD CODE

Glassmorphism Website Service Section [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Glassmorphism Website Service Section

Glassmorphism Website Service Section [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form