Pauline/NDI-2019
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

premiere colonne assez rafiney

Browse Source
This commit is contained in:
gigifeh 2019-12-06 03:55:31 +01:00
parent 660b499044
commit 4198ffa467
2 changed files with 78 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
site/page.html
View File

@ -25,7 +25,7 @@
<div class="section-profile-informations">
<img src="img/Vienna3-1600x1067.jpg">
<h2>John Doe</h2>
<span>#tropbon</span>
<span>#DefiJobOpp</span>
</div>
</section>
@ -51,11 +51,40 @@
<!-- PROFILE -->
<div class="clearfix">
<div class="box" style="background-color:#bbb;width:40%">
<p>Some text inside the box.</p>
<!-- Premiere colonne -->
<div class="box" style="background-color:#F5F5F5;width:40%">
<p class="title">Biographie</p>
<p>Sed sit amet elit mi. Vivamus laoreet lorem vel justo convallis, eu malesuada dui dictum. Aenean rutrum, turpis sagittis tristique volutpat, dolor turpis laoreet mauris, sit amet porta quam nibh vitae ipsum. Vivamus hendrerit tincidunt velit in mollis. Fusce porttitor vel lectus sed porta. Nulla ac varius justo, rhoncus aliquam dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec venenatis dui eu lorem eleifend interdum. Suspendisse potenti. In id lectus ac lorem varius rutrum. Cras mollis sodales massa, at malesuada sapien feugiat eget.</p>
<p class="title">Amis</p>
<p><img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"></p>
<p class="voirplus"><a href="amis.html">Voir plus</a></p>
<p class="title">Gallery de photos</p>
<p><img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery">
<img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery">
<img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery">
<img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery">
<img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery">
<img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery"></p>
<p class="voirplus"><a href="gallery.html">Voir plus</a></p>
<!-- Deuxieme colonne -->
</div>
<div class="box" style="background-color:#ccc;width:60%">
<p>Some text inside the box.</p>
<div class="post">
<p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec venenatis dui eu lorem eleifend interdum. Suspendisse potenti. In id lectus ac lorem varius rutrum. Cras mollis sodales massa, at malesuada sapien feugiat eget.</p>
</div>
</div>
</div>
</main>

46
site/styles/styles.css
View File

@ -142,6 +142,10 @@ section.section-profile {
display: table;
}
h2 {
padding-left: 30px;
}
/* ================================= */
@ -154,7 +158,11 @@ section.section-profile {
box-sizing: border-box;
float: left;
width: 50%;
padding: 50px;
padding: 30px;
}
.box:first-child {
border-right: 1px solid grey;
}
.clearfix::after {
@ -180,3 +188,39 @@ section.section-profile {
align-content: flex-end;
width: 100%;
}
.title {
color: dimgrey;
text-decoration: underline;
font-size: 18px;
}
img {
width: 50px;
border: 1px solid grey;
}
[alt="gallery"] {
display: inline-block;
clip-path: inset(5% 12%);
width: 121px;
border: 1px solid grey;
}
[href^="amis"],
[href^="gallery"] {
text-decoration: none;
color: grey;
text-decoration: underline;
}
/* =================== */
.post {
border: 1px solid grey;
box-sizing: border-box;
float: left;
width: 100%;
padding: 30px;
}