HTML CSS best practices

Code Feedback
1

Hi guys, I am working on my portfolio right now, I want to know what I should do to make things work smooth. I did make cards and put the a link through html and image location through css. I am now looking to make a zoom effect and have an hard time making it happen. I wonder If I should change the html and css lines to include everything through HTML or should I keep what I got right now.

Sample of it:


<div class="container">
      <div class="row" id="portfolio">
        <div class="col-xs-12 col-sm-4">
            <div class="card mvsite">
                <a class="card-link" href="https://www........com/" target="blank"></a>
         </div>
      </div>
</div>

CSS:

.card {
  height: 200px;
  color: white;
  background: linear-gradient(135deg, rgba(0,0,0,0), rgba(0,0,0,0.5));
  background-size: cover;
  position: relative;
  padding: 25px;
  margin: 25px;
}

.mvsite {
  background-image: url("images/mvsite.png");

Thanks for your advices.

2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

3

Hey there,

First, a mod edited your post for readability. Please don’t revert that change. Second, you’ll need to provide more details about what you’re trying to accomplish. What do you mean by “zoom effect”? What do you mean by “change the html and css lines to include everything through HTML”? Can you provide a link to your full project, preferably on CodePen?

4

I am so sorry, first time here so I did not knew how it was working. I will send data to codepen and follow it accordingly.

Thanks for your kindness.