Last active
June 27, 2020 08:44
-
-
Save widiatmajaf/169399177ae78eee3f6ad4fa12f17c04 to your computer and use it in GitHub Desktop.
excuse me, i would like to make my image 70% of the screen and my paragraph would become 2 lines,but my code produces large images and covering the text. please help me, thanks in andvance.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="row custom-section d-flex align-item-center"> | |
<div class="col-lg-12 col-lg-4"> | |
<h2>Gatekno</h2> | |
<h3>Service Center</h3> | |
<p>Melayani jual beli sparepart komputer, service, dan install ulang laptop Anda. Kami mengutamakan profesionalisme dalam bekerja.</p> | |
<a href="#">Pelajari lebih lanjut</a> | |
</div> | |
<div class="col-lg-12 col-lg-8"> | |
<img src="assets/images/mainbenner.png" alt="Gatekno-banner"> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.custom-section { | |
width: inherit; | |
padding: 40px 0; | |
@media screen and (max-width: 991.98px) { | |
flex-direction: column-reverse | |
} | |
} | |
.custom-section .col-lg-4 { | |
margin-top: 100px; | |
} | |
.custom-section .col-lg-4 h2 { | |
margin-bottom: 0; | |
font-weight: 700; | |
font-size: 63px; | |
color: black; | |
line-height: 1; | |
white-space: nowrap; | |
} | |
.custom-section .col-lg-4 h3 { | |
font-weight: 300; | |
color: black; | |
font-size: 64px; | |
line-height: 1; | |
} | |
.custom-section .col-lg-4 p { | |
margin-top: 30px; | |
font-size: 14px; | |
color: black; | |
} | |
.custom-section .col-lg-4 a { | |
display: inline-block; | |
padding: 8px 22px; | |
color: white; | |
background-color: #1ea5f7; | |
border: 2px solid transparent; | |
margin-top: 60px; | |
text-decoration: none; | |
transition: .4 cubic-bezier(0.785, 0.135, 0.15, 0.86); | |
} | |
.custom-section .col-lg-4 a:hover { | |
color: #1ea5f7; | |
background-color: #fff; | |
border: 1px solid #1ea5f7; | |
} | |
.col-lg-8 img { | |
width: 70%; | |
position: absolute; | |
top: -23rem; | |
right: -11%; | |
z-index: -1; | |
@media screen and (max-width: 991.98px) { | |
width: 70%; | |
position: relative; | |
top: 0; | |
right: 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment