API tools faq
paste
ol1vi4s-corner

grey blue layout

ol1vi4s-corner
May 11th, 2026
95
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 18.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Insert title here</title>
  8.     <style>
  9.         body {
  10.             background: #1d62a1;
  11.             font-family: Arial, Helvetica, sans-serif;
  12.         }
  13.  
  14.         a {
  15.             color: #1d62a1;
  16.         }
  17.  
  18.         h1 {
  19.             margin: 0px;
  20.             background-color: white;
  21.             width: fit-content;
  22.             font-size: 40px;
  23.             color: #1d62a1;
  24.         }
  25.  
  26.         u {
  27.             color: #1d62a1;
  28.         }
  29.  
  30.         hr {
  31.             width: 20%;
  32.             float: left;
  33.             border: #1d62a1 3px solid;
  34.         }
  35.  
  36.         button {
  37.             font-family: inherit;
  38.             font-size: inherit;
  39.             padding: 5px;
  40.             background: none;
  41.             border: none;
  42.             cursor: pointer;
  43.             text-decoration: underline;
  44.             color: #1d62a1;
  45.             position: relative;
  46.             width: 50%;
  47.  
  48.         }
  49.  
  50.         .grid {
  51.             background-color: rgba(255, 255, 255, 0.843);
  52.             display: grid;
  53.             grid-template-columns: 75% 25%;
  54.             grid-template-rows: 150px 3fr;
  55.             height: 550px;
  56.             max-width: 900px;
  57.             margin-left: auto;
  58.             margin-right: auto;
  59.             margin-top: 5%;
  60.             margin-bottom: auto;
  61.             font-size: 15px;
  62.         }
  63.  
  64.         .logo {
  65.             grid-column: 1;
  66.             grid-row: 1;
  67.             border-right: 1px rgb(216, 216, 216) solid;
  68.             z-index: 700;
  69.         }
  70.  
  71.         .main {
  72.             grid-column: 1;
  73.             grid-row: 2;
  74.             text-align: left;
  75.             border-right: 1px rgb(216, 216, 216) solid;
  76.             border-top: 1px rgb(216, 216, 216) solid;
  77.             padding: 5px;
  78.             background-color: white;
  79.             height: 500px;
  80.         }
  81.  
  82.         .textgrid3,
  83.         .textgrid4 {
  84.             display: none;
  85.         }
  86.  
  87.         .navtop {
  88.             background-color: rgba(255, 255, 255);
  89.             grid-column: 2;
  90.             grid-row: 1;
  91.             height: 100%;
  92.             padding: 5px;
  93.             box-sizing: border-box;
  94.         }
  95.  
  96.         .nav {
  97.             grid-column: 2;
  98.             grid-row: 2;
  99.             height: 400px;
  100.             padding: 5px;
  101.             word-wrap: break-word;
  102.         }
  103.  
  104.         .nav a {
  105.             color: black;
  106.         }
  107.  
  108.         .updates {
  109.             box-sizing: border-box;
  110.             position: relative;
  111.             width: 100%;
  112.             background-color: rgb(216, 216, 216);
  113.         }
  114.  
  115.         .updates::after {
  116.             position: absolute;
  117.             width: 70%;
  118.             height: 20px;
  119.             content: "";
  120.         }
  121.  
  122.         .updates::after {
  123.             left: 0;
  124.             bottom: 0;
  125.             border-bottom: 6px solid #1d62a1;
  126.         }
  127.  
  128.         .updatesgrid {
  129.             display: grid;
  130.             grid-template-columns: 70% 30%;
  131.             grid-template-rows: 1fr;
  132.             height: 100%;
  133.         }
  134.     </style>
  135. </head>
  136.  
  137. <body>
  138.     coded by <a href="ol1vi4s-corner.neocities.org" style="color: white;">ol1vi4s-corner</a>
  139.     <div class="grid">
  140.         <div class="logo">
  141.             <img src="https://i.pinimg.com/736x/2d/e4/76/2de476dbb20e38444134acabeaa2b1bd.jpg" width="100%"
  142.                height="100%;">
  143.         </div>
  144.         <div class="main">
  145.             <style>
  146.                 .header {
  147.                     background-color: rgb(216, 216, 216);
  148.                     border-bottom: #1d62a1 10px solid;
  149.                     height: 40px;
  150.                     width: 100%;
  151.                     box-sizing: border-box;
  152.                 }
  153.  
  154.                 @keyframes fadeIn {
  155.                     0% {
  156.                         transform: translatex(-50%);
  157.                         opacity: 0;
  158.                     }
  159.  
  160.                     100% {
  161.                         transform: translatex(0%);
  162.                         opacity: 1;
  163.                     }
  164.                 }
  165.  
  166.                 /**Text grid 1 and 2 display the content for desktop ver. **/
  167.                 .textgrid1 {
  168.                     display: grid;
  169.                     grid-template-columns: 1fr 2fr;
  170.                     gap: 10px;
  171.                     overflow: hidden;
  172.                     place-items: center;
  173.                     animation: 1.5s fadeIn;
  174.                 }
  175.  
  176.                 .textgrid2 {
  177.                     display: grid;
  178.                     grid-template-columns: 1fr 1fr 1fr 1fr;
  179.                     grid-template-rows: 1fr;
  180.                     gap: 10px;
  181.                     overflow: hidden;
  182.                     place-items: center;
  183.                     animation: 2s fadeIn;
  184.                 }
  185.  
  186.                 .aboutme {
  187.                     padding-top: 15px;
  188.                     box-sizing: border-box;
  189.                     position: relative;
  190.                     height: 100%;
  191.                 }
  192.  
  193.                 .aboutme::after {
  194.                     position: absolute;
  195.                     width: 25px;
  196.                     height: 20px;
  197.                     content: "";
  198.                 }
  199.  
  200.                 .aboutme::after {
  201.                     left: 0;
  202.                     bottom: 0;
  203.                     border-bottom: 6px solid #1d62a1;
  204.                 }
  205.  
  206.                 /**textgrid 3 and 4 display contents for mobile **/
  207.                 .textgrid3 {
  208.                     grid-template-columns: 1fr;
  209.                     grid-template-rows: 2fr 2fr;
  210.                     place-items: center;
  211.  
  212.                 }
  213.  
  214.                 .textgrid4 {
  215.                     grid-template-columns: 1fr 1fr;
  216.                     grid-template-rows: 1fr 1fr 1fr;
  217.                     gap: 10px;
  218.                 }
  219.             </style>
  220.             <!-- adjust margin-left to shift header text horizontally-->
  221.             <div class="header">
  222.                 <h1 style="margin-left:10%;height:50px;">About the site</h1>
  223.             </div>
  224.             <div class="textgrid1">
  225.                 <p style="grid-column: 1;">
  226.                     <img src="https://i0.wp.com/seds.org/wp-content/uploads/2020/02/placeholder.png?fit=1200%2C800&ssl=1"
  227.                        width="100%">
  228.                 </p>
  229.  
  230.                 <p style="grid-column: 2;">
  231.                     <span>
  232.                         <img src="https://file.garden/aNy90GYmaWI-Okj1/bh%20brush%2034%204.png" height="20px">
  233.                         Contact me on neocities in the case of any bugs or mistakes
  234.                     </span>
  235.                     <br><br>
  236.                     <span>
  237.                         <img src="https://file.garden/aNy90GYmaWI-Okj1/bh%20brush%2034%204.png" height="20px">
  238.                         Feel free to adjust the css/html
  239.                     </span>
  240.                     <br><br>
  241.                     <span>
  242.                         <img src="https://file.garden/aNy90GYmaWI-Okj1/bh%20brush%2034%204.png" height="20px">
  243.                         Pls do not remove credits unless code has been altered more than 50%
  244.                     </span>
  245.                 </p>
  246.             </div>
  247.             <div class="textgrid3">
  248.                 <p style="grid-row: 1;">
  249.                     <img src="https://i0.wp.com/seds.org/wp-content/uploads/2020/02/placeholder.png?fit=1200%2C800&ssl=1"
  250.                        width="70%">
  251.                 </p>
  252.  
  253.                 <p style="grid-row:2">
  254.                     <span>
  255.                         <img src="https://file.garden/aNy90GYmaWI-Okj1/bh%20brush%2034%204.png" height="20px">
  256.                         Contact me on neocities in the case of any bugs or mistakes
  257.                     </span>
  258.                     <br><br>
  259.                     <span>
  260.                         <img src="https://file.garden/aNy90GYmaWI-Okj1/bh%20brush%2034%204.png" height="20px">
  261.                         Feel free to adjust the css/html
  262.                     </span>
  263.                     <br><br>
  264.                     <span>
  265.                         <img src="https://file.garden/aNy90GYmaWI-Okj1/bh%20brush%2034%204.png" height="20px">
  266.                         Pls do not remove credits unless code has been altered more than 50%
  267.                     </span>
  268.                 </p>
  269.             </div>
  270.             <div class="header">
  271.                 <h1 style="margin-left:55%;height:50px;">About me</h1>
  272.             </div>
  273.             <div class="textgrid2">
  274.                 <div class="aboutme" style="grid-column:1;">
  275.                     Name: Olivia
  276.                     <br>
  277.                     Age: 19
  278.                 </div>
  279.                 <div class="aboutme" style="grid-column: 2;">
  280.                     MBTI: INTJ
  281.                 </div>
  282.                 <p class="aboutme" style="grid-column: 3;">
  283.                     Likes:
  284.                 </p>
  285.                 <p class="aboutme" style="grid-column:4;">
  286.                     Dislikes:
  287.                 </p>
  288.  
  289.             </div>
  290.             <div class="textgrid4">
  291.                 <p class="aboutme" style="grid-column:1;grid-row: 1;">
  292.                     Single cell genomics data analysis
  293.                 </p>
  294.                 <p class="aboutme" style="grid-column: 2;grid-row: 1;">
  295.                     Cloud based computational pipelines
  296.                 </p>
  297.                 <p class="aboutme" style="grid-column: 1;grid-row:2;">
  298.                     Genomics sequencing data analysis,
  299.                 </p>
  300.                 <p class="aboutme" style="grid-column:2;grid-row:2;">
  301.                     Transcriptomic data
  302.                     analysis
  303.                 </p>
  304.             </div>
  305.             <br>
  306.             <div class="updates">
  307.                 <div class="updatesgrid">
  308.                     <div style="grid-column: 1;grid-row: 1;padding: 5px;padding-bottom:15px;">
  309.                         <b>Updates</b>
  310.                         <br>
  311.                         <div style="font-size: 12px">
  312.                             XX/XX/202X: <br>
  313.                             XX/XX/202X: <br>
  314.                             XX/XX/202X: <br>
  315.                             XX/XX/202X: <br>
  316.  
  317.                         </div>
  318.                     </div>
  319.                     <img src="https://i0.wp.com/seds.org/wp-content/uploads/2020/02/placeholder.png?fit=1200%2C800&ssl=1"
  320.                        style="grid-column: 2;grid-row: 1;" width="100%" height="100%">
  321.                 </div>
  322.             </div>
  323.  
  324.  
  325.         </div>
  326.         <!--right side bar grey square area-->
  327.         <div class="navtop">
  328.             <grid style="
  329.                display: grid;
  330.                grid-template-columns: 1fr 1fr 1fr;
  331.                grid-template-rows: 1fr 1fr;
  332.                gap: 5px;
  333.                width:100%;
  334.                height:100%;" class="desktop">
  335.                 <div
  336.                    style="background-color: rgb(216, 216, 216);width:100%;height:100%;box-sizing: border-box;grid-column: 1;">
  337.                 </div>
  338.                 <div
  339.                    style="background-color: rgb(216, 216, 216);width:100%;height:100%;box-sizing: border-box;grid-column: 2;">
  340.                 </div>
  341.                 <div
  342.                    style="background-color: rgb(216, 216, 216);width:100%;height:100%;box-sizing: border-box;grid-column: 3;padding-left:5px;padding-left:5px;">
  343.                     <p>est. 202X</p>
  344.                 </div>
  345.                 <div
  346.                    style="background-color: rgb(216, 216, 216);width:100%;height:100%;box-sizing: border-box;grid-column: 1;">
  347.                     <p><button id="back">back</button></p>
  348.                 </div>
  349.                 <div
  350.                    style="background-color: rgb(216, 216, 216);width:100%;height:100%;box-sizing: border-box;grid-column: 2;">
  351.                 </div>
  352.                 <div
  353.                    style="background-color: rgb(216, 216, 216);width:100%;height:100%;box-sizing: border-box;grid-column: 3;">
  354.                 </div>
  355.                 <script>
  356.                     document.getElementById("back").addEventListener("click", () => {
  357.                         history.back();
  358.                     });
  359.                 </script>
  360.             </grid>
  361.  
  362.         </div>
  363.         <!--right sidebar links-->
  364.         <div class="nav">
  365.             <style>
  366.                 .about {
  367.                     background-color: white;
  368.                     border: #1d62a1 1px solid;
  369.                     width: 100%;
  370.                     height: 15%;
  371.                     padding: 5px;
  372.                     box-sizing: border-box;
  373.                     margin-bottom: 5px;
  374.                 }
  375.  
  376.                 .blog {
  377.                     background-color: #277fd1;
  378.                     width: 100%;
  379.                     height: 15%;
  380.                     padding: 5px;
  381.                     box-sizing: border-box;
  382.                     margin-bottom: 5px;
  383.                 }
  384.  
  385.                 .blog:hover {
  386.                     background-color: white;
  387.                     border: #277fd1 1px solid;
  388.                 }
  389.  
  390.                 .platforms {
  391.                     background-color: #3594dd;
  392.                     width: 100%;
  393.                     height: 15%;
  394.                     margin-top: 5px;
  395.                     padding: 5px;
  396.                     box-sizing: border-box;
  397.                 }
  398.  
  399.                 .platforms:hover {
  400.                     background-color: white;
  401.                     border: #3594dd 1px solid;
  402.                 }
  403.  
  404.                 .contact {
  405.                     background-color: #5dafed;
  406.                     width: 100%;
  407.                     height: 15%;
  408.                     margin-top: 5px;
  409.                     padding: 5px;
  410.                     box-sizing: border-box;
  411.                 }
  412.  
  413.                 .contact:hover {
  414.                     background-color: white;
  415.                     border: #5dafed 1px solid;
  416.                 }
  417.  
  418.                 .about,
  419.                 .contact,
  420.                 .platforms,
  421.                 .blog {
  422.                     font-weight: 900;
  423.                 }
  424.             </style>
  425.             <div class="about" onclick="location.href=('')">
  426.                 <a href="about.html" style="color: black;">home</a>
  427.                 <img src="https://file.garden/aNy90GYmaWI-Okj1/asterisks_08.png" width="20%"
  428.                    style="position:relative;float:right;">
  429.             </div>
  430.             <a href="">
  431.                 <div class="blog" onclick="location.href=('')">
  432.                     blog
  433.                     <img src="https://file.garden/aNy90GYmaWI-Okj1/bh%20brush%2034%204.png" width="20%"
  434.                        style="position:relative;float:right;">
  435.             </a>
  436.         </div>
  437.         <div class="platforms" onclick="location.href=('platforms.html')">
  438.             <a href="">platforms</a>
  439.             <img src="https://file.garden/aNy90GYmaWI-Okj1/bh%20brush%2034%204.png" width="20%"
  440.                style="position:relative;float:right;">
  441.         </div>
  442.         <div class="contact" onclick="location.href=('contact.html')">
  443.             <a href="">contact</a>
  444.             <img src="https://file.garden/aNy90GYmaWI-Okj1/bh%20brush%2034%204.png" width="20%"
  445.                style="position:relative;float:right;">
  446.         </div>
  447.         <br>
  448.         Sign my <a href="">guestbook!</a>
  449.         <br>
  450.         <hr>
  451.     </div>
  452.     </div>
  453.  
  454.     <!--CSS for mobile ver.-->
  455.     <style>
  456.         @media screen and (max-width:600px) {
  457.             .grid {
  458.                 grid-template-columns: 100%;
  459.                 grid-template-rows: 150px 263px auto 150px;
  460.                 gap: 5px;
  461.                 width: 90%;
  462.                 min-height: 1100px;
  463.                 border-left: 1px rgb(216, 216, 216) solid;
  464.                 border-right: 1px rgb(216, 216, 216) solid;
  465.  
  466.             }
  467.  
  468.             .logo {
  469.                 grid-row: 1;
  470.                 grid-column: 1;
  471.                 border: none;
  472.  
  473.  
  474.             }
  475.  
  476.             .navtop {
  477.                 grid-row: 4;
  478.                 grid-column: 1;
  479.             }
  480.  
  481.             .nav {
  482.                 grid-row: 2;
  483.                 grid-column: 1;
  484.                 height: 100%;
  485.  
  486.             }
  487.  
  488.             .about,
  489.             .blog,
  490.             .contact,
  491.             .platforms {
  492.                 height: 30%;
  493.                 width: 50%;
  494.                 margin: 0px;
  495.             }
  496.  
  497.             .about,
  498.             .blog {
  499.                 position: relative;
  500.                 float: left;
  501.  
  502.             }
  503.  
  504.             .contact,
  505.             .platforms {
  506.                 position: relative;
  507.                 float: right;
  508.             }
  509.  
  510.             .nav img {
  511.                 width: 15%;
  512.             }
  513.  
  514.             .main {
  515.                 grid-row: 3;
  516.                 grid-column: 1;
  517.                 border: none;
  518.                 height: 100%;
  519.                 overflow-y: visible;
  520.             }
  521.  
  522.         }
  523.  
  524.         @media screen and (max-width:490px) {
  525.             body {
  526.                 margin: 0;
  527.                 overflow-x: hidden;
  528.  
  529.             }
  530.  
  531.             ::-webkit-scrollbar {
  532.                 display: none;
  533.             }
  534.  
  535.             h1 {
  536.                 font-size: 30px;
  537.             }
  538.  
  539.             .grid {
  540.                 height: 100vh;
  541.                 width: 90vw;
  542.                 grid-template-rows: 82px 258px auto 150px;
  543.                 overflow: scroll;
  544.                 margin-bottom: 10vh;
  545.             }
  546.  
  547.             .logo {
  548.                 position: fixed;
  549.                 top: 0;
  550.                 height: 82px;
  551.                 width: 90vw;
  552.             }
  553.  
  554.             .nav {
  555.                 position: fixed;
  556.                 top: 82px;
  557.                 height: 258px;
  558.                 width: 90vw;
  559.                 background-color: rgba(255, 255, 255);
  560.                 box-sizing: border-box;
  561.             }
  562.  
  563.             .about,
  564.             .blog,
  565.             .contact,
  566.             .platforms {
  567.                 height: 30%;
  568.  
  569.             }
  570.  
  571.             .textgrid1,
  572.             .textgrid2 {
  573.                 display: none;
  574.             }
  575.  
  576.             .textgrid3,
  577.             .textgrid4 {
  578.                 display: grid;
  579.                 font-size: 100%;
  580.             }
  581.         }
  582.     </style>
  583. </body>
  584.  
  585. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!