Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- -- HTML v --
- <!DOCTYPE html>
- <html>
- <head>
- <title>my web</title>
- <meta charset="utf-8">
- <link rel="stylesheet" type="text/css" href="css/style.css">
- </head>
- <body>
- <div class="containter">
- <div class="box-1">
- <h1>Welcome to HiyaChan.</h1>
- <p>Hey! This is an imageboard for anime/video game fans to lounge and chat. Before you post anything, we suggest you read the <a href="file:///C:/Users/Poison_Xeno/Desktop/css2/csscheatsheet/css/rules.html">rules</a>. </p>
- <img src="images/245599593017212.png" src="images" alt="Megumin" height="50" width="50">
- </div>
- <div class="box-2">
- <h2>Boards:</h2>
- <p>
- <li><p><a href="">/a/</a></p></li>
- <li><p><a href="">/j/</a></p></li>
- <li><p><a href="">/v/</a></p></li>
- <li><p><a href="">/scare/</a></p></li>
- <li><p><a href="">/t/</a></p></li>
- <li><p><a href="">/m/</a></p></li>
- <li><p><a href="">/ot/</a></p></li>
- </p>
- </div>
- </div>
- <div class="box-3">
- <h2>Options</h2>
- <p><a href="">Rules</a></p>
- <p><a href="">FAQ</a></p>
- <p><a href="">Xeno</a></p>
- <p><a href="">Contacts</a></p>
- <form action='register_parse.php' method='POST'>
- Username: <input type='text' name='username'placeholder='Username'/><br/>
- Password : <input type="password" name="password" placeholder="Password"/><br/>
- <input type="submit" name="login" value="Register"/>
- </form>
- </div>
- <div class="box-4">
- <h2>Recent posts</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
- proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </div>
- <ul>
- <li>
- <span>Dark</span>
- <span>Light</span>
- </li>
- </ul>
- <div class="end-1">
- <hr>
- <p>Copyright © 2018 made by S.F.</p>
- </div>
- <script
- src="https://code.jquery.com/jquery-3.3.1.js"></script>
- <script type="text/javascript">
- $(document).ready(function({
- $('ul').click(function(){
- $('ul').toggleclass('active')
- $('section').toggleclass('dark')
- })
- })
- </script>
- </body>
- </html>
- -- css --
- body{
- background-color:navajowhite;
- color:#555555;
- font-family: Arial, Helvetica, sans-serif;
- font-size:17px;
- line-height:1.6em;
- margin:0;
- }
- a{
- text-decoration: none;
- color:saddlebrown;
- }
- a:hover{
- color:firebrick;
- text-decoration: underline;
- }
- .container{
- width:80%;
- margin:auto;
- }
- .box-1{
- background-color:darksalmon;
- color:#fff;
- border-right: 2px chocolate solid;
- border-left: 2px chocolate solid;
- border-bottom: 2px chocolate solid;
- border-top: 2px chocolate solid;
- padding-left:20px;
- padding-bottom:20px;
- padding-right:20px;
- padding-top:20px;
- padding:20px;
- margin-top:20px;
- margin-left:20px;
- margin-right: 20px;
- }
- .box-2{
- background-color:darksalmon;
- color:#fff;
- border-right: 2px chocolate solid;
- border-left: 2px chocolate solid;
- border-bottom: 2px chocolate solid;
- border-top: 2px chocolate solid;
- padding-left:20px;
- padding-bottom:20px;
- padding-right:20px;
- padding-top:20px;
- margin-top:20px;
- margin-left:20px;
- margin-right:1050px;
- }
- .box-3{
- background-color:darksalmon;
- color:#fff;
- border-right: 2px chocolate solid;
- border-left: 2px chocolate solid;
- border-bottom: 2px chocolate solid;
- border-top: 2px chocolate solid;
- padding-left:20px;
- padding-bottom:20px;
- padding-right:20px;
- padding-top:20px;
- margin-top:10px;
- margin-left:10px;
- margin-right:1040px;
- }
- .box-4{
- background-color:bisque;
- color:#saddlebrown;
- border-right: 5px chocolate solid;
- border-left: 5px chocolate solid;
- border-bottom: 5px chocolate solid;
- border-top: 5px chocolate solid;
- padding-left:20px;
- padding-bottom:20px;
- padding-right:20px;
- padding-top:20px;
- margin-top:-1000px;
- margin-left:280px;
- margin-right:100px;
- margin-bottom: 10px;
- }
- .end-1{
- margin-bottom: 1px;
- margin-top: 850px;
- }
- #grad {
- background: linear-gradient(navajowhite, white);
- }
- section
- {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100vh;
- box-sizing: border-box;
- padding: 100px;
- }
- section.dark
- {
- background: #262626;
- color: #fff
- }
- ul
- {
- position: absolute;
- top: 20px;
- right: 20px;
- margin: 0;
- padding 0;
- width: 100px;
- height: 30px;
- z-index: 1;
- border: 1px solid #000;
- cursor: pointer;
- overflow: hidden;
- }
- ul li
- {
- list-style: none;
- width: 100%;
- height: 60px;
- text-align: center;
- text-transform: uppercase;
- transition: 0.5s;
- }
- ul.active li
- {
- transform: translateY(-30px);
- }
- ul li span
- {
- display: block;
- height: 30px;
- line-height: 30px;
- }
- ul li span:nth-child(1)
- {
- background: #262626;
- color: #fff;
- }
- made my xeno
- ππππ
- #8366
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement