192 lines
6.6 KiB
HTML
192 lines
6.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang=en>
|
||
|
|
|
||
|
|
<!-- This is a free layout for anyone to use!
|
||
|
|
All I ask is that you keep this credit in-tact, or that you put my website link
|
||
|
|
(https://nonkiru.art) somewhere on your site.
|
||
|
|
|
||
|
|
Otherwise, edit this as much as you'd like!
|
||
|
|
|
||
|
|
Last Updated: 8th December 2024 -->
|
||
|
|
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<!-- These are tags for how the embded will look. -->
|
||
|
|
<meta property="og:title" content="Website Title">
|
||
|
|
<meta name="twitter:title" content="Website Title (For Twitter)">
|
||
|
|
<!-- Update the image here with your embed! -->
|
||
|
|
<meta property="og:image" content="embed_image.png">
|
||
|
|
<!-- Image here, too! -->
|
||
|
|
<meta name="twitter:card" content="summary_large_image">
|
||
|
|
<meta name="description" content="Description of your website.">
|
||
|
|
<meta name="keywords" content="Keywords for your website.">
|
||
|
|
<meta name="author" content="Name of who made this website.">
|
||
|
|
<meta name="twitter:description" content="Description of your website (For Twitter).">
|
||
|
|
<!-- Change the colour code to match your website. -->
|
||
|
|
<meta content="#ffffff " data-react-helmet="true" name="theme-color">
|
||
|
|
|
||
|
|
<!-- Various other website settings. -->
|
||
|
|
<!-- Keep this in-tact if you want to use unicode in text without it breaking. You shouldn't need to change this. -->
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<!-- For setting the viewport for different screen sizes. You shouldn't need to change this. -->
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<!-- If you change the name of the stylesheet, make sure to reflect it here. -->
|
||
|
|
<link rel="stylesheet" href="cheesecake_style.css">
|
||
|
|
<link rel="icon" type="image/x-icon" href="img/favicon.gif">
|
||
|
|
<title>Cheesecake</title>
|
||
|
|
|
||
|
|
<!-- JQuery scripts. These are required for the draggable divs. -->
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script></script>
|
||
|
|
|
||
|
|
<!-- If you want to add more draggable options, you need to add it here.
|
||
|
|
To add another option, copy paste the following, and add it to the list:
|
||
|
|
|
||
|
|
$( function() {
|
||
|
|
$( "#CHANGETHIS" ).draggable();
|
||
|
|
});
|
||
|
|
|
||
|
|
The id must be unique!-->
|
||
|
|
<script>
|
||
|
|
|
||
|
|
$( function() {
|
||
|
|
$( "#drag1" ).draggable();
|
||
|
|
});
|
||
|
|
|
||
|
|
$( function() {
|
||
|
|
$( "#drag2" ).draggable();
|
||
|
|
});
|
||
|
|
|
||
|
|
$( function() {
|
||
|
|
$( "#drag3" ).draggable();
|
||
|
|
});
|
||
|
|
|
||
|
|
$( function() {
|
||
|
|
$( "#drag4" ).draggable();
|
||
|
|
});
|
||
|
|
|
||
|
|
// $( function() {
|
||
|
|
// $( "#Remove // before use, and make sure to change this id!" ).draggable();
|
||
|
|
// });
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="container" id="drag1">
|
||
|
|
<!-- Header -->
|
||
|
|
<div class="box_header">
|
||
|
|
<header>
|
||
|
|
<img style="float: left;" src="img/cheesecake.gif" alt="">
|
||
|
|
Cheesecake
|
||
|
|
<!-- These are the fake buttons at the end of the header. -->
|
||
|
|
<img style="float: right;" src="img/button_3.gif" alt="">
|
||
|
|
<img style="float: right;" src="img/button_2.gif" alt="">
|
||
|
|
<img style="float: right;" src="img/button_1.gif" alt="">
|
||
|
|
</header>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<div class="box">
|
||
|
|
<main>
|
||
|
|
sample
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="container" id="drag2">
|
||
|
|
<!-- Header -->
|
||
|
|
<div class="box_header">
|
||
|
|
<header>
|
||
|
|
<img style="float: left;" src="img/cheesecake.gif" alt="">
|
||
|
|
Links
|
||
|
|
<!-- These are the fake buttons at the end of the header. -->
|
||
|
|
<img style="float: right;" src="img/button_3.gif" alt="">
|
||
|
|
<img style="float: right;" src="img/button_2.gif" alt="">
|
||
|
|
<img style="float: right;" src="img/button_1.gif" alt="">
|
||
|
|
</header>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--Links -->
|
||
|
|
<div class="box">
|
||
|
|
<nav>
|
||
|
|
<!-- Add as many links as you want here.
|
||
|
|
Just copy-paste: <a href="">Link 1</a> -->
|
||
|
|
<a href="">Link 1</a>
|
||
|
|
☆
|
||
|
|
<a href="">Link 2</a>
|
||
|
|
☆
|
||
|
|
<a href="">Link 3</a>
|
||
|
|
☆
|
||
|
|
<a href="">Link 4</a>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- You can also make images draggable! -->
|
||
|
|
<!-- Please note that, if you place a draggable image within a div, things can get a bit wonky.
|
||
|
|
I'd suggest placing it outside of a div! -->
|
||
|
|
<img src="img/cheesecake_still.gif" id="drag3" alt="A cheesecake."
|
||
|
|
style="
|
||
|
|
position: absolute;
|
||
|
|
top: 215px;
|
||
|
|
left: 1200px;
|
||
|
|
cursor: move;">
|
||
|
|
|
||
|
|
<div class="container" id="drag4">
|
||
|
|
<!-- Header -->
|
||
|
|
<div class="box_header">
|
||
|
|
<header>
|
||
|
|
<img style="float: left;" src="img/cheesecake.gif" alt="">
|
||
|
|
Example Div
|
||
|
|
<!-- These are the fake buttons at the end of the header. -->
|
||
|
|
<img style="float: right;" src="img/button_3.gif" alt="">
|
||
|
|
<img style="float: right;" src="img/button_2.gif" alt="">
|
||
|
|
<img style="float: right;" src="img/button_1.gif" alt="">
|
||
|
|
</header>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--Links -->
|
||
|
|
<div class="box">
|
||
|
|
<section>
|
||
|
|
|
||
|
|
<!-- Header Example -->
|
||
|
|
<h1>Element Showcase</h1>
|
||
|
|
Text.
|
||
|
|
<h2>Header 2</h2>
|
||
|
|
Text.
|
||
|
|
<h3>Header 3</h3>
|
||
|
|
Text.
|
||
|
|
|
||
|
|
<br><br>I hope you have fun with this layout!
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<!-- Table Example -->
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<th>Cell 1</th>
|
||
|
|
<th>Cell 2</th>
|
||
|
|
</tr>
|
||
|
|
<td>Description 1</td>
|
||
|
|
<td>Description 2</td>
|
||
|
|
</tr>
|
||
|
|
</tr>
|
||
|
|
<td>Description 3</td>
|
||
|
|
<td>Description 4</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<!-- List Example -->
|
||
|
|
<ul>
|
||
|
|
<li>Cheesecake!</li>
|
||
|
|
<li>Shortcake!</li>
|
||
|
|
<li>All the cake!</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|