Complétion
This commit is contained in:
parent
a17a349255
commit
67335bdb70
17
index.html
17
index.html
|
@ -10,11 +10,22 @@
|
|||
<h1>Romain de Laage</h1>
|
||||
</header><nav>
|
||||
<ul>
|
||||
<li>test</li>
|
||||
<li>test</li>
|
||||
<a href="https://cloud.rdelaage.ovh"><li>Cloud</li></a>
|
||||
<a href="https://dev.rdelaage.ovh"><li>Développement</li></a>
|
||||
<a href="https://rdelaage.ovh/cv"><li>CV</li></a>
|
||||
</ul>
|
||||
</nav><section>
|
||||
Lorem ipsum dolor sit amet
|
||||
<div class="logo">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="225" width="225">
|
||||
<g transform="translate(55,37)" id="content">
|
||||
<rect id="yellow" ry="5" rx="5" y="0" x="0" height="150" width="50" fill="white" />
|
||||
<rect id="blue" ry="5" rx="5" y="0" x="65" height="90" width="50" fill="white" />
|
||||
<circle id="red" r="25" cy="125" cx="90" fill="white" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<p>Bienvenue sur mon espace personnel.</p>
|
||||
<p>Vous pouvez retrouver mes hébérgements perso sur <a href="#">https://pi.rdelaage.ovh</a> et mon CV <a href="https://rdelaage.ovh/cv">ici</a></p>
|
||||
</section><footer>
|
||||
Made with ❤ by <a href="#">Romain de Laage</a>
|
||||
</footer>
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="225" width="225">
|
||||
<g transform="translate(55,37)" id="content">
|
||||
<rect ry="5" rx="5" y="0" x="0" height="150" width="50" fill="white" />
|
||||
<rect ry="5" rx="5" y="0" x="65" height="90" width="50" fill="white" />
|
||||
<circle r="25" cy="125" cx="90" fill="white" />
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 386 B |
38
style.css
38
style.css
|
@ -2,6 +2,7 @@
|
|||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body{
|
||||
height: 100%;
|
||||
|
@ -18,12 +19,23 @@ nav{
|
|||
height: calc(100% - 150px);
|
||||
width: 200px;
|
||||
vertical-align:top;
|
||||
background-color: #34495e;
|
||||
color: #D0D0D0;
|
||||
padding: 15px;
|
||||
}
|
||||
nav ul{
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
section{
|
||||
display: inline-block;
|
||||
height: calc(100% - 150px);
|
||||
width: calc(100% - 200px);
|
||||
vertical-align:top;
|
||||
background-color: #2c3e50;
|
||||
vertical-align:middle;
|
||||
color: #D0D0D0;
|
||||
padding: 15px;
|
||||
}
|
||||
footer{
|
||||
background-color: #16a085;
|
||||
|
@ -32,3 +44,29 @@ footer{
|
|||
line-height: 50px;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
rect, circle{
|
||||
transition: 0.3s;
|
||||
fill: #D0D0D0;
|
||||
}
|
||||
#yellow:hover{
|
||||
fill: #f6b93b;
|
||||
}
|
||||
#blue:hover{
|
||||
fill: #1e3799;
|
||||
}
|
||||
#red:hover{
|
||||
fill: #eb2f06;
|
||||
}
|
||||
nav li{
|
||||
transition: 0.3s;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
nav li:hover{
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
section .logo{
|
||||
text-align: center;
|
||||
}
|
||||
a{
|
||||
color: #C0C0C0;
|
||||
}
|
||||
|
|
Reference in New Issue