SHARE
TWEET

findThePrecious.com (model CSS)

Mhyrn Feb 27th, 2020 (edited) 94 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Find the precious!</title>
  6.         <link rel="stylesheet" href="style.css">
  7.     </head>
  8.     <body>
  9.         <nav>
  10.             <ul>
  11.                 <li>FindThePrecious.com</li>
  12.                 <li>Fellows</li>
  13.                 <li>Contact us</li>
  14.             </ul>
  15.         </nav>
  16.         <section>
  17.             <div class="carousel"></div>
  18.         </section>
  19.         <section>
  20.             <h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
  21.         </section>
  22.         <section>
  23.           <article><img src="https://via.placeholder.com/350x450" alt="placeholder"></article>
  24.           <article><img src="https://via.placeholder.com/350x450" alt="placeholder"></article>
  25.           <article><img src="https://via.placeholder.com/350x450" alt="placeholder"></article>
  26.         </section>
  27.         <form>
  28.             <h2>Contact us</h2>
  29.             <input type="email" placeholder="@">
  30.             <input type="text" placeholder="&#8962;">
  31.             <input type="text" placeholder="I have seen one of them">
  32.             <textarea placeholder="Your message"></textarea>
  33.         </form>
  34.     </body>
  35. </html>
  36.  
  37.  
  38. /** Barre de Navigation **/
  39. nav{
  40.   margin:0;
  41.   padding:0;
  42.   background:black;
  43.   height:50px;
  44. }
  45. nav ul li{
  46.   margin:0;
  47.   line-height:50px;
  48.   display:inline;
  49.   padding-right:20px;
  50.   color:white;
  51. }
  52. /** Barre de Navigation **/
  53.  
  54. /** Carousel **/
  55. .carousel{
  56.   margin:0;
  57.   height:250px;
  58.   background:grey;
  59. }
  60. /** Carousel **/
  61.  
  62. /** Section "Fellows wanted dead" **/
  63. section{
  64.   color:grey;
  65.   text-align:center;
  66. }
  67. section h2{
  68.   margin-top:50px;
  69.   margin-bottom:50px;
  70. }
  71. section article{
  72.   margin:0;
  73.   display:inline;
  74.   padding-right:0.75%;
  75.   padding-left:0.75%;
  76.   margin-bottom:100px;
  77. }
  78. article img{
  79.   display:inline-block;
  80.   margin:0;
  81.   width:30%;
  82. }
  83. /** Section "Fellows wanted dead" **/
  84.  
  85. /** Formulaire de Contact **/
  86. form{
  87.   margin-top:100px;
  88.   border-top: 3px solid grey;
  89. }
  90. form h2{
  91.   color:grey;
  92.   margin-bottom:50px;
  93. }
  94. input{
  95.   display:block;
  96.   margin-left:auto;
  97.   margin-right:auto;
  98.   font-size:1.8em;
  99.   height:30px;
  100.   margin-top:20px;
  101.   width:80%;
  102. }
  103. textarea{
  104.   display:block;
  105.   margin-left:auto;
  106.   margin-right:auto;
  107.   margin-top:20px;
  108.   height:150px;
  109.   width:80%;
  110. }
  111. /** Formulaire de Contact **/
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top