DevWars Objectives Template

Developer
Joost Jansen
Size
3,646 Kb
Views
12,144
  1. DevWars Objectives Template Previews
  2. DevWars Objectives Template HTML Codes
  3. DevWars Objectives Template CSS Codes
  4. DevWars Objectives Template JS Codes

How do I make an devwars objectives template?

What is a devwars objectives template? How do you make a devwars objectives template? This script and codes were developed by Joost Jansen on 19 November 2022, Saturday.

DevWars Objectives Template Previews
IQ Test

DevWars Objectives Template - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>DevWars Objectives Template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper"><img src="http://www.devwars.tv/assets/img/logo-full.png"/> <h1>DevWars Objectives Template</h1> <p>Fill in your objective ideas for a DevWars Game!</p> <form> <label>General Objective</label> <textarea class="general" placeholder="Fill in your objective here."></textarea> <label>Design Objective</label> <textarea class="design" placeholder="Fill in your objective here."></textarea> <label>Functionality Objective</label> <textarea class="functionality" placeholder="Fill in your objective here."></textarea> <label>Random Objective</label> <textarea class="random" placeholder="Fill in your objective here."></textarea> <label>Bonus Objective</label> <textarea class="bonus" placeholder="Fill in your objective here."></textarea> </form> <p class="closing-text">Your submission will be sent straight to the devwars team! Please leave your email in the input field below so we can contact you about your submission if needed.</p> <input class="button" type="submit"/> <p class="thanks">Thank you for your submission! <3</p>
</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>

DevWars Objectives Template - Script Codes CSS Codes

.wrapper { height: 1000px; width: 100vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #5d5d5d;
}
.wrapper p.closing-text { margin: 20px; width: 60%;
}
.wrapper form { width: 40vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.wrapper form > * { margin: 2px;
}
.wrapper form label { border-bottom: 2px solid #E91E63; margin-bottom: 2px;
}
.wrapper form textarea { margin: 10px 0; border: 0 solid transparent; border-bottom: 3px solid #03A9F4;
}
.wrapper .button { padding: 10px 20px; background-color: #E91E63; border: 0 solid transparent; border-bottom: 3px solid #444; -webkit-transition: background-color 300ms ease-in-out; transition: background-color 300ms ease-in-out;
}
.wrapper .button:hover { background-color: #03A9F4;
}
@media screen and (max-width: 480px) { :root { font-size: 12px; }
}

DevWars Objectives Template - Script Codes JS Codes

// mail adres needs to be corrected, using my own email for testing
$(function() { $('.thanks').css({ "display": "none" }); $('.button').click(function(subject, body) { var subject = "My DevWars Objective Submission"; console.log(subject); var body = 'My Submission\n' + '\nGeneral: ' + $('.general').val() + '\nDesign: ' + $('.design').val() + '\nFunctionality: ' + $('.functionality').val() + '\nRandom: ' + $('.random').val() + '\nBonus: ' + $('.bonus').val(); console.log(body); window.open('mailto:[email protected]' + '?subject=' + subject + '&body=' + body); $('.thanks').css({ "display": "initial" }); });
});
DevWars Objectives Template - Script Codes
DevWars Objectives Template - Script Codes
Home Page Home
Developer Joost Jansen
Username DevItWithDavid
Uploaded November 19, 2022
Rating 3
Size 3,646 Kb
Views 12,144
Do you need developer help for DevWars Objectives Template?

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!

Joost Jansen (DevItWithDavid) Script Codes
Name
React Close Dialog with Animation
React CSSTransitionGroup
CSGO image overlay using clip path
Portfolio Joost Jansen 2016
JQuery Image Slider
Firebase Logo Animation
Flexbox Layout - One page website
League of Legends Login UI
Material ripple effect with pure CSS and JS
Personal website redesign v1.0
Create amazing art & images 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!