As a novice in the field, I am currently honing my skills in HTML and CSS. The practice project involves replicating the card shown below. https://i.sstatic.net/VbmA4.png
I would greatly appreciate any guidance on how to create this type of card using just HTML and CSS.
Your assistance is much needed. Thank you!
To implement this design, you can utilize the provided code snippet below.
.card {
border: 1px solid #ddd;
border-radius: 6px;
max-width: 350px;
text-align: center;
margin-top: 60px;
}
.card_img {
width: 120px;
height: 120px;
overflow: hidden;
border-radius: 100%;
margin: -60px auto 0;
}
.card_img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card_info {
padding-bottom: 20px;
}
a {
text-decoration: none;
color: red;
}
a:hover{
color: black;
}<div class="card"> <!-- New Div with class name card -->
<div class="card_img"> <!-- New Div for image with class name card_img -->
<img src="https://post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/02/322868_1100-1100x628.jpg" alt="user-image">
</div>
<div class="card_info"> <!-- New Div for user info with class name card_info -->
<h2>USER NAME</h2>
<a href="#!">loremIpsum.com</a>
</div>
</div>
.card {
border: 1px solid #ddd;
border-radius: 6px;
max-width: 350px;
text-align: center;
margin-top: 60px;
}
.card_img {
width: 120px;
height: 120px;
overflow: hidden;
border-radius: 100%;
margin: -60px auto 0;
}
.card_img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card_info {
padding-bottom: 20px;
}
a {
text-decoration: none;
color: green;
}
a:hover{
color: black;
}<div class="card"> <!-- Here I create a New Div with class name card -->
<div class="card_img"> <!-- Here I create a New Div for image with class name card_img -->
<img src="https://images.pexels.com/photos/16164481/pexels-photo-16164481/free-photo-of-close-up-of-sleeping-cat.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="user-image">
</div>
<div class="card_info"> <!-- Here I create a New Div for user info with class name card_info -->
<h2>NAME</h2>
<a href="#!">hello</a>
</div>
</div>
I recently incorporated a Material UI library into my React project (material-ui.com) and I've been trying to center my logo within the appbar component. Here is the code that I attempted: <AppBar position="sticky" > <Toolbar> ...
Allow me to clarify my thoughts. I am aiming to accomplish the following: I want to construct a table with 4 columns and multiple td (rows). However, I require each row to adjust its column width automatically based on its content. Typically, the size ...
Hey! I'm encountering an issue with my jquery tabs. The first tab content loads fine, but when I select another tab, the content doesn't display. Then, when I try to go back to the first tab, it doesn't load either. Here's the HTML cod ...
I'm working on a 4-column page and trying to insert content. Everything is functioning properly except for getting my first div to align to the top in inline-blocks. As a newbie, I feel like I must be overlooking something simple. (I've tried usi ...
After testing my new site on my Android phone, I noticed that I am unable to scroll anywhere on the page. However, when viewed on Firefox, Opera, IE, and Chrome desktop browsers, I am able to scroll vertically when needed. In the CSS rule for my HTML body, ...
My form contains a form control for currency selection Each currency object has the properties {id: string; symbol: string}; Upon initialization, the currency select component loops through an array of currencies; After meeting a specific condition, I need ...
Seeking assistance in creating a grid of divs, I am working on finding the square root of the user's input to determine the height and width required to form a square. The code below is what I currently have: $('#size').click(function(){ $ ...
I am seeking guidance on the proper method for achieving a specific functionality. I have a set of buttons, and I would like the opacity of a button to increase when it is pressed. Here is the approach I have taken so far, but I have doubts about its eff ...
I followed the instructions on this page: How to update an HTML table content without refreshing the page? After implementing it, I encountered an issue where the Client-Side dataTable gets destroyed upon refreshing. When I say destroyed, all the data ...
I am facing an issue with my front-end code: <p>{{ news.content }}</p> The variable news.content is stored in the Firebase DB. Is there a way to insert a new line in this text interpolation without making any changes to the front-end code (H ...
Is it possible to automatically input values using selectpicker and calculate a form without having to manually click on the input field first? The JavaScript for calculating is working, but I need the Input Price to have a value automatically when selecti ...
We are currently in the process of transitioning our ASPX CMS website to a new platform, and some of the retired pages will be hosted on a separate website under a subdomain. The new website will be utilizing Bootstrap 4.6, whereas our existing CMS site re ...
I am encountering an issue with the vertical positioning of a Submenu and I'm looking to address it using CSS, without involving JS. Here is an image showing the current setup: https://i.sstatic.net/B37qT.jpg I have highlighted in red how the Subme ...
I am encountering an 'Is Undefined' error when running a piece of JavaScript code. https://i.sstatic.net/q3EfY.png < script language = "javascript" type = "text/javascript" > // function added for click on submit - dp0jmr 05/23/20 ...
My vuetify text field has a label that is too long for mobile devices. I am wondering if there is a way to automatically wrap the text. I attempted using div and p, as shown in this codepen link <div id="app"> <v-app id="inspire ...
Hey there, I've been working on creating something similar to this: Example However, I'm facing an issue where adjusting the top margin of "3" also affects "2" in the same way. I nested "3" within "2" to align the bottoms. html,body { marg ...
I have created a div container and I would like to implement a horizontal scroll bar when there are more than four items (each item consists of a picture with a title). Desired outcome: https://i.sstatic.net/wWucQ.png The issue I am facing is that by usi ...
I am currently working on a website that includes an embedded Vimeo video. The majority of our target audience uses IE8 or older, and interestingly enough, most of them have their browsers zoomed to 125% view. Unfortunately, while everything else on the si ...
Hey everyone, I'm facing an issue with creating matrices in HTML. I need to display a 5x5 matrix where each index is represented by a square. I tried using a span template for the box and then wrote a script to populate the matrices, but it's no ...
Looking for assistance: Can someone explain why this code snippet isn't functioning properly? It seems that the increment is only happening once. var player = document.getElementById("player"); var button = document.getElementById("button"); functio ...