Bootstrap Snippet our team using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>Slider Blog Card</title> -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="blog-card">
      <input type="radio" name="select" id="tap-1" checked>
      <input type="radio" name="select" id="tap-2">
      <input type="radio" name="select" id="tap-3">
      <input type="checkbox" id="imgTap">
      <div class="sliders">
        <label for="tap-1" class="tap tap-1"></label>
        <label for="tap-2" class="tap tap-2"></label>
        <label for="tap-3" class="tap tap-3"></label>
      </div>
<div class="inner-part">
        <label for="imgTap" class="img">
          <img class="img-1" src="#">
        </label>
        <div class="content content-1">
          <span>26 December 2017</span>
          <div class="title">
Lorem Ipsum Dolor</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo animi atque aliquid pariatur voluptatem numquam, quisquam. Neque est voluptates doloribus!</div>
<button>Read more</button>
        </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800");
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: 'Fira Sans', sans-serif;
  background: linear-gradient(147deg,#f6b323 0%, #f23b26 74%);
}
.blog-card{
  position: absolute;
  height: 370px;
  width: 95%;
  max-width: 850px;
  margin: auto;
  border-radius: 25px;
  background: white;
  box-shadow: 0px 10px 50px rgba(252,56,56,.3);
}
.inner-part{
  position: absolute;
  display: flex;
  height: 360px;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
}
#imgTap:checked ~ .inner-part {
  padding: 0;
  transition: .1s ease-in;
}
.inner-part .img{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"our team"
Bootstrap 4.1.1 Snippet by saikrishna99666

Related: See More

Questions / Comments:

"our team" Bootstrap 4.1.1 Snippet by saikrishna99666

Related: See More

Questions / Comments:

"our team"
Bootstrap 4.1.1 Snippet by saikrishna99666