Cherry Blossom Layout Template

A website template inspired by artworks made by gadoodlez_ on instagram!
avatar
user_6915918
html
3 days ago
5.4 kB
4
No Index
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
     <link href="https://478.neocities.org/catalog/fonts.css" rel="stylesheet">
    
    
    <style>
    
                .body-container {
  display: grid;
  grid-template-columns: 10% 80% 10% ;
}

                .center-image-divider {
  display: grid;
  grid-template-columns: 20% 60% 20% ;
}

                .buttons-align {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  
  
  a { color: #A3A58C; 
  text-align:center;
  text-decoration:none;
  line-height:20px;
  font-size:12px;
  font-family:mali;}
  
  a :hover { color: #E6C8CA; }
  
  
  
}




    
    
    </style>
    
  </head>
  <body class="body-container" style="background-image:url(https://64.media.tumblr.com/ba7019169b9e74d54bcf3f3e30f459a1/tumblr_inline_n25c2lewJW1qhwjx8.png); margin:auto;">
  <div> </div>
  
  
  
  <div>
  
  <div class="center-image-divider" style="width:100%; height:700px; background-color:white; border: solid 3px #E6C8CA; margin-top:10px;">
  
  <div style="border-right: solid 3px #E6C8CA;"> <img src="https://file.garden/aV89VHSmtyzzclPu/1b16f2064966cabcbf58e62ecb157dbf.jpg" style="width:100%; height:700px;"> </div>
  
  
  
  
  <div > 
  
  <div style="width:100%; height:50px; border-bottom:solid 3px #E6C8CA; padding-left:5px; background-color:#F5EEE8;" class="buttons-align">
  
  

  
  <div style="background-image:url(https://file.garden/aV89VHSmtyzzclPu/d2477b378d01558f8b115ba5e61b73f94-removebg-preview.png);   background-size: 100% 100%; width:90%; height:90%;"> 
  <a href="link here"> <p> link 1 </p> </a>
  </div>
  
  <div style="background-image:url(https://file.garden/aV89VHSmtyzzclPu/d2477b378d01558f8b115ba5e61b73f94-removebg-preview.png);   background-size: 100% 100%; width:90%; height:90%;"> 
    <a href="link here"> <p> link 2 </p> </a>
  </div>
  
  <div style="background-image:url(https://file.garden/aV89VHSmtyzzclPu/d2477b378d01558f8b115ba5e61b73f94-removebg-preview.png);   background-size: 100% 100%; width:90%; height:90%;"> 
    <a href="link here"> <p> link 3 </p> </a>
  </div>
  
  <div style="background-image:url(https://file.garden/aV89VHSmtyzzclPu/d2477b378d01558f8b115ba5e61b73f94-removebg-preview.png);   background-size: 100% 100%; width:90%; height:90%;"> 
    <a href="link here"> <p> link 4 </p> </a>
  </div>
  
  <div style="background-image:url(https://file.garden/aV89VHSmtyzzclPu/d2477b378d01558f8b115ba5e61b73f94-removebg-preview.png);   background-size: 100% 100%; width:90%; height:90%;"> 
    <a href="link here"> <p> link 5 </p> </a>
  </div>
  
  
  </div>
  
  
  
    <div style="width:110%; height:50px; background-image:url(https://file.garden/aV89VHSmtyzzclPu/laceydiv.png); background-size:100% 100%; "> </div>
    
    
  <div style="   display: grid;
  place-items: center; 
  height: 80%;">
  
  <div style="width:90%; height:500px; background-color:#F5EEE8; border: solid 3px #E6C8CA;"> 
  <br>
  <div style="width:90%; height:455px; margin:auto; overflow-y:scroll; scrollbar-width:thin; scrollbar-color:#E6C8CA #F5EEE8;">
  
  <div style="width:90%; height:auto; margin:auto; background-color:white; opacity:50%; padding:10px; color:#283E3F;  font-size:15px; font-family:mali; margin-bottom:15px;"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  </p> </div>
  
    <div style="width:90%; height:auto; margin:auto; background-color:white; opacity:50%; padding:10px; color:#283E3F;  font-size:15px; font-family:mali; margin-bottom:15px;"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  </p> </div>
  
      <div style="width:90%; height:auto; margin:auto; background-color:white; opacity:50%; padding:10px; color:#283E3F;  font-size:15px; font-family:mali; margin-bottom:15px;"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  </p> </div>
  
      <div style="width:90%; height:auto; margin:auto; background-color:white; opacity:50%; padding:10px; color:#283E3F;  font-size:15px; font-family:mali; margin-bottom:15px;"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  </p> </div>
  
  
  </div>
  
  </div>
  
  
  
  </div>
  
  </div>
  
  
  
  
  
  
  <div style="border-left: solid 3px #E6C8CA;"> <img src="https://file.garden/aV89VHSmtyzzclPu/download%20(6).jpg" style="width:100%; height:700px;"> </div>
  
  </div>
  
  </div>
  
  
  
  <div> </div>
  </body>
</html>
Editor is loading...
Leave a Comment