Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* --- 2 fichiers a la suite , 1 - HTML , 2 - HTML ----*/
- /* --- index.html --> HTML -----------------------------*/
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Find the precious!</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <nav >
- <ul>
- <li>FindThePrecious.com</li>
- <li>Fellows</li>
- <li>Contact us</li>
- </ul>
- </nav>
- <section>
- <div class="carousel"></div>
- </section>
- <section class="fellow">
- <h2>Fellows wanted dead</h2><h5>(or alive if you want to eat them later)<h5>
- </section>
- <section>
- <article></article>
- <article></article>
- <article></article>
- </section>
- <form>
- <hr></hr>
- <h2>Contact us</h2>
- <input type="email" placeholder="@">
- <input type="text" placeholder="⌂">
- <input type="text" placeholder="I have seen one of them">
- <textarea placeholder="Your message"></textarea>
- </form>
- </body>
- </html>
- /* --- Fin HTML ----------------------------------------*/
- /* --- style.css --> CSS -------------------------------*/
- html {
- background: black;
- }
- body {
- height: 100%;
- width: 40%;
- padding: 10px;
- margin-left: 30%;
- margin-right: 30%;
- background: white;
- }
- /*--------------------- Menu titre -----------------------------------------*/
- nav{
- width: 100%;
- height: 40px;
- background: #21262e;
- top: 0;
- margin:0;
- }
- ul{
- height: 100%;
- margin:0px;
- line-height:40px;
- display: block;
- }
- li{
- display: inline-block;
- height: 100%;
- padding-left: 15px;
- padding-right: 15px;
- list-style: none;
- color:White;
- }
- li:hover{
- background: white;
- color:#21262e;
- }
- /*--------------------- bloc 1 caroussel -------------------------------------*/
- div.carousel{
- width: 100%;
- height: 18vh;
- background: #F5F5F5;
- }
- /*--------------------- titre Fellows ----------------------------------------*/
- section.fellow {
- text-align: center;
- margin-bottom:20px;
- margin-top:30px;
- }
- section.fellow h2 {
- display:inline;
- font-size: large;
- }
- section.fellow h5 {
- display:inline;
- font-size: small;
- text-align:left;
- }
- /*--------------------- article ---------------------------------------------*/
- article {
- display: inline-block;
- height: 28vh;
- max-height: 400px;
- width : 30%;
- margin-left: 1%;
- background: #F5F5F5;
- vertical-align: middle;
- }
- article:first-child {
- margin-left: 3%;
- }
- article:last-child {
- margin-right: 3%;
- }
- /*--------------------- formulaire ------------------------------------------*/
- form {
- width: 100%;
- margin-top: 100px;
- }
- form h2 {
- text-align: left;
- }
- input {
- width: 80%;
- text-align :left;
- margin-left: 10%;
- margin-bottom: 10px;
- }
- textarea {
- width: 80%;
- height: 13vh;
- text-align : left;
- margin-left : 10%;
- }
- /* --- Fin CSS -----------------------------------------*/
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement