Copy image CSS from another website - html

I have a website: http://marekzurek.hekko24.pl
I'm trying to copy the testimonial photo effect found on this website: http://i.imgur.com/bu3FuPR.png
What should I add to my css to make the image with the class "client-pic" round and small?
HTML:
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="testimonial-list">
<!-- START SINGLE TESTIMONIAL DESIGN AREA -->
<div class="single-testimonial text-center">
<img src="http://1stwebcoder.co m/themes/nexus/nexus/images/client.jpg" alt="client" class="client-pic">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum.</p>
<h2>mark jukarbarg</h2>
<h3>CEO facebook</h3>
</div>

Here is the css you want to add to make that photo round and small
.client-pic {
width: 80px;
height: 80px;
border-radius: 50%;
}
Tip for the future, if you want to scrape code off of other websites, use inspect element browser feature to get to css used on any specific element.

Related

How to add margin between Bootstrap cards without triggering flex-wrap?

I'm using Bootstrap cards and I want to separate them by a 2px margin.
Nonetheless, when I apply it (either with Bootstrap's margin classes or directly on my stylesheet) flex-wrap triggers and a card goes one row down.
How could I deal with this behavior?
Should I give a max-width to the cards?
.dark-theme body,
.dark-theme .card {
background-color: #121212;
color: #ffffffa6;
}
.dark-theme section.card {
background-color: #464646;
}
.card {
border-width: 0;
margin: 3px;
}
main {
padding: 100px;
}
h1 {
text-align: center;
}
h2,
.card {
margin-top: 20px;
}
.dark-theme .btn {
background-color: salmon;
border-color: salmon;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<div class="highlights row">
<section class="card col-md-6 col-lg-4">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</section>
<section class="card col-md-6 col-lg-4">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</section>
<section class="card col-md-6 col-lg-4">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</section>
First and foremost, remove any margins set on Bootstrap classes. Bootstrap is intended to not need to add spacing/sizing, as it is built into the classes.
I re-worked your structure quite a bit. Mostly to try to structure the elements as Bootstrap recommends. With that being said, don't nest each card in sections. Instead, nest them in divs. The <section> tag defines a section in a document. & if I am not mistaken, the three cards aligned in a row qualify as a section. I nested all three cards in one section and called it the highlights class you already had.
col's function as a method of reserving space for certain content. So with a three-card setup, you should use col-4. The largest col is col-12, which spans the full width of the screen. 12/4 = 3. Then you can use sm lg and md for responsiveness on media screens. The above example creates three equal-width columns on small, medium, large, and extra-large devices using the predefined grid classes. Those columns are centered on the page with the row parent.
With this being said, the main reason your code was not working as intended is the additional CSS margins and that the cards should be nested in the col's. Lastly, the misuse of column sizing as mentioned previously.
I'd suggest brushing up on the Bootstrap Grid System. You can build a fully responsive site with little knowledge in CSS if you know Bootstrap.
.dark-theme body,
.dark-theme .card {
background-color: #121212;
color: #ffffffa6;
}
.dark-theme section.card {
background-color: #464646;
}
.card {
border-width: 0;
}
main {
padding: 100px;
}
h1 {
text-align: center;
}
.dark-theme .btn {
background-color: salmon;
border-color: salmon;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
<div class="row w-100 m-0 justify-content-center">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</div>
</div>
</div>
</section>
Here, You can used Gutters class in the Bootstrap grid system.
Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.
You can use g-1, g-2, g-3, g-4, and g-5 in row according to your needs.
.dark-theme body, .dark-theme .card {background-color: #121212; color: #ffffffa6;}
.dark-theme section.card {background-color: #464646;}
.card {border-width: 0;}
main {padding: 100px;}
h1 {text-align: center;}
.dark-theme .btn {background-color: salmon;border-color: salmon;}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
<div class="row justify-content-center g-1">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card">
<h3>Where does it come from?</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card">
<h3>Where does it come from?</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>when an unknown
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card">
<h3>Where does it come from?</h3>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p><p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</div>
</div>
</div>
</section>

How to maintain border-radius shape as height changes

I have assigned a border-radius of 50px to my div, to achieve the following results:
However, when the height of the div changes, the curvature of the border also changes
What I'm looking for is for the sides to remain straight and the corners to remain the same as the div expands, like so:
This is what my css currently looks like:
.card {
border-radius: 50px;
height: 100%;
}
I should also note, I have been searching for an answer to this question (I assume it's been asked before) but I haven't been able to find an answer. I think this probably has to do with my choice of words, but I'm not sure how else to ask this question. Apologies in advance if it is a duplicate.
In your first example you dont have border radius 50px as border radius cant be more than 50%
please see this answer for details.
Border-radius in percentage (%) and pixels (px) or em
so, to make it same for 2 boxes just use right border-radius values - 20px for example.
jsfiddle.net/xky4r539/
That's because 50px is too high a value for border-radius in the first place.
The reason why it works when it's small is because it gets capped at half the height of the side between them. So in your above example the actual (resulting) value is around 18px (half the height of the div).
When the div becomes taller, its small height no longer limits border-radius value and it goes up until specified 50px. You need to play with its size (or measure it) so it is correct for the tall box. I assure you it will also be correct for the short case as well.
50px border radius is too big here. you can use 20px.
.card {
margin-bottom:20px;
background: yellow;
padding: 10px;
width: 80%;
border-radius: 20px;
position: relative;
}
.avatar {
background: red;
height: 50px;
width:50px;
border-radius:50%;
position: absolute;
top: -2px;
right: -2px;
}
p {
width: calc(100% - 20px);
}
<div class="card">
<p>Lorem Ipsum is simply dummy text of the printing and typeset </p>
<div class="avatar"></div>
</div>
<div class="card">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="avatar"></div>
</div>
<div class="card">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="avatar"></div>
</div>

White Gap before the <body> content [duplicate]

This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I have read in this site about a minor but annoying problem, a small gap before the actual content of my web page begins, but none of the solutions have worked for me.
I have set all elements with 0 padding and 0 margin by default, but still something might be causing overflow.
This is my css file:
*{
box-sizing: border-box;
margin:0px;
padding:0px;
font-family: sans-serif;
}
//some global variables here
body{
background-color: var(--brand-white);
color:var(--brand-light-gray);
}
.header-landing{
align-items: center;
justify-content: space-between;
padding:0 10px 0 10px;
margin:15px 10px 0 10px;
}
.header-nav{
display: flex;
justify-content: center;
}
.header-nav > li{
display:inline;
list-style: none;
padding:0 10px 0 10px;
}
.header-logo{
display: inherit;
justify-content: center;
}
.main-content{
background-color: var(--brand-light-gray-2);
width: 100%;
}
the html file:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>nomihub</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<section class="main-content">
<div class="header-landing flex-grid">
<picture class="header-logo col-2">
<h2>LOGO</h2>
</picture>
<div class="col-8">
<ul class="header-nav">
<li>Características</li>
<li>Precio</li>
<li>Partners</li>
<li>Recursos</li>
</ul>
</div>
<div class="col-2">
<button class="btn-default">
INGRESAR
</button>
</div>
</div>
<div class="main-content-welcome">
<div class="welcome-header">
<ul class="welcome-header__list">
<li><h2>Bienvenidos</h2></li>
<li><h1>El software de nomina más simple de todos</h1></li>
<li><p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></li>
<li><button class="btn-default">
ACTIVAR DEMO
</button></li>
</ul>
</div>
<div class="main-content-features">
<div class="welcome-container ">
<div class="circle"></div>
<h3>ENCRIPTACIÓN</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="welcome-container ">
<div class="circle"></div>
<h3>VIGILANCIA</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="welcome-container ">
<div class="circle"></div>
<h3>RESPALDO</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="welcome-container ">
<div class="circle"></div>
<h3>LIMITES ESTRICTOS</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
</section>
</body>
</html>
inspecting the elements with firefox, the white is before the actual body.
How I get rid of this gap?
Try removing the top margin in the header .header-landing{margin: 0 10px;}
Your class header-landing has a margin of 15 from the top, that causes the text to be moved down.
Edit: for those kinds of problems in the future, go into inspect mode, chose the most left option called "chose an element on the page", then you can hover over elements and see their margins and paddings. Once you know what you want to look at, click on it and you can see it's CSS properties

dynamic content ellipsis based on predefined proportion

I have the following template of a card: pen. It is comprised of two sections "one" and "two".
<div id="one">
<div id="two">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...
</div>
<div id="three">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been...
</div>
</div>
Both of the sections have content that overflows their respective size. I would like to maximize #two div, so that it will take maximum (and ellipsis the rest) size and leave one line for the #three div.
If there is not enough content for #two then take its respective size and give all size left to #three.
Edit:
I would like to fix the width and allow the height to grow to a certain limit and then ellipsis

CSS center multiline text but with shortest line on top?

I have some html, css similar to this:
<div style="width: 40em; text-align: center;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex
</div>
which renders like this but i want that the shortest line to be on top, like this.
i am unable to figure out how to do this, any help would be appreciated!
Text is automatically displayed by web browser until the end of the block width. If you want something diferent you must use a break.
<div style="width: 40em; text-align: center;">
Lorem Ipsum is simply dummy text<br>
of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy tex
</div>