diff --git a/site/img/Photos_190223-26_Bulgarie-7306-1600x2400.jpg b/site/img/Photos_190223-26_Bulgarie-7306-1600x2400.jpg new file mode 100644 index 0000000..172af6f Binary files /dev/null and b/site/img/Photos_190223-26_Bulgarie-7306-1600x2400.jpg differ diff --git a/site/img/Vienna3-1600x1067.jpg b/site/img/Vienna3-1600x1067.jpg new file mode 100644 index 0000000..ce279b1 Binary files /dev/null and b/site/img/Vienna3-1600x1067.jpg differ diff --git a/site/index.html b/site/index.html new file mode 100644 index 0000000..e4b52b8 --- /dev/null +++ b/site/index.html @@ -0,0 +1,33 @@ + + + + + + + Titre de mon document + + + + + + + +

CONTINUE

+ + + + + + + + diff --git a/site/page.html b/site/page.html new file mode 100644 index 0000000..6473f0b --- /dev/null +++ b/site/page.html @@ -0,0 +1,68 @@ + + + + + + + Titre de mon document + + + + +
+ + +
+
+ +

John Doe

+ #tropbon +
+
+ + + + + + + +
+
+

Some text inside the box.

+
+
+

Some text inside the box.

+
+
+
+ + + + + diff --git a/site/styles/styles.css b/site/styles/styles.css new file mode 100644 index 0000000..8c9ce33 --- /dev/null +++ b/site/styles/styles.css @@ -0,0 +1,182 @@ +body { + margin-top: 0; + font-family: calibri; + text-decoration: none; + background-color: ghostwhite; + color: black; +} + +body > main { + padding-top: 49px; + padding-left: 15%; + width: 70%; +} + + +/*==== BARRE DE NAVIGATION ====*/ + +nav { + z-index: 999; + position: fixed; + left: 0; + bottom: 0; + width: 100%; + color: white; + text-align: center; + +} + +.navbar { + overflow: hidden; + background-color: #8A0457; + position: fixed; + top: 0; + width: 100%; +} + +.navbar a { + float: left; + display: block; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; +} + +.navbar a:hover { + background: #80024A; +} + +.header { + background-image: url("Photos_190223-26_Bulgarie-7306-1600x2400.jpg"); + background-color: red; + height: 20%; +} + +/* ================================= */ + +section.section-profile { + position: relative; + display: flex; + background-color: #d63031; +} + +.section-profile-informations { + display: flex; + padding: 180px 30px 0; + width: 100%; + background-image: url(https://images.unsplash.com/photo-1562887085-22edc4817a9e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80); + background-position: center; + background-size: cover; +} + +.section-profile-informations img { + position: relative; + top: 30%; + margin-left: 24px; + width: 140px; + height: 140px; + object-fit: cover; + object-position: center; + border: 4px solid #fff; + border-radius: 70px; +} + +.section-profile-informations h2 { + margin-right: 24px; + font-size: 36px; + align-self: flex-end; +} + + +.section-profile-informations span { + margin-left: auto; + margin-bottom: 30px; + color: rgba(0, 0, 0, .5); + font-size: 24px; + font-style: italic; + align-self: flex-end; +} + +.PhotoProfile { + position: relative; + clip-path: inset(34% 0); + margin-top: -550px; + margin-bottom: -500px; + z-index: 20; + display: block; + width: 100%; +} + +.Icon { + display: block; + margin-left: auto; + margin-right: auto; + margin: 0; + position: absolute; + top: 30px; + margin-top: 20%; + z-index: 90; + width: 400px; + clip-path: circle(30%); + float: left; +} + +.header > p { + font-size: 40px; +} + +.Person { + box-sizing: border-box; + float: left; + width: 50%; + padding: 50px; +} + +.PhotoName::after { + z-index: 90; + position: absolute; + content: ""; + clear: both; + display: table; +} + + + +/* ================================= */ +/* +.text-block { + position: absolute; +}*/ + +.box { + box-sizing: border-box; + float: left; + width: 50%; + padding: 50px; +} + +.clearfix::after { + content: ""; + clear: both; + display: table; +} + +.haut { + display: flex; + background-image: url(../img/Photos_190223-26_Bulgarie-7306-1600x2400.jpg); + background-repeat: no-repeat; + background-size: cover; + height: 600px; + background-position: -20%; + +} + +.rond { + background-color: red; + height: 200px; + justify-content: flex-end; + align-content: flex-end; + width: 100%; +}