Same images, same container but different sizes - html

I have the same images set up within a container. I have set up a width (it´s suppose that this has to apply both of them) but in the end the right one looks bigger BUT this happens when it gets to the #media (min-width:1024px). I believe this is related with responsive. While we have the images under that size and in display: block is OK. When it turns display:flex the problem begins. Please anybody help me with this issue. It doesn´t has any sense. (evidence attached)
HTML code
<!DOCTYPE html>
<html lang="es">
<head>
<title>Balance-Salud Mental</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width", user-scalable=no, initial-scale=1, maximun-
scale=1, minimun-scale=1"/>
<meta name="description" content="Tu salud mental es importante, cuidala con los profesiones
adecuados. "/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap"
rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500;600&display=swap"
rel="stylesheet"/>
</head>
<body>
<header>
<div class="contenedor">
<a href="index.html">
<img src="img/logo.png" class="brand" alt="Salud Mental Peru">
</a>
<input type="checkbox" id="menu-bar">
<label class="icon-menu-outline" for="menu-bar"></label>
<nav class="menu">
¿Quienes Somos?
Nuestros Profesionales
Consultas y Citas
Artículos
</nav>
</div>
</header>
<main>
<section id=profesionales>
<h2>Conócenos</h2> <br>
<div class="contenedor">
<div class="doctor">
<h3>Manuel Mallqui Babilon</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo corrupti sed distinctio
dolore. Veniam dicta error officiis sed. Aut, mollitia.</p>
<img src="img/foto2.jpg" alt=""/>
</div>
<div class="doctor">
<h3>Manuel Mallqui Ñamot</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora, vero ex accusamus
temporibus maiores esse nihil facilis iusto laudantium aliquid.</p>
<img src="img/foto2.jpg" alt=""/>
</div>
</div>
</section>
</main>
<footer>
<div class="contenedor">
<p>2018-2020 Balance Salud Mental © - Designed by Watermelon</p>
</div>
</footer>
</body>
</html>
CSS CODE
#import url(menu.css);
#import url(slider.css);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #9acd32;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152'
height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff'
fill-opacity='0.17'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-
42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82
30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-
18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54
0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-
2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30
50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
header {
width: 100%;
height: 80px;
background: white;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.contenedor {
width: 98%;
margin: auto;
}
.brand {
width: 160px;
margin: 3px 10px;
}
section {
width: 100%;
margin-bottom: 25px;
}
/*QUIENES SOMOS*/
#quienes_somos {
text-align: center;
margin-top: 100px;
padding: 20px;
}
/*NUESTROS PROFESIONALES*/
#profesionales {
border: 1px solid red;
text-align: center;
margin-top: 100px;
}
#profesionales .contenedor {
border: 1px solid black;
display: block;
justify-content: center;
}
.doctor {
margin: 20px;
}
.doctor img {
width: 100%;
max-width: 500px;
padding: 10px;
}
/*FOOTER*/
footer .contenedor {
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
font-size: small;
margin-bottom: 50px;
margin-top: 250px;
}
#media (min-width:1024px) {
.contenedor {
width: 1000px;
}
#profesionales .contenedor {
display: flex;
}
}[enter image description here][1]

The images' width is 100%, but the width of their siblings <p></p> is not set. The content of two <p> has different length. That is why they make the widths of their parents <div class="doctor> different.
The solution could be to add to the .doctor rule a new one: width: 50%.
I hope I have nudged you into understanding the problem.

Related

How can i make my web layout less wide while keeping it responsive at the same time?

I am making a web layout for my website and i ran into an issue. The overall width of the layout is too much, i'd like to have some margins on the sides of the screen. The layout is responsive but when i add margins to the sides and the responsivity is no longer there and the page looks horrible on a small screen.
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<h1>Bootstrap</h1>
</header>
<article class="main">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At, corporis quibusdam officia magnam asperiores exercitationem laboriosam dolorum hic minima pariatur?
</p>
</article>
<footer class="footer">
<h1>Footer</h1>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src = "web.js"></script>
</body>
</html>
css:
body{
background-color: gray;
}
.wrapper{
display:flex;
flex-flow: row wrap;
text-align: center;
color: black;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
border-radius: 5px;
margin: 10px;
}
.header{
background: white;
height: 250px;
}
.footer{
background: white;
height: 80px;
}
.main{
text-align: left;
background: white;
height: 300px;
font-size: 24px;
height: 1200px;
}
I tried adding margins to the sides but it didn't work.
.wrapper > * {
padding: 10px;
flex: 1 100%;
border-radius: 5px;
margin: 10px 300px 10px 300px;
}
You may want to use #media in CSS
#media only screen and (max-width: 600px) {
.wrapper > * {
margin: 0px;
}
}
Easiest way would be to give the .wrapper a max-width and set the margins to center it
.wrapper{
max-width: 80vw; // layout will be this same width on every screen
margin: 0 auto; // wrapper will be centered
display:flex;
flex-flow: row wrap;
text-align: center;
color: black;
}

I want the website to be responsive for computer, smartphone and tablet

I want the website to be responsive for computer, smartphone and tablet. But I'm in trouble. I can't fix the blue line of the css section .titleproduct, when I resize the window the line keeps moving and decreasing. In the css .listadeprodutos I want the images to be scaled up to the blue line of Products keeping the minimum spacing between columns column-gap: 4%. When I resize I also notice that the images are one on top of the other. The buttons are misaligned to the left. I need them to be in a line lined up and centered. I've tried everything, I searched the site and several tutorials and I couldn't put the responsive one, I just failed.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 1024px;
width: 100%;
margin: 0 auto;
}
header {
background-color: #0e79e7;
}
header .container {
padding: 16x 0;
color: #ffffff;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
h1 {
font-style: italic;
padding: 10px;
}
header nav li {
display: inline;
margin-left: 16px;
font-size: 21px;
font-weight: bold;
}
header nav li a {
color: #ffffff;
text-decoration: none;
margin-right: 8px;
}
.imagem-principal {
width: 100%;
height: 100%;
object-fit: cover;
}
header .container,
section .container {
display: flex;
align-items: center;
justify-content: space-between;
}
section .container {
align-items: flex-start;
}
section {
padding: 22px 0;
}
section h2 {
padding-top: 10px;
margin-bottom: 16px;
font-style: italic;
color: #0e79e7;
border-bottom: 3px solid #0e79e7;
padding-bottom: 10px;
margin-right: 1px;
margin-left: 1px;
}
.imagem-principal {
margin: 0 auto;
}
section .texto {
padding-top: 20px;
white-space: normal;
margin-right: 23px;
margin-left: 23px;
}
.listadeprodutos {
display: grid;
grid-template-columns: repeat(4, 9%);
column-gap: 4%;
}
.container,
.listadeprodutos {
margin: 0 auto;
justify-content: center;
width: 85%;
}
button {
display: block;
width: 77%;
padding: 8px 0;
border: none;
background-color: #0e79e7;
color: #fff;
font-size: 16px;
font-weight: bold;
border-radius: 5px;
}
section .títuloproduto {
margin-right: 471.6px;
margin-left: 448.6px;
}
#media screen and (max-width: 640px) {
h1 {
font-size: 26px;
padding: 10px;
font-weight: bold;
justify-content: space-between;
}
header nav li {
display: inline;
font-size: 16px;
font-weight: bold;
justify-content: space-between;
}
.imagem-principal {
display: block;
margin: 0 auto;
max-width: 90%;
}
header .container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 100%;
}
section .container {
display: block;
align-items: center;
justify-content: space-between;
max-width: 100%;
}
.listadeprodutos {
display: grid;
grid-template-columns: repeat(1, 90%);
}
}
#media screen and (min-width: 641px) and (max-width: 1023px) {
.imagem-principal {
display: block;
margin: 0 auto;
max-width: 95.3%;
}
header .container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 100%;
}
section .container {
display: block;
align-items: center;
justify-content: space-between;
max-width: 100%;
}
.listadeprodutos {
display: grid;
grid-template-columns: repeat(2, 30%);
column-gap: 1%;
}
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EBAC Shoes</title>
<link rel="stylesheet" href="./main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<h1>EBAC Shoes</h1>
<nav>
<ul>
<li>
Sobre a loja
</li>
<li>
Contato
</li>
</ul>
</nav>
</div>
</header>
<section>
<div class="container">
<img class="imagem-principal" src="https://live.staticflickr.com/65535/52643926620_43e120edc1_o.jpg" alt="loja">
<div class="texto">
<h2>Sobre a loja</h2>
<br>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus eum incidunt soluta?
Mollitia
hic, a, vero exercitationem amet earum sapiente expedita adipisci sed ea impedit facilis
aspernatur
omnis incidunt explicabo.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, praesentium magni iusto autem
ipsam distinctio aut molestias laudantium, numquam voluptatum eius exercitationem ut asperiores
dolorem repudiandae quos ipsa perspiciatis dignissimos!</p>
</div>
</div>
</section>
<section>
<h2 class="títuloproduto"> Produtos </h2>
<div class="listadeprodutos">
<article class="listadeproduto">
<br><a href="#">
<img src="https://live.staticflickr.com/65535/52642982957_9431e2873e_o.jpg" alt="Tênis Nike Precision VI Masculino - Preto+Branco"> </a>
<br><br><h3>Tênis Nike Precision VI Masculino - Preto+Branco</h3>
<p>Tênis Nike preto, disponível nos tamanhos: 37, 38, 39, 40 e 42.</p>
<br><button type="button">Adicionar ao carrinho</button>
</article>
<article class="listadeproduto">
<br><a href="#">
<img src="https://live.staticflickr.com/65535/52643489536_f2157764dc_o.jpg" alt="Tênis Mizuno Wave Titan 2 - Azul e Branco"> </a>
<br><br><h3>Tênis Mizuno Wave Titan 2 - Azul e Branco</h3>
<p>Tênis Mizuno azul, disponível nos tamanhos: 37, 38, 39, 40 e 42.</p>
<br><button type="button">Adicionar ao carrinho</button>
</article>
<article class="listadeproduto">
<br><a href="#">
<img src="https://live.staticflickr.com/65535/52643964893_c4fc4401e2_o.jpg" alt="Tênis Asics Metaspeed Edge Unissex - Verde"> </a>
<br><br><h3>Tênis Asics Metaspeed Edge Unissex - Verde</h3>
<p>Tênis Asics Verde, disponível nos tamanhos: 37, 38, 39, 40 e 42.</p>
<br><button type="button">Adicionar ao carrinho</button>
</article>
<article class="listadeproduto">
<br><a href="#">
<img src="https://live.staticflickr.com/65535/52643749724_75fab9775d_o.jpg" alt="Tênis Puma Comet 2 Alt SR BDP - Preto+Vermelho"> </a>
<br><br><h3>Tênis Puma Comet 2 Alt SR BDP - Preto+Vermelho</h3>
<p>Tênis Puma, disponível nos tamanhos: 37, 38, 39, 40 e 42.</p>
<br><button type="button">Adicionar ao carrinho</button>
</article>
</div>
</section>
</body>
</html>
section .títuloproduto {
margin-right: 471.6px;
margin-left: 448.6px;
}
The reason why your line keeps moving and decreasing is that you have given margin values. And they are in pixels. Pixels don't support responsive design.
so instead of px, you could try relative units like %, EM, and REM.
These will still move your line and decrease the width. But your line wouldn't vanish nor move to the right like when using px.
example alternative below,
section .títuloproduto {
margin-left: 20%;
margin-right: 20%;
}
But, if you absolutely don't want your line to decrease, try width property (along with pixel values) instead of margin. This will not decrease the line width.
section .títuloproduto {
width: 300px;
}
here the content will be left aligned. But you could center it using something like margin: 0 auto;
Hope this helps :-)

Putting a vertical line after flex element

I've started again with web design and am currently building my portfolio. Anyway, I wanted to know how you would implement that. I have the problem that I want to put a vertical line under an element.
/* main-style.css */
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#300&display=swap');
:root {
--default-font: 'Century Gothic';
--default-jp-font: 'Noto Sans JP';
}
* {
margin: 0;
padding: 0;
font-family: var(--default-font);
text-transform: uppercase;
}
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 1px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgb(138, 33, 199);
}
body {
background-color: #252525;
}
.body-wrapper {
width: 100%;
scroll-behavior: smooth;
}
section {
height: 100vh;
}
#welcome {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/background-welcome.jpg');
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}
#welcome>.content-container {
margin-top: 25%;
margin-left: auto;
background-color: rgba(255, 255, 255, 0.2);
width: 20%;
text-align: center;
padding: 1.4% 0.4%;
backdrop-filter: blur(2px);
border: 2px solid white;
flex-wrap: wrap;
}
#welcome>.content-container>p {
color: wheat;
font-size: 24px;
letter-spacing: 3px;
}
#welcome>.content-container>p>b {
color: #f5deb3;
}
#welcome>.side-content-container {
margin-left: auto;
height: 100%;
justify-self: flex-end;
padding-right: 2%;
display: flex;
align-items: center;
}
#welcome>.side-content-container>p {
/*color: rgb(185, 157, 30);*/
font-size: 26px;
writing-mode: vertical-rl;
letter-spacing: 1.5rem;
color: transparent;
background-image: url('../img/background-welcome.jpg');
background-size: cover;
background-repeat: no-repeat;
background-clip: text;
-webkit-background-clip: text;
filter: brightness(500%);
}
.section-seperator {
width: 100%;
height: 0.2rem;
background-color: white;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This is me. - Jxson</title>
<link rel='stylesheet' type='text/css' media='screen' href='assets/css/main-style.css'>
</head>
<body>
<div class="body-wrapper">
<section id="welcome">
<div class="content-container">
<p>Hey! this is me:<br><b>{Jason}</b></p>
</div>
<div class="side-content-container">
<p>私はアンを愛しています</p>
</div>
<div class="line">
</div>
</section>
<div class="section-seperator">
</div>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio error quos dolores blanditiis reiciendis illum sit veniam temporibus, sapiente earum iure, reprehenderit sequi, quae assumenda est alias incidunt iusto!</p>
</section>
</div>
</body>
</html>
I'm specifically referring to the #welcome section which renders the content as a flex grid. I'm already trying to work with responsive positioning, but I don't want to use any shitfixes like "position: absolute" because I want to ensure as much dynamism as possible. Does anyone have an idea or a suggestion on how to implement this? Suggestions for improvement are welcome ^^
I already tried to play around with position absolute but i dont want to use that, due the dynamic size. I also tried to play around with flex-wrap and indexes but nothing worked out for me!
.container{
display:flex;
justify-content:center;
align-items:center;
height:95vh;
flex-direction:column;
}
.line{
height:15vh;
border:solid 1px red;
}
<div class='container'>
<div id='text'>
Hi my name is <br>
</div>
<div class='line'></div>
</div>

How to prevent flex-basis resize item image?

Due to the html markup I had to use flex-basis to improve style, so that p element start from the same column as the title/headline, and problem was fixed using flex-basis.
But as you can see in the screenshot, the image takes too much height and width.
I tried to fix it applying max-height and max-width, but it breaks my style.
And my goal is to remove that space so that i can control the space between the content and button.
Note: I can't use css grid. I know, it would be easier, but there are problems on ios using css grid.
Here is the sandbox link and code snippet below
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
column-gap: 15px;
padding: 20px;
}
.content {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.logo-image {
flex-basis: 100%;
object-fit: contain;
object-position: top;
padding-top: 10px;
order: 1;
align-self: flex-start;
}
.headline {
color: white;
order: 2;
padding-left: 10px;
}
.text {
color: white;
font-size: 16px;
margin-bottom: 20px;
order: 3;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
<div class="container">
<div class="content">
<h4 class="headline">
Block Title
</h4>
<img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" />
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
aliquid sit, cupiditate
</p>
</div>
<div class="btn">
<button>link</button>
</div>
</div>
]3 and code
First, remove flex-basis on .logo-image.
Then put h4.headline and your img in its own .wrapper and add display: flex; to it. Then just set img { max-width: 100%;) so that your image resizes appropriately in the container.
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
column-gap: 15px;
padding: 20px;
}
.content {
display: flex;
}
.logo-image {
object-fit: contain;
object-position: top;
padding-top: 10px;
align-self: flex-start;
}
.headline {
color: white;
padding-left: 10px;
}
.text {
color: white;
font-size: 16px;
padding-left: 10px;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Static Template</title>
</head>
<body>
<div class="container">
<div class="content">
<img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" />
<div class="wrapper">
<h4 class="headline">
Block Title
</h4>
<div>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente aliquid sit, cupiditate
</p>
</div>
</div>
</div>
<div class="btn">
<button>link</button>
</div>
</div>
</body>
</html>
Can't you make the image position:absolute so you wont need flex-box
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
column-gap: 15px;
padding: 20px;
}
.content {
position: relative;
padding-left: 4rem;
}
.logo-image {
position: absolute;
left: 0;
top: 0;
}
.headline {
color: white;
order: 2;
margin:0 0 0.5rem;
}
.text {
color: white;
font-size: 16px;
margin:0 0 10px;
order: 3;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Static Template</title>
</head>
<body>
<div class="container">
<div class="content">
<h4 class="headline">
Block Title
</h4>
<img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" />
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
aliquid sit, cupiditate
</p>
</div>
<div class="btn">
<button>link</button>
</div>
</div>
</body>
</html>

Replacing a button

I tried to search my problem's solution but i couldnt't find it because of my bad english so i apologize if my question have an answer already.
I want place my button to there that i showed you in image. If possibly i want to do this with 'flex'. But doesn't matter.
Here is the code (i wrote just this section)
*{
padding:0;
margin:0;
box-sizing: border-box;
}
body{
background-image: url('img/bg.png');
font-family: 'Roboto', 'sans-serif';
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
.container{
padding-left:2rem;
padding-right:2rem;
}
.container-deep{
padding-left:8rem;
padding-right:8rem;
}
/*about-me start*/
.about-me .card{
background:white;
box-shadow:2px 2px 15px rgba(0,0,0,0.4);
padding:4rem;
display:flex;
border-radius:10px;
}
.about-me .card-info{
margin-left:5rem;
display:flex;
flex-direction: column;
}
.about-me .card .card-info h3{
margin-top:.3rem;
margin-bottom:1rem;
font-size:.8rem;
font-weight: bold;
}
.about-me .card .card-info p{
opacity:.8;
margin-bottom:1rem;
}
.about-me .card .card-info a{
background:black;
border: 1px solid black;
color:white;
padding: .7rem 1.5rem .7rem 1.5rem;
align-self: flex-end;
justify-self: center;
}
.about-me .card .card-info a:hover{
background:white;
color:black;
border: 1px solid black;
}
.about-me .card .card-image img{
width:125vh;
}
/*about-me end*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Emir">
<meta name="keywords" content="full, stack, web, development">
<meta name="description" content="Full Stack Web Development">
<title>Full-Stack Web Site</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<section>
<div class="about-me container">
<div class="card">
<div class="card-image">
<img src="https://images.pexels.com/photos/2941570/pexels-photo-2941570.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</div>
<div class="card-info">
<h1>About Me</h1>
<h3>Full-Stack Web Developer</h3>
<p>
Merhaba, ben Emir.
Kendimi web alanında geliştirebilmek adına sürekli araştırmalar yaparak full-stack developer olmayı hedefliyorum.
Yaptığım çalışmaları ve sahip olduğum referansları sunabilmek adına bu siteyi yazdım.
</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus illo deleniti nostrum praesentium dignissimos pariatur magnam ipsum perferendis aut ab. Voluptatum, ut sapiente. Fuga dolor corporis quis temporibus quos qui.</p>
Visit My Blog
</div>
</div>
</div>
</section>
</body>
</html>
Using propriety position:relative|absolute to reslove your problem.
Add this in your code :
//Your button "Visit My Blog"
a{
position: absolute;
bottom: 0;
right: 0;
}
//Your content
div.card-info{
position: relative;
}
Using flex, you have to go for a column logic and space-between the child containers like so:
#container {
display: flex;
flex-direction: column;
height: 45vh;
width: 40vw;
justify-content: space-between;
border-style: solid;
border-width: 2px;
border-color: blue;
}
#button {
border-style: solid;
border-width: 2px;
border-color: red;
width: 10vw;
}
<html>
<body>
<div id="container">
<div id="text">This is the about me text</div>
<div id="button">this is the button</div>
</div>
</body>
</html>