Machen Sie das Bild um das Bild umwickeln ⇐ CSS

[Anonymous]

Ich kämpfe derzeit darum, das Projekt des fortschrittlichen HTML/CSS im ODIN -Projekt zu erreichen, das reaktionsschnelles Design beinhaltete.
https://cdn.staticatic.io/gh/theodinpro ... b18d6e3afe 034/Advanced_html_css/Responsive-Design/Project_Personal_Portfolio/IMGS/Portfolio%20Tablet.png Hier ist das Layout für Tablet
https://cdn.statically.io/gh/TheOdinPro ... tfolio.png Here ist das Layout für Cumputer < /p>
Ich habe die Site für den Desktop derzeit implementiert. Für den Header habe ich jedoch den Header mit Display Flex auf dem Header verwendet und das Bild und den Textbehälter in zwei verschiedenen Behälter implementiert. Für das Tablet möchte ich das Bild im selben Container wie den Text herstellen und links verwenden, dann vielleicht die Position mit Position relativ anpassen.

Code: Select all

    


[img]./asset/images/photo_identite.jpeg[/img]

Aymeric SABRIÉ

About me
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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

[url=https://github.com/aymerrric]
[img]./asset/images/github.svg[/img]
[/url]
[url=https://www.linkedin.com/feed/]
[img]./asset/images/linkedin.svg[/img]
[/url]
[url=https://x.com/filao14]
[img]./asset/images/twitter.svg[/img]
[/url]



< /code>
body{
display: flex;
align-items: center;
flex-direction: column;
}

header{
position: relative;
padding: 20px;
max-width: 1200px;
min-width: 1080px;
display: flex;
align-items: center;
}

body::before{
width: 100%;
display: block;
background-color: #0891b2;
min-height: 550px;
position: absolute;
content: "";
z-index: -0.5;
transform: skew(0,-10deg);
top: -200px;
}

.text-container{
max-width: 450px;
background-color: white;
padding: 20px;
display: flex;
flex-direction: column;
min-height: 290px;
gap: 5px  ;
z-index: 0;
}

.presentation-photo{
max-width: 300px;
}

header>*{
box-shadow: 5px 5px 2px 1px rgba(0, 0, 0, 0.233);
}

.icon{
width: 20px;
height: auto;
}

.icon-container{
display: flex;
gap: 10px;
align-self: flex-end;
margin-top: auto;
}

.header-title{
font-family:"Playfair Display" ;
}

.text-container{
font-family: "Roboto";
}

.picture-container{
position: relative;
}

.caption{
position: absolute;
bottom: 0;
padding: 10px;
font-size: 2.2rem;
color: white;
text-align: center;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}