API tools faq
paste
Advertisement
aliyahscreation

Nike

aliyahscreation
Feb 8th, 2023
1,214
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.18 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2.  
  3.   .backgroundN {
  4.     width:calc(100% - 20px);
  5.     height:auto;
  6.     padding:10px;
  7.     margin:auto;
  8.     background-color:#FAF0C5;
  9.     border:3px solid #926D27;
  10.     outline:1px solid #926D27;
  11.     outline-offset:-7px;
  12.   }
  13.  
  14.   .titleN {
  15.     width:80%;
  16.     padding:5px;
  17.     margin:auto;
  18.     text-align:center;
  19.     font:60px Great Vibes;
  20.     color:#926D27;
  21.   }
  22.  
  23.   .quoteN {
  24.     width:95%;
  25.     margin:auto;
  26.     text-align:center;
  27.     font:30px Cookie;
  28.     color:#E2BC74;
  29.   }
  30.  
  31.   .imglineN {
  32.     margin:10px auto;
  33.     display:flex;
  34.     justify-content:space-between;
  35.   }
  36.  
  37.   .imgN {
  38.     width:30%;
  39.     height:250px;
  40.     border:3px solid #926D27;
  41.     outline:1px solid #926D27;
  42.     outline-offset:-7px;
  43.     transition:1s;
  44.   }
  45.  
  46.   .imgN:hover {
  47.     filter:brightness(120%);
  48.   }
  49.  
  50.   .subtitleN {
  51.     width:95%;
  52.     margin:auto;
  53.     transition:1s;
  54.     text-align:center;
  55.     font:30px Cinzel Decorative;
  56.     color:#926D27;
  57.   }
  58.  
  59.   .subtitleN:hover {
  60.     color:#fff;
  61.     text-shadow:0px 0px 5px #926D27;
  62.   }
  63.  
  64.   .boxN {
  65.     width:80%;
  66.     margin:auto;
  67.     border:2px groove #E2BC74;
  68.   }
  69.  
  70.   .boxtextN {
  71.     margin-top:-10px;
  72.     font:18px calibri;
  73.     display:flex;
  74.   }
  75.  
  76.   .boxpartN {
  77.     width:48%;
  78.     margin:auto;
  79.     text-align:justify;
  80.   }
  81.  
  82.   .boxpartN > b {
  83.     font:22px Cookie;
  84.     color:#E2BC74;
  85.   }
  86.  
  87.   .iclineN {
  88.     margin:10px auto;
  89.     justify-content:center;
  90.     display:flex;
  91.   }
  92.  
  93.   .iconN {
  94.     width:120px;
  95.     height:120px;
  96.     margin:0 auto;
  97.     box-shadow: 2px 2px 3px 0px rgba(146,109,39,0.5);
  98.   }
  99.  
  100.   .iconN span {
  101.       width:120px;
  102.     height:120px;
  103.     display:flex;
  104.     align-items:center;
  105.     justify-content:center;
  106.     background:rgba(146,109,39,0.6);
  107.     transition:1s;
  108.     opacity:0;
  109.     text-align:center;
  110.     font:18px calibri;
  111.     color:#fff;
  112.   }
  113.  
  114.   .iconN:hover span {
  115.     opacity:1;
  116.   }
  117.  
  118.   .perslineN {
  119.     display:flex;
  120.     justify-content:space-between;
  121.     font:17px calibri;
  122.   }
  123.  
  124.   .persN {
  125.     width:calc(60% - 10px);
  126.     padding-right:10px;
  127.     text-align:justify;
  128.     border-right:1px solid #E2BC74;
  129.   }
  130.  
  131.   .triviaN {
  132.     width:40%;
  133.   }
  134.  
  135.   .triviaN li {
  136.     margin-left:-15px;
  137.     list-style-type:circle;
  138.   }
  139.  
  140.   .subtitlebisN {
  141.     text-align:center;
  142.     font:22px Cinzel Decorative;
  143.     color:#E2BC74;
  144.   }
  145.  
  146.   .rellineN {
  147.     width:100%;
  148.     margin:10px auto;
  149.     display:flex;
  150.     justify-content:space-between;
  151.   }
  152.  
  153.   .relationN {
  154.     width:calc(50% - 5px);
  155.   }
  156.  
  157.   .relationN > summary {
  158.     padding:5px;
  159.     background-color:#A38854;
  160.     text-align:center;
  161.     font:25px Cookie;
  162.     color:#F5F5DC;
  163.   }
  164.  
  165.   .relationN > div {
  166.     padding:5px;
  167.     background-color:#F5F5DC;
  168.     border-left:1px dashed #E2BC74;
  169.     border-right:1px dashed #E2BC74;
  170.     border-bottom:1px dashed #E2BC74;
  171.     text-align:justify;
  172.     font:16px calibri;
  173.   }
  174.  
  175.   .imgrelN {
  176.     width:100px;
  177.     height:100px;
  178.     float:right;
  179.     margin-left:10px;
  180.     border:3px solid #926D27;
  181.     outline:1px solid #926D27;
  182.     outline-offset:-7px;
  183.     transition:1s;
  184.   }
  185.  
  186.   .imgrelN:hover {
  187.     filter:brightness(120%);
  188.   }
  189.  
  190.   .relationN > div > span {
  191.     font:22px Cookie;
  192.     color:#E2BC74;
  193.   }
  194.  
  195. </style>
  196.  
  197.  
  198. <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Cookie&family=Great+Vibes&display=swap" rel="stylesheet">
  199.  
  200.  
  201. <div class="backgroundN">
  202.  
  203.   <div class="titleN">An amazing Title</div>
  204.   <div class="quoteN">❝ An amazing quote, maybe on few lines... This quote can be as long as you want ❞</div>
  205.   <!--LINE WITH THREE IMG-->
  206.   <div class="imglineN">
  207.     <div class="imgN" style="background:url(https://i.pinimg.com/736x/77/9d/d3/779dd3eeeeb42a2c904e0e30a82f6702.jpg)center;background-size:cover;"></div>
  208.     <div class="imgN" style="background:url(https://i.pinimg.com/736x/77/9d/d3/779dd3eeeeb42a2c904e0e30a82f6702.jpg)center;background-size:cover;"></div>
  209.     <div class="imgN" style="background:url(https://i.pinimg.com/736x/77/9d/d3/779dd3eeeeb42a2c904e0e30a82f6702.jpg)center;background-size:cover;"></div>
  210.   </div>
  211.   <!--BOX-->
  212.   <fieldset class="boxN">
  213.     <legend class="subtitleN" style="width:auto;">Informations</legend>
  214.     <div class="boxtextN" >
  215.       <!--LEFT PART-->
  216.       <div class="boxpartN">
  217.         <b>Full Name -</b> An amazing Name<br/>
  218.         <b>Nicknames -</b> Some nice Nicknames<br/>
  219.         <b>Birthday -</b> XX Month<br/>
  220.         <b>Zodiac -</b> Blblbl<br/>
  221.         <b>Birthplace -</b> Blblbl<br/>
  222.         <b>Nationality -</b> Blblbl
  223.         <br/><br/>
  224.         <b>Residence -</b> Information<br/>
  225.         <b>Occupation -</b> Blblbl
  226.       </div>
  227.       <!--RIGHT PART-->
  228.       <div class="boxpartN">
  229.         <b>Sexuality -</b> Information<br/>
  230.         <b>Status -</b> Information
  231.         <br/><br/>
  232.         <b>Label -</b> Information<br/>
  233.         <b>Label -</b> Information<br/>
  234.         <b>Label -</b> Information<br/>
  235.         <b>Label -</b> Information<br/>
  236.         <b>Label -</b> Information<br/>
  237.         <b>Label -</b> Information
  238.       </div>
  239.     </div>
  240.   </fieldset>
  241.   <div class="subtitleN" style="margin-top:10px;">~ Appearance ~</div>
  242.   <!--ICONS LINE-->
  243.   <div class="iclineN">
  244.     <!--EACH ICON-->
  245.     <div class="iconN" style="background:url(https://i.pinimg.com/originals/a0/75/89/a075897c9cd3444644bd57118eb9b870.png)center;background-size:cover;">
  246.       <span>Info</span>
  247.     </div>
  248.     <!--EACH ICON-->
  249.     <div class="iconN" style="background:url(https://i.pinimg.com/originals/a0/75/89/a075897c9cd3444644bd57118eb9b870.png)center;background-size:cover;">
  250.       <span>Info</span>
  251.     </div>
  252.     <!--EACH ICON-->
  253.     <div class="iconN" style="background:url(https://i.pinimg.com/originals/a0/75/89/a075897c9cd3444644bd57118eb9b870.png)center;background-size:cover;">
  254.       <span>Info</span>
  255.     </div>
  256.     <!--EACH ICON-->
  257.     <div class="iconN" style="background:url(https://i.pinimg.com/originals/a0/75/89/a075897c9cd3444644bd57118eb9b870.png)center;background-size:cover;">
  258.       <span>Info</span>
  259.     </div>
  260.     <!--EACH ICON-->
  261.     <div class="iconN" style="background:url(https://i.pinimg.com/originals/a0/75/89/a075897c9cd3444644bd57118eb9b870.png)center;background-size:cover;">
  262.       <span>Info</span>
  263.     </div>
  264.   </div>
  265.   <div class="subtitleN" style="margin-top:10px;">~ Personality ~</div>
  266.   <div class="perslineN">
  267.     <!--PERSONALITY-->
  268.     <div class="persN">
  269.       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
  270.     </div>
  271.     <!--TRIVIA-->
  272.     <div class="triviaN">
  273.       <div class="subtitlebisN">Trivia</div>
  274.       <ul style="margin-top:5px;">
  275.         <li>Some great information about your character</li>
  276.         <li>Another great information about your character</li>
  277.         <li>Another great information about your character</li>
  278.         <li>Another great information about your character</li>
  279.         <li>Another great information about your character</li>
  280.         <li>Another great information about your character</li>
  281.       </ul>
  282.     </div>
  283.   </div>
  284.  
  285.   <div class="subtitleN" style="margin-top:10px;">~ Relations ~</div>
  286.   <!--RELATION LINE-->
  287.   <div class="rellineN">
  288.     <!--EACH RELATION-->
  289.     <details class="relationN">
  290.       <summary>An amazing Name</summary>
  291.       <div>
  292.         <div class="imgrelN" style="background:url(https://i.pinimg.com/736x/77/9d/d3/779dd3eeeeb42a2c904e0e30a82f6702.jpg)center;background-size:cover;"></div>
  293.         <span>An amazing Relation</span>
  294.         <br/><br/>
  295.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
  296.       </div>
  297.     </details>
  298.     <!--EACH RELATION-->
  299.     <details class="relationN">
  300.       <summary>An amazing Name</summary>
  301.       <div>
  302.         <div class="imgrelN" style="background:url(https://i.pinimg.com/736x/77/9d/d3/779dd3eeeeb42a2c904e0e30a82f6702.jpg)center;background-size:cover;"></div>
  303.         <span>An amazing Relation</span>
  304.         <br/><br/>
  305.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
  306.       </div>
  307.     </details>
  308.   </div>
  309.   <!--RELATION LINE-->
  310.   <div class="rellineN">
  311.     <!--EACH RELATION-->
  312.     <details class="relationN">
  313.       <summary>An amazing Name</summary>
  314.       <div>
  315.         <div class="imgrelN" style="background:url(https://i.pinimg.com/736x/77/9d/d3/779dd3eeeeb42a2c904e0e30a82f6702.jpg)center;background-size:cover;"></div>
  316.         <span>An amazing Relation</span>
  317.         <br/><br/>
  318.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
  319.       </div>
  320.     </details>
  321.     <!--EACH RELATION-->
  322.     <details class="relationN">
  323.       <summary>An amazing Name</summary>
  324.       <div>
  325.         <div class="imgrelN" style="background:url(https://i.pinimg.com/736x/77/9d/d3/779dd3eeeeb42a2c904e0e30a82f6702.jpg)center;background-size:cover;"></div>
  326.         <span>An amazing Relation</span>
  327.         <br/><br/>
  328.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
  329.       </div>
  330.     </details>
  331.   </div>
  332.  
  333. </div>  
  334.  
  335.  
  336. <!-- CREDITS, DO NOT TOUCH-->
  337. <div style="margin:5px auto;text-align:center;"><a href="https://aliyahscreations.tumblr.com/" style="font-size:10px;letter-spacing:2px;color:#222;text-decoration:none; font-family:century gothic,helvetica,arial,sans-serif;font-size:12px;line-height:1.3;">© Code by Aliyah</a></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!