Skip to content

modif css #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Akadid merged 2 commits into from
May 26, 2023
Merged

modif css #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca3b43c
modif css
Akadid May 26, 2023
9d6b8f7
Merge branch 'master' into David
Akadid May 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 73 additions & 50 deletions agile-dev/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,57 @@
/* NAV BAR */
nav .imagelogo {
padding-left: 25px;
padding-top: 9px;
}

nav .listenav {
padding-right: 35px;
}

/* FIN NAV BAR */

/* DEB section 1 */
.section1 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #9c9c9c;
}

img {
width: 200px;
}


.logo {
width: 50px;
height: 50px;
}

.buttonsec1 {
display: flex;
flex-direction: column;
align-items: center;
}

.buttonsec1 {
background-color: transparent;
border: none;
padding: 0;
cursor: pointer;
transition: opacity 0.3s;
}

buttonsec.buttonsec1 {
opacity: 0.8;
}


/* section 1 */

/* DEB SECTION 2 ET 3 */

.section-2 {
display: flex;
align-items: center;
Expand All @@ -7,92 +61,61 @@
/* Largeur du bloc */
}

.section2-img {
width: 200px;

}

.section-3 {
display: flex;
align-items: center;
margin: 0 auto;
width: 80%;
}

.section3-img {
width: 350px;
}

.left {
flex: 1 1 auto;
/* Ne pas agrandir la zone automatiquement */
margin-right: 20px;
/* Marge à droite pour séparer les zones */
}

.left2 {
flex: 1 1 auto;
/* Ne pas agrandir la zone automatiquement */
text-align: right;
margin-right: 20px;
/* Marge à droite pour séparer les zones */
}

.center {
flex: 0 0 auto;
margin: 0 20px; /* Marge à gauche et à droite pour séparer les zones */
margin: 0 20px;
/* Marge à gauche et à droite pour séparer les zones */
}

.right {
flex: 1 1 auto;
/* Permet à la zone de droite de prendre toute la largeur disponible */
}


h2 {
font-size: 1.5em;
/* Taille du titre */
}

h2 {
font-size: 1.2em;
/* Taille du titre */
}

button {
padding: 10px 20px;
/* Espacement intérieur du bouton */
}

/* section 1 */
.section1 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #9c9c9c;
}

img {
width: 200px;
}


.logo {
width: 50px;
height: 50px;
}



.buttonsec1 {
display: flex;
flex-direction: column;
align-items: center;
}

.buttonsec1 {
background-color: transparent;
border: none;
padding: 0;
cursor: pointer;
transition: opacity 0.3s;
}

.buttonsec1 {
opacity: 0.8;
}


/* section 1 */
nav .imagelogo{
padding-left: 25px;
padding-top: 9px;
}
nav .listenav{
padding-right: 35px;
}
/* FIN SECTION 2 ET 3 */
31 changes: 30 additions & 1 deletion agile-dev/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ <h1 style="font-size: medium;">Lorem ipsum</h1>

<div class="section-2">
<div class="left">
<img src="img/iphone_cover_light.png" alt="appli-iphone">
<img class="section2-img" src="img/iphone_cover_light.png" alt="appli-iphone">
</div>
<div class="right">
<h2>Benefice</h2>
Expand All @@ -69,6 +69,35 @@ <h2>Benefice</h2>
<!-- FIN SECTION 2-->

<!-- DEB SECTION 3 -->

<div class="section-3">
<div class="left2">
<h3>Benefice 2</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. It has survived not only five centuries, but also the leap into electronic
typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
including
versions of Lorem Ipsum.</p>
</div>
<div class="center">
<img class="section3-img" src="img/iphone_side_light.png" alt="appli-iphone" width=250px >>
</div>
<div class="right">
<h3>Benefice 3</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. It has survived not only five centuries, but also the leap into electronic
typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
including
versions of Lorem Ipsum.</p>
<h3>Benefice 3</h3>
<div class="section-3">
<div class="left2">
<h3>Benefice 2</h3>
Expand Down