Foxtrot Admin

Developer
Matt Wisniewski
Size
2,211 Kb
Views
16,192
  1. Foxtrot Admin Previews
  2. Foxtrot Admin HTML Codes
  3. Foxtrot Admin CSS Codes
  4. Foxtrot Admin JS Codes

How do I make an foxtrot admin?

This is for a project I've been working on. What is a foxtrot admin? How do you make a foxtrot admin? This script and codes were developed by Matt Wisniewski on 03 December 2022, Saturday.

Foxtrot Admin Previews
IQ Test

Foxtrot Admin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Foxtrot Admin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="tray_widgets"> <div class="widgets"> <div class="widgets_holder"> <img src="http://placehold.it/250x100.png" /> <img src="http://placehold.it/250x100.png" /> <img src="http://placehold.it/250x100.png" /> <img src="http://placehold.it/250x100.png" /> <img src="http://placehold.it/250x100.png" /> <img src="http://placehold.it/250x100.png" /> <img src="http://placehold.it/250x100.png" /> <img src="http://placehold.it/250x100.png" /> </div> </div>
</div>
<div class="edit_widgets"> <div class="edit"> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Foxtrot Admin - Script Codes CSS Codes

.tray_widgets{ background:#ccc; position:fixed; top:0; bottom:0; left:0; right:70%; z-index:5000;
}
.tray_widgets:before{ content:"x"; font-family:sans-serif; width:35px; height:35px; background:#222; color:red; font-size:20pt; text-align:center; position:absolute; right:-35px; top:0px; z-index:5001; cursor:pointer; border-radius:0 2px 2px 0;
}
.tray_widgets:after{ content:""; width:30px; height:30px; position:absolute; left:0px; top:0px; z-index:5002; background-image:url('http://png-4.findicons.com/files/icons/1580/devine_icons_part_2/128/trash_recyclebin_empty_closed.png'); background-size:contain;
}
.widgets{ height:90%; width:100%; background:#ddd; margin:15% 0 5% 0; position:relative;
}
.widgets:after{ content:"^"; font-weight:bolder; margin:0 auto; margin-left:25%; background:#222; color:#0095FF; text-align:center; font-size:20pt; padding:0 2em 0 2em; border-radius:3px; position:absolute; top:1%; cursor:pointer; z-index:5005;
}
.widgets:before{ content:"v"; font-family:sans-serif; margin:0 auto; margin-left:25%; background:#222; color:#0095FF; text-align:center; font-size:20pt; padding:0 2em 0 2em; border-radius:3px; position:absolute; bottom:1%; cursor:pointer; z-index:5005;
}
.widgets_holder{ width:100%; height:100%; z-index:5004; overflow-y:scroll;
}
.widgets_holder img{ width:90%; margin-left:4.5%; margin-top:5%; border-radius:4px; border:1px solid #eee;
}
.edit_widgets{ background:#ccc; position:fixed; top:0; bottom:0; right:0; left:70%; z-index:5000;
}
.edit_widgets:before{ content:"x"; font-family:sans-serif; width:35px; height:35px; background:#222; color:red; font-size:20pt; text-align:center; position:absolute; left:-35px; top:0px; z-index:5001; cursor:pointer; border-radius:2px 0 0 2px;
}
.edit{ height:90%; width:100%; background:#ddd; margin:15% 0 5% 0; position:relative;
}

Foxtrot Admin - Script Codes JS Codes

$(document).ready(function(){
});
Foxtrot Admin - Script Codes
Foxtrot Admin - Script Codes
Home Page Home
Developer Matt Wisniewski
Username tinderlight
Uploaded December 03, 2022
Rating 3
Size 2,211 Kb
Views 16,192
Do you need developer help for Foxtrot Admin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matt Wisniewski (tinderlight) Script Codes
Name
Loading Sphere
MattsCode.io Site
Custom HTML5 Player Testing
A Pen by Matt Wisniewski
Alternate Codepen Theme
Fancy text thing like twitter
JQuery Parallax Plugin
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!