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

16
front/index.html
View File

@ -66,14 +66,16 @@
<!-- Masthead -->
<!-- ============================== -->
<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-->
<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-->
<h1 class="masthead-heading">
<h1 class="masthead-heading my-4 w-100">
<img src="/assets/img/netoik-title.svg" alt="Netoïk">
</h1>
<div class="masthead-subheading font-weight-light mb-0">
<div class="masthead-subheading font-weight-light mb-4 w-100">
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line bg-primary border-primary"></div>
@ -116,7 +118,7 @@
<span>
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>:
<ul>
<ul class="mb-0">
<li>
Identifier les menaces
</li>
@ -152,7 +154,7 @@
<span>
Selon les contraintes du projet, différents outils et langages de
<strong>programmation</strong> peuvent être utilisés:
<ul>
<ul class="mb-0">
<li>
Un <strong>langage haut-niveau</strong> POO (Python, PHP) pour un développement rapide
</li>
@ -179,7 +181,7 @@
<span>
Chaque <strong>système de gestion de bases de données</strong> (SGBD)
possède ses avantages et ses inconvénients:
<ul>
<ul class="mb-0">
<li>
Les <strong>BDD relationnelles</strong> (PostgreSQL, MariaDB/MySQL, SQLite)
sont souvent suffisantes pour couvrir la plupart des besoins.