trouble implementing card like view in html and css
up vote
0
down vote
favorite
Expected output image illustration:
html, body
max-width: 100vw;
max-height: 100vh;
html *
font-family: Arial !important;
.cand1
width: 50%;
float:left;
.cand2
width:50%;
float: right;
.prof1,.prof2
margin:0;
margin-top: 40;
text-align: center;
.name
font-weight: bold;
.post
font-weight: bolder;
.card
background: rgb(230, 230, 230);
h4
background: rgb(230, 230, 230);
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/style_vote.css">
</head>
<body>
<div id="header"></div>
<div id="wrapper">
<div id="content">
<div class="card">
<h4 class="post">Post 1</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 1</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 2</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 2</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 3</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 4</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 3</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 5</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 6</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 4</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 7</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 8</p>
<p class="add">Class</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Current output image:
I am trying to implement a card like style with html and css.
the h4 tag in the div card produces spaces ,on using margin 0 and padding 0 in css it produces a white line ,I also couldn't find to split each card,tried margin as well as padding attributes for the card div,doesn't seem to work.
also the attributes i apply on the entire card div doesn't seem to apply on the h4 tag, modifying other attributes such as height on the card div makes the dummy image pop out of the card div section
html css
edited Nov 11 at 7:16
Auroratide
62128
asked Nov 11 at 5:22
Kaushik Kyle
33
add a comment |
up vote
0
down vote
favorite
Expected output image illustration:
html, body
max-width: 100vw;
max-height: 100vh;
html *
font-family: Arial !important;
.cand1
width: 50%;
float:left;
.cand2
width:50%;
float: right;
.prof1,.prof2
margin:0;
margin-top: 40;
text-align: center;
.name
font-weight: bold;
.post
font-weight: bolder;
.card
background: rgb(230, 230, 230);
h4
background: rgb(230, 230, 230);
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/style_vote.css">
</head>
<body>
<div id="header"></div>
<div id="wrapper">
<div id="content">
<div class="card">
<h4 class="post">Post 1</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 1</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 2</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 2</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 3</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 4</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 3</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 5</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 6</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 4</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 7</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 8</p>
<p class="add">Class</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Current output image:
I am trying to implement a card like style with html and css.
the h4 tag in the div card produces spaces ,on using margin 0 and padding 0 in css it produces a white line ,I also couldn't find to split each card,tried margin as well as padding attributes for the card div,doesn't seem to work.
also the attributes i apply on the entire card div doesn't seem to apply on the h4 tag, modifying other attributes such as height on the card div makes the dummy image pop out of the card div section
html css
edited Nov 11 at 7:16
Auroratide
62128
asked Nov 11 at 5:22
Kaushik Kyle
33
please provide a working example instead of images. You can use the Javasscript/HTML snippet feature in the toolbar next to the image button.
– Christopher Dosin
Nov 11 at 5:33
@Christopher Dosin.thanks for pointing out,added the code snippet
– Kaushik Kyle
Nov 11 at 6:05
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Expected output image illustration:
html, body
max-width: 100vw;
max-height: 100vh;
html *
font-family: Arial !important;
.cand1
width: 50%;
float:left;
.cand2
width:50%;
float: right;
.prof1,.prof2
margin:0;
margin-top: 40;
text-align: center;
.name
font-weight: bold;
.post
font-weight: bolder;
.card
background: rgb(230, 230, 230);
h4
background: rgb(230, 230, 230);
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/style_vote.css">
</head>
<body>
<div id="header"></div>
<div id="wrapper">
<div id="content">
<div class="card">
<h4 class="post">Post 1</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 1</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 2</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 2</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 3</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 4</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 3</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 5</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 6</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 4</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 7</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 8</p>
<p class="add">Class</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Current output image:
I am trying to implement a card like style with html and css.
the h4 tag in the div card produces spaces ,on using margin 0 and padding 0 in css it produces a white line ,I also couldn't find to split each card,tried margin as well as padding attributes for the card div,doesn't seem to work.
also the attributes i apply on the entire card div doesn't seem to apply on the h4 tag, modifying other attributes such as height on the card div makes the dummy image pop out of the card div section
html css
edited Nov 11 at 7:16
Auroratide
62128
asked Nov 11 at 5:22
Kaushik Kyle
33
Expected output image illustration:
html, body
max-width: 100vw;
max-height: 100vh;
html *
font-family: Arial !important;
.cand1
width: 50%;
float:left;
.cand2
width:50%;
float: right;
.prof1,.prof2
margin:0;
margin-top: 40;
text-align: center;
.name
font-weight: bold;
.post
font-weight: bolder;
.card
background: rgb(230, 230, 230);
h4
background: rgb(230, 230, 230);
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/style_vote.css">
</head>
<body>
<div id="header"></div>
<div id="wrapper">
<div id="content">
<div class="card">
<h4 class="post">Post 1</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 1</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 2</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 2</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 3</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 4</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 3</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 5</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 6</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 4</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 7</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 8</p>
<p class="add">Class</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Current output image:
I am trying to implement a card like style with html and css.
the h4 tag in the div card produces spaces ,on using margin 0 and padding 0 in css it produces a white line ,I also couldn't find to split each card,tried margin as well as padding attributes for the card div,doesn't seem to work.
also the attributes i apply on the entire card div doesn't seem to apply on the h4 tag, modifying other attributes such as height on the card div makes the dummy image pop out of the card div section
html, body
max-width: 100vw;
max-height: 100vh;
html *
font-family: Arial !important;
.cand1
width: 50%;
float:left;
.cand2
width:50%;
float: right;
.prof1,.prof2
margin:0;
margin-top: 40;
text-align: center;
.name
font-weight: bold;
.post
font-weight: bolder;
.card
background: rgb(230, 230, 230);
h4
background: rgb(230, 230, 230);
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/style_vote.css">
</head>
<body>
<div id="header"></div>
<div id="wrapper">
<div id="content">
<div class="card">
<h4 class="post">Post 1</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 1</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 2</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 2</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 3</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 4</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 3</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 5</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 6</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 4</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 7</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 8</p>
<p class="add">Class</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>html, body
max-width: 100vw;
max-height: 100vh;
html *
font-family: Arial !important;
.cand1
width: 50%;
float:left;
.cand2
width:50%;
float: right;
.prof1,.prof2
margin:0;
margin-top: 40;
text-align: center;
.name
font-weight: bold;
.post
font-weight: bolder;
.card
background: rgb(230, 230, 230);
h4
background: rgb(230, 230, 230);
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/style_vote.css">
</head>
<body>
<div id="header"></div>
<div id="wrapper">
<div id="content">
<div class="card">
<h4 class="post">Post 1</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 1</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 2</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 2</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 3</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 4</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 3</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 5</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 6</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 4</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 7</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 8</p>
<p class="add">Class</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>html css
html css
edited Nov 11 at 7:16
Auroratide
62128
asked Nov 11 at 5:22
Kaushik Kyle
33
edited Nov 11 at 7:16
Auroratide
62128
asked Nov 11 at 5:22
Kaushik Kyle
33
edited Nov 11 at 7:16
Auroratide
62128
edited Nov 11 at 7:16
Auroratide
62128
edited Nov 11 at 7:16
Auroratide
62128
62128
asked Nov 11 at 5:22
Kaushik Kyle
33
asked Nov 11 at 5:22
Kaushik Kyle
33
asked Nov 11 at 5:22
Kaushik Kyle
33
33
please provide a working example instead of images. You can use the Javasscript/HTML snippet feature in the toolbar next to the image button.
– Christopher Dosin
Nov 11 at 5:33
@Christopher Dosin.thanks for pointing out,added the code snippet
– Kaushik Kyle
Nov 11 at 6:05
add a comment |
please provide a working example instead of images. You can use the Javasscript/HTML snippet feature in the toolbar next to the image button.
– Christopher Dosin
Nov 11 at 5:33
@Christopher Dosin.thanks for pointing out,added the code snippet
– Kaushik Kyle
Nov 11 at 6:05
please provide a working example instead of images. You can use the Javasscript/HTML snippet feature in the toolbar next to the image button.
– Christopher Dosin
Nov 11 at 5:33
please provide a working example instead of images. You can use the Javasscript/HTML snippet feature in the toolbar next to the image button.
– Christopher Dosin
Nov 11 at 5:33
@Christopher Dosin.thanks for pointing out,added the code snippet
– Kaushik Kyle
Nov 11 at 6:05
@Christopher Dosin.thanks for pointing out,added the code snippet
– Kaushik Kyle
Nov 11 at 6:05
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
Since your code is pretty messy i created a simple example for you. Hope it helps.
Also try to avoid !important to keep your code clean and maintainable.
section
background: gray;
padding: 10px 25px;
margin: 0 0 25px 0;
section h4
margin: 0 0 10px 0;
.card-wrapper
display: flex;
justify-content: space-around;
.card--text
text-align: center;
<div class="container">
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
</div>answered Nov 11 at 6:50
Christopher Dosin
1687
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
Since your code is pretty messy i created a simple example for you. Hope it helps.
Also try to avoid !important to keep your code clean and maintainable.
section
background: gray;
padding: 10px 25px;
margin: 0 0 25px 0;
section h4
margin: 0 0 10px 0;
.card-wrapper
display: flex;
justify-content: space-around;
.card--text
text-align: center;
<div class="container">
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
</div>answered Nov 11 at 6:50
Christopher Dosin
1687
add a comment |
up vote
0
down vote
accepted
Since your code is pretty messy i created a simple example for you. Hope it helps.
Also try to avoid !important to keep your code clean and maintainable.
section
background: gray;
padding: 10px 25px;
margin: 0 0 25px 0;
section h4
margin: 0 0 10px 0;
.card-wrapper
display: flex;
justify-content: space-around;
.card--text
text-align: center;
<div class="container">
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
</div>answered Nov 11 at 6:50
Christopher Dosin
1687
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
Since your code is pretty messy i created a simple example for you. Hope it helps.
Also try to avoid !important to keep your code clean and maintainable.
section
background: gray;
padding: 10px 25px;
margin: 0 0 25px 0;
section h4
margin: 0 0 10px 0;
.card-wrapper
display: flex;
justify-content: space-around;
.card--text
text-align: center;
<div class="container">
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
</div>answered Nov 11 at 6:50
Christopher Dosin
1687
Since your code is pretty messy i created a simple example for you. Hope it helps.
Also try to avoid !important to keep your code clean and maintainable.
section
background: gray;
padding: 10px 25px;
margin: 0 0 25px 0;
section h4
margin: 0 0 10px 0;
.card-wrapper
display: flex;
justify-content: space-around;
.card--text
text-align: center;
<div class="container">
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
</div>section
background: gray;
padding: 10px 25px;
margin: 0 0 25px 0;
section h4
margin: 0 0 10px 0;
.card-wrapper
display: flex;
justify-content: space-around;
.card--text
text-align: center;
<div class="container">
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
</div>section
background: gray;
padding: 10px 25px;
margin: 0 0 25px 0;
section h4
margin: 0 0 10px 0;
.card-wrapper
display: flex;
justify-content: space-around;
.card--text
text-align: center;
<div class="container">
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
</div>answered Nov 11 at 6:50
Christopher Dosin
1687
answered Nov 11 at 6:50
Christopher Dosin
1687
answered Nov 11 at 6:50
Christopher Dosin
1687
answered Nov 11 at 6:50
Christopher Dosin
1687
1687
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246070%2ftrouble-implementing-card-like-view-in-html-and-css%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
please provide a working example instead of images. You can use the Javasscript/HTML snippet feature in the toolbar next to the image button.
– Christopher Dosin
Nov 11 at 5:33
@Christopher Dosin.thanks for pointing out,added the code snippet
– Kaushik Kyle
Nov 11 at 6:05