CODEWITHSUNDEEP
htmlcss
thirteen4054
thirteen4054

Reputation: 485

How to place one card a little higher then its neighbor in html

I am trying to place a card a little above then its neighbor column. Here is an image of those cards placement:

enter image description here

Here is my html:

<div class="row">

                    <div class="col span-1-of-2 service-cards card-set">

                        <div class="card first-card">
                            <div class="container">
                                <img src="resources/img/[email protected]" class="icon-small">
                                <h4><b>UI/UX & mobile <br>application</b></h4> 
                                <p class="subtitle-paragraph service-para-1">We are the finest digital solution providers in town with high quality service.</p> 
                            </div>
                        </div>

                        <div class="card">
                            <div class="container">
                                <img src="resources/img/[email protected]" class="icon-small">
                                <h4><b>Branding & <br>Corporate identity</b></h4> 
                                <p class="subtitle-paragraph service-para">We are the finest digital solution providers in town with high quality service.</p> 
                            </div>
                        </div>

                    </div>

                </div>

Upvotes: 2

Views: 913

Answers (4)

Jayana Soneji
Jayana Soneji

Reputation: 26

Its looking very simple thing ..but without knowing your css this is just what i can suggest You can use something like also works

.card.first-card .container { 
margin-top:40px;
}

or 

.card-set {
  display:flex;
}
.card.first-card {
  margin-top:40px;
}

Upvotes: 0

yoshinator
yoshinator

Reputation: 485

.first-card {
    position: relative;
    top: 10%
}

set the card relative to itself and move it down whatever amount you want from its original position in the document flow.

Upvotes: 0

Yousaf
Yousaf

Reputation: 29314

you can use relative position to place one card little lower than the other card

.container {
  display: flex;
  justify-content: center;
}

.card {
  height: 170px;
  width: 100px;
  border: 1px solid;
  position: relative;
  margin: 0 5px;
}

.first-card {
  top: 10px;
}
<div class="container">
    <div class="card first-card"></div>
    <div class="card"></div>
</div>

Upvotes: 2

Jschriemer
Jschriemer

Reputation: 625

Using CSS only on your card first-card you can give it unique properties. Either try what the comments are suggesting and use margin-top or play around with different positioning types. For example position: absolute; top: 20px; etc. Good luck!

Upvotes: 0

Related Questions