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/swiper.min.css"> <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"> </head> <body> <style type="text/css"> body { background: #ffffff; } .top-nav { background: #ffffff; } .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; } .btn-outline-primary { color: #7147f5; background-color: transparent; background-image: none; border-color: #7147f5; border-radius: 39px; border: 1px solid rgba(113, 71, 245, 0.75); } .btn-outline-primary1 { color: #7147f5; background-color: transparent; background-image: none; border-color: #7147f5; border-radius: 50px; border: 1px solid rgba(113, 71, 245, 0.75); } .btn-outline-light { color: #7147f5; background-color: white; background-image: none; border-color: white; border-radius: 9px; border: 1px solid rgba(220, 220, 220, 0.75); } .btn-primary { color: white; background-color: #7147f5; border-radius: 35px; border: 2px solid rgba(113, 71, 245, 0.75); } .btn-light { color: #7147f5; background-color: white; border-radius: 35px; } .row.no-gutters { margin-right: 0; margin-left: 0; &>[class^="col-"], &>[class*=" col-"] { padding-right: 0; padding-left: 0; } } * { font-family: 'Roboto'; cursor: default; } h4 { font-size: 20px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: 1.2; letter-spacing: -0.44px; } </style> <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="register"> <h1 class="text-center mb-5">Sign Up as</h1> <div class="text-center"> <span class="artist"> <a :class="{'active': role == 'ngo'}" href="" @click.prevent="changeRole('ngo')">NGO / Activist</a> <a :class="{'active': role == 'artist'}" href="" @click.prevent="changeRole('artist')">Artist</a> </span> </div> <div class="container row justify-content-center mx-auto mt-5"> <form v-if="role == 'ngo'" method="POST" action="https://thegreats.co/register" class="form-group col-sm-6 "> <input type="hidden" name="_token" value="d28LId0qDN2dHuF8Rvxv4DXXcAiOVLTvgzCw9BKk"> <input type="hidden" name="role_id" value="3"> <div> <div class="form-group"> <label for="name" class="text-black-50">Name <span class="text-primary">*</span> </label> <input class="form-control" type="text" name="name" placeholder="Name Surname" value=""> </div> <div class="form-group"> <label for="email" class="text-black-50">Email <span class="text-primary">*</span> </label> <input class="form-control" id="email" type="email" name="email" placeholder="example@mail.com" value=""> </div> <div class="form-inline mt-3"> <div class="mr-auto"> <label for="password" class="justify-content-start text-black-50">Password <p class="text-primary">*</p></label> <input class="form-control" type="password" name="password" value="" style="background: url(https://thegreats.co/images/password.svg) no-repeat scroll 7px 7px;background-position: right;"> </div> <div class="ml-auto "> <label for="password1" class="justify-content-start text-black-50">Repeat Password <p class="text-primary">*</p></label> <input class="form-control" type="password" name="password_confirmation" style="background: url(https://thegreats.co/images/password.svg) no-repeat scroll 7px 7px;background-position: right;"> </div> </div> <div class="form-group"> <label for="name" class="text-black-50 mt-2">Organisation Name <span class="text-primary">*</span></label> <input class="form-control" type="text" name="organisation_name" value="" placeholder="Organisation name"> </div> <label class="text-black-50 mt-2">Organisation website <span class="text-primary">*</span></label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text text-primary" style="background: #f9f9f9;"><i class="fas fa-link"></i></span> </div> <input class="form-control" type="url" name="organisation_website" value="" placeholder="Website"> </div> </div> <div class="row "> <div class="d-block mx-auto mb-4 mt-5"> <input class="btn btn-primary" type="submit" name="submit" value="Register"> </div> </div> </form> <form v-else method="POST" action="https://thegreats.co/register" class="form-group col-sm-6 "> <input type="hidden" name="_token" value="d28LId0qDN2dHuF8Rvxv4DXXcAiOVLTvgzCw9BKk"> <input type="hidden" name="role_id" value="1"> <div> <h4 class="mb-4">Account</h4> <div class="form-group"> <label for="name" class="text-black-50">Name <span class="text-primary">*</span> </label> <input class="form-control" type="text" name="name" placeholder="Name" value=""> </div> <div class="form-group"> <label for="email" class="text-black-50">Email <span class="text-primary">*</span> </label> <input class="form-control" id="email" type="email" name="email" placeholder="example@mail.com" value=""> </div> <div class="form-inline mt-3"> <div class="mr-auto"> <label for="password" class="justify-content-start text-black-50">Password <p class="text-primary">*</p></label> <input class="form-control" type="password" name="password" value="" style="background: url(https://thegreats.co/images/password.svg) no-repeat scroll 7px 7px;background-position: right;"> </div> <div class="ml-auto "> <label for="password1" class="justify-content-start text-black-50">Repeat Password <p class="text-primary">*</p></label> <input class="form-control" type="password" name="password_confirmation" style="background: url(https://thegreats.co/images/password.svg) no-repeat scroll 7px 7px;background-position: right;"> </div> </div> </div> <div class="row "> <div class="d-block mx-auto mb-4 mt-5"> <input class="btn btn-primary" type="submit" name="submit" value="Register"> </div> </div> </form> </div> <div class="container-fluid bg-white"> <div class="container"> <div class="mt-5"> <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> </div> </div> </div> </div> <script src="https://thegreats.co/js/vue.js"></script> <script type="text/javascript"> let app = new Vue({ el: '#register', data: { role: 'ngo' }, computed: { }, watch: { }, created: function() { }, methods: { changeRole: function(role) { this.role = role } } }) </script> <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://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></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> </body> </html>

CINXE.COM

The Greats — Great Artists Give