Skip to content
OverviewSolutions
9
Comments
8

Guillermo Mulvihill

@guilleoemArgentina190 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

HTML, CSS, Javascript, React.

Latest solutions

View more solutions

Latest comments

  • Guillermo Mulvihill•190
    @guilleoemPosted over 2 years ago

    Hi @zach007james. Remove margin-top: 8vh; property in main, then change the height of the body to 100vh instead of 100%.

    0
  • Guillermo Mulvihill•190
    @guilleoemPosted over 2 years ago

    Hi @Lau-San, it's easy and you just need only two lines of code. First set a background color to the img container (<div class="img">), and then blend the img with its container with mix-blend-mode css property. So in your code:

    <div class="img">
  <div class="violet"></div>   /*<------ delete this*/
  <img class="img-mobile" src="./assets/images/image-header-mobile.jpg" alt="">
  <img class="img-desktop" src="./assets/images/image-header-desktop.jpg" alt="">
</div>

    and in your css file delete all the .img .violet. properties. Also delete the opacity: 0.5; in the .img .img. Finally add this two lines

    .img {
  width: 100%;
  position: relative;
  background-color: hsl(277, 64%, 61%); /*<------add this line*/
  border-radius: 0.5rem 0.5rem 0 0; /*<------you need add this also*/
}
.img img {
  width: 100%;
  border-radius: 0.5rem 0.5rem 0 0;
  mix-blend-mode: multiply; /*<------add this line*/
  display: block;
}

    Hope this will helpfull.

    Marked as helpful
    4
  • Guillermo Mulvihill•190
    @guilleoemPosted over 2 years ago

    Hi @tathykanashiro. Let's start with centering the avatar. It's easy, first remove the margin to the .text p

    .text p {
    font-size: 16px;
    font-weight: 300;
    opacity: .7;
    color: var(--softBlue);
    line-height: 1.3em;
    margin-bottom: 18px;  <---- remove this
}

    And now add this css properties to the avatar div

    .avatar {
    display: flex;
    flex-direction: row;
    align-items: center;
}
    Marked as helpful
    0
  • Guillermo Mulvihill•190
    @guilleoemPosted over 2 years ago

    Hi @Cachilox. To fix that, just remove the background-position property in the body selector. It is seted to "center".

    body {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    background-color: $Paleblue;
    background: url('../images/pattern-background-mobile.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; /* delete this*/
}
    Marked as helpful
    2
  • Guillermo Mulvihill•190
    @guilleoemPosted over 2 years ago

    Hi @akcumeh. To overlay the image you need to ad one more <div> element to de img container, like this

    <div class="img01-div col-lg-6">
    <img src="images/image-header-mobile.jpg" class="img01" alt="">
    <div class="overlay"></div>
</div>

    You need to add another for the img02 too

    <div class="img02-div col-lg-6">
    <img src="images/image-header-mobile.jpg" class="img02" alt="">
    <div class="overlay"></div>
</div>

    Now add some css properties. In your .css file would look like

    .img01-div, .img02-div {
  margin: 0;
  padding: 0;
  border-radius: 15px 15px 0 0;
  position:relative; /*add this property*/
}

.overlay {
  /* absolute position of the overlay, relative to its container*/
  position: absolute;
  top: 0;
  left: 0;
  /* give it the size of its container*/
  width: 100%;
  height: 100%;
  /*and give it colour and transparency*/
  background-color: hsl(277, 64%, 61%);
  opacity: 0.6;
}

    Remember to add border-radius property too!

    Marked as helpful
    1
  • Guillermo Mulvihill•190
    @guilleoemPosted over 2 years ago

    Hi @Chitsanupong723. To set background image to the page simply add background-image property .

    The background-color property is to give some extra color.

    The background-image property is the image you want to set in background.

    The background-repeat sets to "no-repeat" is to no repeat the image for cover the entire container.

    The background-size sets to "contain" scales the image as large as possible within its container.

    body {
    background-color: var(--Pale-blue);
    background-image: url(images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
    1
View more comments