samuel
/
netoik-home
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve alignment of masthead using margin instead of position

This commit is contained in:
samuel 2022-06-06 16:12:53 +02:00
parent 5034ec0690
commit 5e14835069
2 changed files with 32 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
front/assets/css/styles.css
View File

@ -11492,59 +11492,62 @@ html {
.masthead { .masthead {
height: 100vh; height: 100vh;
min-height: 700px;
padding-top: 12vw;
padding-bottom: 50px;
}
.masthead .container {
height: 100%;
} }
.masthead .masthead-avatar { .masthead .masthead-avatar {
position: absolute; margin-left: 100%;
top: calc(50vh - 18rem);
left: 100vw;
width: 15rem;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }
.masthead .masthead-avatar img {
width: 15rem;
}
.masthead .masthead-avatar.fallen { .masthead .masthead-avatar.fallen {
left: calc(50vw - 7.5rem); margin-left: 0;
} }
.masthead .masthead-heading { .masthead .masthead-heading {
position: absolute;
top: 50vh;
left: -100vw;
width: 100%;
font-size: 2.75rem; font-size: 2.75rem;
line-height: 2.75rem; line-height: 2.75rem;
margin-left: -100%;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }
.masthead .masthead-heading img { .masthead .masthead-heading img {
height: 4rem; height: 4rem;
} }
.masthead .masthead-heading.fallen { .masthead .masthead-heading.fallen {
left: 0; margin-left: 0;
} }
.masthead .masthead-subheading { .masthead .masthead-subheading {
position: absolute; margin-left: 100%;
top: calc(50vh + 5rem);
left: 100vw;
width: 100%;
font-size: 1.25rem; font-size: 1.25rem;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }
.masthead .masthead-subheading.fallen { .masthead .masthead-subheading.fallen {
left: 0; margin-left: 0;
} }
@media (max-width: 575px) { @media (max-width: 575px) {
.masthead .masthead-avatar { .masthead {
min-height: 600px;
}
.masthead .masthead-avatar img {
width: 11rem; width: 11rem;
top: calc(50vh - 13rem); /*top: calc(50vh - 13rem);*/
} }
.masthead .masthead-avatar.fallen { .masthead .masthead-avatar.fallen {
left: calc(50vw - 5.5rem); /*left: calc(50vw - 5.5rem);*/
} }
.masthead .masthead-heading { .masthead .masthead-heading {
top: 50vh; /*top: 50vh;*/
} }
.masthead .masthead-subheading { .masthead .masthead-subheading {
top: calc(50vh + 4rem); /*top: calc(50vh + 4rem);*/
} }
} }

16
front/index.html
View File

@ -66,14 +66,16 @@
<!-- Masthead --> <!-- Masthead -->
<!-- ============================== --> <!-- ============================== -->
<header class="masthead text-primary text-center"> <header class="masthead text-primary text-center">
<div class="container d-flex align-items-center flex-column"> <div class="container d-flex flex-column justify-content-center">
<!-- Masthead Avatar Image--> <!-- Masthead Avatar Image-->
<img class="masthead-avatar" src="/assets/img/profil.png" alt="..." /> <div class="masthead-avatar my-4 w-100">
<img src="/assets/img/profil.png" alt="..." />
</div>
<!-- Masthead Heading--> <!-- Masthead Heading-->
<h1 class="masthead-heading"> <h1 class="masthead-heading my-4 w-100">
<img src="/assets/img/netoik-title.svg" alt="Netoïk"> <img src="/assets/img/netoik-title.svg" alt="Netoïk">
</h1> </h1>
<div class="masthead-subheading font-weight-light mb-0"> <div class="masthead-subheading font-weight-light mb-4 w-100">
<!-- Icon Divider--> <!-- Icon Divider-->
<div class="divider-custom"> <div class="divider-custom">
<div class="divider-custom-line bg-primary border-primary"></div> <div class="divider-custom-line bg-primary border-primary"></div>
@ -116,7 +118,7 @@
<span> <span>
La <strong>cybersécurité</strong> est primordiale dans un projet <strong>devOps</strong>, La <strong>cybersécurité</strong> est primordiale dans un projet <strong>devOps</strong>,
elle passe par le respect des principes de développement <strong>secure-by-design</strong>: elle passe par le respect des principes de développement <strong>secure-by-design</strong>:
<ul> <ul class="mb-0">
<li> <li>
Identifier les menaces Identifier les menaces
</li> </li>
@ -152,7 +154,7 @@
<span> <span>
Selon les contraintes du projet, différents outils et langages de Selon les contraintes du projet, différents outils et langages de
<strong>programmation</strong> peuvent être utilisés: <strong>programmation</strong> peuvent être utilisés:
<ul> <ul class="mb-0">
<li> <li>
Un <strong>langage haut-niveau</strong> POO (Python, PHP) pour un développement rapide Un <strong>langage haut-niveau</strong> POO (Python, PHP) pour un développement rapide
</li> </li>
@ -179,7 +181,7 @@
<span> <span>
Chaque <strong>système de gestion de bases de données</strong> (SGBD) Chaque <strong>système de gestion de bases de données</strong> (SGBD)
possède ses avantages et ses inconvénients: possède ses avantages et ses inconvénients:
<ul> <ul class="mb-0">
<li> <li>
Les <strong>BDD relationnelles</strong> (PostgreSQL, MariaDB/MySQL, SQLite) Les <strong>BDD relationnelles</strong> (PostgreSQL, MariaDB/MySQL, SQLite)
sont souvent suffisantes pour couvrir la plupart des besoins. sont souvent suffisantes pour couvrir la plupart des besoins.