The Greats — Great Artists Give

<!DOCTYPE html> <html> <head> <title>The Greats — Great Artists Give</title> <meta name="description" content="The Greats is a free platform for awesome socially engaged visual content, open to anyone to use or adapt non-commercially."> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link href="https://thegreats.co/css/index.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="https://thegreats.co/css/custom.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> <link rel="stylesheet" href="https://thegreats.co/css/slick.css"> <link rel="stylesheet" href="https://thegreats.co/css/swiper.min.css"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <link href="https://fonts.googleapis.com/css?family=Istok+Web&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">  <style type="text/css"> body { background: #fff; } .top-nav { background: #fff; } .card-columns { max-height: 5%; } .swiper-container { width: 100%; padding-top: 50px; padding-bottom: 50px; } .swiper-slide { background-position: center; background-size: cover; width: 300px; height: 300px; } .row.no-gutters { margin-right: 0; margin-left: 0; & > [class^="col-"], & > [class*=" col-"] { padding-right: 0; padding-left: 0; } } * { font-family: 'Roboto'; } .required { color: #ff0031; } </style> <link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" /> <style> .select2-container .select2-selection--single { padding: 5px; height: calc(1.5em + .75rem + 2px); } .form-group { margin-bottom: 0; } .content-danger { margin-top: 2rem; padding: 2rem 0; background: #dc3545; color: white; } .input-group>.input-group-prepend>.input-group-text { width: 50px; display: flex; justify-content: center; } </style>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-162769339-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-162769339-1'); </script> </head> <body> <script type="text/javascript"> $("document").ready(function () { $(".custom-nav-toggle").click(function () { $("nav").toggleClass("custom-expanded") $('body').toggleClass('b-overflow-h') }); }) </script> <style> @font-face { font-family: PeaceSans; src: url("/fonts/peace_sans/Peace Sans Webfont.ttf"); } .loviebanner { background: #FFB8F9; padding: 1em; } .loviebanner div span, .loviebanner div a { font-size: 1.5em; font-family: PeaceSans; font-weight: bold; } .loviebanner div a:hover { text-decoration: none; } .loviebanner a img { height: 1.75em; margin-right: 0.5em; } .navbar-spacing { height: 140px; } @media only screen and (max-width: 600px) { .navbar-spacing { height: 230px; } .loviebanner a { display: block; line-height: 1.25em; } .loviebanner a img { display: block; margin: 0 auto 0.5em; } .loviebanner a span { display: block; line-hei1ght: 1.25em; } } </style> <div> <nav> <div class="row loviebanner"> <div class="col-12" style="line-height: 1.5em; margin-top: 0.5em; text-align: center;"> <a href="https://bit.ly/thegreats-lovie2024banner" target="_blank"> <img src="/lovielogo.png"> <span style="vertical-align: middle; color: #000;">THE GREATS IS</span> <span style="vertical-align: middle; color: #f00;">LOVIE AWARDS WINNER!</span> </a> </div> </div> <div class="top-nav "> <a class="navbar-brand pointer" href="https://thegreats.co/home"><img class="pointer" style="width: 120px; height: 100%" src="https://thegreats.co/images/thegreats-logo.svg"></a> <div class="nav-inner"> <ul class="mr-4 d-sm-flex"> <li class="nav-item"> <a class="pointer" href="https://thegreats.co/artworks"><img src="/images/magnifying-glass.svg" width="24" /></a> </li> <li class="nav-item d-none d-sm-flex active open-hidden"> <a class="nav-link pointer"href="https://thegreats.co/artworks_upload">Submit Artwork</a> </li> <li class="nav-item d-none d-sm-flex"> <a class="nav-link btn btn-outline-primary" href="https://thegreats.co/login" > Log In </a> </li> </ul> <div class="custom-nav-toggle"> <div class="nav-open"> <a href="javascript:;"> <img class="pointer" src="https://thegreats.co/images/menu-open.svg"> </a> </div> <div class="nav-close mt-5"> <img class="pointer mb-2" src="https://thegreats.co/images/menu-close.svg"> Close </div> </div> </div> </div> <div class="hidden-content text-center my-5"> <ul class="display-4 mt-3 main-menu"> <li class="nav-item"> <a class="nav-link text-center h2" href="https://thegreats.co/home">Home</a> </li> <li class="nav-item"> <a class="nav-link text-center h2" href="https://thegreats.co/artworks">Browse Artworks</a> </li>  <li class="nav-item"> <a class="nav-link text-center h2" href="https://thegreats.co/about">About Us</a> </li> <li class="nav-item"> <a class="nav-link text-center h2" href="https://thegreats.co/contacts">Contacts</a> </li> <li class="nav-item d-block d-sm-none"> <a class="nav-link btn btn-outline-primary d-inline-block log-in-btn" href="https://thegreats.co/login" > Log In </a> </li> <a href="https://thegreats.co/artworks_upload" class="btn btn-primary sub-art-btn">Submit Artwork</a> </ul> <ul class="align-self-end mr-4" style="height: 0;"> <li class="mb-3"><a class="h4" href="https://www.facebook.com/fineacts.co" target="_blank"><i class="fab fa-facebook-f"></i></a></li> <li class="mb-3"><a class="h4" href="https://twitter.com/fine_acts" target="_blank"><i class="fab fa-twitter"></i></a></li> <li class="mb-3"><a class="h4" href="https://www.instagram.com/fineacts/" target="_blank"><i class="fab fa-instagram"></i></a></li> </ul> </div> </nav> <div class="navbar-spacing"></div> </div> <div id="upload-artwork"> <h1 class="text-center my-5">Share Your<br>Artwork</h1> <div class="container"> <div class="row justify-content-center text-center"> <div class="col-3 step-holder first"> <a :class="['btn btn-outline-primary1', {'active-cls-border': step == 1}]" href="javascript:;">1</a> <p :class="['text-center', {'text-primary': step == 1}]"><strong>Artwork Information</strong></p> </div> <div class="col-3 step-holder second"> <a :class="['btn btn-outline-primary1', {'active-cls-border': step == 2}]" disable href="javascript:;">2</a> <p :class="['text-center', {'text-primary': step == 2}]"><strong>Artist Information</strong></p> </div> </div> <div class="container justify-content-center mx-auto"> <form method="POST" action="https://thegreats.co/artworks" class="form-group" enctype="multipart/form-data" ref="artwork_form" @submit.prevent="submitForm"> <input type="hidden" name="_token" value="L8YnfdbH6848IQiH9iHWIZ0mpceg5Hzv5DGOD32J"> <div v-show="step == 1"> <div class="form-container"> <p>Your art has power. Unleash it. Do you have illustrations or designs that touch upon a social issue? Consider gifting them to activists and nonprofits today, and amplifying their voices.</p> <p>Please upload your artwork below. Artworks are not automatically published, but reviewed by our curatorial team. If your work is selected to be published, you will be notified up to a week after uploading.</p> <p><b>If you want to submit several works (wow, you are a true great!), please repeat the process for each new work.</b></p> </div> <input type="hidden" name="email_exists" :value="artist_exists ? 1 : 0"> <div class="content-grey"> <div class="form-container"> <label for="asign_email">Your E-mail</label> <input class="form-control mb-2" type="email" name="email" v-model="email"> <span v-if="artist_exists && !is_artist" class="text-danger">A user with this email exists, but it seems they are not an artist.</span> <span class="text-muted">If you have already submitted artworks to the platform, this is the only information you need to provide for yourself. The artworks will be automatically added to your artist profile.</span> </div> </div> <div v-show="!(artist_exists && !is_artist)" class="form-container"> <h4 class="mt-5">Artwork Information</h4> <div class="form-group"> <label for="asign_email">Title &ast;</label> <input class="form-control" type="text" name="name" v-model="name" required> </div> <div class="form-group"> <label for="tags">Tags &ast;</label> <select name="tags[]" id="tags" multiple="multiple" class="form-control select2"> <option value="32">poster</option> <option value="33">postcard</option> <option value="34">social media</option> <option value="35">stickers</option> <option value="36">gif</option> <option value="37">work file</option> <option value="38">women's rights</option> </select> </div> <div class="form-group"> <label>Description &ast;</label> <textarea class="form-control" name="description" required></textarea> </div> <h4>Artwork Preview</h4> <p class="text-black-50">Please only submit one artwork at a time.</p> <div class="row"> <div class="col-md-6"> <label>Please upload a JPEG or PNG here: <span class="required">*</span></label> <p id="square-image-input-text"></p> <p id="square-image-input-danger-text"></p> <input type="file" name="image" style="display: none;" id="square-image-input"> <div onclick="document.getElementById('square-image-input').click()" id="square-image-input-box" style="background: url(https://thegreats.co/images/upload.svg)no-repeat center; cursor: pointer; border-style: dashed; border-color: #c9c8c8; border-radius: 5px; background-color: rgba(201, 200, 200, 0.2); width: 170px;height: 170px;"></div> </div> </div> <h4>Upload Work Files</h4> <p>Please share the work files for your artwork with us through a file sharing service (WeTransfer, Dropbox, Google Drive, etc.) by pasting the link below. Please only submit high-resolution files (preferably vector) – acceptable formats are EPS, PDF, PSD, AI, TIFF.</p> <div class="form-group"> <label for="artwork_url">Link to Files &ast;</label> <input class="form-control" id='artwork_url' type="text" name="artwork_url" required> </div> <div> <p></p> <label style="font-style: italic">&ast; Agreement</label> <p> By submitting your work through this form, you agree in full with our <a href="https://thegreats.co/terms" target="_blank">Terms and Conditions</a>. You confirm that the artworks you submit are your own original work and you have not used artificial intelligence (AI) programs or any AI-generated elements in their creation. You understand that submitting your works does not mean acceptance, and that only select works will be featured on The Greats platform, social media channels, and other Fine Acts channels. You agree that – if selected – your works to be published under a Creative Commons-Attribution-NonCommercial-ShareAlike 4.0 International license (CC-BY-NC-SA), crediting you as the author. You understand and agree that you will not be remunerated (paid) if your work gets selected and featured. You understand and agree that The Greats or Fine Acts can not be held responsible or liable for any third party use of your works. </p> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="terms" v-model="terms"> <label class="form-check-label mt-0" for="terms">I agree with the <a href="https://thegreats.co/terms" target="_blank">Terms and Conditions</a>.</label> </div> <div class="row"> <div class="d-block mx-auto mb-4 mt-5"> <button class="btn btn-primary" type="submit" :disabled="!can_submit" @click.prevent="submitForm">Submit</button> </div> </div> </div> </div> <div v-show="step == 2"> <div class="content-grey"> <div class="form-container"> <p><i class="fa fa-info-circle"></i> We have checked that you don't have an Artist profile.</p> <label>Please create your Artist profile below to submit artworks.</label> </div> </div> <div class="form-container"> <h4 class="mt-5">Artist profile</h4> <div class="form-group"> <p id="profile-image-text"></p> <input type="file" name="profile_image" id="profile-image" style="display: none;"> <div class="text-center avatar-upload" style="background: url(https://thegreats.co/images/avatar-upload.svg) no-repeat center; cursor: pointer; background-color: rgba(201, 200, 200, 0.2)"> <a href="#"><img src="https://thegreats.co/images/avatar-upload-icon.svg" alt="Profile image"></a> </div> </div> <div class="form-group"> <label for="first_last_name">First and Last Name <span class="required">*</span></label> <input class="form-control" type="text" name="artist_name" placeholder="Name" required value=""> </div> <div class="form-group"> <label for="asign_email">Your Email <span class="required">*</span></label> <input class="form-control" type="email" name="artist_email" placeholder="Email" required value=""> </div> <div class="row"> <div class="col-md-6"> <label for="password">Password <span class="required">*</span></label> <input class="form-control" type="password" name="password" required> </div> <div class="col-md-6"> <label for="password">Repeat Password <span class="required">*</span></label> <input class="form-control" type="password" name="password_confirmation" required> </div> </div> <div class="form-group"> <label>Country <span class="required">*</span></label> <input class="form-control" type="text" name="country" placeholder="Country" required value=""> </div> <div class="form-group"> <label>Biography <span class="required">*</span></label> <textarea class="form-control" name="biography" placeholder="Tell us about yourself" required></textarea> </div> <h4>Social links</h4> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fa fa-link"></i></span> </div> <input type="url" class="form-control" name="website" value="" placeholder="Example: https://fb.com/mypersonalpage" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fab fa-facebook-f"></i></span> </div> <input type="url" class="form-control" name="facebook" value="" placeholder="Example: https://fb.com/mypersonalpage" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fab fa-instagram"></i></span> </div> <input type="url" class="form-control" name="instagram" value="" placeholder="Example: https://instagram.com/mypersonalpage" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fab fa-behance"></i></i></span> </div> <input type="url" class="form-control" name="behance" value="" placeholder="Example: https://behance.com/mypersonalpage" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fab fa-dribbble"></i></span> </div> <input type="url" class="form-control" name="dribbble" value="" placeholder="Example: https://dribbble.com/mypersonalpage" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fab fa-linkedin-in"></i></span> </div> <input type="url" class="form-control" name="linked_in" value="" placeholder="Example: https://linkedin.com/mypersonalpage" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="custom-control custom-checkbox mb-3 text-center"> <input type="checkbox" class="custom-control-input" name="terms" id="customControlValidation1" required> <label class="custom-control-label" for="customControlValidation1">Accept <a href="https://thegreats.co/terms" target="_blank">Terms and conditions</a></label> <div class="invalid-feedback">Please accept Terms and conditins to continue</div> </div> <div class="row"> <div class="d-block mx-auto mb-4 mt-5"> <input class="btn btn-primary" type="submit" value="Create profile"> </div> </div> </div> </div> </form> </div> </div> </div> <div class="container-fluid pt-4" id="footer" style="background:white;"> <footer class="container" style="background:white"> <div class="col-md-2 mb-5 p-0"> <a href="https://thegreats.co/home"><img src="https://thegreats.co/images/thegreats-logo-gray.svg" alt="Secondary logo" class="img-fluid footer-logo"></a> </div> <div class="mb-4"> <ul class="list-inline my-5 mx-auto" > <li class="list-inline-item"><a class="text-dark" href="https://thegreats.co/login">Log In</a></li> <li class="list-inline-item"><a class="text-dark" href="https://thegreats.co/artworks_upload">Submit Artwork</a></li> <li class="list-inline-item"><a class="text-dark" href="https://thegreats.co/about">About Us</a></li> <li class="list-inline-item"><a class="text-dark" href="https://thegreats.co/use-of-artworks">Use of Artworks</a></li> <li class="list-inline-item"><a class="text-dark" href="https://thegreats.co/contacts">Contacts</a></li> <li class="list-inline-item"><a class="text-dark" href="https://thegreats.co/terms">Terms and Conditions</a></li> <li class="list-inline-item"><a class="text-dark" href="https://thegreats.co/privacy-policy">Privacy Policy</a></li> </ul> <div class="mb-5"> <a class="mx-1 px-2 h4" href="https://www.facebook.com/fineacts.co" target="_blank"><i class="fab fa-facebook-f"></i></a> <a class="mx-1 px-2 h4" href="https://twitter.com/fine_acts" target="_blank"><i class="fab fa-twitter"></i></a> <a class="mx-1 px-2 h4" href="https://www.instagram.com/fineacts/" target="_blank"><i class="fab fa-instagram"></i></a> </div> <div class="d-flex justify-content-center credits "> <div class="devcraft-credits d-flex align-items-center"> <p class="text-black-50 m-0"> Development by </p> <a href="https://dev-craft.com" target="_blank" class="text-dark pl-1"> Dev Craft </a> </div> <span>|</span> <div class="siteground-credits d-flex align-items-center mr-1"> <p class="text-black-50 m-0">Website hosted by </p> <a href="https://stgrnd.co/thegreats" target="_blank" class="siteground-logo text-dark pl-1"> SiteGround </a> </div> </div> </div> <div class="copyright text-muted font-weight-normal"><p> THE GREATS 2024</p> <span>|</span> <p> Made by <a class="text-dark" target="_blank" href="https://fineacts.co/">FINE ACTS</a></p></div> </footer> </div> <script src="https://thegreats.co/js/main.js"></script>  <script src="https://thegreats.co/js/swiper.min.js"></script>  <script> var swiper = new Swiper('.swiper-container', { effect: 'coverflow', grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflowEffect: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows : true, }, pagination: { el: '.swiper-pagination', }, }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <script src="https://thegreats.co/js/vue.js"></script> <script type="text/javascript"> let app = new Vue({ el: '#upload-artwork', data: { step: 1, // If you change it, check the artist_exists watcher steps: 2, name: '', email: '', terms: false, timeout: null, artist_exists: false, is_artist: false }, computed: { can_submit: function() { if (this.step == 1) { return this.name && this.terms } else if (this.step == 2) { return true } } }, watch: { email: function(newEmail, oldEmail) { clearTimeout(this.timeout); // Make a new timeout set to go off in 500ms this.timeout = setTimeout(() => { this.checkEmail() }, 500) }, artist_exists: function(newArtistExists, oldArtistExists) { if(newArtistExists) { this.steps = 1 } else { this.steps = 2 } } }, created: function() { this.checkEmail() }, methods: { submitForm: function() { if (this.step < this.steps) { this.step++; $('html, body').animate({ scrollTop: 0 }, 'fast'); } else { this.$refs.artwork_form.submit(); } }, checkEmail: function() { axios.get('https://thegreats.co/artists/check-email', { params: { email: this.email } }) .then(function(response) { app.artist_exists = response.data.email_exists app.is_artist = response.data.is_artist }) .catch(function(err) { console.log(err) }) } } }) </script> <script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.select2').select2(); $('.avatar-upload').click(function(event) { event.preventDefault() $('#profile-image').trigger('click') }) $('input[type=file]').change(function() { // Check file size // if ($(this)[0].files.length) { // let file = $(this)[0].files[0] // // if(file.size > 150 000 000) { // $('#'+$(this).attr('id')+'-danger-text').text('File size cannot be more than 150MB') // } // } let text = $(this).val().split('\\').pop() if (text.length > 18) { text = text.substring(0, 18); text += '...' } $('#'+$(this).attr('id')+'-text').text(text) }) }); </script> <script language="javascript"> var popupWindow = null; function centeredPopup(url, winName, w, h, scroll){ LeftPosition = (screen.width) ? (screen.width - w) / 2 : 0; TopPosition = (screen.height) ? (screen.height - h) / 2 : 0; settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable' popupWindow = window.open(url, winName, settings) } </script> </body> </html>

CINXE.COM

The Greats — Great Artists Give