├── _config.yml ├── src ├── other │ ├── UI Tools │ │ ├── Love Animation │ │ │ ├── index1.html │ │ │ ├── script1.js │ │ │ ├── style1.css │ │ │ ├── Guide.txt │ │ │ ├── style.css │ │ │ ├── index.html │ │ │ └── script.js │ │ └── Magazine Layouts │ │ │ ├── script.js │ │ │ ├── style.css │ │ │ └── index.html │ └── Algorithms │ │ └── Cryptography │ │ ├── caesar_cipher_encryption_algorithm.py │ │ └── reverse_cipher_encryption_algorithm.py ├── frameworks │ ├── django │ │ ├── Custom Django User Model │ │ │ ├── requirement.txt │ │ │ ├── project_settings.py │ │ │ ├── app_admin.py │ │ │ ├── GUIDE.txt │ │ │ └── app_models.py │ │ ├── setting_up_debug_toolbar │ │ │ └── debug_demo │ │ │ │ ├── debug_demo │ │ │ │ ├── __init__.py │ │ │ │ ├── __pycache__ │ │ │ │ │ ├── urls.cpython-37.pyc │ │ │ │ │ ├── wsgi.cpython-37.pyc │ │ │ │ │ ├── __init__.cpython-37.pyc │ │ │ │ │ └── settings.cpython-37.pyc │ │ │ │ ├── urls.py │ │ │ │ ├── wsgi.py │ │ │ │ └── settings.py │ │ │ │ ├── requirements.txt │ │ │ │ ├── db.sqlite3 │ │ │ │ └── manage.py │ │ └── Simple Login Registration │ │ │ ├── templates │ │ │ ├── password_reset_subject.txt │ │ │ ├── password_reset_email.html │ │ │ ├── password_change_done.html │ │ │ ├── password_change.html │ │ │ ├── password_reset_complete.html │ │ │ ├── password_reset_done.html │ │ │ ├── password_reset.html │ │ │ ├── signup.html │ │ │ ├── signin.html │ │ │ └── password_reset_confirm.html │ │ │ ├── requirements.txt │ │ │ ├── app_forms.py │ │ │ ├── app_templatetags │ │ │ └── form_tags.py │ │ │ ├── app_views.py │ │ │ ├── project_urls.py │ │ │ ├── project_settings.py │ │ │ ├── GUIDE.md │ │ │ └── app_urls.py │ ├── vanilla_js │ │ └── drag_and_drop_ui │ │ │ ├── images │ │ │ └── img.jpg │ │ │ ├── GUIDE.txt │ │ │ ├── css │ │ │ └── style.css │ │ │ ├── index.html │ │ │ └── js │ │ │ └── script.js │ └── flask_session │ │ ├── templates │ │ └── index.html │ │ ├── Run Project.txt │ │ └── app.py └── languages │ ├── python │ ├── basic_face_changer │ │ ├── three_human.jpg │ │ └── main.py │ └── gui_python_translator │ │ ├── HandyTools_GUI_translator_0.png │ │ ├── HandyTools_GUI_translator_1.png │ │ ├── GUIDE.md │ │ └── main.py │ └── php │ └── simple web crawler │ ├── config.php │ ├── GUIDE.txt │ └── crawl.php ├── assets ├── logo.png ├── favicon.png ├── logo_transparent.png ├── pinterest_board_photo.png ├── twitter_profile_image.png ├── youtube_profile_image.png ├── facebook_cover_photo_1.png ├── facebook_cover_photo_2.png ├── facebook_profile_image.png ├── instagram_profile_image.png ├── linkedin_banner_image_1.png ├── linkedin_banner_image_2.png ├── linkedin_profile_image.png ├── pinterest_profile_image.png ├── twitter_header_photo_1.png └── twitter_header_photo_2.png ├── LICENSE ├── README.md └── CODE_OF_CONDUCT.md /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-architect -------------------------------------------------------------------------------- /src/other/UI Tools/Love Animation/index1.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/other/UI Tools/Love Animation/script1.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/other/UI Tools/Love Animation/style1.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/frameworks/django/Custom Django User Model/requirement.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/frameworks/django/setting_up_debug_toolbar/debug_demo/debug_demo/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/logo.png -------------------------------------------------------------------------------- /src/frameworks/django/Custom Django User Model/project_settings.py: -------------------------------------------------------------------------------- 1 | AUTH_USER_MODEL = 'core.User' -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/favicon.png -------------------------------------------------------------------------------- /src/frameworks/django/setting_up_debug_toolbar/debug_demo/requirements.txt: -------------------------------------------------------------------------------- 1 | django 2 | django-debug-toolbar -------------------------------------------------------------------------------- /src/other/UI Tools/Love Animation/Guide.txt: -------------------------------------------------------------------------------- 1 | This snippet is made by https://codepen.io/al-ro/pen/BaaBage. -------------------------------------------------------------------------------- /assets/logo_transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/logo_transparent.png -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/templates/password_reset_subject.txt: -------------------------------------------------------------------------------- 1 | [Firm] Please reset your password. -------------------------------------------------------------------------------- /assets/pinterest_board_photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/pinterest_board_photo.png -------------------------------------------------------------------------------- /assets/twitter_profile_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/twitter_profile_image.png -------------------------------------------------------------------------------- /assets/youtube_profile_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/youtube_profile_image.png -------------------------------------------------------------------------------- /assets/facebook_cover_photo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/facebook_cover_photo_1.png -------------------------------------------------------------------------------- /assets/facebook_cover_photo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/facebook_cover_photo_2.png -------------------------------------------------------------------------------- /assets/facebook_profile_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/facebook_profile_image.png -------------------------------------------------------------------------------- /assets/instagram_profile_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/instagram_profile_image.png -------------------------------------------------------------------------------- /assets/linkedin_banner_image_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/linkedin_banner_image_1.png -------------------------------------------------------------------------------- /assets/linkedin_banner_image_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/linkedin_banner_image_2.png -------------------------------------------------------------------------------- /assets/linkedin_profile_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/linkedin_profile_image.png -------------------------------------------------------------------------------- /assets/pinterest_profile_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/pinterest_profile_image.png -------------------------------------------------------------------------------- /assets/twitter_header_photo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/twitter_header_photo_1.png -------------------------------------------------------------------------------- /assets/twitter_header_photo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/assets/twitter_header_photo_2.png -------------------------------------------------------------------------------- /src/other/Algorithms/Cryptography/caesar_cipher_encryption_algorithm.py: -------------------------------------------------------------------------------- 1 | """ 2 | Caesar Cipher Encryption Algorithm 3 | """ 4 | 5 | -------------------------------------------------------------------------------- /src/other/UI Tools/Love Animation/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #000; 3 | margin: 0; 4 | overflow: hidden; 5 | background-repeat: no-repeat; 6 | } -------------------------------------------------------------------------------- /src/languages/python/basic_face_changer/three_human.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/src/languages/python/basic_face_changer/three_human.jpg -------------------------------------------------------------------------------- /src/frameworks/vanilla_js/drag_and_drop_ui/images/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/src/frameworks/vanilla_js/drag_and_drop_ui/images/img.jpg -------------------------------------------------------------------------------- /src/frameworks/django/setting_up_debug_toolbar/debug_demo/db.sqlite3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/src/frameworks/django/setting_up_debug_toolbar/debug_demo/db.sqlite3 -------------------------------------------------------------------------------- /src/languages/python/gui_python_translator/HandyTools_GUI_translator_0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/src/languages/python/gui_python_translator/HandyTools_GUI_translator_0.png -------------------------------------------------------------------------------- /src/languages/python/gui_python_translator/HandyTools_GUI_translator_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/src/languages/python/gui_python_translator/HandyTools_GUI_translator_1.png -------------------------------------------------------------------------------- /src/frameworks/django/setting_up_debug_toolbar/debug_demo/debug_demo/__pycache__/urls.cpython-37.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/src/frameworks/django/setting_up_debug_toolbar/debug_demo/debug_demo/__pycache__/urls.cpython-37.pyc -------------------------------------------------------------------------------- /src/frameworks/django/setting_up_debug_toolbar/debug_demo/debug_demo/__pycache__/wsgi.cpython-37.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/src/frameworks/django/setting_up_debug_toolbar/debug_demo/debug_demo/__pycache__/wsgi.cpython-37.pyc -------------------------------------------------------------------------------- /src/frameworks/django/setting_up_debug_toolbar/debug_demo/debug_demo/__pycache__/__init__.cpython-37.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/src/frameworks/django/setting_up_debug_toolbar/debug_demo/debug_demo/__pycache__/__init__.cpython-37.pyc -------------------------------------------------------------------------------- /src/frameworks/django/setting_up_debug_toolbar/debug_demo/debug_demo/__pycache__/settings.cpython-37.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thewolfcommander/HandyTools/HEAD/src/frameworks/django/setting_up_debug_toolbar/debug_demo/debug_demo/__pycache__/settings.cpython-37.pyc -------------------------------------------------------------------------------- /src/frameworks/django/Custom Django User Model/app_admin.py: -------------------------------------------------------------------------------- 1 | from django.contrib import admin 2 | from core.models import * 3 | 4 | 5 | @admin.register(User) 6 | class UserAdmin(admin.ModelAdmin): 7 | list_display = ['user_id', 'email', 'mobile_number', 'full_name', 'pincode'] -------------------------------------------------------------------------------- /src/languages/php/simple web crawler/config.php: -------------------------------------------------------------------------------- 1 | ;host=localhost", "root", ""); 7 | $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING); 8 | } 9 | catch(PDOException $e) { 10 | echo "Connection failed: " . $e->getMesage(); 11 | } 12 | 13 | ?> -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/requirements.txt: -------------------------------------------------------------------------------- 1 | dj-database-url==0.5.0 2 | django-crispy-forms==1.7.2 3 | django-heroku==0.3.1 4 | django-widget-tweaks==1.4.3 5 | django-fluent-contents==2.0.4 6 | django-fluent-utils==2.0.1 7 | gunicorn==19.9.0 8 | Pillow==6.2.0 9 | psycopg2==2.7.7 10 | djoser==1.4.0 11 | pytz==2018.9 12 | whitenoise==4.1.2 13 | -------------------------------------------------------------------------------- /src/other/Algorithms/Cryptography/reverse_cipher_encryption_algorithm.py: -------------------------------------------------------------------------------- 1 | """ 2 | Reverse Cipher 3 | """ 4 | 5 | def reverse_cipher(): 6 | message = input("Enter the text ... ") 7 | encrypted_message = "" 8 | for i in message[::-1]: 9 | encrypted_message += i 10 | 11 | print("The encrypted message is ... \n", encrypted_message) 12 | 13 | reverse_cipher() -------------------------------------------------------------------------------- /src/frameworks/flask_session/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Welcome 5 | 6 | 7 |
8 |
9 | 10 | 11 | 12 |
13 |
14 | 15 | -------------------------------------------------------------------------------- /src/other/UI Tools/Love Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Love animation 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/app_forms.py: -------------------------------------------------------------------------------- 1 | 2 | from django.contrib.auth.forms import UserCreationForm 3 | from django.contrib.auth.models import User 4 | 5 | 6 | class SignUpForm(UserCreationForm): 7 | email = forms.CharField(max_length=254, required=True, widget=forms.EmailInput()) 8 | 9 | class Meta: 10 | model = User 11 | fields = ('username', 'email', 'password1', 'password2') -------------------------------------------------------------------------------- /src/frameworks/vanilla_js/drag_and_drop_ui/GUIDE.txt: -------------------------------------------------------------------------------- 1 | This snippet is developed by Manoj Tyagi. 2 | Github link - https://github.com/thewolfcommander/ 3 | LinkedIn link - https://linkedin.com/in/iammanojtyagi/ 4 | 5 | Hello how are you, I am Manoj Tyagi. I am an Engineering Undergraduate from India. I have made this snippet which is just a small snippet that can add drag and drop feature to your cool project. So, keep coding and keep enjoying. -------------------------------------------------------------------------------- /src/frameworks/django/setting_up_debug_toolbar/debug_demo/debug_demo/urls.py: -------------------------------------------------------------------------------- 1 | from django.conf import settings 2 | from django.contrib import admin 3 | from django.urls import path, include 4 | 5 | urlpatterns = [ 6 | path('admin/', admin.site.urls), 7 | ] 8 | 9 | # for django debug toolbar 10 | if settings.DEBUG: 11 | import debug_toolbar 12 | urlpatterns += [ 13 | path('__debug__/', include(debug_toolbar.urls)), 14 | ] -------------------------------------------------------------------------------- /src/frameworks/django/setting_up_debug_toolbar/debug_demo/debug_demo/wsgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | WSGI config for debug_demo project. 3 | 4 | It exposes the WSGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/2.2/howto/deployment/wsgi/ 8 | """ 9 | 10 | import os 11 | 12 | from django.core.wsgi import get_wsgi_application 13 | 14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'debug_demo.settings') 15 | 16 | application = get_wsgi_application() 17 | -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/app_templatetags/form_tags.py: -------------------------------------------------------------------------------- 1 | from django import template 2 | 3 | register = template.Library() 4 | 5 | @register.filter 6 | def field_type(bound_field): 7 | return bound_field.field.widget.__class__.__name__ 8 | 9 | @register.filter 10 | def input_class(bound_field): 11 | css_class = '' 12 | if bound_field.form.is_bound: 13 | if bound_field.errors: 14 | css_class = 'is-invalid' 15 | elif field_type(bound_field) != 'PasswordInput': 16 | css_class = 'is-valid' 17 | return 'form-control {}'.format(css_class) -------------------------------------------------------------------------------- /src/languages/python/gui_python_translator/GUIDE.md: -------------------------------------------------------------------------------- 1 | # HandyTools - GUI Translator Python 2 | 3 | **Hello This is a simple GUI Translator developed in Python which can translate English to any language by Just changing a single line in the code.** 4 | 5 | ![Code](HandyTools_GUI_translator_0.png) 6 | ![Demo](HandyTools_GUI_translator_1.png) 7 | 8 | *To know more about the code... ![Click here](https://github.com/thewolfcommander/HandyTools/tree/master/src/languages/python/gui_python_translator/)* 9 | 10 | *To explore the entire repository... ![Click here](https://github.com/thewolfcommander/HandyTools/)* -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/app_views.py: -------------------------------------------------------------------------------- 1 | from django.shortcuts import render, redirect 2 | from django.contrib.auth import login as auth_login 3 | 4 | 5 | from .forms import * 6 | 7 | 8 | def signup(request): 9 | if request.method == 'POST': 10 | form = SignUpForm(request.POST) 11 | if form.is_valid(): 12 | user = form.save() 13 | auth_login(request, user) 14 | return redirect('home') 15 | else: 16 | form = SignUpForm() 17 | context = { 18 | 'form': form 19 | } 20 | return render(request, 'signup.html', context) -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/project_urls.py: -------------------------------------------------------------------------------- 1 | from django.contrib import admin 2 | from django.urls import path, include 3 | from django.conf import settings 4 | from django.conf.urls.static import static 5 | from app import views 6 | 7 | urlpatterns = [ 8 | path('admin/', admin.site.urls), 9 | path('', include('app.urls')), 10 | path('signup/', views.signup, name='signup'), 11 | ] 12 | 13 | if settings.DEBUG: 14 | urlpatterns += static(settings.STATIC_URL, document_root = settings.STATIC_ROOT) 15 | urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT) 16 | -------------------------------------------------------------------------------- /src/frameworks/flask_session/Run Project.txt: -------------------------------------------------------------------------------- 1 | TO RUN THIS PROJECT ON YOUR LOCAL MACHINE: 2 | 3 | Step 1. Open the project in any code editor you prefer. 4 | 5 | Step 2. Navigate to app.py file. 6 | 7 | Step 3. In the app.py file, open git bash. 8 | 9 | Step 4. Then write the following Commands in the order shown: 10 | 11 | Command 1. export FLASK_APP=app.py (Press Enter Key) 12 | 13 | (You can leave the Command 2 if you don't want the application to run in debug mode) 14 | 15 | Command 2. export FLASK_DEBUG=1 (Press Enter Key) 16 | 17 | Command 3. flask run (Press Enter Key) 18 | 19 | Step 5. Then Open "http://127.0.0.1:5000" in your browser. 20 | 21 | . 22 | 23 | -------------------------------------------------------------------------------- /src/frameworks/vanilla_js/drag_and_drop_ui/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: darksalmon; 3 | } 4 | 5 | .fill { 6 | background-image: url('../images/img.jpg'); 7 | position: relative; 8 | height: 150px; 9 | width: 150px; 10 | top: 5px; 11 | left: 5px; 12 | cursor: pointer; 13 | } 14 | 15 | .empty { 16 | display: inline-block; 17 | height: 160px; 18 | width: 160px; 19 | margin: 10px; 20 | border: 3px salmon solid; 21 | background-color: white; 22 | } 23 | 24 | .hold { 25 | border: solid #ccc 4px; 26 | } 27 | 28 | .hovered { 29 | background: #f4f4f4; 30 | border-style: dashed; 31 | } 32 | 33 | .invisible { 34 | display: none; 35 | } -------------------------------------------------------------------------------- /src/frameworks/django/setting_up_debug_toolbar/debug_demo/manage.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | """Django's command-line utility for administrative tasks.""" 3 | import os 4 | import sys 5 | 6 | 7 | def main(): 8 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'debug_demo.settings') 9 | try: 10 | from django.core.management import execute_from_command_line 11 | except ImportError as exc: 12 | raise ImportError( 13 | "Couldn't import Django. Are you sure it's installed and " 14 | "available on your PYTHONPATH environment variable? Did you " 15 | "forget to activate a virtual environment?" 16 | ) from exc 17 | execute_from_command_line(sys.argv) 18 | 19 | 20 | if __name__ == '__main__': 21 | main() 22 | -------------------------------------------------------------------------------- /src/other/UI Tools/Magazine Layouts/script.js: -------------------------------------------------------------------------------- 1 | $('.js-next').on('click', function() { 2 | var current = $('.page.active'); 3 | var findNext = $(current).next(".page"); 4 | $(current).removeClass('active'); 5 | setTimeout(function() { 6 | $(findNext).addClass("active"); 7 | }, 200); 8 | }); 9 | 10 | $('.js-prev').on('click', function() { 11 | var current = $('.page.active'); 12 | var findPrev = $(current).prev(".page"); 13 | $(current).removeClass('active'); 14 | setTimeout(function() { 15 | $(findPrev).addClass("active"); 16 | }, 200); 17 | }); 18 | 19 | $('.js-back-to-1').on('click', function() { 20 | var current = $('.page.active'); 21 | $(current).removeClass('active'); 22 | setTimeout(function() { 23 | $('.page-cover').addClass("active"); 24 | }, 400); 25 | }); 26 | -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/templates/password_reset_email.html: -------------------------------------------------------------------------------- 1 | Hi there, 2 | 3 | Someone asked for a password reset for the email address {{ email }}. 4 | Follow the link below: 5 | {{ protocol }}://{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %} 6 | 7 | In case you forgot your Freedok Healthcare username: {{ user.username }}. 8 | 9 | If clicking the link above doesn't work, please copy and paste the URL in a new browser window instead. 10 | 11 | If you've received this mail in error, it's likely that another user entered 12 | your email address by mistake while trying to reset a password. If you didn't 13 | initiate the request, you don't need to take any further action and can safely 14 | disregard this email. 15 | 16 | Thanks, 17 | 18 | The FreeDok Healthcare Team -------------------------------------------------------------------------------- /src/frameworks/vanilla_js/drag_and_drop_ui/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drag and Drop UI Made by Manoj Tyagi using Vanilla JS 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/templates/password_change_done.html: -------------------------------------------------------------------------------- 1 | {% extends 'base.html' %} 2 | 3 | {% block title %}Change password successful{% endblock %} 4 | 5 | {% block breadcrumb %} 6 |
    7 |
  1. Change password
    2. 8 |
  2. Success
    3. 9 |
10 | {% endblock %} 11 | 12 | {% block content %} 13 |
14 | 17 | Return to home page 18 |
19 | {% endblock %} -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/templates/password_change.html: -------------------------------------------------------------------------------- 1 | {% extends 'base.html' %} 2 | 3 | {% block title %}Change password{% endblock %} 4 | 5 | {% block breadcrumb %} 6 |
    7 |
  1. Change Password
    2. 8 |
9 | {% endblock %} 10 | 11 | {% block content %} 12 |
13 |
14 |
15 |
16 | {% csrf_token %} 17 | {% include 'includes/form.html' %} 18 | 19 |
20 |
21 |
22 |
23 | {% endblock %} -------------------------------------------------------------------------------- /src/languages/python/gui_python_translator/main.py: -------------------------------------------------------------------------------- 1 | """ 2 | Translate any word to any language 3 | """ 4 | 5 | 6 | import tkinter as tk 7 | from googletrans import Translator 8 | 9 | win = tk.Tk() 10 | win.title("Translator") 11 | win.geometry("400x100") 12 | 13 | # Function to translate 14 | 15 | def translation(): 16 | word = entry.get() 17 | translator = Translator(service_urls =['translate.google.com',]) 18 | translation1 = translator.translate(word, dest="hi") 19 | label1 = tk.Label(win, text=f"Translated in Hindi: {translation1.text}", bg="yellow") 20 | label1.grid(row=2, column=0) 21 | 22 | 23 | label = tk.Label(win, text="Enter Word: ") 24 | label.grid(row=0, column=0, sticky="W") 25 | 26 | entry = tk.Entry(win) 27 | entry.grid(row=1, column=0) 28 | 29 | button=tk.Button(win, text="Translate", command=translation) 30 | button.grid(row=1, column=2) 31 | 32 | win.mainloop() -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/templates/password_reset_complete.html: -------------------------------------------------------------------------------- 1 | {% extends 'base.html' %} 2 | 3 | {% block title %} 4 | Password Changed 5 | {% endblock title %} 6 | 7 | {% block content %} 8 |
9 |
10 |
11 |
12 |
13 |

Password Changed!

14 | 17 | 18 |
19 |
20 |
21 |
22 |
23 | 24 | {% endblock content %} -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/templates/password_reset_done.html: -------------------------------------------------------------------------------- 1 | {% extends 'base.html' %} 2 | 3 | {% block title %} 4 | Reset Your Password 5 | {% endblock title %} 6 | 7 | {% block content %} 8 |
9 |
10 |
11 |
12 |
13 |

Reset your password

14 |

Check your email for a link to reset your password. If it doesn't appear within a few minutes, check your spam folder.

15 |
Return to log in
16 |
17 |
18 |
19 |
20 |
21 | 22 | {% endblock content %} -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/templates/password_reset.html: -------------------------------------------------------------------------------- 1 | {% extends 'base.html' %} 2 | 3 | {% block title %} 4 | Reset Your Password 5 | {% endblock title %} 6 | 7 | {% block content %} 8 |
9 |
10 |
11 |
12 |
13 |

Reset your password

14 |

Enter your email address and we will send you a link to reset your password.

15 |
16 | {% csrf_token %} 17 | {% include 'includes/form.html' %} 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | {% endblock content %} -------------------------------------------------------------------------------- /src/languages/python/basic_face_changer/main.py: -------------------------------------------------------------------------------- 1 | import cv2 2 | import sys 3 | from PIL import Image 4 | 5 | imagePath = "three_human.jpg" 6 | cascPath = "haarcascade_frontalface_default.xml" 7 | 8 | faceCascade = cv2.CascadeClassifier(cascPath) 9 | 10 | image = cv2.imread(imagePath) 11 | gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY) 12 | 13 | faces = faceCascade.detectMultiScale( 14 | gray, 15 | scaleFactor=1.1, 16 | minNeighbors=5, 17 | minSize=(30, 30) 18 | ) 19 | 20 | print("Found {0} faces!".format(len(faces))) 21 | img_counter = 0 22 | for (x, y, w, h) in faces: 23 | cv2.rectangle(image, (x, y), (x+w, y+h), (0, 255, 0), 2) 24 | print((x,y,x+w,y+w)) 25 | original = Image.open(imagePath) 26 | width, height = original.size 27 | croped_img = original.crop((x,y,x+w,y+w)) 28 | croped_img.save(str(img_counter) + ".jpeg") 29 | img_counter += 1 30 | 31 | 32 | #paste faces 33 | new_img = Image.open(imagePath) 34 | im2 = Image.open("0.jpeg") 35 | new_img.paste(im2,(133, 71)) 36 | new_img.show() 37 | 38 | -------------------------------------------------------------------------------- /src/frameworks/flask_session/app.py: -------------------------------------------------------------------------------- 1 | from flask import Flask, render_template, request, redirect, url_for, jsonify, flash,session 2 | from markupsafe import escape 3 | 4 | app = Flask(__name__) 5 | 6 | app.secret_key = 'your-secret-key' 7 | 8 | @app.route('/') 9 | def index(): 10 | return render_template('index.html') 11 | 12 | @app.route('/login', methods = ['POST', 'GET']) 13 | def login(): 14 | if request.method == 'POST': 15 | user_name = request.form['name'] 16 | session['user_name'] = user_name 17 | return redirect(url_for('user')) 18 | 19 | else: 20 | if 'user_name' in session: 21 | return redirect(url_for('user')) 22 | return render_template('login.html') 23 | 24 | 25 | @app.route('/user') 26 | def user(): 27 | if 'user_name' in session: 28 | user_name = session['user_name'] 29 | return f"

{ user_name }

" 30 | else: 31 | return redirect(url_for('index')) 32 | 33 | @app.route('/logout') 34 | def logout(): 35 | session.pop('user_name', None) 36 | return redirect(url_for('index')) 37 | 38 | 39 | if __name__ == "__name__": 40 | app.run(debug=True) 41 | 42 | 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Manoj Tyagi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/project_settings.py: -------------------------------------------------------------------------------- 1 | 2 | # Add this below import os in the top of the settings file 3 | import django_heroku 4 | 5 | 6 | # Add below in Installed apps list 7 | INSTALLED_APPS = [ 8 | 'crispy_forms', 9 | 'widget_tweaks', 10 | ] 11 | 12 | # Add below in templates list 13 | 'DIRS': [ 14 | os.path.join(BASE_DIR, 'templates'), 15 | ], 16 | 17 | 18 | # Settings for static files, media and other stuff 19 | 20 | django_heroku.settings(locals()) 21 | 22 | 23 | # Static files (CSS, JavaScript, Images) 24 | # https://docs.djangoproject.com/en/2.1/howto/static-files/ 25 | 26 | STATIC_URL = '/static/' 27 | 28 | STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] 29 | STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage' 30 | # STATIC_ROOT = os.path.join(BASE_DIR, 'static') 31 | 32 | # STATIC_ROOT = 'static' 33 | 34 | MEDIA_ROOT = os.path.join(BASE_DIR, 'media') 35 | 36 | MEDIA_URL = '/media/' 37 | 38 | CRISPY_TEMPLATE_PACK = 'bootstrap4' 39 | 40 | LOGOUT_REDIRECT_URL = 'home' 41 | LOGIN_REDIRECT_URL = 'home' 42 | LOGIN_URL = 'login' 43 | 44 | EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' 45 | -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/templates/signup.html: -------------------------------------------------------------------------------- 1 | {% extends 'base.html' %} 2 | 3 | 4 | {% block title %} 5 | Join this beautiful community now. 6 | {% endblock title %} 7 | 8 | {% block styles_custom %} 9 | 10 | 13 | 14 | {% endblock styles_custom %} 15 | 16 | {% block content %} 17 |
18 |
19 |
20 |
21 |
22 |

Sign up

23 |
24 | {% csrf_token %} 25 | {% include 'includes/form.html' %} 26 |
27 |
28 |
29 |
30 | Already have an account? Log in 31 |
32 |
33 |
34 |
35 |
36 | {% endblock content %} 37 | -------------------------------------------------------------------------------- /src/frameworks/vanilla_js/drag_and_drop_ui/js/script.js: -------------------------------------------------------------------------------- 1 | const fill = document.querySelector('.fill'); 2 | const empties = document.querySelectorAll('.empty'); 3 | 4 | // fill listeners 5 | 6 | fill.addEventListener('dragstart', dragStart); 7 | fill.addEventListener('dragend', dragEnd); 8 | 9 | 10 | 11 | // Loop through empties and call drag events 12 | for (const empty of empties) { 13 | empty.addEventListener('dragover', dragOver); 14 | empty.addEventListener('dragenter', dragEnter); 15 | empty.addEventListener('dragleave', dragLeave); 16 | empty.addEventListener('drop', dragDrop); 17 | } 18 | 19 | // Drag functions 20 | 21 | function dragStart() { 22 | console.log('start'); 23 | this.className += ' hold'; 24 | setTimeout(() => (this.className = 'invisible'), 0); 25 | } 26 | 27 | function dragEnd() { 28 | console.log('end'); 29 | this.className = 'fill'; 30 | } 31 | 32 | 33 | function dragOver(e) { 34 | e.preventDefault(); 35 | } 36 | 37 | function dragEnter(e) { 38 | e.preventDefault(); 39 | this.className += " hovered"; 40 | } 41 | 42 | function dragLeave() { 43 | this.className = "empty"; 44 | } 45 | 46 | function dragDrop() { 47 | this.className = "empty"; 48 | this.append(fill); 49 | } -------------------------------------------------------------------------------- /src/frameworks/django/Custom Django User Model/GUIDE.txt: -------------------------------------------------------------------------------- 1 | Hello Everyone 2 | 3 | Initial Developer Information: 4 | 5 | I am Manoj Tyagi, an Engineering undergraduate student from India. This section belongs to the quick setup for Custom User model for a Django Project. I have assumed that you know Django Basics. If you don't know, then I suggest you to not consider this repo because this project is mainly designed for the developers who atleast know some basics and quickly implement them for rapid development of Projects. 6 | Here's the Quick Guide for the the Custom User Model. 7 | 8 | ## This section is designed for only quick reference to code for rapid development of projects and not for learning purpose. So I have not included comments in order to avoid any confusion in the code. If anyone wants to include comments, then the contributions are heartly welcomed. 9 | 10 | ## The Project files are named as project_ prefix and the app files are named as app_ prefix in order to avoid any confusion for the developers. 11 | 12 | ## The section is self explained through code so there is no need to define what every line does. If any confusion or Issue persist, then please open an issue or mail us at tyagimanojtyagi.22@gmail.com 13 | 14 | Thank you -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/GUIDE.md: -------------------------------------------------------------------------------- 1 | Hello Everyone 2 | 3 | Initial Developer Information: 4 | 5 | I am Manoj Tyagi, an Engineering undergraduate student from India. This section belongs to the quick setup for Login/Signup system for a Django Project. I have assumed that you know Django Basics. If you don't know, then I suggest you to not consider this repo because this project is mainly designed for the developers who atleast know some basics and quickly implement them for rapid development of Projects. 6 | Here's the Quick Guide for the the Login/Signup system. 7 | 8 | ## This section is designed for only quick reference to code for rapid development of projects and not for learning purpose. So I have not included comments in order to avoid any confusion in the code. If anyone wants to include comments, then the contributions are heartly welcomed. 9 | 10 | ## The Project files are named as project_ prefix and the app files are named as app_ prefix in order to avoid any confusion for the developers. 11 | 12 | ## The section is self explained through code so there is no need to define what every line does. If any confusion or Issue persist, then please open an issue or mail us at tyagimanojtyagi.22@gmail.com 13 | 14 | Thank you 15 | -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/templates/signin.html: -------------------------------------------------------------------------------- 1 | {% extends 'base.html' %} 2 | 3 | 4 | {% block title %} 5 | Sign In to your beautiful account. 6 | {% endblock title %} 7 | 8 | {% block content %} 9 |
10 |
11 |
12 |
13 |
14 |

Log in

15 |
16 | {% csrf_token %} 17 | 18 | {% include 'includes/form.html' %} 19 |
20 |
21 |
22 |
23 | New to Platform? Sign up 24 |
25 |
26 |
27 | 28 | Forgot your password? 29 | 30 |
31 |
32 |
33 |
34 | {% endblock content %} -------------------------------------------------------------------------------- /src/languages/php/simple web crawler/GUIDE.txt: -------------------------------------------------------------------------------- 1 | 2 | Hello Everyone 3 | 4 | Initial Developer Information: 5 | 6 | I am Manoj Tyagi, an Engineering undergraduate student from India. This section belongs to the Complex Web Crawler that crawls from website to website and submits the data to the database and is developed in PHP. I have assumed that you know Object Oriented PHP Basics. If you don't know, then I suggest you to not consider this repo because this project is mainly designed for the developers who atleast know some basics and quickly implement them for rapid development of Projects. 7 | Here's the Quick Guide for the system. 8 | 9 | ## This section is designed for only quick reference to code for rapid development of projects and not for learning purpose. So I have not included comments in order to avoid any confusion in the code. If anyone wants to include comments, then the contributions are heartly welcomed. 10 | 11 | ## There are two separate files, one is config.php and the other is crawl.php. config.php contains the necessary settings required to connect to the database and crawl.php contains several functions that are useful for crawling and storing the results in the database. 12 | 13 | ## The section is self explained through code so there is no need to define what every line does. If any confusion or Issue persist, then please open an issue or mail us at tyagimanojtyagi.22@gmail.com 14 | 15 | Thank you -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/templates/password_reset_confirm.html: -------------------------------------------------------------------------------- 1 | {% extends 'base.html' %} 2 | 3 | {% block title %} 4 | {% if validlink %} 5 | Change password for {{ form.user.username }} 6 | {% else %} 7 | Reset your password 8 | {% endif %} 9 | {% endblock title %} 10 | 11 | {% block content %} 12 |
13 |
14 |
15 |
16 |
17 | {% if validlink %} 18 |

Change password for @{{ form.user.username }}

19 |
20 | {% csrf_token %} 21 | {% include 'includes/form.html' %} 22 |
23 |
24 | {% else %} 25 |

Reset your password

26 | 29 | Request a new password reset link 30 | {% endif %} 31 |
32 |
33 |
34 |
35 |
36 | 37 | {% endblock content %} -------------------------------------------------------------------------------- /src/frameworks/django/Simple Login Registration/app_urls.py: -------------------------------------------------------------------------------- 1 | from django.urls import path, re_path 2 | from django.contrib.auth import views as auth_views 3 | 4 | from . import views 5 | 6 | 7 | urlpatterns = [ 8 | path('signup/', views.signup, name='signup'), 9 | path('login/', auth_views.LoginView.as_view(template_name='signin.html'), name='login'), 10 | path('logout/', auth_views.LogoutView.as_view(), name='logout'), 11 | 12 | # Password Reset URLS 13 | re_path(r'^reset/$', 14 | auth_views.PasswordResetView.as_view( 15 | template_name='password_reset.html', 16 | email_template_name='password_reset_email.html', 17 | subject_template_name='password_reset_subject.txt' 18 | ), 19 | name='password_reset' 20 | ), 21 | re_path(r'^reset/done/$', 22 | auth_views.PasswordResetDoneView.as_view( 23 | template_name='password_reset_done.html' 24 | ), 25 | name='password_reset_done' 26 | ), 27 | re_path(r'^reset/(?P[0-9A-Za-z_\-]+)/(?P[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$', 28 | auth_views.PasswordResetConfirmView.as_view( 29 | template_name='password_reset_confirm.html', 30 | ), 31 | name='password_reset_confirm' 32 | ), 33 | re_path(r'^reset/complete/$', 34 | auth_views.PasswordResetCompleteView.as_view( 35 | template_name='password_reset_complete.html', 36 | ), 37 | name='password_reset_complete' 38 | ), 39 | 40 | # Password Reset URLa for logged in users. 41 | re_path(r'^settings/password/$', auth_views.PasswordChangeView.as_view(template_name='password_change.html'), name='password_change'), 42 | re_path(r'^settings/password/done/$', auth_views.PasswordChangeDoneView.as_view(template_name='password_change_done.html'), name='password_change_done'), 43 | ] -------------------------------------------------------------------------------- /src/frameworks/django/Custom Django User Model/app_models.py: -------------------------------------------------------------------------------- 1 | import uuid 2 | 3 | from django.db import models 4 | from django.utils.text import Truncator 5 | from django.contrib.auth.models import PermissionsMixin, AbstractBaseUser, BaseUserManager 6 | from django.conf import settings 7 | 8 | 9 | 10 | UPLOAD_DIRECTORY_PROFILEPHOTO = 'images_profilephoto' 11 | 12 | class CustomUserManager(BaseUserManager): 13 | """ 14 | Custom user manager to handle all the operations for the Custom User model 15 | """ 16 | def create_user(self, user_id, mobile_number, email, password, **extra_fields): 17 | 18 | user = self.model(user_id=user_id, mobile_number=mobile_number, email=email, *extra_fields) 19 | user.set_password(password) 20 | user.save(using=self._db) 21 | return user 22 | 23 | def create_superuser(self, user_id, mobile_number, email, password, **extra_fields): 24 | user = self.create_user(user_id, mobile_number, email, password, **extra_fields) 25 | user.is_admin=True 26 | user.is_superuser = True 27 | user.save(using=self._db) 28 | return user 29 | 30 | def get_by_natural_key(self, username): 31 | return self.get(user_id=username) 32 | 33 | class User(AbstractBaseUser, PermissionsMixin): 34 | """ 35 | User that is capable of using the Information System 36 | """ 37 | GENDER = [ 38 | ('MALE', "MALE"), 39 | ('FEMALE', "FEMALE"), 40 | ('TRANSGENDER', "TRANSGENDER"), 41 | ('PREFER_NOT_TO_SAY', "PREFER_NOT_TO_SAY") 42 | ] 43 | 44 | user_id = models.CharField(max_length=24, null=True, blank=True, unique=True, help_text="User's unique user id, keep it irrelated with respect to your name or email.") 45 | full_name = models.CharField(max_length=255, null=True, blank=True, help_text="User's full name") 46 | gender = models.CharField(max_length=255, choices=GENDER, null=True, blank=True, help_text="User's Gender") 47 | email = models.EmailField(max_length=255, blank=True, null=True, default='', help_text="User's Email") 48 | mobile_number = models.CharField(max_length=10, blank=True, null=True, help_text="User's Mobile number") 49 | profile_photo = models.ImageField(max_length=255, blank=True, null=True, upload_to=UPLOAD_DIRECTORY_PROFILEPHOTO, help_text="User's Profile photo") 50 | pincode = models.CharField(max_length=6, help_text="User's Residential pincode") 51 | 52 | is_admin = models.BooleanField(default=False) 53 | 54 | objects = CustomUserManager() 55 | 56 | USERNAME_FIELD = 'user_id' 57 | REQUIRED_FIELDS = ['mobile_number', 'email',] 58 | UNIQUE_TOGETHER = ['user_id', 'email'] 59 | 60 | def __str__(self): 61 | return '%s - %s'%(self.id, self.full_name) 62 | 63 | @property 64 | def is_staff(self): 65 | "Is the user a member of staff?" 66 | # Simplest possible answer: All admins are staff 67 | return self.is_admin -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # **HandyTools** 2 | ### Great Handy code snippets for all languages that makes you more productive in your Coding 3 | 4 | ![alt text](assets/logo.png) 5 | 6 | 7 | ## About Project: 8 | This Project is developed in order to help the developers who know basics, in there project for rapid development without any time waste in the little things that bother developers the most. Repository created for help of developers. 9 | 10 | 11 | ## Navigation for Languages 12 | 13 | ### [Python](https://github.com/thewolfcommander/HandyTools/blob/master/src/languages/python/) 14 | 15 | - **[GUI Translator](https://github.com/thewolfcommander/HandyTools/blob/master/src/languages/python/gui_python_translator/GUIDE.md)** 16 | 17 | 18 | ### [PHP](https://github.com/neo-0224/HandyTools/tree/master/src/languages/php/) 19 | 20 | - **[Simple Web Crawler](https://github.com/neo-0224/HandyTools/tree/master/src/languages/php/simple%20web%20crawler)** 21 | 22 | 23 | ## Navigation for Frameworks 24 | 25 | ### [Django](https://github.com/neo-0224/HandyTools/tree/master/src/frameworks/django/) 26 | 27 | - **[Custom Django User Model](https://github.com/neo-0224/HandyTools/tree/master/src/frameworks/django/Custom%20Django%20User%20Model)** 28 | - **[Simple Login Registration](https://github.com/neo-0224/HandyTools/tree/master/src/frameworks/django/Simple%20Login%20Registration)** 29 | 30 | ## Note: 31 | ##### This Project is not recommended to use as learning purpose because, It is specially designed for developers who have little experience in the stack. 32 | 33 | ## How to contribute: 34 | If you have any code snippet that can save a lot of time for the project development and want to share it with world with the glory of Software development Ethcs, then all the contributions are heartly welcomed. 35 | 36 | All you need to do is clone this repo, choose your stack and make a folder of your snippet. Inside that folder keep your files separate and keep minimum code that is related to the snippet or the particular task only. Also include requirements file or dependency file in order to reduce the possible errors. Must include a GUIDE.txt and inside that file, you should keep your name and about you in atmost 50 words. Then you should mention every single detail related to the snippet that can confuse the devlopers. 37 | 38 | [click here](https://github.com/thewolfcommander/HandyTools/) to Contribute to Project Now 39 | 40 | Thank you. 41 | 42 | ## [click here](https://thewolfcommander.github.io/HandyTools/) to see live version of snippets. 43 | 44 | 45 | 46 | 47 | 48 | ## About Me: 49 | 50 | I am an Engineering Undergraduate student from India. Basically I have been fascinated by the power of Open source communities since I have started my Developer career two years ago. My major stack of Development includes Python, JavaScript, HTML5, CSS3 and Frameworks like ```Bootstrap4, Django, Django REST Framework```. I am currently improving my skills on Machine Learning using Tensorflow. Besides this, I am also a great fan of Blockchain Technology. 51 | 52 | Want to ping me? 53 | 54 | [Facebook](https://www.facebook.com/profile.php?id=100009926198901) 55 | [Instagram](https://www.instagram.com/themanojtyagi) 56 | [LinkedIn](https://www.linkedin.com/in/iammanojtyagi/) 57 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to make participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies within all project spaces, and it also applies when 49 | an individual is representing the project or its community in public spaces. 50 | Examples of representing a project or community include using an official 51 | project e-mail address, posting via an official social media account, or acting 52 | as an appointed representative at an online or offline event. Representation of 53 | a project may be further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at [tyagimanojtyagi.22@gmail.com]. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /src/frameworks/django/setting_up_debug_toolbar/debug_demo/debug_demo/settings.py: -------------------------------------------------------------------------------- 1 | import os 2 | 3 | # Build paths inside the project like this: os.path.join(BASE_DIR, ...) 4 | BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 5 | 6 | 7 | # Quick-start development settings - unsuitable for production 8 | # See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/ 9 | 10 | # SECURITY WARNING: keep the secret key used in production secret! 11 | SECRET_KEY = ')s5b=runi5oseqxq3fkb&lbcp^9*-3rh9whcu1o!q(vh(m6&wv' 12 | 13 | # SECURITY WARNING: don't run with debug turned on in production! 14 | DEBUG = True 15 | 16 | ALLOWED_HOSTS = [] 17 | 18 | 19 | # Application definition 20 | 21 | INSTALLED_APPS = [ 22 | 'django.contrib.admin', 23 | 'django.contrib.auth', 24 | 'django.contrib.contenttypes', 25 | 'django.contrib.sessions', 26 | 'django.contrib.messages', 27 | 'django.contrib.staticfiles', 28 | 29 | # for django debug toolbar 30 | 'debug_toolbar', 31 | ] 32 | 33 | MIDDLEWARE = [ 34 | 'django.middleware.security.SecurityMiddleware', 35 | 'django.contrib.sessions.middleware.SessionMiddleware', 36 | 'django.middleware.common.CommonMiddleware', 37 | 'django.middleware.csrf.CsrfViewMiddleware', 38 | 'django.contrib.auth.middleware.AuthenticationMiddleware', 39 | 'django.contrib.messages.middleware.MessageMiddleware', 40 | 'django.middleware.clickjacking.XFrameOptionsMiddleware', 41 | 42 | # For django debug toolbar 43 | 'debug_toolbar.middleware.DebugToolbarMiddleware', 44 | ] 45 | 46 | ROOT_URLCONF = 'debug_demo.urls' 47 | 48 | TEMPLATES = [ 49 | { 50 | 'BACKEND': 'django.template.backends.django.DjangoTemplates', 51 | 'DIRS': [], 52 | 'APP_DIRS': True, 53 | 'OPTIONS': { 54 | 'context_processors': [ 55 | 'django.template.context_processors.debug', 56 | 'django.template.context_processors.request', 57 | 'django.contrib.auth.context_processors.auth', 58 | 'django.contrib.messages.context_processors.messages', 59 | ], 60 | }, 61 | }, 62 | ] 63 | 64 | WSGI_APPLICATION = 'debug_demo.wsgi.application' 65 | 66 | 67 | # Database 68 | # https://docs.djangoproject.com/en/2.2/ref/settings/#databases 69 | 70 | DATABASES = { 71 | 'default': { 72 | 'ENGINE': 'django.db.backends.sqlite3', 73 | 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 74 | } 75 | } 76 | 77 | 78 | # Password validation 79 | # https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators 80 | 81 | AUTH_PASSWORD_VALIDATORS = [ 82 | { 83 | 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 84 | }, 85 | { 86 | 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 87 | }, 88 | { 89 | 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 90 | }, 91 | { 92 | 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 93 | }, 94 | ] 95 | 96 | 97 | # Internationalization 98 | # https://docs.djangoproject.com/en/2.2/topics/i18n/ 99 | 100 | LANGUAGE_CODE = 'en-us' 101 | 102 | TIME_ZONE = 'UTC' 103 | 104 | USE_I18N = True 105 | 106 | USE_L10N = True 107 | 108 | USE_TZ = True 109 | 110 | 111 | # Static files (CSS, JavaScript, Images) 112 | # https://docs.djangoproject.com/en/2.2/howto/static-files/ 113 | 114 | STATIC_URL = '/static/' 115 | 116 | 117 | # for django debug toolbar 118 | 119 | """ 120 | for more information about django-debug-toolbar, click the link given below 121 | 122 | https://django-debug-toolbar.readthedocs.io/en/latest/installation.html 123 | """ 124 | INTERNAL_IPS = [ 125 | # ... 126 | '127.0.0.1', 127 | # ... 128 | ] -------------------------------------------------------------------------------- /src/languages/php/simple web crawler/crawl.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | prepare("SELECT * FROM sites WHERE url = :url"); 15 | 16 | $query->bindParam(":url", $url); 17 | $query->execute(); 18 | return $query->rowCount() !=0; 19 | } 20 | 21 | function insertLink($url, $title, $description, $keywords) { 22 | global $con; 23 | 24 | $query = $con->prepare("INSERT INTO sites(url, title, description, keywords) 25 | VALUES(:url, :title, :description, :keywords)"); 26 | 27 | $query->bindParam(":url", $url); 28 | $query->bindParam(":title", $title); 29 | $query->bindParam(":description", $description); 30 | $query->bindParam(":keywords", $keywords); 31 | 32 | return $query->execute(); 33 | } 34 | 35 | 36 | function insertImage($url, $src, $alt, $title) { 37 | global $con; 38 | 39 | $query = $con->prepare("INSERT INTO images(siteUrl, imageUrl, alt, title) 40 | VALUES(:url, :src, :alt, :title)"); 41 | 42 | $query->bindParam(":url", $url); 43 | $query->bindParam(":src", $src); 44 | $query->bindParam(":alt", $alt); 45 | $query->bindParam(":title", $title); 46 | 47 | $query->execute(); 48 | } 49 | 50 | function createLink($src, $url) { 51 | 52 | $scheme = parse_url($url)["scheme"]; // http 53 | $host = parse_url($url)["host"]; // www.reecekenney.com 54 | 55 | if(substr($src, 0, 2) == "//") { 56 | $src = $scheme . ":" . $src; 57 | } 58 | else if(substr($src, 0, 1) == "/") { 59 | $src = $scheme . "://" . $host . $src; 60 | } 61 | else if(substr($src, 0, 2) == "./") { 62 | $src = $scheme . "://" . $host . dirname(parse_url($url)["path"]) . substr($src, 1); 63 | } 64 | else if(substr($src, 0, 3) == "../") { 65 | $src = $scheme . "://" . $host . "/" . $src; 66 | } 67 | else if(substr($src, 0, 5) != "https" && substr($src, 0, 4) != "http") { 68 | $src = $scheme . "://" . $host . "/" . $src; 69 | } 70 | 71 | return $src; 72 | } 73 | 74 | function getDetails($url) { 75 | global $alreadyFoundImages; 76 | 77 | $parser = new DomDocumentParser($url); 78 | 79 | $titleArray = $parser->getTitleTags(); 80 | 81 | if(sizeof($titleArray) == 0 || $titleArray->item(0) == NULL) { 82 | return; 83 | } 84 | 85 | $title = $titleArray->item(0)->nodeValue; 86 | $title = str_replace("\n", "", $title); 87 | 88 | if($title == "") { 89 | return; 90 | } 91 | 92 | $description = ""; 93 | $keywords = ""; 94 | 95 | $metasArray = $parser->getMetatags(); 96 | 97 | foreach($metasArray as $meta) { 98 | 99 | if($meta->getAttribute("name") == "description") { 100 | $description = $meta->getAttribute("content"); 101 | } 102 | 103 | if($meta->getAttribute("name") == "keywords") { 104 | $keywords = $meta->getAttribute("content"); 105 | } 106 | } 107 | 108 | $description = str_replace("\n", "", $description); 109 | $keywords = str_replace("\n", "", $keywords); 110 | 111 | 112 | if(linkExists($url)) { 113 | echo "$url already exists"; 114 | } 115 | else if(insertLink($url, $title, $description, $keywords)) { 116 | echo "SUCCESS: $url"; 117 | } 118 | else { 119 | echo "ERROR: Failed to insert $url"; 120 | } 121 | 122 | $imageArray = $parser->getImages(); 123 | 124 | foreach($imageArray as $image) { 125 | $src = $image->getAttribute("src"); 126 | $alt = $image->getAttribute("alt"); 127 | $title = $image->getAttribute("title"); 128 | 129 | if(!$title && !$alt) { 130 | continue; 131 | } 132 | 133 | $src = createLink($src, $url); 134 | 135 | if (!in_array($src, $alreadyFoundImages)) { 136 | $alreadyFoundImages[] = $src; 137 | 138 | insertImage($url, $src, $alt, $title); 139 | } 140 | 141 | 142 | } 143 | 144 | 145 | 146 | } 147 | 148 | function followLinks($url) { 149 | 150 | global $alreadyCrawled; 151 | global $crawling; 152 | global $alreadyFoundImages; 153 | 154 | $parser = new DomDocumentParser($url); 155 | 156 | $linkList = $parser->getLinks(); 157 | 158 | foreach($linkList as $link) { 159 | $href = $link->getAttribute("href"); 160 | 161 | if(strpos($href, "#") !== false) { 162 | continue; 163 | } 164 | else if(substr($href, 0, 11) == "javascript:") { 165 | continue; 166 | } 167 | 168 | 169 | $href = createLink($href, $url); 170 | 171 | 172 | if(!in_array($href, $alreadyCrawled)) { 173 | $alreadyCrawled[] = $href; 174 | $crawling[] = $href; 175 | 176 | getDetails($href); 177 | } 178 | 179 | 180 | } 181 | 182 | array_shift($crawling); 183 | 184 | foreach($crawling as $site) { 185 | followLinks($site); 186 | } 187 | 188 | } 189 | 190 | $startUrl = "https://newsletter.seoprofiler.com/newsletter449.htm"; 191 | followLinks($startUrl); 192 | ?> -------------------------------------------------------------------------------- /src/other/UI Tools/Love Animation/script.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById("canvas"); 2 | 3 | canvas.width = window.innerWidth; 4 | canvas.height = window.innerHeight; 5 | 6 | // Initialize the GL context 7 | var gl = canvas.getContext('webgl'); 8 | if(!gl){ 9 | console.error("Unable to initialize WebGL."); 10 | } 11 | 12 | //Time step 13 | var dt = 0.015; 14 | //Time 15 | var time = 0.0; 16 | 17 | //************** Shader sources ************** 18 | 19 | var vertexSource = ` 20 | attribute vec2 position; 21 | void main() { 22 | gl_Position = vec4(position, 0.0, 1.0); 23 | } 24 | `; 25 | 26 | var fragmentSource = ` 27 | precision highp float; 28 | 29 | uniform float width; 30 | uniform float height; 31 | vec2 resolution = vec2(width, height); 32 | 33 | uniform float time; 34 | 35 | #define POINT_COUNT 8 36 | 37 | vec2 points[POINT_COUNT]; 38 | const float speed = -0.5; 39 | const float len = 0.25; 40 | float intensity = 0.9; 41 | float radius = 0.015; 42 | 43 | //https://www.shadertoy.com/view/MlKcDD 44 | //Signed distance to a quadratic bezier 45 | float sdBezier(vec2 pos, vec2 A, vec2 B, vec2 C){ 46 | vec2 a = B - A; 47 | vec2 b = A - 2.0*B + C; 48 | vec2 c = a * 2.0; 49 | vec2 d = A - pos; 50 | 51 | float kk = 1.0 / dot(b,b); 52 | float kx = kk * dot(a,b); 53 | float ky = kk * (2.0*dot(a,a)+dot(d,b)) / 3.0; 54 | float kz = kk * dot(d,a); 55 | 56 | float res = 0.0; 57 | 58 | float p = ky - kx*kx; 59 | float p3 = p*p*p; 60 | float q = kx*(2.0*kx*kx - 3.0*ky) + kz; 61 | float h = q*q + 4.0*p3; 62 | 63 | if(h >= 0.0){ 64 | h = sqrt(h); 65 | vec2 x = (vec2(h, -h) - q) / 2.0; 66 | vec2 uv = sign(x)*pow(abs(x), vec2(1.0/3.0)); 67 | float t = uv.x + uv.y - kx; 68 | t = clamp( t, 0.0, 1.0 ); 69 | 70 | // 1 root 71 | vec2 qos = d + (c + b*t)*t; 72 | res = length(qos); 73 | }else{ 74 | float z = sqrt(-p); 75 | float v = acos( q/(p*z*2.0) ) / 3.0; 76 | float m = cos(v); 77 | float n = sin(v)*1.732050808; 78 | vec3 t = vec3(m + m, -n - m, n - m) * z - kx; 79 | t = clamp( t, 0.0, 1.0 ); 80 | 81 | // 3 roots 82 | vec2 qos = d + (c + b*t.x)*t.x; 83 | float dis = dot(qos,qos); 84 | 85 | res = dis; 86 | 87 | qos = d + (c + b*t.y)*t.y; 88 | dis = dot(qos,qos); 89 | res = min(res,dis); 90 | 91 | qos = d + (c + b*t.z)*t.z; 92 | dis = dot(qos,qos); 93 | res = min(res,dis); 94 | 95 | res = sqrt( res ); 96 | } 97 | 98 | return res; 99 | } 100 | 101 | 102 | //http://mathworld.wolfram.com/HeartCurve.html 103 | vec2 getHeartPosition(float t){ 104 | return vec2(16.0 * sin(t) * sin(t) * sin(t), 105 | -(13.0 * cos(t) - 5.0 * cos(2.0*t) 106 | - 2.0 * cos(3.0*t) - cos(4.0*t))); 107 | } 108 | 109 | //https://www.shadertoy.com/view/3s3GDn 110 | float getGlow(float dist, float radius, float intensity){ 111 | return pow(radius/dist, intensity); 112 | } 113 | 114 | float getSegment(float t, vec2 pos, float offset, float scale){ 115 | for(int i = 0; i < POINT_COUNT; i++){ 116 | points[i] = getHeartPosition(offset + float(i)*len + fract(speed * t) * 6.28); 117 | } 118 | 119 | vec2 c = (points[0] + points[1]) / 2.0; 120 | vec2 c_prev; 121 | float dist = 10000.0; 122 | 123 | for(int i = 0; i < POINT_COUNT-1; i++){ 124 | //https://tinyurl.com/y2htbwkm 125 | c_prev = c; 126 | c = (points[i] + points[i+1]) / 2.0; 127 | dist = min(dist, sdBezier(pos, scale * c_prev, scale * points[i], scale * c)); 128 | } 129 | return max(0.0, dist); 130 | } 131 | 132 | void main(){ 133 | vec2 uv = gl_FragCoord.xy/resolution.xy; 134 | float widthHeightRatio = resolution.x/resolution.y; 135 | vec2 centre = vec2(0.5, 0.5); 136 | vec2 pos = centre - uv; 137 | pos.y /= widthHeightRatio; 138 | //Shift upwards to centre heart 139 | pos.y += 0.02; 140 | float scale = 0.000015 * height; 141 | 142 | float t = time; 143 | 144 | //Get first segment 145 | float dist = getSegment(t, pos, 0.0, scale); 146 | float glow = getGlow(dist, radius, intensity); 147 | 148 | vec3 col = vec3(0.0); 149 | 150 | //White core 151 | col += 10.0*vec3(smoothstep(0.003, 0.001, dist)); 152 | //Pink glow 153 | col += glow * vec3(0.94,0.14,0.4); 154 | 155 | //Get second segment 156 | dist = getSegment(t, pos, 3.4, scale); 157 | glow = getGlow(dist, radius, intensity); 158 | 159 | //White core 160 | col += 10.0*vec3(smoothstep(0.003, 0.001, dist)); 161 | //Blue glow 162 | col += glow * vec3(0.2,0.6,1.0); 163 | 164 | //Tone mapping 165 | col = 1.0 - exp(-col); 166 | 167 | //Output to screen 168 | gl_FragColor = vec4(col,1.0); 169 | } 170 | `; 171 | 172 | //************** Utility functions ************** 173 | 174 | window.addEventListener('resize', onWindowResize, false); 175 | 176 | function onWindowResize(){ 177 | canvas.width = window.innerWidth; 178 | canvas.height = window.innerHeight; 179 | gl.viewport(0, 0, canvas.width, canvas.height); 180 | gl.uniform1f(widthHandle, window.innerWidth); 181 | gl.uniform1f(heightHandle, window.innerHeight); 182 | } 183 | 184 | 185 | //Compile shader and combine with source 186 | function compileShader(shaderSource, shaderType){ 187 | var shader = gl.createShader(shaderType); 188 | gl.shaderSource(shader, shaderSource); 189 | gl.compileShader(shader); 190 | if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){ 191 | throw "Shader compile failed with: " + gl.getShaderInfoLog(shader); 192 | } 193 | return shader; 194 | } 195 | 196 | //From https://codepen.io/jlfwong/pen/GqmroZ 197 | //Utility to complain loudly if we fail to find the attribute/uniform 198 | function getAttribLocation(program, name) { 199 | var attributeLocation = gl.getAttribLocation(program, name); 200 | if (attributeLocation === -1) { 201 | throw 'Cannot find attribute ' + name + '.'; 202 | } 203 | return attributeLocation; 204 | } 205 | 206 | function getUniformLocation(program, name) { 207 | var attributeLocation = gl.getUniformLocation(program, name); 208 | if (attributeLocation === -1) { 209 | throw 'Cannot find uniform ' + name + '.'; 210 | } 211 | return attributeLocation; 212 | } 213 | 214 | //************** Create shaders ************** 215 | 216 | //Create vertex and fragment shaders 217 | var vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER); 218 | var fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER); 219 | 220 | //Create shader programs 221 | var program = gl.createProgram(); 222 | gl.attachShader(program, vertexShader); 223 | gl.attachShader(program, fragmentShader); 224 | gl.linkProgram(program); 225 | 226 | gl.useProgram(program); 227 | 228 | //Set up rectangle covering entire canvas 229 | var vertexData = new Float32Array([ 230 | -1.0, 1.0, // top left 231 | -1.0, -1.0, // bottom left 232 | 1.0, 1.0, // top right 233 | 1.0, -1.0, // bottom right 234 | ]); 235 | 236 | //Create vertex buffer 237 | var vertexDataBuffer = gl.createBuffer(); 238 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer); 239 | gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW); 240 | 241 | // Layout of our data in the vertex buffer 242 | var positionHandle = getAttribLocation(program, 'position'); 243 | 244 | gl.enableVertexAttribArray(positionHandle); 245 | gl.vertexAttribPointer(positionHandle, 246 | 2, // position is a vec2 (2 values per component) 247 | gl.FLOAT, // each component is a float 248 | false, // don't normalize values 249 | 2 * 4, // two 4 byte float components per vertex (32 bit float is 4 bytes) 250 | 0 // how many bytes inside the buffer to start from 251 | ); 252 | 253 | //Set uniform handle 254 | var timeHandle = getUniformLocation(program, 'time'); 255 | var widthHandle = getUniformLocation(program, 'width'); 256 | var heightHandle = getUniformLocation(program, 'height'); 257 | 258 | gl.uniform1f(widthHandle, window.innerWidth); 259 | gl.uniform1f(heightHandle, window.innerHeight); 260 | 261 | function draw(){ 262 | //Update time 263 | time += dt; 264 | 265 | //Send uniforms to program 266 | gl.uniform1f(timeHandle, time); 267 | //Draw a triangle strip connecting vertices 0-4 268 | gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 269 | 270 | requestAnimationFrame(draw); 271 | } 272 | 273 | draw(); -------------------------------------------------------------------------------- /src/other/UI Tools/Magazine Layouts/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #f4f4f4; 3 | font-family: "Libre Baskerville", sans-serif; 4 | line-height: 1.6; 5 | color: #222; 6 | } 7 | 8 | * { 9 | box-sizing: border-box; 10 | } 11 | 12 | strong { 13 | font-weight: 700; 14 | } 15 | 16 | em { 17 | font-style: italic; 18 | } 19 | 20 | a { 21 | text-decoration: none; 22 | color: #222; 23 | } 24 | 25 | h5 { 26 | font-weight: 700; 27 | font-size: 16px; 28 | line-height: 1.4; 29 | } 30 | 31 | small { 32 | line-height: 1.7; 33 | text-transform: uppercase; 34 | display: block; 35 | font-family: Libre Baskerville; 36 | letter-spacing: 2px; 37 | } 38 | 39 | main, footer { 40 | width: 95%; 41 | margin: 4em auto; 42 | max-width: 900px; 43 | } 44 | 45 | footer { 46 | text-align: center; 47 | } 48 | footer a { 49 | border-bottom: .5px dashed; 50 | } 51 | footer a:hover { 52 | border-bottom: .5px solid; 53 | } 54 | 55 | img { 56 | width: 100%; 57 | } 58 | 59 | .page { 60 | min-height: 1150px; 61 | font-size: 12px; 62 | padding: 6em 3.5em 3.5em; 63 | position: relative; 64 | z-index: 0; 65 | margin: 2em auto; 66 | border: .5px solid #ededed; 67 | box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.05); 68 | background: #fff; 69 | } 70 | .page__wrapper { 71 | position: relative; 72 | min-height: 1150px; 73 | } 74 | .page .controls { 75 | position: absolute; 76 | width: calc(100% - 6em); 77 | padding: .5em 0; 78 | top: 1.6em; 79 | left: 3em; 80 | color: #222; 81 | display: flex; 82 | font-family: 'Playfair Display'; 83 | font-weight: 500; 84 | font-size: 14px; 85 | } 86 | .page .controls__name { 87 | flex: 1; 88 | text-align: left; 89 | } 90 | .page .controls__name strong { 91 | display: inline-block; 92 | margin-right: 15px; 93 | letter-spacing: 2px; 94 | font-size: 20px; 95 | margin-top: -3px; 96 | } 97 | .page .controls .js-next, .page .controls .js-prev, .page .controls .js-back-to-1 { 98 | cursor: pointer; 99 | display: none; 100 | margin-left: 15px; 101 | font-weight: 700; 102 | text-transform: none; 103 | } 104 | @media (min-width: 900px) { 105 | .page { 106 | max-height: 1150px; 107 | position: absolute; 108 | top: 0; 109 | left: 0; 110 | margin: 0; 111 | box-shadow: none; 112 | } 113 | .page__wrapper { 114 | background: #fff; 115 | } 116 | .page * { 117 | opacity: 0; 118 | transform: translateY(10px); 119 | transition: .3s ease; 120 | } 121 | .page *:nth-child(odd) { 122 | transform: translateY(-10px); 123 | } 124 | .page.active { 125 | z-index: 10; 126 | } 127 | .page.active * { 128 | opacity: 1; 129 | transform: translate(0, 0); 130 | } 131 | .page .controls .js-next, .page .controls .js-prev, .page .controls .js-back-to-1 { 132 | display: inline-block; 133 | } 134 | .page .controls .js-back-to-1 { 135 | margin-left: 0; 136 | } 137 | } 138 | @media (max-width: 500px) { 139 | .page { 140 | padding: 6em 2.5em 2em; 141 | } 142 | } 143 | 144 | .title { 145 | grid-column: 1 / -1; 146 | font-size: 40px; 147 | padding-bottom: 1em; 148 | font-family: 'Abril Fatface'; 149 | font-size: 4.5em; 150 | line-height: 1.2; 151 | margin-top: .5em; 152 | } 153 | .title small { 154 | font-size: 25%; 155 | text-transform: uppercase; 156 | display: block; 157 | font-family: Libre Baskerville; 158 | letter-spacing: 1px; 159 | margin: 2em 0 1em; 160 | color: #999; 161 | width: 75%; 162 | } 163 | 164 | @media (min-width: 900px) { 165 | .page-contributor { 166 | display: grid; 167 | grid-auto-flow: dense; 168 | grid-template-columns: repeat(5, 1fr); 169 | } 170 | } 171 | .page-contributor h5 { 172 | margin: 10px 0; 173 | } 174 | .page-contributor .contributor { 175 | display: flex; 176 | border-top: 1px solid #222; 177 | align-items: center; 178 | } 179 | .page-contributor .contributor__textwrap { 180 | flex: 1; 181 | } 182 | .page-contributor .contributor__image { 183 | width: 100%; 184 | flex: 0 0 50%; 185 | margin-right: 5%; 186 | max-width: 40%; 187 | max-height: 300px; 188 | object-fit: contain; 189 | } 190 | @media (min-width: 900px) { 191 | .page-contributor .contributor { 192 | padding: 10px; 193 | } 194 | .page-contributor .contributor:nth-of-type(2) { 195 | padding-left: 0; 196 | border-bottom: 3px solid #222; 197 | font-size: 120%; 198 | } 199 | .page-contributor .contributor:nth-of-type(2) .contributor__textwrap { 200 | padding: 20px 35px 20px 0; 201 | } 202 | .page-contributor .contributor:nth-of-type(n + 3) { 203 | display: block; 204 | border-left: 1px solid #222; 205 | } 206 | .page-contributor .contributor:nth-of-type(2) { 207 | grid-column: 1/5; 208 | } 209 | .page-contributor .contributor:nth-of-type(3) { 210 | grid-column: 5; 211 | grid-row: 2 / 4; 212 | padding-right: 0; 213 | } 214 | .page-contributor .contributor:nth-of-type(4) { 215 | padding-left: 0; 216 | border-left: none; 217 | } 218 | .page-contributor .contributor:nth-of-type(6), .page-contributor .contributor:nth-of-type(7) { 219 | grid-row: 3 / 5; 220 | } 221 | .page-contributor .contributor:nth-of-type(8) { 222 | padding-right: 0; 223 | } 224 | .page-contributor .contributor__image { 225 | max-width: 100%; 226 | } 227 | } 228 | .page-contributor .credits { 229 | grid-row: 3 / 4; 230 | grid-column: 1 / 3; 231 | padding: 2em 5em 2em 0; 232 | border-top: 1px solid #222; 233 | } 234 | 235 | .page-navigator .navigator { 236 | margin-bottom: 1.6em; 237 | position: relative; 238 | z-index: 2; 239 | } 240 | .page-navigator .navigator .year { 241 | color: #999; 242 | letter-spacing: 2px; 243 | } 244 | .page-navigator .navigator h5 { 245 | margin: .25em 0; 246 | } 247 | @media (min-width: 900px) { 248 | .page-navigator { 249 | display: grid; 250 | grid-auto-flow: dense; 251 | grid-template-columns: repeat(4, 25%); 252 | grid-gap: 5px; 253 | overflow: hidden; 254 | padding-top: 8em; 255 | } 256 | .page-navigator.page-navigator-2 { 257 | grid-template-rows: repeat(7, 1fr); 258 | } 259 | .page-navigator .navigator { 260 | padding-right: 2.5em; 261 | margin-bottom: 2.5em; 262 | } 263 | .page-navigator .navigator-image { 264 | grid-column: 3 / -1; 265 | grid-row: 2/4; 266 | object-fit: contain; 267 | transform: scaleX(-1); 268 | margin-top: -2em; 269 | width: 100%; 270 | margin-left: -1.2em; 271 | } 272 | .page-navigator .navigator-image-2 { 273 | grid-column: 1 / 2; 274 | grid-row: 1 / 4; 275 | height: 100%; 276 | object-fit: cover; 277 | max-width: 340px; 278 | margin-top: 5em; 279 | margin-left: -4em; 280 | width: calc(100% + 3.5em); 281 | } 282 | .page-navigator .navigator-image-3 { 283 | grid-column: 2 / 4; 284 | grid-row: 1 / 4; 285 | height: 100%; 286 | object-fit: cover; 287 | margin-top: 5em; 288 | } 289 | .page-navigator .navigator-space { 290 | grid-column: 1 / 3; 291 | grid-row: 5 / 6; 292 | } 293 | .page-navigator .navigator-space-2 { 294 | grid-column: 1 / -1; 295 | grid-row: 1 / 5; 296 | } 297 | .page-navigator .navigator-space-3 { 298 | grid-column: 1 / 2; 299 | grid-row: 1 / 8; 300 | } 301 | } 302 | 303 | .page-timer { 304 | display: grid; 305 | grid-gap: 10px; 306 | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 307 | } 308 | @media (min-width: 900px) { 309 | .page-timer { 310 | grid-template-columns: repeat(5, 1fr); 311 | grid-template-rows: min-content 2fr 1.5fr; 312 | } 313 | } 314 | .page-timer .timer { 315 | height: 100%; 316 | background-size: cover; 317 | background-repeat: no-repeat; 318 | background-position: top center; 319 | background-color: #51b7d3; 320 | background-blend-mode: overlay; 321 | position: relative; 322 | min-height: 200px; 323 | color: #fff; 324 | text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); 325 | } 326 | .page-timer .timer:before { 327 | content: ''; 328 | position: absolute; 329 | height: 100%; 330 | width: 100%; 331 | background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); 332 | } 333 | .page-timer .timer span { 334 | font-weight: 700; 335 | font-style: italic; 336 | font-size: 80px; 337 | color: #fff; 338 | opacity: 0.7; 339 | position: absolute; 340 | line-height: 1; 341 | width: 100%; 342 | } 343 | .page-timer .timer:nth-of-type(2) { 344 | background-color: rgba(255, 34, 34, 0.5); 345 | background-image: url(https://olivia-ng.com/codepen/avengers/ironman.png); 346 | } 347 | .page-timer .timer:nth-of-type(3) { 348 | background-color: rgba(33, 150, 243, 0.5); 349 | background-image: url(https://olivia-ng.com/codepen/avengers/cap.png); 350 | } 351 | .page-timer .timer:nth-of-type(4) { 352 | background-color: rgba(233, 30, 99, 0.5); 353 | background-image: url(https://olivia-ng.com/codepen/avengers/thor.png); 354 | } 355 | .page-timer .timer:nth-of-type(5) { 356 | background-color: rgba(76, 175, 80, 0.5); 357 | background-image: url(https://olivia-ng.com/codepen/avengers/hulk.png); 358 | } 359 | .page-timer .timer:nth-of-type(6) { 360 | background-color: rgba(255, 193, 7, 0.5); 361 | background-image: url(https://olivia-ng.com/codepen/avengers/hawkeye.png); 362 | } 363 | .page-timer .timer:nth-of-type(7) { 364 | background-color: rgba(0, 150, 136, 0.5); 365 | background-image: url(https://olivia-ng.com/codepen/avengers/antman.png); 366 | } 367 | .page-timer .timer:nth-of-type(8) { 368 | background-color: rgba(0, 188, 212, 0.5); 369 | background-image: url(https://olivia-ng.com/codepen/avengers/nebula.png); 370 | } 371 | .page-timer .timer:nth-of-type(9) { 372 | background-color: rgba(255, 152, 0, 0.5); 373 | background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/blackwidow2.png); 374 | } 375 | .page-timer .timer:nth-of-type(10) { 376 | background-color: rgba(103, 58, 183, 0.5); 377 | background-image: url(https://olivia-ng.com/codepen/avengers/thanos.png); 378 | } 379 | .page-timer .timer:nth-of-type(11) { 380 | background-color: rgba(63, 81, 181, 0.5); 381 | background-image: url(https://olivia-ng.com/codepen/avengers/rockt.png); 382 | } 383 | @media (min-width: 900px) { 384 | .page-timer .timer { 385 | background-size: 350%; 386 | background-position: -150px top; 387 | } 388 | .page-timer .timer span { 389 | text-align: center; 390 | top: 15px; 391 | } 392 | .page-timer .timer:nth-of-type(n + 7) { 393 | background-size: 200%; 394 | } 395 | .page-timer .timer:nth-of-type(2) { 396 | background-position: -150px top; 397 | } 398 | .page-timer .timer:nth-of-type(3) { 399 | background-position: -160px top; 400 | } 401 | .page-timer .timer:nth-of-type(4) { 402 | background-position: -200px top; 403 | } 404 | .page-timer .timer:nth-of-type(5) { 405 | background-position: -180px top; 406 | } 407 | .page-timer .timer:nth-of-type(6) { 408 | background-position: center top; 409 | background-size: 450%; 410 | } 411 | .page-timer .timer:nth-of-type(7) { 412 | background-position: -170px top; 413 | background-size: 300%; 414 | } 415 | .page-timer .timer:nth-of-type(8) { 416 | background-position: center top; 417 | background-size: 180%; 418 | } 419 | .page-timer .timer:nth-of-type(9) { 420 | background-position: -90px top; 421 | background-size: 250%; 422 | } 423 | .page-timer .timer:nth-of-type(10) { 424 | background-position: -110px top; 425 | background-size: 350%; 426 | } 427 | .page-timer .timer:nth-of-type(11) { 428 | background-position: -110px top; 429 | background-size: 300%; 430 | } 431 | } 432 | .page-timer .timer__hero { 433 | position: absolute; 434 | bottom: 15px; 435 | line-height: 1.5; 436 | text-align: center; 437 | width: 100%; 438 | } 439 | 440 | .page-more .image { 441 | width: 100%; 442 | margin-bottom: 3em; 443 | } 444 | .page-more .title-mini { 445 | font-family: 'Abril Fatface'; 446 | font-weight: 500; 447 | font-size: 24px; 448 | line-height: 1; 449 | margin-bottom: 10px; 450 | } 451 | .page-more .title-mini + img { 452 | display: none; 453 | } 454 | .page-more .quote { 455 | border-left: 3px solid black; 456 | padding: 0 3em 0 1.5em; 457 | } 458 | .page-more .quote p { 459 | font-style: italic; 460 | margin-top: 8px; 461 | } 462 | @media (min-width: 900px) { 463 | .page-more { 464 | display: grid; 465 | grid-template-columns: 30% 70%; 466 | } 467 | .page-more .title-mini { 468 | grid-column: 2 / 3; 469 | grid-row: 1 / 2; 470 | align-self: center; 471 | text-align: right; 472 | z-index: 10; 473 | color: #fff; 474 | width: 43%; 475 | margin: 2em 2em 0 auto; 476 | } 477 | .page-more .title-mini + img { 478 | display: block; 479 | margin-bottom: 2em; 480 | } 481 | .page-more .title { 482 | grid-column: 1 / -1; 483 | grid-row: 3; 484 | z-index: 2; 485 | justify-content: flex-end; 486 | align-items: center; 487 | text-align: center; 488 | padding-bottom: .5em; 489 | margin-top: 1em; 490 | } 491 | .page-more .title small { 492 | margin: 1em auto 0; 493 | } 494 | .page-more .image { 495 | grid-column: 1 / 3; 496 | grid-row: 1 / 2; 497 | z-index: 1; 498 | width: 100%; 499 | } 500 | .page-more .text { 501 | column-count: 2; 502 | column-span: all; 503 | column-gap: 30px; 504 | text-align: justify; 505 | } 506 | .page-more .quote { 507 | grid-column: 1; 508 | grid-row: 2 / 3; 509 | align-self: start; 510 | } 511 | } 512 | .page-more .more { 513 | grid-column: 1 / -1; 514 | display: flex; 515 | flex-wrap: wrap; 516 | justify-content: space-between; 517 | } 518 | .page-more .more__item { 519 | padding: 0.4em; 520 | margin: 2em 0; 521 | text-align: center; 522 | } 523 | .page-more .more__item a { 524 | display: block; 525 | color: #999; 526 | margin-top: 8px; 527 | } 528 | .page-more .more__item a:hover { 529 | font-weight: 700; 530 | } 531 | .page-more .more__image { 532 | width: 100%; 533 | border-radius: 50%; 534 | max-width: 110px; 535 | } 536 | .page-more .more__headline { 537 | line-height: 1.3; 538 | margin: 1em 0 2em; 539 | position: relative; 540 | } 541 | .page-more .more__headline:after { 542 | content: ""; 543 | position: absolute; 544 | width: 50px; 545 | bottom: -1em; 546 | left: 50%; 547 | margin-left: -25px; 548 | background: black; 549 | height: 1px; 550 | } 551 | @media (min-width: 900px) { 552 | .page-more .more__item { 553 | flex: 0 1 24%; 554 | margin: 0; 555 | } 556 | } 557 | 558 | .page-diagonal .diagonal { 559 | display: grid; 560 | grid-template-columns: 40% 60%; 561 | align-items: center; 562 | margin-top: -3%; 563 | } 564 | .page-diagonal .diagonal__image { 565 | margin-top: 2.5em; 566 | width: 80%; 567 | height: 100%; 568 | object-fit: contain; 569 | padding: 1em; 570 | } 571 | .page-diagonal .diagonal__text { 572 | margin-top: 2.5em; 573 | } 574 | .page-diagonal .diagonal h5 { 575 | margin-bottom: 5px; 576 | } 577 | @media (max-width: 900px) { 578 | .page-diagonal .free-space-1, .page-diagonal .free-space-2, .page-diagonal .free-space-3, .page-diagonal .free-space-4 { 579 | display: none; 580 | } 581 | } 582 | @media (min-width: 900px) { 583 | .page-diagonal { 584 | overflow: hidden; 585 | } 586 | .page-diagonal .diagonal { 587 | width: 100%; 588 | margin-left: 5%; 589 | grid-template-rows: repeat(2, 150px) 40px repeat(3, 150px); 590 | grid-template-columns: 20% 3% 30% 15% 30%; 591 | grid-gap: 5px; 592 | transform: rotate(45deg); 593 | } 594 | .page-diagonal .diagonal__image, .page-diagonal .diagonal__text { 595 | margin: 0; 596 | } 597 | .page-diagonal .diagonal__image { 598 | padding: 0; 599 | width: 90%; 600 | } 601 | .page-diagonal .diagonal__text { 602 | padding: 0em; 603 | } 604 | .page-diagonal .show-img-1 { 605 | grid-column: 1 / span 2; 606 | grid-row: 2 / 4; 607 | height: 65%; 608 | align-self: flex-end; 609 | } 610 | .page-diagonal .show-text-1 { 611 | grid-column: 1 / 3; 612 | grid-row: 4 / 6; 613 | writing-mode: vertical-rl; 614 | text-orientation: mixed; 615 | text-align: right; 616 | transform: rotate(-180deg); 617 | padding: 2em 1.5em; 618 | } 619 | .page-diagonal .show-text-1 h5 { 620 | margin-left: 5px; 621 | } 622 | .page-diagonal .show-img-2 { 623 | grid-column: 2 / 4; 624 | grid-row: 1 / 2; 625 | width: 70%; 626 | height: 120%; 627 | align-self: flex-end; 628 | } 629 | .page-diagonal .show-text-2 { 630 | grid-column: 2 / 5; 631 | grid-row: 2 / 3; 632 | width: 95%; 633 | } 634 | .page-diagonal .show-img-3 { 635 | grid-column: 3 / 4; 636 | grid-row: 3 / 5; 637 | padding-top: 1em; 638 | margin-left: -1em; 639 | } 640 | .page-diagonal .show-text-3 { 641 | grid-column: 3 / 5; 642 | grid-row: 5 / 6; 643 | width: 85%; 644 | } 645 | .page-diagonal .show-img-4 { 646 | grid-column: 3 / 4; 647 | grid-row: 6 / 7; 648 | margin-left: -15%; 649 | } 650 | .page-diagonal .show-text-4 { 651 | grid-column: 4 / 6; 652 | grid-row: 6 / 7; 653 | width: 70%; 654 | margin-left: -22%; 655 | } 656 | .page-diagonal .show-img-5 { 657 | grid-column: 5 / 6; 658 | grid-row: 5 / 6; 659 | } 660 | .page-diagonal .show-text-5 { 661 | grid-column: 5 / 6; 662 | grid-row: 2 / 5; 663 | writing-mode: vertical-rl; 664 | text-orientation: mixed; 665 | transform: rotate(180deg); 666 | padding-right: 2.5em; 667 | } 668 | .page-diagonal .show-text-5 h5 { 669 | margin-left: 5px; 670 | } 671 | .page-diagonal .free-space-1 { 672 | background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pezmovie.jpg) no-repeat right center/cover; 673 | filter: brightness(1.85); 674 | grid-row: 1/2; 675 | grid-column: 1 / 2; 676 | height: 120%; 677 | width: 120%; 678 | transform: translate(-170px, 440px); 679 | justify-self: flex-end; 680 | } 681 | .page-diagonal .free-space-2 { 682 | background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/shawarmamovie.jpg) no-repeat center center/cover; 683 | filter: brightness(1.4); 684 | grid-row: 4 / 5; 685 | height: 100%; 686 | width: 120%; 687 | align-items: center; 688 | transform: translate(-20px, -50px); 689 | } 690 | .page-diagonal .free-space-3 { 691 | background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/avengerbenjerrymovie.jpg) no-repeat right center/cover; 692 | filter: brightness(1.6); 693 | grid-row: 1 / 2; 694 | height: 160%; 695 | width: 200%; 696 | align-items: center; 697 | transform: translate(-50px, -70px) scaleX(-1); 698 | } 699 | .page-diagonal .free-space-4 { 700 | background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/asgardalemovie.jpg) no-repeat center center/cover; 701 | filter: brightness(1.6); 702 | grid-column: 1 / 2; 703 | grid-row: 6 / 7; 704 | height: 130%; 705 | width: 200%; 706 | align-items: center; 707 | transform: translate(220px, 200px); 708 | } 709 | } 710 | 711 | .page-thor { 712 | padding-bottom: 1.5em; 713 | display: grid; 714 | grid-template-columns: 30% 15% 55%; 715 | grid-template-rows: max-content 250px 50px max-content; 716 | grid-auto-flow: dense; 717 | overflow: hidden; 718 | } 719 | .page-thor .title { 720 | line-height: 1.3; 721 | font-size: 45px; 722 | max-width: 700px; 723 | margin: 1em; 724 | letter-spacing: 1px; 725 | } 726 | .page-thor .title small { 727 | color: #777; 728 | font-size: 40%; 729 | text-transform: none; 730 | letter-spacing: 0; 731 | margin-top: 20px; 732 | font-weight: 400; 733 | line-height: 1.5; 734 | } 735 | .page-thor .product-name { 736 | grid-column: 1 / 4; 737 | grid-row: 1 / 2; 738 | z-index: 1; 739 | } 740 | .page-thor .photo-combo { 741 | position: relative; 742 | grid-column: 1 / -1; 743 | grid-row: 1/4; 744 | display: flex; 745 | align-items: flex-end; 746 | justify-content: center; 747 | background: radial-gradient(#fff, #cecbea); 748 | max-height: 600px; 749 | } 750 | .page-thor .photo-combo img { 751 | position: relative; 752 | width: 53%; 753 | margin: 2em 2em -1em; 754 | } 755 | .page-thor .window { 756 | display: flex; 757 | position: relative; 758 | grid-column: 1 / -1; 759 | margin-top: -65px; 760 | max-width: 500px; 761 | margin-left: auto; 762 | margin-right: auto; 763 | } 764 | .page-thor .window__left, .page-thor .window__right { 765 | flex: 1 1 50%; 766 | position: relative; 767 | text-align: center; 768 | } 769 | .page-thor .window__left img, .page-thor .window__right img { 770 | width: auto; 771 | height: 250px; 772 | } 773 | .page-thor .window__left span, .page-thor .window__right span { 774 | display: block; 775 | text-align: center; 776 | padding: 2px 5px 20px; 777 | font-size: 14px; 778 | font-style: italic; 779 | color: #999; 780 | } 781 | .page-thor .window__left img { 782 | margin-left: -30px; 783 | } 784 | .page-thor .persuader { 785 | grid-column: 1 / -1; 786 | } 787 | .page-thor .testi__text { 788 | font-size: 10px; 789 | margin: 15px; 790 | width: 90%; 791 | } 792 | @media (min-width: 900px) { 793 | .page-thor { 794 | grid-template-rows: max-content 1fr 1fr 100px; 795 | padding-bottom: 0; 796 | max-height: 90vh; 797 | } 798 | .page-thor .title { 799 | margin: 2.5em; 800 | } 801 | .page-thor .product-name { 802 | grid-column: 1 / 4; 803 | grid-row: 1 / 2; 804 | z-index: 1; 805 | } 806 | .page-thor .photo-combo { 807 | justify-content: flex-end; 808 | max-height: none; 809 | } 810 | .page-thor .photo-combo img { 811 | margin: 0 8em 15em; 812 | } 813 | .page-thor .window { 814 | grid-column: 1 / 2; 815 | margin: 0; 816 | grid-row: 4 / 5; 817 | align-items: flex-end; 818 | } 819 | .page-thor .persuader { 820 | grid-column: 2 / 4; 821 | display: flex; 822 | align-items: center; 823 | } 824 | } 825 | 826 | .page-circle { 827 | overflow: hidden; 828 | padding-top: 7em; 829 | } 830 | .page-circle h5 { 831 | font-family: 'Abril Fatface'; 832 | font-weight: 500; 833 | font-size: 24px; 834 | line-height: 1; 835 | margin-bottom: 10px; 836 | } 837 | .page-circle .stark-center { 838 | width: 100%; 839 | text-align: justify; 840 | } 841 | .page-circle .stark-center .text { 842 | margin-bottom: 20px; 843 | } 844 | @media (min-width: 900px) { 845 | .page-circle .stark-center { 846 | display: grid; 847 | grid-template-columns: repeat(2, 50%); 848 | grid-template-rows: 1fr min-content min-content; 849 | min-height: 600px; 850 | } 851 | .page-circle .stark-center .stark-left, 852 | .page-circle .stark-center .stark-right { 853 | grid-row: 1 / 2; 854 | } 855 | .page-circle .stark-center .text { 856 | grid-column: 1 / 2; 857 | grid-row: 1 / 2; 858 | } 859 | .page-circle .stark-center .title { 860 | grid-row: 2 / 3; 861 | grid-column: 1 / -1; 862 | text-transform: uppercase; 863 | line-height: 1; 864 | border: solid; 865 | border-width: 8px 0; 866 | padding: .2em 0; 867 | text-align: center; 868 | font-size: 55px; 869 | margin: 0 0 .6em; 870 | } 871 | } 872 | .page-circle .shape-human { 873 | height: 400px; 874 | width: 250px; 875 | float: right; 876 | background: #fff; 877 | shape-margin: 15px; 878 | opacity: 0; 879 | shape-outside: polygon(50% 0%, 46% 2%, 44% 8%, 45% 13%, 37% 15%, 37% 15%, 37% 18%, 30% 24%, 22% 31%, 19% 36%, 17% 45%, 20% 49%, 25% 55%, 31% 59%, 32% 66%, 30% 71%, 28% 79%, 27% 86%, 22% 98%, 22% 100%, 61% 100%); 880 | clip-path: polygon(50% 0%, 46% 2%, 44% 8%, 45% 13%, 37% 15%, 37% 15%, 37% 18%, 30% 24%, 22% 31%, 19% 36%, 17% 45%, 20% 49%, 25% 55%, 31% 59%, 32% 66%, 30% 71%, 28% 79%, 27% 86%, 22% 98%, 22% 100%, 61% 100%); 881 | margin-right: -20%; 882 | } 883 | .page-circle .stark-left p, .page-circle .stark-right p { 884 | margin: 10px 0; 885 | } 886 | .page-circle .stark-left { 887 | position: relative; 888 | } 889 | .page-circle .stark-left img { 890 | position: absolute; 891 | right: 0; 892 | object-fit: contain; 893 | object-position: top; 894 | top: 0; 895 | margin-right: -150px; 896 | width: 250px; 897 | z-index: 10; 898 | } 899 | @media (min-width: 900px) { 900 | .page-circle .stark-left img { 901 | width: 250px; 902 | height: 100%; 903 | left: 69%; 904 | margin: 0; 905 | } 906 | } 907 | .page-circle .stark-right .shape-human { 908 | display: none; 909 | float: left; 910 | shape-outside: polygon(50% 100%, 51% 0%, 61% 2%, 63% 7%, 65% 10%, 65% 15%, 65% 21%, 72% 21%, 75% 21%, 80% 26%, 85% 34%, 86% 43%, 75% 54%, 80% 60%, 85% 74%, 85% 76%, 84% 82%, 93% 89%, 93% 98%, 93% 100%); 911 | clip-path: polygon(50% 100%, 51% 0%, 61% 2%, 63% 7%, 65% 10%, 65% 15%, 65% 21%, 72% 21%, 75% 21%, 80% 26%, 85% 34%, 86% 43%, 75% 54%, 80% 60%, 85% 74%, 85% 76%, 84% 82%, 93% 89%, 93% 98%, 93% 100%); 912 | } 913 | @media (min-width: 900px) { 914 | .page-circle .stark-right .shape-human { 915 | display: block; 916 | margin-right: 0; 917 | margin-left: -25%; 918 | } 919 | } 920 | .page-circle .stark-right .text { 921 | margin-top: 40px; 922 | } 923 | .page-circle .character-other { 924 | display: grid; 925 | width: 100%; 926 | grid-gap: 25px; 927 | } 928 | .page-circle .character-other img { 929 | width: 100%; 930 | height: 100%; 931 | object-fit: cover; 932 | object-position: top; 933 | } 934 | @media (min-width: 900px) { 935 | .page-circle .character-other { 936 | grid-template-columns: repeat(2, 1fr) 220px; 937 | grid-template-rows: repeat(2, min-content); 938 | } 939 | .page-circle .character-other__text:nth-of-type(6) { 940 | grid-row: 2 / 3; 941 | grid-column: 3 / 4; 942 | } 943 | .page-circle .character-other__image:nth-of-type(1) img { 944 | height: 200px; 945 | } 946 | .page-circle .character-other__image:nth-of-type(5) { 947 | grid-column: 3 / 4; 948 | grid-row: 1 / 2; 949 | } 950 | } 951 | 952 | @media (min-width: 900px) { 953 | .page-easter { 954 | display: grid; 955 | grid-template-columns: 200px repeat(3, 1fr); 956 | grid-column-gap: 35px; 957 | } 958 | .page-easter .title { 959 | grid-row: 1 / 4; 960 | grid-column: 1 / 2; 961 | margin-top: 2em; 962 | } 963 | } 964 | .page-easter .easter__item { 965 | margin-top: 2em; 966 | } 967 | .page-easter .easter__item img { 968 | height: 200px; 969 | object-fit: cover; 970 | margin-bottom: 10px; 971 | } 972 | @media (min-width: 900px) { 973 | .page-easter .easter__item img { 974 | height: 140px; 975 | } 976 | } 977 | .page-easter .easter__item:nth-child(3) img, .page-easter .easter__item:nth-child(4) img, .page-easter .easter__item:nth-child(5) img, .page-easter .easter__item:nth-child(9) img { 978 | filter: brightness(2); 979 | } 980 | .page-easter .easter__item:nth-child(4) img { 981 | object-position: 90% top; 982 | } 983 | .page-easter .easter__item:nth-child(5) img { 984 | object-position: right; 985 | } 986 | .page-easter .easter__item:nth-child(6) img, .page-easter .easter__item:nth-child(9) img { 987 | object-position: left; 988 | } 989 | 990 | .page-gauntlet .title { 991 | text-align: center; 992 | width: 80%; 993 | margin: 2.8em auto 0; 994 | } 995 | .page-gauntlet .title small { 996 | margin: 2em auto 0; 997 | } 998 | .page-gauntlet .gauntlet { 999 | text-align: justify; 1000 | } 1001 | .page-gauntlet .gauntlet:not(:last-child) { 1002 | margin-bottom: 4em; 1003 | } 1004 | @media (min-width: 900px) { 1005 | .page-gauntlet .gauntlet { 1006 | flex: 0 1 35%; 1007 | } 1008 | .page-gauntlet .gauntlet__wrapper { 1009 | display: flex; 1010 | padding: 0 3em; 1011 | justify-content: space-evenly; 1012 | } 1013 | } 1014 | .page-gauntlet .gauntlet__image { 1015 | position: relative; 1016 | text-align: center; 1017 | } 1018 | .page-gauntlet .gauntlet__image img { 1019 | position: relative; 1020 | z-index: 2; 1021 | width: auto; 1022 | height: 350px; 1023 | max-width: 200px; 1024 | margin-bottom: -6px; 1025 | } 1026 | .page-gauntlet .gauntlet__image:before { 1027 | content: ''; 1028 | position: absolute; 1029 | height: 70%; 1030 | width: 80%; 1031 | background: #eaecff; 1032 | left: 0; 1033 | right: 0; 1034 | margin: auto; 1035 | z-index: 0; 1036 | bottom: 0; 1037 | } 1038 | @media (min-width: 900px) { 1039 | .page-gauntlet .gauntlet__image:before { 1040 | width: 150%; 1041 | margin-left: -25%; 1042 | } 1043 | } 1044 | .page-gauntlet .gauntlet__text h5 { 1045 | text-align: center; 1046 | margin: 2.5em 0 1em; 1047 | } 1048 | 1049 | .page-stones .quote { 1050 | font-family: 'Abril Fatface'; 1051 | font-size: 2.5em; 1052 | line-height: 1.2; 1053 | position: relative; 1054 | padding-top: 2.8em; 1055 | margin-bottom: 2em; 1056 | } 1057 | .page-stones .quote:before { 1058 | content: open-quote; 1059 | font-size: 4em; 1060 | color: #ddd; 1061 | position: absolute; 1062 | top: 0; 1063 | } 1064 | .page-stones p:first-letter { 1065 | float: left; 1066 | font-size: 50px; 1067 | font-weight: 700; 1068 | font-family: 'Abril Fatface'; 1069 | margin: 5px 10px 2px 0; 1070 | line-height: 1; 1071 | } 1072 | .page-stones p { 1073 | margin: 2em 0; 1074 | } 1075 | .page-stones .all-holders { 1076 | background: #eaecff; 1077 | padding: 3em; 1078 | margin: 2em 0; 1079 | text-align: center; 1080 | } 1081 | .page-stones .all-holders h5 { 1082 | margin: 0 0 25px; 1083 | font-family: "Abril Fatface"; 1084 | font-weight: 400; 1085 | font-size: 2.2em; 1086 | line-height: 1.2; 1087 | } 1088 | .page-stones .all-holders img { 1089 | margin-top: 2em; 1090 | margin-bottom: -6em; 1091 | width: 100%; 1092 | transform: rotate(5deg); 1093 | } 1094 | @media (min-width: 900px) { 1095 | .page-stones { 1096 | display: grid; 1097 | grid-gap: 35px; 1098 | grid-template-columns: repeat(3, 1fr); 1099 | grid-template-rows: min-content repeat(3, auto); 1100 | align-items: flex-end; 1101 | } 1102 | .page-stones p:first-letter { 1103 | margin: 3px 8px 2px 4px; 1104 | } 1105 | .page-stones p { 1106 | text-align: justify; 1107 | } 1108 | .page-stones .title { 1109 | text-align: right; 1110 | grid-row: 1 / 2; 1111 | grid-column: 2 / -1; 1112 | margin: 0; 1113 | padding-bottom: 0; 1114 | } 1115 | .page-stones .title small { 1116 | width: 100%; 1117 | } 1118 | .page-stones .quote { 1119 | grid-row: 1 / 3; 1120 | width: 82%; 1121 | margin-top: 1.5em; 1122 | } 1123 | .page-stones .column-1 { 1124 | grid-column: 1 / 2; 1125 | grid-row: 3 / 5; 1126 | align-self: flex-end; 1127 | } 1128 | .page-stones .column-2 { 1129 | grid-row: 2 / 3; 1130 | grid-column: 2 / 3; 1131 | align-self: flex-end; 1132 | } 1133 | .page-stones .column-3 { 1134 | grid-row: 2 / 5; 1135 | grid-column: 3/ 4; 1136 | margin-top: 40%; 1137 | align-self: flex-end; 1138 | } 1139 | .page-stones .all-holders { 1140 | grid-row: 3 / 5; 1141 | grid-column: 2 / 3; 1142 | margin: -2em 0 2em; 1143 | line-height: 1.8; 1144 | align-self: stretch; 1145 | } 1146 | .page-stones .all-holders img { 1147 | margin-left: -50%; 1148 | width: 200%; 1149 | margin-bottom: -8em; 1150 | } 1151 | .page-stones .image-2 { 1152 | grid-row: 1 / 3; 1153 | grid-column-end: -1; 1154 | } 1155 | } 1156 | 1157 | .page-cap { 1158 | display: grid; 1159 | grid-template-columns: 70% 30%; 1160 | grid-gap: 30px; 1161 | } 1162 | .page-cap img { 1163 | width: 100%; 1164 | height: 100%; 1165 | object-fit: cover; 1166 | object-position: right; 1167 | } 1168 | .page-cap h2 { 1169 | align-self: center; 1170 | font-family: 'Abril Fatface'; 1171 | font-size: 65px; 1172 | line-height: 1; 1173 | text-transform: uppercase; 1174 | max-width: 70%; 1175 | } 1176 | 1177 | .page-ironman { 1178 | text-transform: uppercase; 1179 | font-family: 'Abril Fatface'; 1180 | display: grid; 1181 | grid-template-rows: 1fr max-content; 1182 | } 1183 | .page-ironman .image { 1184 | position: relative; 1185 | } 1186 | .page-ironman h2.top { 1187 | font-size: 50px; 1188 | top: 10px; 1189 | left: 15px; 1190 | line-height: 1; 1191 | position: relative; 1192 | z-index: 2; 1193 | position: absolute; 1194 | color: rgba(255, 255, 255, 0.8); 1195 | } 1196 | .page-ironman h2.bottom { 1197 | font-size: 40px; 1198 | line-height: 1; 1199 | position: relative; 1200 | z-index: 2; 1201 | margin-top: 10px; 1202 | text-align: right; 1203 | } 1204 | .page-ironman img { 1205 | width: 100%; 1206 | height: 100%; 1207 | object-fit: cover; 1208 | filter: grayscale(0.6); 1209 | } 1210 | 1211 | .page-cover { 1212 | display: grid; 1213 | align-items: flex-end; 1214 | display: grid; 1215 | grid: 100% / 100%; 1216 | text-align: center; 1217 | color: #fff; 1218 | } 1219 | .page-cover img { 1220 | height: 100%; 1221 | object-fit: cover; 1222 | object-position: bottom; 1223 | grid-row: 1 / 2; 1224 | grid-column: 1 / 2; 1225 | } 1226 | .page-cover h1 { 1227 | grid-row: 1 / 2; 1228 | grid-column: 1 / 2; 1229 | font-size: 70px; 1230 | width: 80%; 1231 | text-transform: uppercase; 1232 | margin: 0 auto 1em; 1233 | line-height: 1; 1234 | font-family: 'Abril Fatface'; 1235 | } 1236 | .page-cover h1 small { 1237 | font-size: 23%; 1238 | width: 90%; 1239 | margin: 2em auto; 1240 | } 1241 | -------------------------------------------------------------------------------- /src/other/UI Tools/Magazine Layouts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Magazine Layouts 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |

18 | A Tribute
to the AvengersExploring Avengers: Endgame, the highest-grossing movie worldwide and the future of the Marvel Cinematic Universe

19 |
20 |
21 |
22 |
01A Tribute to the Avengers
23 |
24 |

25 | The End of An EraThere are 21 movies leading up to Avengers: Endgame. Should you run a Marvel Marathon, here are they in the order of the MCU timeline. You will need 2,867 minutes (48 hours).

26 |
27 |
1943 – 1945
28 |
Captain America: The First Avenger
29 |

We see the creation of the first super-soldier.

30 |
31 |
32 |
1995
33 |
Captain Marvel
34 |

Carol Danvers fall to Earth and begin a hunt for the shape-shifting Skrull aliens.

35 |
36 |
37 |
2010
38 |
Iron Man
39 |

Captured by a terrorist organization, Tony Stark designs The first Iron Man suit to help him escape.

40 |
41 |
42 |
2010
43 |
Iron Man 2
44 |

Stark has to keep the government away from his suit tech. We meet the Black Widow and War Machine for the first time.

45 |
46 |
47 |
2010
48 |
The Incredible Hulk
49 |

The very first MCU movie follows Bruce Banner on the run from General Thunderbolt Ross and the US Military.

50 |
51 |
52 |
2011
53 |
Thor
54 |

The God of lightning has been banished to Earth from Asgard by his father Odin, all thanks to the trickery of his brother, Loki.

55 |
56 |
57 |
2012
58 |
The Avengers
59 |

The Avengers Initiative is live, battling Loki's army in New York City. We see Thanos for the first time.

60 |
61 |
62 |
2012
63 |
Iron Man 3
64 |

The film takes place six months after The Avengers in which Tony Stark deals with PTSD.

65 |
66 |
67 |
2013
68 |
Thor: The Dark World
69 |

Thor battles the Dark Elves, who are seeking the Aether, which is later revealed to be the Reality Stone.

70 |
71 |
72 |
2014
73 |
Captain America: The Winter Soldier
74 |

Captain America's closest friend returns from the dead as the Winter Soldier. This film introduces The Falcon.

75 |
76 |
77 |
2014
78 |
Guardians of the Galaxy
79 |

Star-Lord forms a ragtag group of outcasts with Gamora, Groot, Drax and Rocket. Nebula is also introduced.

80 |
81 |
82 |
2014
83 |
Guardians of the Galaxy 2
84 |

The GotG come face to face with a godlike entity known as Ego. Gamora repairs her relationship with Nebula.

85 |
86 |
87 |
88 |
89 |
02A Tribute to the Avengers
90 |
91 |
92 |
2015
93 |
Ant-Man
94 |

Scott Lang is recruited by Hank Pym to dawn the Ant-Man suit in order to stop the technology from becoming weaponized.

95 |
96 |
97 |
2016
98 |
Captain America: Civil War
99 |

Civil War features almost every single Avenger while adding two more to the lineup: Black Panther and Spider-Man.

100 |
101 |
102 |
2016
103 |
Black Panther
104 |

T’Challa returns home to Wakanda to become king and is challenged by a long lost relative. Shuri, Okoye and M'Baku are introduced.

105 |
106 |
107 |
2016
108 |
Spider-Man: Homecoming
109 |

Spider-Man fights to keep his friendly neighborhood safe with some mentoring from Tony Stark.

110 |
111 |
112 |
2016 - 2017
113 |
Doctor Strange
114 |

Dr Stephen travels the world searching for a cure for his hands - and stumbles upon ancient magic.

115 |
116 |
117 |
2017
118 |
Thor: Ragnarok
119 |

Thor teams up with the Hulk, Loki and Valkyrie to confront some serious familial issues, mostly in the form of an evil sister.

120 |
121 |
122 |
2018
123 |
Ant-Man and the Wasp
124 |

Scott Lang teams up with Hope and Hank Pym to retrieve Hope's mother from the Quantum Realm. Hope dawns the Wasp suit.

125 |
126 |
127 |
2018
128 |
Avengers: Infinity War
129 |

Thanos is on the hunt for the infinity stones himself. The only thing standing in his way are the Avengers, who are spread across the universe.

130 |
131 |
132 |
2018-2023
133 |
Avengers: Endgame
134 |

The Avengers reunite for a slim chance to undo the chaos after five years since the Thanos Snap.

135 |
136 |
137 |
138 |
139 |
140 |
Let's Talk ScreentimeWith more than 50 reprising roles in Endgame and only 180 minutes to spare, here are the top 10 characters who appeared on screen the most often.
141 |
142 |
1 143 |
144 |
Ironman
145 |

1997 seconds

146 |
147 |
148 |
149 |
2 150 |
151 |
Capt America
152 |

1688 seconds

153 |
154 |
155 |
156 |
3 157 |
158 |
Thor
159 |

1105 seconds

160 |
161 |
162 |
163 |
4 164 |
165 |
Hulk
166 |

970 seconds

167 |
168 |
169 |
170 |
5 171 |
172 |
Hawkeye
173 |

966 seconds

174 |
175 |
176 |
177 |
6 178 |
179 |
Ant-Man
180 |

881 seconds

181 |
182 |
183 |
184 |
7 185 |
186 |
Nebula
187 |

866 seconds

188 |
189 |
190 |
191 |
8 192 |
193 |
Black Widow
194 |

839 seconds

195 |
196 |
197 |
198 |
9 199 |
200 |
Thanos
201 |

724 seconds

202 |
203 |
204 |
205 |
10 206 |
207 |
Rocket
208 |

524 seconds

209 |
210 |
211 |
212 |
03A Tribute to the Avengers
213 |
214 |
215 |
216 |
217 |
04A Tribute to the Avengers
218 |
219 |
Movie Details, Easter Eggs & MoreIt is known that Marvel loves their details and Easter eggs. Here are some that you may have missed, including fan theories and possible blunders.
220 |
221 |
Dr. Zola's computer can be seen when Tony sneaks into the bunker. Zola was probably preparing it to transfer his consciousness as his death would come only 2 years later.
222 |
223 |
224 |
During the big battle, Thanos holds Captain America's hand and not the Mjölnir hammer because he knows he is not worthy and can't lift it.
225 |
226 |
227 |
Hulk uses a pencil to flick the switches in the scene where they are trying to send Scott back in time, because his fingers are too big.
228 |
229 |
230 |
Tønsberg, Norway has been an important setting in the MCU. It is where the Asgardians fought armies centuries ago, where the Tesseract was stolen in WW2, where Odin dies in Thor: Ragnarok, and where Thor builds New Asgard in Endgame.
231 |
232 |
233 |
After Tony Stark bids farewell to his father in 1970, Howard Stark is driven away by his butler, Edwin Jarvis (played by James D'Arcy, who also starred in the TV series, Agent Carter. This is the first ever crossover from the TV series into the movies.
234 |
235 |
236 |
The words “A-113” appear on Dr Banner’s HUD. This is an obvious reference to the classroom for character animation and graphic design at the California Institute of Arts, which has made its way into various TV shows, movies and media.
237 |
238 |
239 |
Tony Stark cracks the time travel model after seeing a picture of him and Peter Parker holding an 'inverted' diploma.
240 |
241 |
242 |
You can see Giant-Man pushing a Chitauri in the background even though his character is supposedly in the van with Wasp during this scene.
243 |
244 |
245 |
In a Reddit AMA, the Russos have revealed that there are Easter eggs that have not been discovered yet. So get watching!
246 |
247 |
248 |
249 |
250 |
05A Tribute to the Avengers
251 |
252 |

253 | Food: Much ImportanceAvengers: Endgame has more scenes with food on screen or in dialogue than any other MCU movie.

254 |
255 |
256 |
Pez
257 |

These Pez candies were not explicitly mentioned or even remotely obvious. However, some detectives managed to spot the Hulk and Iron Man Pez on a table in Thor's house during Rocket and Hulk's visit to New Asgard.

258 |
259 |
260 |
Hulk-inspired Ben & Jerry's
261 |

Wong names 'Hunka-Hulka Burning Fudge' as his favorite Ben & Jerry's flavor, preferring it over 'Stark Raving Hazelnuts' in Infinity War. In Endgame, Hulk is spotted eating a very large tub of 'Hunka-Hulka Burning Fudge' while discussing the location of the infinity stones with the Avengers.

262 |
263 |
264 |
Shawarma
265 |

During the time heist back to New York 2012, Thor mentions that they're heading to lunch. It is not mentioned, but we all know that they are planning to have shawarma, as seen in the post-credits scene in The Avengers movie.

266 |
267 |
268 |
Asgardian Ale
269 |

In the scene where Valkyrie explains that Thor only comes around once a month for supplies, we catch a glimpse of a barrell of Asgardian Ale. Although something tells us that it's not the only alcohol that Bro Thor drinks exclusively...

270 |
271 |
272 |
More than 25 food items mentioned!
273 |

The first mention? In the opening scene of Endgame, Hawkeye and his family were planning to eat hot dogs! Other examples include Nat and her peanut butter sandwich, Hulk eating at a diner, Frigga sending soup to Loki and of course, tacos and juice pops!

274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
06A Tribute to the Avengers
284 |
285 |
286 |

287 | Asgard's #1
Weight-Gain RegimentClinically proven anti-workout plan to help you gain up to 4.5 times the weight. Why even diet and exercise?

288 |
289 |
Weight Gain Regiment
290 |
291 |
Before
292 |
After
293 |
294 |
295 |
296 |
297 |

298 | Reviewed by health expert, Dr. Stephen Strange, M.D., Ph.D.: "No amount of sorcery can fix this thing." Individual results may vary. Please consult your doctor if you experience discomfort or if you show symptoms of heart disease, stroke, high blood pressure or diabetes.

299 |
300 |
301 |
302 |
303 |
304 |
305 |
07A Tribute to the Avengers
306 |
307 |
308 | Know Your GauntletsWhen all the Infinity Stones are united in the Gauntlet, the wearer wields unlimited power.
309 |
310 |
311 |
312 |
313 |
Infinity Gauntlet
314 |

The Infinity Gauntlet was a powerful metallic glove that was designed to channel the power of all six Infinity Stones. It was made by the ruler of Nidavellir, King Eitri. We don't know what it is made of, but our best guess is Uru - a metal unique to Nidavellir and the same metal used to forge Mjölnir and Stormbreaker.

315 |
316 |
317 |
318 |
319 |
320 |
Nano Gauntlet
321 |

The Nano Gauntlet was a glove made of nano-technology created by Stark, Banner and Rocket Raccoon in 2023. It was designed to allow the user to channel the powers of the Infinity Stones in a manner similar to the Infinity Gauntlet, although the effects of wielding it were far more damaging to the user than the Infinity Gauntlet.

322 |
323 |
324 |
325 |
326 |
327 |
328 |
08A Tribute to the Avengers
329 |
330 |
Know Your StonesA brief introduction to all the stones and who have held the stones. * indicates that the holder held the stone barehanded.
331 |
With all six stones, I can simply snap my fingers, they would all cease to exist. I call that mercy.
332 |
333 |

Tessarect: a blue cube which holds the Space Stone. This stone gives the user power over space and can create a portal from one part of the universe to another. The Space Stone has been held by: Odin, the Norwegian priest, Red Skull, Howard Stark, Mar-vell, Captain Marvel, Michelle Rambeau, Goose, Nick Fury, Hawkeye, Dr Selvig, Tony Stark, Bruce Banner, Loki, Thor, Ebony Maw, Thanos*

334 |

Hurling Gamora off the cliff (or anyone whom you love) nets you the Soul Stone. It’s unclear what the Soul Stone’s powers are in the film universe. In the comics, the gem allows the holder to capture and control others’ souls. Only two have held the Soul Stone: Thanos*, Hawkeye*.

335 |
336 |
337 |

Aether: a manifestation of The Reality Stone which grants the user power to manipulate matter. The Reality Stone has been held by: Malekith, Bor, Jane Foster, Sif the Collector, Thanos* and Rocket Raccoon

338 |
339 |
340 |

Necklace called the Eye of Agomoto is where the Time Stone is hidden. The Time Stone grants its owner the power to re-wind or fast-forward time. The Time Stone was only held by the Ancient One and Doctor Strange before Thanos got his hands on it.

341 |

Orb that contains the Power Stone seems to be a popular item across the universe. The Power Stone bestows upon its holder a lot of energy — the sort that you could use to destroy an entire planet. The Celestial, Star-Lord*, Korath, the broker, Gamora, Drax, the Collector, the Collector's assistant*, Nebula, Ronan*, Nova Prime, Thanos*, and War Machine have all held the Power Stone.

342 |

Scepter. Loki's Scepter which could counter the immense enery of the Tessarect. Turns out, it's the Mind Stone! This yellow stone allows the user to control the minds of others and have been held by: Thanos*, Loki, Bruce Banner, Black Widow, Agent Sitwell, Agent Crossbones, Baron Strucker, Tony Stark, Ultron*, Vision, Captain America, Ant-Man

343 |
344 | 345 |
346 |
Besides Thanos, who has held all six stones?
347 |
The participants of the "gauntlet hot potato" (as the MCU writers cutely call it): Professor Hulk, Hawkeye, Nebula, Black Panther, Spider-Man, Captain Marvel and Iron Man. Captain America has also carried all six stones to return them to their original timelines in what we'll call the Infinity Briefcase.
Infinity Stones 348 |
349 |
350 |
351 |
352 |
353 |
354 |

355 | I
can do this all day.

356 |
357 |
358 |
359 | Missing The Avengers?Me too. But not to worry, our overloards at Disney have graced us with upcoming movies and series featuring most of the Avengers.
360 |
Black Widow Movie 361 |
362 |
363 | Black Widow
364 |

365 | May 1, 2020. Following the events of the Civil War, Natasha Romanoff is on the run from the government, and finds herself on her own, forced to deal with "some of the red in her ledger".

366 |
367 |
368 |
Falcon & The Winter Soldier 369 |
370 |
The Falcon & The Winter Soldier
371 |

August 2020. The Falcon wields the Captain America shield and fights alongside the Winter Soldier.

372 |
373 |
374 |
WandaVision 375 |
376 |
WandaVision
377 |

Spring 2021. Speculation: To be set in the 1950s, Wanda plays with different realities to carve out a perfect life with Vision.

378 |
379 |
380 |
Doctor Strange in the Multiverse of Universe 381 |
382 |
383 | Doctor Strange in the Multiverse of Universe
384 |

May 7 2021. Anndddd Wanda messes up and now the magician is here to save the day.

385 |
386 |
387 |
Loki 388 |
389 |
Loki
390 |

391 | Spring 2021. The series would be exploring what Loki did after he stole the Tesseract during the Time Heist in Avengers: Endgame and created a new timeline.

392 |
393 |
394 |
Hawkeye 395 |
396 |
397 | Hawkeye
398 |

Fall 2021. Hawkeye returns and takes on the responsibility to train Kate Bishop to become the next Hawkeye.

399 |
400 |
401 |
Thor Love & Thunder 402 |
403 |
404 | Thor: Love & Thunder
405 |

November 5 2021. We don't know much, except that there will be the first Female Thor.

406 |
407 |
408 |
Special Mention. Black Panther 2 is set to release on May 6, 2022.
409 |
410 |
10A Tribute to the Avengers
411 |
412 |
413 |
414 |
415 |
11A Tribute to the Avengers
416 |
417 |
418 |
A Shout-out to the Ones We Will Miss the Most
419 |
420 |
421 |
422 |
Iron Man/Tony Stark
423 |

424 | In Endgame, we had to say goodbye to the most important Avenger. Even though he wasn't the leader of the Avengers, Iron Man has always been the team's driving force. His charisma and savvy helped the team bond, and he was instrumental in giving the Avengers a good public face. Tony was also the one bankrolling the Avengers — he built the tower they used as a home base, and he built their new upstate headquarters. Tony is literally giving them a place to assemble.

425 |

There's perhaps no greater endorsement of Iron Man's status as the most important Avenger than Captain America's word. Cap called Tony "Earth's best defender." It's not hyperbolic, as over a ten-year career as a superhero, Tony truly has cemented himself as the greatest hero around.

426 |
427 |
428 |
429 |
430 |
431 |

432 | What will we miss the most? Honestly? His quips and memorable quotes. From the iconic "Genius, billionaire, playboy, philanthropist" line to coming up with fitting names — Lebowski for Bro Thor and Build-A-Bear for Rocket immediately come to mind — we are not convinced that there will be another character who can pull off throwing insults so flawlessly.

433 |

434 | Our only consolation is that there is hope that Morgan Stark will grow up and follow in the footsteps of her father. Until then, we'll just have to watch YouTube compilations of Tony Stark's best moments. Here's to Iron Man and Robert Downey Jr, the anchor of the Marvel Cinematic Universe.

435 |
436 |
437 |
438 |
439 |
Black Widow
440 |
441 |
Black Widow
442 |

We didn't care much for Black Widow and had very little emotional attachment to her character. Turns out, all it needed to make her death the hardest for us was her complete dedication to the Avengers for 5 years post Thanos-snap and a tear-jerking sacrificial jump, with her best friend unwillingly sending her off.

443 |
444 |
Corvus Glaive and Proxima Midnight
445 |
446 |
Proxima Midnight & Corvus Glaive
447 |

448 | Wait, hear us out. Proxima Midnight & Corvus Glaive were actually married. Joe Russo mentioned that they did have plans to explore their relations but the plot threads were ultimately cut for time.. We're just lowkey disappointed that we didn't get that story.

449 |
450 |
Cassie Lang
451 |
452 |
Young Cassie
453 |

454 | We are glad she wasn't snapped and we know teenage Cassie is important to pave the way to the Young Avengers. But man, Abby Ryder Johnson is the best child actor we've seen and we sure will miss this little peanut.

455 |
456 |
457 |
458 |
459 |
460 |
12A Tribute to the Avengers
461 |
462 |
Captain America/ Steve Rogers
Captain America Wallpaper 463 |
464 | Oh boy, we have so many questions. Perhaps the most hotly debated Endgame plot point is the fate of Captain America, who travels back in time to live out his life with Peggy Carter. It is established that Peggy had a husband and two kids, and some fans have theorized that Steve Rogers secretly was this husband all along. Others have stated that Steve created an alternate timeline when he went back to live with Peggy, and somehow got back to the mainline MCU as an old man. In conclusion, we are unsure. All we know is that the shield has been passed onto the Falcon (but he will not take on the name like in the comics, as the name of a new Disney+ show is The Falcon and the Winter Soldier) and Chris Evans is done with the MCU. So maybe we won't have to say goodbye to Captain America, but we'll unfortunately have to bid farewell to our favorite Chris.
465 |
466 | If there’s one thing I’ve learned about working with Marvel, they don’t leave stones unturned. They really don’t.
467 |

– Chris Evans

468 |
469 |
Consolation VideosFor when you're missing your favorite actors, we've got some YouTube videos for nostalgia.
470 |
471 |
Image for Show 472 |
50 Marvel Questions
473 |
Endgame stars answer 50 of the most Googled questions about Marvel. The questions are weird, but the video is 7 minutes of charisma.
Watch video 474 |
475 |
Image for Show 476 |
Most Likely To...
477 |
Watch the OG6 Avengers answer questions in this terribly short video (but it's the only one we got).
Watch video 478 |
479 |
Image for Show 480 |
The Thanos Snap
481 |
The cast takes a meaningless Buzzfeed quiz to learn what their fates would be if faced with a real life snap from Thanos.
Watch video 482 |
483 |
Image for Show 484 |
Netflix's The Chef Show
485 |
Watch Jon Favreau taste food with RDJ, Tom Holland, and the Russo brothers. Only available on Netflix, sorry.
Watch teaser 486 |
487 |
488 |
489 |
490 |
491 |
Back to Cover
492 |
493 |
494 |

That's the hero gig.

495 |
496 |

Part of the journey is the end.

497 |
498 |
499 |
500 |
501 |

Click 'Next' on the top right to see more layouts. Under 900px, it will be a single page instead.

502 |
Part of the CSS Grid collection.
503 |
504 | 505 | 506 | 507 | --------------------------------------------------------------------------------