Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@tanmoy-12
tanmoy-12 committed Mar 17, 2024
0 parents commit f921232
Show file tree
Hide file tree
Showing 5 changed files with 341 additions and 0 deletions.
103 changes: 103 additions & 0 deletions 1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!--============================================== FONT AWESOME STYLINGS ============================================-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Concert+One&family=Laila:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<title>Document</title>
</head>
<body>
<div class="wrapper-main">
<div class="navbar">
<h1>E-Digital</h1>
</div>
<div class="header-nav">
<div class="header-bg"></div>
<div class="header-content">
<h1><span style="color: rgb(255, 89, 0);">Unleash Your Digital Potential:</span>Connect, Create, and Explore: Your Digital Hub at E-Digital.</h1>
<h3 style="font-size: 35px; color: rgb(254, 129, 88); font-weight: 500;"> Contact Us at : +1234566789</h3>
</div>
</div>
<div class="header">
<div class="header-element">
<div class="content">
<h1><span>Get Quick</span><br />Digital Services</h1>
<p>
Digital services are integral to daily life, enabling seamless communication, online banking, shopping, access to information, and entertainment. They streamline tasks, enhance productivity, and connect individuals globally, reflecting the modern digital age's indispensability in our daily routines.
</p>
<a href="appointment.html"><button class="btn">Book Appointment</button></a>
</div>
<div class="image">
<img src="https://www.bhmpics.com/downloads/cyber-cafe-wallpaper/2.cyber-cafe-neon-sign-brick-wall-background-86621583.jpg" alt="header image" />
</div>
</div>
</div>
<div class="container-1">
<div class="container-1-child">
<div class="choose-left">
<h1 style="color: rgb(255, 72, 0);margin-bottom: 30px;font-size: 40px;">E-Digital India</h1>
<h3 style="margin-bottom: 25px;font-size: 30px; color: rgb(255, 187, 0);">Why People Choose Us ?</h3>
<p style="text-align: justify; font-size: large; font-weight: 600;">People choose our cyber cafe for its high-speed internet, cozy ambiance, and top-notch customer service, making it the perfect spot for productivity and relaxation. Additionally, our extensive range of digital services, from printing to prcessing, caters to diverse needs, ensuring a seamless and enjoyable experience for all patrons.</p>
</div>
<div class="choose-right">
<div class="card">
<div class="card-top">
<i class="fa-solid fa-users"></i>
</div>
<div class="card-bottom">
<h2>Customer Service</h2>
<p>The cybercafe's lightning-fast customer service ensures patrons experience minimal wait times </p>
</div>
</div>
<div class="card">
<div class="card-top">
<i class="fa-solid fa-layer-group"></i>
</div>
<div class="card-bottom">
<h2>Affordable Pirce</h2>
<p>Experience quality services at an affordable price point.</p>
</div>
</div>
<div class="card">
<div class="card-top">
<i class="fa-solid fa-print"></i>
</div>
<div class="card-bottom">
<h2> Printing Services</h2>
<p>Efficient printing and photocopying services for all your document needs, hassle-free and reliable.</p>
</div>
</div>
<div class="card">
<div class="card-top">
<i class="fa-solid fa-check"></i>
</div>
<div class="card-bottom">
<h2>Banking Services</h2>
<p>Secure internet banking services for convenient and efficient financial transactions anytime, anywhere.</p>
</div>
</div>
</div>
</div>
</div>
<div class="customer">
<div class="customer-bg"></div>
<div class="customer-card">
<i class="fa-solid fa-user"></i>
<h2>1000+</h2>
<h3 style="color: #ff5500;">Happy Customers</h3>
</div>
<div class="customer-card">
<i class="fa-solid fa-layer-group"></i>
<h2>50+</h2>
<h3 style="color: #ff5500;">Digital Services</h3>
</div>
</div>
</div>
</body>
</html>
Binary file added 1.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 10854295.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 2.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
238 changes: 238 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
*{
padding: 0;
margin: 0;
}
body {
font-family: "Loilo", sans-serif;
margin: 0;
padding: 0;
background-color: #000;
}

.navbar{
justify-content: center;
text-align: center;
/* background: linear-gradient(to right, #000000 , #bfbebe , #595959); */
background-color: rgb(29, 29, 29);
color: rgb(245, 90, 0);
margin: 0 auto;
padding: 10px;
}

.header-nav{
margin: 0 auto;
height: 400px;
}

.header-bg {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent), linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent), url("./1.jpeg");
background-repeat: no-repeat;
position: absolute;
height: 400px;
z-index: -1;
width: 100%;
background-position: center;
background-size: cover;
/* filter: blur(6px); */
}


.header-content{
color: aliceblue;
font-size: larger;
justify-content: center;
text-align: center;
align-items: center;
height: 100%;
display: flex;
flex-direction: column;
}

.header{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.header-element {
padding: 4rem;
flex: 1;
display: flex;
flex-direction: row;
gap: 2rem;
align-items: center;
/* background-color: rgb(0, 0, 0); */
max-width: 1200px;
color: #d4d4d4;
}

.content{
width: 50%;
}

.content h1 {
margin-bottom: 1rem;
font-size: 3rem;
font-weight: 700;
color: var(--text-dark);
}

.content h1 span {
font-weight: 400;
}

.content p {
margin-bottom: 2rem;
color: var(--text-light);
line-height: 1.75rem;
font-size: larger;
font-weight: 700;
text-align: justify;
}

.btn {
padding: 1rem 2rem;
outline: none;
border: none;
font-size: 1rem;
font-weight: 600;
color: #292417;
font-size: large;
background-color: #ffa33a;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}



.btn:hover {
background-color: #da8702;
}

.image {
position: relative;
text-align: center;
isolation: isolate;
border-radius: 8px;
padding: 20px;
}


.image img {
width: 100%;
max-width: 475px;
border-radius: 8%;
}

.header-content h1{
margin: 10px;
}

.container-1{
background-color: rgb(46, 46, 46);
margin: 0 auto;
display: flex;
padding: 20px 0;
justify-content: center;
}

.container-1-child{
display: flex;
max-width: 1400px;
}

.choose-left{
width: 50%;
padding: 15px 30px;
color: #ffff;
justify-content: center;
text-align: left;
display: flex;
flex-direction: column;
}

.choose-right{
justify-content: center;
align-items: center;
width: 50%;
display: flex;
gap: 20px;
flex-wrap: wrap;
}

.card {
display: flex;
flex-direction: column;
width: 240px;
height: 280px;
margin: 20px;
background-color: rgb(106, 106, 106);
color: #fff;
border-radius: 12px;
padding: 12px;
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); /* Adjust the shadow as needed */
transition: all ease 1s;
}

.card:hover {
transform: scale(1.08); /* Scale up by 5% on hover */
}


.card-top{
color: #ff4800;
font-size: 56px;
text-align: center;
padding: 10px;
}

.card-bottom{
padding: 10px 12px;
text-align: center;
}

.card-bottom p{
text-align: center;
margin-top: 18px;
font-weight: bold;
font-size: large;
color: antiquewhite;
}

.customer{
display: flex;
margin: 0 auto;
justify-content: center;
text-align: center;
}

.customer-bg{
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent), linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent), url("./2.jpeg");
background-repeat: no-repeat;
position: absolute;
height: 200px;
z-index: -1;
width: 100%;
background-position: center;
background-size: cover;
}

.customer-card{
margin: 20px;
display: flex;
flex-direction: column;
text-align: center;
color: #fff;
}

.customer-card i{
color: #ff4800;
font-size: 48px;
}

.customer-card h2{
font-size: 42px;
margin: 15px;
}

0 comments on commit f921232

Please sign in to comment.