Skip to content

Commit

Permalink
smit-practical
Browse files Browse the repository at this point in the history
  • Loading branch information
@AsheelAhmedSiddiqui
AsheelAhmedSiddiqui committed Feb 17, 2024
1 parent 801fc60 commit 7fa7142
Show file tree
Hide file tree
Showing 3 changed files with 164 additions and 9 deletions.
Binary file added img/t-slider1.png.webp
View file
Binary file not shown.
112 changes: 107 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,16 @@
type="image/x-icon"
/>
<!-- Boostrap Icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
/>

<!-- Swiper Js For making Slider -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
</head>
<body>
<header>
Expand Down Expand Up @@ -145,17 +154,96 @@ <h1>
Make she'd moved divided air. Whose tree that hath own <br />
upon them it multiply was blessed
</p>
</div>
<div class="tour-img tour-2">
<img src="img/tour2.png.webp" />
<div class="tour-img tour-2">
<img src="img/tour2.png.webp" />
</div>
</div>
<div class="tour-img tour-3">
<img src="img/tour3.png.webp" />
</div>
<div class="tour-img tour-4">
<img src="img/tour4.png.webp" />
</div>
</div>
</div>
</section>
<section class="testimonial">
<div class="container">
<div class="div-center">
<img src="img/section-icon.png.webp" />
<h3>Our Popular Services</h3>
<p>
Fowl have fruit moveth male they are that place you will lesser
</p>
</div>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="grid-two">
<div class="slide-img">
<img src="img/t-slider1.png.webp" />
</div>
<div class="slide-content">
<h5>Asheel Ahmed</h5>
<span>Web & Mobile App Developer</span>
<p>
<em>
Also made from. Give may saying meat there from heaven
it lights face had is gathered god earth light for life
may itself shall whales made they're blessed whales also
made from give may saying meat. There from heaven it
lights face had
</em>
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="grid-two">
<div class="slide-img">
<img src="img/t-slider1.png.webp" />
</div>
<div class="slide-content">
<h5>Asheel Ahmed</h5>
<span>Web & Mobile App Developer</span>
<p>
<em>
Also made from. Give may saying meat there from heaven
it lights face had is gathered god earth light for life
may itself shall whales made they're blessed whales also
made from give may saying meat. There from heaven it
lights face had
</em>
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<
<div class="grid-two">
<div class="slide-img">
<img src="img/t-slider1.png.webp" />
</div>
<div class="slide-content">
<h5>Asheel Ahmed</h5>
<span>Web & Mobile App Developer</span>
<p>
<em>
Also made from. Give may saying meat there from heaven
it lights face had is gathered god earth light for life
may itself shall whales made they're blessed whales also
made from give may saying meat. There from heaven it
lights face had
</em>
</p>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<section class=""></section>
</main>
<footer>
<div class="container">
Expand Down Expand Up @@ -208,5 +296,19 @@ <h4>instafeed</h4>
<a href="#">Asheel Ahmed Siddiqui</a>
</p>
</footer>
<!-- Swiper js code -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
});
</script>
</body>
</html>
61 changes: 57 additions & 4 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,11 @@ body button:hover {
/* Header Section design */
header {
padding: 2rem 0;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #fafaff;
}

.navbar {
Expand Down Expand Up @@ -87,7 +92,7 @@ nav ul li a {

/* Hero section */
.hero {
padding: 6rem 0;
padding: 8.5rem 0;
}

.hero-container {
Expand Down Expand Up @@ -231,10 +236,14 @@ nav ul li a {
.tour-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 2rem;
gap: 2rem;
align-items: center;
}

.tour-container img {
width: 100%;
}

.tour-content {
padding-right: 4rem;
}
Expand All @@ -250,6 +259,41 @@ nav ul li a {
margin-bottom: 1.6rem;
}

/* Testimonial Section */
.testimonial {
padding: 6rem 0;
background-color: #f8f8ff;
}

.grid-two {
display: grid;
grid-template-columns: 0.5fr 2fr;
gap: 2rem;
width: 80rem;
margin: 0 auto;
align-items: center;
padding: 3rem 5rem;
background-color: #fff;
margin-top: 9rem;
margin-bottom: 4rem;
border-radius: 20px;
}

.grid-two h5 {
font-size: 2rem;
color: #2a2a2a;
}

.grid-two span {
font-size: 1.4rem;
display: block;
margin-bottom: 1rem;
}

.grid-two p {
font-size: 1.5rem;
}

/* footer Section */
footer {
padding: 6rem 0;
Expand Down Expand Up @@ -288,20 +332,29 @@ footer {
color: #6059f6;
}

.footer-item form {
display: flex;
align-items: center;
}

.footer-item form input[type="email"] {
padding: 0.5rem 0.4rem;
background-color: transparent;
border: 1px solid #888888;
color: #888888;
border-radius: 2px;
outline: none;
}

.footer-item form input[type="button"] {
padding: 0.7rem 0.3rem;
padding: 0.6rem 0.3rem;
color: #fff;
background-color: #6059f6;
border: none;
border-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
outline: none;
/* margin-left: -0.4rem; */
}

.small-grid {
Expand Down

0 comments on commit 7fa7142

Please sign in to comment.