├── Slide Show ├── 1.jpg ├── 2.jpg ├── 3.png └── index.html ├── Dark Arts ├── img │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── section.jpg │ └── showcase.jpg ├── css │ ├── simplelightbox.min.css │ └── style.css ├── index.html └── js │ └── simple-lightbox.min.js ├── Blur Landing Page ├── logo.jpg ├── fundo.jpg ├── index.html └── style.css ├── Galeria Animada ├── img │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ └── 5.jpg ├── style.css └── index.html ├── Hamburger Menu ├── img │ └── bruxas.jpg ├── css │ ├── style.css │ └── menu.css └── index.html ├── Dynamic Landing Page ├── img │ ├── 1.jpg │ ├── 2.jpg │ └── 3.jpg ├── css │ └── style.css ├── index.html └── js │ └── main.js ├── Nav Bootstrap ├── css │ └── style.css └── index.html ├── README.md ├── Nav Side ├── script.js ├── index.html └── style.css ├── Navbar ├── app.js ├── index.html └── style.css ├── Nav Dropdown ├── script.js ├── index.html └── style.css ├── Nav ├── style.css └── index.html ├── Tabelas ├── style.css └── index.html ├── Nav Sticky ├── script.js ├── style.css └── index.html ├── Navigation Dropdown ├── style.css └── index.html └── Contact Form ├── style.css └── index.html /Slide Show/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Slide Show/1.jpg -------------------------------------------------------------------------------- /Slide Show/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Slide Show/2.jpg -------------------------------------------------------------------------------- /Slide Show/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Slide Show/3.png -------------------------------------------------------------------------------- /Dark Arts/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Dark Arts/img/1.jpg -------------------------------------------------------------------------------- /Dark Arts/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Dark Arts/img/2.jpg -------------------------------------------------------------------------------- /Dark Arts/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Dark Arts/img/3.jpg -------------------------------------------------------------------------------- /Dark Arts/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Dark Arts/img/4.jpg -------------------------------------------------------------------------------- /Dark Arts/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Dark Arts/img/5.jpg -------------------------------------------------------------------------------- /Dark Arts/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Dark Arts/img/6.jpg -------------------------------------------------------------------------------- /Blur Landing Page/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Blur Landing Page/logo.jpg -------------------------------------------------------------------------------- /Dark Arts/img/section.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Dark Arts/img/section.jpg -------------------------------------------------------------------------------- /Dark Arts/img/showcase.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Dark Arts/img/showcase.jpg -------------------------------------------------------------------------------- /Galeria Animada/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Galeria Animada/img/1.jpg -------------------------------------------------------------------------------- /Galeria Animada/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Galeria Animada/img/2.jpg -------------------------------------------------------------------------------- /Galeria Animada/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Galeria Animada/img/3.jpg -------------------------------------------------------------------------------- /Galeria Animada/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Galeria Animada/img/4.jpg -------------------------------------------------------------------------------- /Galeria Animada/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Galeria Animada/img/5.jpg -------------------------------------------------------------------------------- /Blur Landing Page/fundo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Blur Landing Page/fundo.jpg -------------------------------------------------------------------------------- /Hamburger Menu/img/bruxas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Hamburger Menu/img/bruxas.jpg -------------------------------------------------------------------------------- /Dynamic Landing Page/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Dynamic Landing Page/img/1.jpg -------------------------------------------------------------------------------- /Dynamic Landing Page/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Dynamic Landing Page/img/2.jpg -------------------------------------------------------------------------------- /Dynamic Landing Page/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-akira/front-end/HEAD/Dynamic Landing Page/img/3.jpg -------------------------------------------------------------------------------- /Nav Bootstrap/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #263940; 3 | } 4 | 5 | .bg-dark { 6 | background-color: black !important; 7 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Front-End 2 | 3 | Small front-end experiments: layouts, navigation bars, menus, forms, etc. 4 | 5 | You just have to clone the repository: 6 | 7 | ``` 8 | git clone https://github.com/the-akira/front-end.git 9 | ``` -------------------------------------------------------------------------------- /Slide Show/index.html: -------------------------------------------------------------------------------- 1 | 26 | -------------------------------------------------------------------------------- /Nav Side/script.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | $(function() { // DOM Ready 3 | // Toggle navigation 4 | $('#nav-toggle').click(function() { 5 | this.classList.toggle("active"); 6 | // If sidebar is visible: 7 | if ($('body').hasClass('show-nav')) { 8 | // Hide sidebar 9 | $('body').removeClass('show-nav'); 10 | } else { // If sidebar is hidden: 11 | $('body').addClass('show-nav'); 12 | // Display sidebar 13 | } 14 | }); 15 | }); 16 | })(jQuery); -------------------------------------------------------------------------------- /Dynamic Landing Page/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | font-family: 'Quicksand', sans-serif; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | text-align: center; 14 | height: 100vh; 15 | color: white; 16 | } 17 | 18 | #time { 19 | font-size: 8rem; 20 | } 21 | 22 | h1 { 23 | margin-bottom: 3rem; 24 | } 25 | 26 | h2 { 27 | margin-bottom: 0.5rem; 28 | opacity: 0.6; 29 | } 30 | 31 | @media(max-width: 700px) { 32 | #time { 33 | font-size: 6rem; 34 | } 35 | } -------------------------------------------------------------------------------- /Navbar/app.js: -------------------------------------------------------------------------------- 1 | const navSlide = () => { 2 | const burger = document.querySelector('.burger'); 3 | const nav = document.querySelector('.nav-links'); 4 | const navLinks = document.querySelectorAll('.nav-links li'); 5 | 6 | //Toggle Nav 7 | burger.addEventListener('click', () => { 8 | nav.classList.toggle('nav-active'); 9 | 10 | //Animate Links 11 | navLinks.forEach((link, index) => { 12 | if (link.style.animation) { 13 | link.style.animation = ''; 14 | } else { 15 | link.style.animation = `navLinkFade 0.5s ease forwards ${index/7 + 0.5}s`; 16 | } 17 | }); 18 | //Burger Animation 19 | burger.classList.toggle('toggle'); 20 | }); 21 | 22 | } 23 | 24 | navSlide(); -------------------------------------------------------------------------------- /Dynamic Landing Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dynamic Landing Page 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 | 17 | 18 |

19 |

Qual é o seu foco do dia?

20 |

21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Nav Dropdown/script.js: -------------------------------------------------------------------------------- 1 | (function($) { // Begin jQuery 2 | $(function() { // DOM ready 3 | // If a link has a dropdown, add sub menu toggle. 4 | $('nav ul li a:not(:only-child)').click(function(e) { 5 | $(this).siblings('.nav-dropdown').toggle(); 6 | // Close one dropdown when selecting another 7 | $('.nav-dropdown').not($(this).siblings()).hide(); 8 | e.stopPropagation(); 9 | }); 10 | // Clicking away from dropdown will remove the dropdown class 11 | $('html').click(function() { 12 | $('.nav-dropdown').hide(); 13 | }); 14 | // Toggle open and close nav styles on click 15 | $('#nav-toggle').click(function() { 16 | $('nav ul').slideToggle(); 17 | }); 18 | // Hamburger to X toggle 19 | $('#nav-toggle').on('click', function() { 20 | this.classList.toggle('active'); 21 | }); 22 | }); // end DOM ready 23 | })(jQuery); // end jQuery -------------------------------------------------------------------------------- /Navbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Navegação 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Nav/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: gray; 3 | } 4 | 5 | .navbar { 6 | background-color: black !important; 7 | margin-top: 10px; 8 | } 9 | 10 | .navbar-brand { 11 | color: white !important; 12 | } 13 | 14 | .navbar-default .navbar-nav>li>a { 15 | color: white !important; 16 | } 17 | 18 | .jumbotron { 19 | background-color: black; 20 | color: white; 21 | border: 1px solid white; 22 | } 23 | 24 | .navbar-toggle { 25 | border: none; 26 | background: transparent !important; 27 | } 28 | 29 | .navbar-toggle:hover { 30 | background: transparent !important; 31 | } 32 | 33 | .navbar-toggle .icon-bar { 34 | width: 22px; 35 | transition: all 0.2s; 36 | } 37 | 38 | .navbar-toggle .top-bar { 39 | transform: rotate(45deg); 40 | transform-origin: 10% 10%; 41 | } 42 | 43 | .navbar-toggle .middle-bar { 44 | opacity: 0; 45 | } 46 | 47 | .navbar-toggle .bottom-bar { 48 | transform: rotate(-45deg); 49 | transform-origin: 10% 90%; 50 | } 51 | 52 | .navbar-toggle.collapsed .top-bar { 53 | transform: rotate(0); 54 | } 55 | 56 | .navbar-toggle.collapsed .middle-bar { 57 | opacity: 1; 58 | } 59 | 60 | .navbar-toggle.collapsed .bottom-bar { 61 | transform: rotate(0); 62 | } -------------------------------------------------------------------------------- /Tabelas/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Tahoma', sans-serif; 3 | background: #333; 4 | color: #fff; 5 | } 6 | 7 | h2 { 8 | text-align: center; 9 | } 10 | 11 | .col { 12 | float: left; 13 | width: 33.3%; 14 | padding: 8px; 15 | box-sizing: border-box; 16 | } 17 | 18 | .price-box { 19 | background: #fff; 20 | color: #555; 21 | list-style-type: none; 22 | border: 1px solid #555; 23 | margin: 0; 24 | padding: 0; 25 | transition: 0.3s; 26 | } 27 | 28 | .price-box:hover, 29 | .price-box.best { 30 | box-shadow: 0 10px 15px 0 #000; 31 | } 32 | 33 | .price-box .header { 34 | background-color: #111; 35 | color: #fff; 36 | font-size: 25px; 37 | } 38 | 39 | .price-box .header.header-green { 40 | background-color: #4CAf50; 41 | } 42 | 43 | .price-box li { 44 | padding: 20px; 45 | border-bottom: 1px solid #eee; 46 | text-align: center; 47 | } 48 | 49 | .price-box .emph { 50 | background-color: #f4f4f4; 51 | font-size: 20px; 52 | } 53 | 54 | .button { 55 | background-color: #4CAf50; 56 | border: none; 57 | color: #fff; 58 | padding: 10px 15px; 59 | text-align: center; 60 | text-decoration: none; 61 | font-size: 18px; 62 | } 63 | 64 | @media(max-width:700px) { 65 | .col { 66 | width: 100%; 67 | } 68 | } -------------------------------------------------------------------------------- /Nav Sticky/script.js: -------------------------------------------------------------------------------- 1 | /* Begin jQuery */ ; 2 | (function($) { 3 | $(window).scroll(function(e) { 4 | if ($(window).scrollTop() >= $("header").height() + 30) { 5 | $(".sticky").addClass("fixed"); 6 | $(".content").addClass("margin"); 7 | 8 | } else { 9 | $(".sticky").removeClass("fixed"); 10 | $(".content").removeClass("margin"); 11 | } 12 | e.stopPropagation(); 13 | 14 | }); 15 | // DOM ready 16 | $(function() { 17 | // Toggle open and close nav styles on click 18 | $('#nav-toggle').click(function() { 19 | $('nav ul').toggle(); 20 | }); 21 | // Toggle active CSS class (X - close) 22 | document.querySelector("#nav-toggle").addEventListener("click", function() { 23 | this.classList.toggle("active"); 24 | }); 25 | // If a link has a dropdown, add sub menu toggle. 26 | $('nav ul li > a:not(:only-child)').click(function(e) { 27 | $(this).siblings('.nav-dropdown').toggle(); 28 | // Close one dropdown when selecting another 29 | $('.nav-dropdown').not($(this).siblings()).hide(); 30 | e.stopPropagation(); 31 | }); 32 | // Clicking away from dropdown will remove the dropdown class 33 | $('html').click(function() { 34 | $('.nav-dropdown').hide(); 35 | }); 36 | }); 37 | })(jQuery); -------------------------------------------------------------------------------- /Hamburger Menu/css/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: rgba(0, 0, 0, 0.72); 3 | --overlay-color: rgba(0, 0, 0, 0.92); 4 | --menu-speed: 0.75s; 5 | } 6 | 7 | * { 8 | box-sizing: border-box; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | body { 14 | font-family: 'Roboto', sans-serif; 15 | line-height: 1.4; 16 | } 17 | 18 | .container { 19 | max-width: 960px; 20 | margin: auto; 21 | overflow: hidden; 22 | padding: 0 3rem; 23 | } 24 | 25 | .showcase { 26 | background-color: var(--primary-color); 27 | color: white; 28 | height: 100vh; 29 | position: relative; 30 | } 31 | 32 | .showcase:before { 33 | content: ''; 34 | background: url('../img/bruxas.jpg') no-repeat center center/cover; 35 | position: absolute; 36 | top: 0; 37 | left: 0; 38 | width: 100%; 39 | height: 100%; 40 | z-index: -1; 41 | } 42 | 43 | .showcase .showcase-inner { 44 | display: flex; 45 | flex-direction: column; 46 | align-items: center; 47 | justify-content: center; 48 | text-align: center; 49 | height: 100%; 50 | } 51 | 52 | .showcase h1 { 53 | font-size: 4rem; 54 | } 55 | 56 | .showcase p { 57 | font-size: 1.3rem; 58 | } 59 | 60 | .btn { 61 | display: inline-block; 62 | border: none; 63 | background-color: var(--primary-color); 64 | color: white; 65 | padding: 0.75rem 1.5rem; 66 | margin-top: 1rem; 67 | text-decoration: none; 68 | transition: opacity 1s ease-in; 69 | } 70 | 71 | .btn:hover { 72 | opacity: 0.8; 73 | } -------------------------------------------------------------------------------- /Navigation Dropdown/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #3E4649; 3 | color: #f7f7f7; 4 | font-family: 'Montserrat', sans-serif; 5 | } 6 | 7 | h1, 8 | h2 { 9 | font-weight: bold; 10 | } 11 | 12 | p { 13 | font-size: 16px; 14 | color: #cdcdcd; 15 | } 16 | 17 | .navbar { 18 | margin-bottom: 0; 19 | } 20 | 21 | .jumbotron { 22 | background: #27A967; 23 | color: white; 24 | text-align: center; 25 | } 26 | 27 | .jumbotron p { 28 | color: white; 29 | font-size: 26px; 30 | } 31 | 32 | .navbar-inverse { 33 | background: #2E2F31; 34 | border: 0; 35 | } 36 | 37 | .dropdown-menu { 38 | background: #2E2F31; 39 | border-radius: 0; 40 | border: 0; 41 | } 42 | 43 | .navbar-inverse .navbar-nav li a { 44 | color: #f7f7f7; 45 | font-size: 16px; 46 | } 47 | 48 | .navbar-inverse .navbar-nav li a:hover { 49 | background: #27A967; 50 | } 51 | 52 | .navbar-inverse .navbar-nav .dropdown-menu li a:hover { 53 | background: #2C463C; 54 | } 55 | 56 | .dropdown-menu li a { 57 | padding: 10px; 58 | } 59 | 60 | .btn-primary { 61 | color: #fff; 62 | background-color: transparent; 63 | border-color: white; 64 | margin-bottom: 5px; 65 | } 66 | 67 | .btn-primary:hover { 68 | color: #27A967; 69 | background-color: white; 70 | border-color: white; 71 | } 72 | 73 | .glyphicon-large { 74 | font-size: 100px; 75 | } 76 | 77 | .call-to-action { 78 | text-align: center; 79 | } 80 | 81 | .call-to-action p { 82 | margin-bottom: 30px; 83 | font-family: sans-serif; 84 | } -------------------------------------------------------------------------------- /Galeria Animada/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Indie Flower', sans-serif; 9 | font-size: 1.3rem; 10 | background: #f9f9f9; 11 | } 12 | 13 | a { 14 | color: #333; 15 | text-decoration: none; 16 | } 17 | 18 | .container { 19 | max-width: 1100px; 20 | margin: auto; 21 | overflow: auto; 22 | padding: 0 2rem; 23 | } 24 | 25 | .main-header { 26 | height: 55vh; 27 | display: flex; 28 | flex-direction: column; 29 | align-items: center; 30 | justify-content: center; 31 | text-align: center; 32 | padding: 2rem; 33 | } 34 | 35 | .main-header h1 { 36 | font-size: 4rem; 37 | margin-bottom: 2rem; 38 | line-height: 1.2; 39 | } 40 | 41 | .main-header h1 span { 42 | color: #b50d10; 43 | } 44 | 45 | .main-header p { 46 | font-size: 2rem; 47 | } 48 | 49 | img { 50 | width: 100%; 51 | } 52 | 53 | .card { 54 | display: grid; 55 | grid-template-columns: 1fr 1fr; 56 | grid-gap: 2rem; 57 | background: #f1f1f1; 58 | margin-bottom: 2rem; 59 | } 60 | 61 | .card h3 { 62 | margin-bottom: 2rem; 63 | } 64 | 65 | .card>div { 66 | padding: 2rem; 67 | } 68 | 69 | .card:nth-child(even) img { 70 | order: 2; 71 | } 72 | 73 | .btn { 74 | display: inline-block; 75 | background: #000; 76 | color: #fff; 77 | padding: 0.8rem 1.8rem; 78 | margin-top: 2rem; 79 | cursor: pointer; 80 | } 81 | 82 | .btn:hover { 83 | opacity: 0.8; 84 | } 85 | 86 | @media(max-width: 700px) { 87 | .card { 88 | display: block; 89 | } 90 | } -------------------------------------------------------------------------------- /Hamburger Menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hamburger Menu CSS 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 | 29 |
30 |
31 |
32 |
33 |
34 |
35 |

The Witches Sabbath

36 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

37 | Read More 38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /Tabelas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tabelas Responsivas 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Tabela de Preços Responsiva com CSS3

14 |
15 | 25 |
26 |
27 | 37 |
38 |
39 | 49 |
50 | 51 | 52 | -------------------------------------------------------------------------------- /Contact Form/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background: #707070; 7 | color: #c0c4c4; 8 | line-height: 1.6; 9 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 10 | padding: 1em; 11 | } 12 | 13 | .container { 14 | max-width: 1170px; 15 | margin-left: auto; 16 | margin-right: auto; 17 | padding: 1em; 18 | } 19 | 20 | ul { 21 | list-style: none; 22 | padding: 0; 23 | } 24 | 25 | .brand { 26 | text-align: center; 27 | } 28 | 29 | .brand span { 30 | color: white; 31 | } 32 | 33 | .wrapper { 34 | box-shadow: 0 0 20px 0 rgba(72, 94, 116, 0.7); 35 | } 36 | 37 | .wrapper>* { 38 | padding: 1em; 39 | } 40 | 41 | .company-info { 42 | background: black; 43 | } 44 | 45 | .company-info h3, 46 | .company-info ul { 47 | text-align: center; 48 | margin: 0 0 1rem 0; 49 | } 50 | 51 | .contact { 52 | background: #383838; 53 | } 54 | 55 | /* FORM STYLES */ 56 | 57 | .contact form { 58 | display: grid; 59 | grid-template-columns: 1fr 1fr; 60 | grid-gap: 20px; 61 | } 62 | 63 | .contact form label { 64 | display: block; 65 | } 66 | 67 | .contact form p { 68 | margin: 0; 69 | } 70 | 71 | .contact form .full { 72 | grid-column: 1 / 3; 73 | } 74 | 75 | .contact form button, 76 | .contact form input, 77 | .contact form textarea { 78 | width: 100%; 79 | padding: 1em; 80 | border: 1px solid gray; 81 | } 82 | 83 | textarea { 84 | resize: none; 85 | } 86 | 87 | .contact form button { 88 | background: black; 89 | color: white; 90 | border: 0; 91 | text-transform: uppercase; 92 | } 93 | 94 | .contact form button:hover, 95 | .contact form button:focus { 96 | background: gray; 97 | color: black; 98 | outline: 0; 99 | transition: background-color 2s ease-out; 100 | } 101 | 102 | /* TELAS MAIORES */ 103 | @media(min-width:700px) { 104 | .wrapper { 105 | display: grid; 106 | grid-template-columns: 1fr 2fr; 107 | } 108 | 109 | .wrapper>* { 110 | padding: 2em; 111 | } 112 | 113 | .company-info h3, 114 | .company-info ul, 115 | .brand { 116 | text-align: left; 117 | } 118 | } -------------------------------------------------------------------------------- /Contact Form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Contact Form Grid 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Contact Form Grid

17 |
18 |
19 |

Contact Form Grid

20 |
    21 |
  • Rua Isaac Newton
    • 22 |
  • (48) 98752-4450
    • 23 |
  • atendimento@atendimento.com
    • 24 |
25 |
26 |
27 |

Nos envie um Email

28 |
29 |

30 | 31 | 32 |

33 |

34 | 35 | 36 |

37 |

38 | 39 | 40 |

41 |

42 | 43 | 44 |

45 |

46 | 47 | 48 |

49 |

50 | 51 |

52 |
53 |
54 |
55 |
56 | 57 | 58 | -------------------------------------------------------------------------------- /Navbar/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | 7 | nav { 8 | display: flex; 9 | justify-content: space-around; 10 | align-items: center; 11 | min-height: 8vh; 12 | background-color: #183c60; 13 | font-family: 'Poppins', sans-serif; 14 | } 15 | 16 | .logo { 17 | color: rgb(226, 226, 226); 18 | text-transform: uppercase; 19 | letter-spacing: 5px; 20 | font-size: 20px; 21 | } 22 | 23 | .nav-links { 24 | display: flex; 25 | justify-content: space-around; 26 | width: 30%; 27 | } 28 | 29 | .nav-links li { 30 | list-style: none; 31 | } 32 | 33 | .nav-links a { 34 | color: rgb(226, 226, 226); 35 | text-decoration: none; 36 | letter-spacing: 3px; 37 | font-weight: bold; 38 | font-size: 14px; 39 | } 40 | 41 | .burger { 42 | display: none; 43 | cursor: pointer; 44 | } 45 | 46 | .burger div { 47 | width: 25px; 48 | height: 3px; 49 | background-color: rgb(226, 226, 226); 50 | margin: 5px; 51 | transition: all 0.3s ease; 52 | } 53 | 54 | @media screen and (max-width:1024px) { 55 | .nav-links { 56 | width: 60%; 57 | } 58 | } 59 | 60 | /*@media screen and (max-width:768px){*/ 61 | @media screen and (min-width: 10px) { 62 | body { 63 | overflow-x: hidden; 64 | } 65 | 66 | .nav-links { 67 | position: absolute; 68 | right: 0px; 69 | height: 92vh; 70 | top: 8vh; 71 | background-color: #183c60; 72 | display: flex; 73 | flex-direction: column; 74 | align-items: center; 75 | width: 50%; 76 | transform: translateX(100%); 77 | transition: transform 0.5s ease-in; 78 | } 79 | 80 | .nav-links li { 81 | opacity: 0; 82 | } 83 | 84 | .burger { 85 | display: block; 86 | } 87 | } 88 | 89 | .nav-active { 90 | transform: translateX(0%); 91 | } 92 | 93 | @keyframes navLinkFade { 94 | from { 95 | opacity: 0; 96 | transform: translateX(50px); 97 | } 98 | 99 | to { 100 | opacity: 1; 101 | transform: translateX(0px); 102 | } 103 | } 104 | 105 | .toggle .line1 { 106 | transform: rotate(-45deg) translate(-5px, 6px); 107 | } 108 | 109 | .toggle .line2 { 110 | opacity: 0; 111 | } 112 | 113 | .toggle .line3 { 114 | transform: rotate(45deg) translate(-5px, -6px); 115 | } -------------------------------------------------------------------------------- /Blur Landing Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hacker Room 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 |
Seja bem vindo à Hacker Room
19 |
20 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. 21 |
22 |
23 |
24 |
25 |
26 |
27 | 28 |

Youtube

29 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

30 |
31 |
32 | 33 |

Cursos

34 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

35 |
36 |
37 | 38 |

Freelancing Projects

39 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | 48 |
49 |
50 |

Sobre nós

51 |

52 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 53 |

54 |
55 |
56 |
57 |
58 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /Nav Dropdown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Responsive Dropdown Navigation Bar 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | Logo 16 |
17 | 62 |
63 |
64 |
65 |

Navigation

66 |

Responsive Dropdown Navigation Bar.

67 |
68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /Blur Landing Page/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: rgba(0, 0, 0, 0.9); 3 | margin: 0; 4 | color: white; 5 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 6 | } 7 | 8 | .showcase::after { 9 | content: ''; 10 | height: 100vh; 11 | width: 100%; 12 | background-image: url(fundo.jpg); 13 | background-size: cover; 14 | background-repeat: no-repeat; 15 | background-position: center; 16 | display: block; 17 | filter: blur(10px); 18 | -webkit-filter: blur(10px); 19 | transition: all 1000ms; 20 | } 21 | 22 | .showcase:hover::after { 23 | filter: blur(0px); 24 | -webkit-filter: blur(0px); 25 | } 26 | 27 | .showcase:hover .content { 28 | filter: blur(2px); 29 | -webkit-filter: blur(2px); 30 | } 31 | 32 | .content { 33 | position: absolute; 34 | z-index: 1; 35 | top: 10%; 36 | left: 50%; 37 | margin-top: 105px; 38 | margin-left: -145px; 39 | width: 300px; 40 | height: 350px; 41 | text-align: center; 42 | transition: all 1000ms; 43 | } 44 | 45 | .content .logo { 46 | height: 180px; 47 | width: 180px; 48 | border-radius: 50%; 49 | border: 2px solid #333; 50 | } 51 | 52 | .content .title { 53 | font-size: 2.2rem; 54 | margin-top: 1rem; 55 | } 56 | 57 | .content .text { 58 | line-height: 1.7; 59 | margin-top: 1rem; 60 | } 61 | 62 | .container { 63 | max-width: 960px; 64 | margin: auto; 65 | overflow: hidden; 66 | padding: 4rem 1rem; 67 | } 68 | 69 | .grid-3 { 70 | display: grid; 71 | grid-gap: 20px; 72 | grid-template-columns: repeat(3, 1fr); 73 | } 74 | 75 | .grid-2 { 76 | display: grid; 77 | grid-gap: 20px; 78 | grid-template-columns: repeat(2, 1fr); 79 | } 80 | 81 | .center { 82 | text-align: center; 83 | margin: auto; 84 | } 85 | 86 | .bg-light { 87 | background: #f4f4f4; 88 | color: #333; 89 | } 90 | 91 | .bg-dark { 92 | background: #333; 93 | color: #f4f4f4; 94 | } 95 | 96 | footer { 97 | padding: 2.2rem; 98 | } 99 | 100 | footer p { 101 | margin: 0; 102 | } 103 | 104 | /* TELAS MENORES */ 105 | 106 | @media(max-width: 560px) { 107 | .showcase::after { 108 | height: 50vh; 109 | } 110 | 111 | .content { 112 | top: 5%; 113 | margin-top: 5px; 114 | } 115 | 116 | .content .logo { 117 | height: 140px; 118 | width: 140px; 119 | } 120 | 121 | .content .text { 122 | display: none; 123 | } 124 | 125 | .grid-3, 126 | .grid-2 { 127 | grid-template-columns: 1fr; 128 | } 129 | 130 | .services div { 131 | border-bottom: #333 dashed 1px; 132 | padding: 1.2rem 1rem; 133 | } 134 | } 135 | 136 | /* LANDSCAPE */ 137 | 138 | @media(max-height:500px) { 139 | 140 | .content .title, 141 | .content .text { 142 | display: none; 143 | } 144 | 145 | .content { 146 | top: 0; 147 | } 148 | } -------------------------------------------------------------------------------- /Nav Bootstrap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Admin Bootstrap 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 49 |
50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /Hamburger Menu/css/menu.css: -------------------------------------------------------------------------------- 1 | .menu-wrap { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | z-index: 1; 6 | } 7 | 8 | .menu-wrap .toggler { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | z-index: 2; 13 | cursor: pointer; 14 | width: 50px; 15 | height: 50px; 16 | opacity: 0; 17 | } 18 | 19 | .menu-wrap .hamburger { 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | z-index: 1; 24 | width: 60px; 25 | height: 60px; 26 | padding: 1rem; 27 | background: var(--primary-color); 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | } 32 | 33 | /* Hamburger Line */ 34 | .menu-wrap .hamburger>div { 35 | position: relative; 36 | width: 100%; 37 | height: 2px; 38 | background-color: white; 39 | display: flex; 40 | align-items: center; 41 | justify-content: center; 42 | transition: all 0.4s ease; 43 | } 44 | 45 | /* TOP AND BOTTOM LINES */ 46 | .menu-wrap .hamburger>div:before, 47 | .menu-wrap .hamburger>div:after { 48 | content: ''; 49 | position: absolute; 50 | z-index: 1; 51 | top: -10px; 52 | width: 100%; 53 | height: 2px; 54 | background: inherit; 55 | } 56 | 57 | /* MOVES LINE DOWN */ 58 | .menu-wrap .hamburger>div:after { 59 | top: 10px; 60 | } 61 | 62 | /* Toggler Animate */ 63 | .menu-wrap .toggler:checked+.hamburger>div { 64 | transform: rotate(135deg); 65 | } 66 | 67 | /* Turn Lines into X */ 68 | .menu-wrap .toggler:checked+.hamburger>div:before, 69 | .menu-wrap .toggler:checked+.hamburger>div:after { 70 | top: 0; 71 | transform: rotate(90deg); 72 | } 73 | 74 | /* Rotate on hover when checked */ 75 | .menu-wrap .toggler:checked:hover+.hamburger>div { 76 | transform: rotate(225deg); 77 | } 78 | 79 | /* Show MENU */ 80 | .menu-wrap .toggler:checked~.menu { 81 | visibility: visible; 82 | } 83 | 84 | .menu-wrap .toggler:checked~.menu>div { 85 | transform: scale(1); 86 | transition-duration: var(--menu-speed); 87 | } 88 | 89 | .menu-wrap .toggler:checked~.menu>div>div { 90 | opacity: 1; 91 | transition: opacity 0.4s ease; 92 | } 93 | 94 | .menu-wrap .menu { 95 | position: fixed; 96 | top: 0; 97 | left: 0; 98 | width: 100%; 99 | height: 100%; 100 | visibility: hidden; 101 | overflow: hidden; 102 | display: flex; 103 | align-items: center; 104 | justify-content: center; 105 | } 106 | 107 | .menu-wrap .menu>div { 108 | background: var(--overlay-color); 109 | border-radius: 50%; 110 | width: 200vw; 111 | height: 200vw; 112 | display: flex; 113 | flex: none; 114 | align-items: center; 115 | justify-content: center; 116 | transform: scale(0); 117 | transition: all 0.4s ease; 118 | } 119 | 120 | .menu-wrap .menu>div>div { 121 | text-align: center; 122 | max-width: 90vw; 123 | max-height: 100vh; 124 | opacity: 0; 125 | transition: opacity 0.4s ease; 126 | } 127 | 128 | .menu-wrap .menu>div>div>ul>li { 129 | list-style: none; 130 | color: white; 131 | font-size: 1.5rem; 132 | padding: 1rem; 133 | } 134 | 135 | .menu-wrap .menu>div>div>ul>li>a { 136 | color: inherit; 137 | text-decoration: none; 138 | transition: color 0.4s ease; 139 | } -------------------------------------------------------------------------------- /Dynamic Landing Page/js/main.js: -------------------------------------------------------------------------------- 1 | // DOM Elements 2 | const time = document.getElementById('time'); 3 | const greeting = document.getElementById('greeting'); 4 | const name = document.getElementById('name'); 5 | const focus = document.getElementById('focus'); 6 | 7 | // Options 8 | const showAmPm = true; 9 | 10 | // Show Time 11 | function showTime() { 12 | let today = new Date(); 13 | let hour = today.getHours(); 14 | let min = today.getMinutes(); 15 | let sec = today.getSeconds(); 16 | 17 | // Set AM or PM 18 | const amPm = hour >= 12 ? 'PM' : 'AM' 19 | 20 | // 12hr format 21 | hour = hour % 12 || 12; 22 | 23 | // Output Time 24 | time.innerHTML = `${addZero(hour)}:${addZero(min)}:${addZero(sec)} ${showAmPm ? amPm : ''}`; 25 | 26 | setTimeout(showTime, 1000); 27 | } 28 | 29 | // Add Zero 30 | function addZero(n) { 31 | return (parseInt(n, 10) < 10 ? '0' : '') + n; 32 | } 33 | 34 | // Set Background and Greeting 35 | function setBgGreet() { 36 | let today = new Date(); 37 | let hour = today.getHours(); 38 | 39 | if (hour < 12) { 40 | // Morning 41 | document.body.style.backgroundImage = "url('https://i.imgur.com/oldlvRy.jpg')"; 42 | greeting.textContent = 'Bom dia!'; 43 | } else if (hour < 18) { 44 | // Afternoon 45 | document.body.style.backgroundImage = "url('https://i.imgur.com/pOywIKk.jpg')"; 46 | greeting.textContent = 'Boa tarde!'; 47 | } else { 48 | // Evening 49 | document.body.style.backgroundImage = "url('https://i.imgur.com/2Ygt7IX.jpg')"; 50 | greeting.textContent = 'Boa noite!'; 51 | document.body.style.color = 'white'; 52 | } 53 | } 54 | 55 | // Get Name 56 | function getName() { 57 | if (localStorage.getItem('name') === null) { 58 | name.textContent = '[Enter Name]'; 59 | } else { 60 | name.textContent = localStorage.getItem('name'); 61 | } 62 | } 63 | 64 | // Set Name 65 | function setName(e) { 66 | if (e.type === 'keypress') { 67 | // Make sure enter is pressed 68 | if (e.which == 13 || e.keyCode == 13) { 69 | localStorage.setItem('name', e.target.innerText); 70 | name.blur(); 71 | } 72 | } else { 73 | localStorage.setItem('name', e.target.innerText); 74 | } 75 | } 76 | 77 | // Get Focus 78 | function getFocus() { 79 | if (localStorage.getItem('focus') === null) { 80 | focus.textContent = '[Enter Focus]'; 81 | } else { 82 | focus.textContent = localStorage.getItem('focus'); 83 | } 84 | } 85 | 86 | // Set Focus 87 | function setFocus(e) { 88 | if (e.type === 'keypress') { 89 | // Make sure enter is pressed 90 | if (e.which == 13 || e.keyCode == 13) { 91 | localStorage.setItem('focus', e.target.innerText); 92 | focus.blur(); 93 | } 94 | } else { 95 | localStorage.setItem('focus', e.target.innerText); 96 | } 97 | } 98 | 99 | name.addEventListener('keypress', setName); 100 | name.addEventListener('blur', setName); 101 | 102 | focus.addEventListener('keypress', setFocus); 103 | focus.addEventListener('blur', setFocus); 104 | 105 | // Run 106 | showTime(); 107 | setBgGreet(); 108 | getName(); 109 | getFocus(); -------------------------------------------------------------------------------- /Dark Arts/css/simplelightbox.min.css: -------------------------------------------------------------------------------- 1 | .sl-wrapper .sl-close,.sl-wrapper .sl-navigation button{height:44px;line-height:44px;font-family:Arial,Baskerville,monospace}.sl-wrapper .sl-close:focus,.sl-wrapper .sl-navigation button:focus{outline:0}body.hidden-scroll{overflow:hidden}.sl-overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:#fff;opacity:.7;display:none;z-index:1035}.sl-wrapper .sl-close,.sl-wrapper .sl-counter{top:30px;display:none;color:#000;position:fixed}.sl-wrapper{z-index:1040}.sl-wrapper button{border:0;background:0 0;font-size:28px;padding:0;cursor:pointer}.sl-wrapper button:hover{opacity:.7}.sl-wrapper .sl-close{right:30px;z-index:10060;margin-top:-14px;margin-right:-14px;width:44px;font-size:3rem}.sl-wrapper .sl-counter{left:30px;z-index:1060;font-size:1rem}.sl-wrapper .sl-navigation{width:100%;display:none}.sl-wrapper .sl-navigation button{position:fixed;top:50%;margin-top:-22px;width:22px;text-align:center;display:block;z-index:10060;color:#000}.sl-wrapper .sl-navigation button.sl-next{right:5px;font-size:2rem}.sl-wrapper .sl-navigation button.sl-prev{left:5px;font-size:2rem}@media (min-width:35.5em){.sl-wrapper .sl-navigation button{width:44px}.sl-wrapper .sl-navigation button.sl-next{right:10px;font-size:3rem}.sl-wrapper .sl-navigation button.sl-prev{left:10px;font-size:3rem}.sl-wrapper .sl-image img{border:0}}@media (min-width:50em){.sl-wrapper .sl-navigation button{width:44px}.sl-wrapper .sl-navigation button.sl-next{right:20px;font-size:3rem}.sl-wrapper .sl-navigation button.sl-prev{left:20px;font-size:3rem}.sl-wrapper .sl-image img{border:0}}.sl-wrapper .sl-image{position:fixed;-ms-touch-action:none;touch-action:none;z-index:10000}.sl-wrapper .sl-image img{margin:0;padding:0;display:block;border:0;width:100%;height:auto}.sl-wrapper .sl-image iframe{background:#000;border:0}@media (min-width:35.5em){.sl-wrapper .sl-image iframe{border:0}}@media (min-width:50em){.sl-wrapper .sl-image iframe{border:0}}.sl-wrapper .sl-image .sl-caption{display:none;padding:10px;color:#fff;background:rgba(0,0,0,.8);font-size:1rem;position:absolute;bottom:0;left:0;right:0}.sl-wrapper .sl-image .sl-caption.pos-top{bottom:auto;top:0}.sl-wrapper .sl-image .sl-caption.pos-outside{bottom:auto}.sl-wrapper .sl-image .sl-download{display:none;position:absolute;bottom:5px;right:5px;color:#000;z-index:1060}.sl-spinner{display:none;border:5px solid #333;border-radius:40px;height:40px;left:50%;margin:-20px 0 0 -20px;opacity:0;position:fixed;top:50%;width:40px;z-index:1007;-webkit-animation:pulsate 1s ease-out infinite;-moz-animation:pulsate 1s ease-out infinite;-ms-animation:pulsate 1s ease-out infinite;-o-animation:pulsate 1s ease-out infinite;animation:pulsate 1s ease-out infinite}.sl-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}.sl-transition{transition:-moz-transform ease .2s;transition:-ms-transform ease .2s;transition:-o-transform ease .2s;transition:-webkit-transform ease .2s;transition:transform ease .2s}@-webkit-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-moz-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-o-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-ms-keyframes pulsate{0%,100%{opacity:0}0%{transform:scale(.1)}50%{opacity:1}100%{transform:scale(1.2)}} -------------------------------------------------------------------------------- /Nav/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animated “x” icon for the Bootstrap navbar-toggle 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 53 | 54 |
55 |

Navbar example

56 |

This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.

57 |
58 |
59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /Nav Dropdown/style.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | .navigation { 4 | height: 70px; 5 | background: #262626; 6 | } 7 | 8 | .brand { 9 | position: absolute; 10 | padding-left: 20px; 11 | float: left; 12 | line-height: 70px; 13 | text-transform: uppercase; 14 | font-size: 1.4em; 15 | } 16 | 17 | .brand a, 18 | .brand a:visited { 19 | color: #ffffff; 20 | text-decoration: none; 21 | } 22 | 23 | .nav-container { 24 | max-width: 1000px; 25 | margin: 0 auto; 26 | } 27 | 28 | nav { 29 | float: right; 30 | } 31 | 32 | nav ul { 33 | list-style: none; 34 | margin: 0; 35 | padding: 0; 36 | } 37 | 38 | nav ul li { 39 | float: left; 40 | position: relative; 41 | } 42 | 43 | nav ul li a, 44 | nav ul li a:visited { 45 | display: block; 46 | padding: 0 20px; 47 | line-height: 70px; 48 | background: #262626; 49 | color: #ffffff; 50 | text-decoration: none; 51 | } 52 | 53 | nav ul li a:hover, 54 | nav ul li a:visited:hover { 55 | background: #2581DC; 56 | color: #ffffff; 57 | } 58 | 59 | nav ul li a:not(:only-child):after, 60 | nav ul li a:visited:not(:only-child):after { 61 | padding-left: 4px; 62 | content: ' ▾'; 63 | } 64 | 65 | nav ul li ul li { 66 | min-width: 190px; 67 | } 68 | 69 | nav ul li ul li a { 70 | padding: 15px; 71 | line-height: 20px; 72 | } 73 | 74 | .nav-dropdown { 75 | position: absolute; 76 | display: none; 77 | z-index: 1; 78 | box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); 79 | } 80 | 81 | /* Mobile navigation */ 82 | .nav-mobile { 83 | display: none; 84 | position: absolute; 85 | top: 0; 86 | right: 0; 87 | background: #262626; 88 | height: 70px; 89 | width: 70px; 90 | } 91 | 92 | @media only screen and (max-width: 798px) { 93 | .nav-mobile { 94 | display: block; 95 | } 96 | 97 | nav { 98 | width: 100%; 99 | padding: 70px 0 15px; 100 | } 101 | 102 | nav ul { 103 | display: none; 104 | } 105 | 106 | nav ul li { 107 | float: none; 108 | } 109 | 110 | nav ul li a { 111 | padding: 15px; 112 | line-height: 20px; 113 | } 114 | 115 | nav ul li ul li a { 116 | padding-left: 30px; 117 | } 118 | 119 | .nav-dropdown { 120 | position: static; 121 | } 122 | } 123 | 124 | @media screen and (min-width: 799px) { 125 | .nav-list { 126 | display: block !important; 127 | } 128 | } 129 | 130 | #nav-toggle { 131 | position: absolute; 132 | left: 18px; 133 | top: 22px; 134 | cursor: pointer; 135 | padding: 10px 35px 16px 0px; 136 | } 137 | 138 | #nav-toggle span, 139 | #nav-toggle span:before, 140 | #nav-toggle span:after { 141 | cursor: pointer; 142 | border-radius: 1px; 143 | height: 5px; 144 | width: 35px; 145 | background: #ffffff; 146 | position: absolute; 147 | display: block; 148 | content: ''; 149 | transition: all 300ms ease-in-out; 150 | } 151 | 152 | #nav-toggle span:before { 153 | top: -10px; 154 | } 155 | 156 | #nav-toggle span:after { 157 | bottom: -10px; 158 | } 159 | 160 | #nav-toggle.active span { 161 | background-color: transparent; 162 | } 163 | 164 | #nav-toggle.active span:before, 165 | #nav-toggle.active span:after { 166 | top: 0; 167 | } 168 | 169 | #nav-toggle.active span:before { 170 | transform: rotate(45deg); 171 | } 172 | 173 | #nav-toggle.active span:after { 174 | transform: rotate(-45deg); 175 | } 176 | 177 | article { 178 | max-width: 1000px; 179 | margin: 0 auto; 180 | padding: 10px; 181 | } -------------------------------------------------------------------------------- /Nav Side/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Off Canvas Navigation with CSS3 Transitions 7 | 8 | 9 | 10 | 11 | 12 | 13 | 26 | 27 |
28 |
29 |
30 |

Website Title Subtitle, too!

31 |
32 |
33 |
34 |

Article Title

35 | 36 |

Click here to view the tutorial.

37 |

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 38 | Mauris placerat eleifend leo.

39 |

Lorem Ipsum

40 |

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

41 | 47 |
48 |
Definition list
49 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
50 |
Lorem ipsum dolor sit amet
51 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
52 |
53 |
54 |
55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /Galeria Animada/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Galeria Hindu 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Galeria Sagrada Hindu

17 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

18 |
19 |
20 |
21 | 22 |
23 |

Galeria Hindu 1

24 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.

25 | Visualize 26 |
27 |
28 |
29 | 30 |
31 |

Galeria Hindu 2

32 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.

33 | Visualize 34 |
35 |
36 |
37 | 38 |
39 |

Galeria Hindu 3

40 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.

41 | Visualize 42 |
43 |
44 |
45 | 46 |
47 |

Galeria Hindu 4

48 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.

49 | Visualize 50 |
51 |
52 |
53 | 54 |
55 |

Galeria Hindu 5

56 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.

57 | Visualize 58 |
59 |
60 |
61 | 62 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /Navigation Dropdown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Start Bootstrap 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 41 |
42 |
43 |

Ready. Set. Code.

44 |

Are you ready to boilerstrap your cross-compatible buzzword? We're Sassy, flat and semantic, so what are you waiting for?

45 |
46 |

Download Free Trial » Learn more »

47 |
48 |
49 |
50 |
51 |
52 |
53 | 54 |

Cloud Computable

55 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

56 |
57 |
58 | 59 |

Backwards Compatible

60 |

Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor.

61 |
62 |
63 | 64 |

GUI Free

65 |

Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

66 |
67 |
68 |
69 |
70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /Nav Side/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | font-family: 'Droid Serif'; 4 | color: #343434; 5 | font-size: 1.1em; 6 | line-height: 1.6; 7 | overflow-x: hidden; 8 | } 9 | 10 | header { 11 | border-bottom: 1px solid #cdcdcd; 12 | padding: 40px 0; 13 | } 14 | 15 | .container { 16 | max-width: 750px; 17 | margin: 0 auto; 18 | padding: 0 20px; 19 | } 20 | 21 | h1 { 22 | font-size: 1em; 23 | text-align: center; 24 | margin: 0; 25 | line-height: 0; 26 | } 27 | 28 | @media screen and (min-width: 900px) { 29 | h1 { 30 | font-size: 1.4em; 31 | text-align: left; 32 | } 33 | } 34 | 35 | h1 span { 36 | display: none; 37 | } 38 | 39 | @media screen and (min-width: 900px) { 40 | h1 span { 41 | display: inline; 42 | font-size: .6em; 43 | color: #898989; 44 | } 45 | } 46 | 47 | article { 48 | max-width: 750px; 49 | margin: 0 auto; 50 | padding: 0 20px; 51 | } 52 | 53 | h2 { 54 | font-size: 1.5em; 55 | margin: 1em 0 0; 56 | } 57 | 58 | dt { 59 | font-weight: bold; 60 | } 61 | 62 | time { 63 | font-size: .9em; 64 | color: #898989; 65 | display: block; 66 | } 67 | 68 | /* Nav icon positioning */ 69 | 70 | .position { 71 | position: absolute; 72 | top: 28px; 73 | left: 20px; 74 | transition: all .3s ease; 75 | z-index: 2; 76 | } 77 | 78 | @media screen and (min-width: 900px) { 79 | .position { 80 | position: fixed; 81 | } 82 | } 83 | 84 | /* Elijah Manor Nav button */ 85 | 86 | #nav-toggle { 87 | cursor: pointer; 88 | padding: 10px 35px 16px 0px; 89 | } 90 | 91 | #nav-toggle span, 92 | #nav-toggle span:before, 93 | #nav-toggle span:after { 94 | cursor: pointer; 95 | border-radius: 1px; 96 | height: 5px; 97 | width: 35px; 98 | background: #343434; 99 | position: absolute; 100 | display: block; 101 | content: ''; 102 | } 103 | 104 | #nav-toggle span:before { 105 | top: -10px; 106 | } 107 | 108 | #nav-toggle span:after { 109 | bottom: -10px; 110 | } 111 | 112 | #nav-toggle span, 113 | #nav-toggle span:before, 114 | #nav-toggle span:after { 115 | transition: all 200ms ease-in-out; 116 | } 117 | 118 | #nav-toggle.active span { 119 | background-color: transparent; 120 | } 121 | 122 | #nav-toggle.active span:before, 123 | #nav-toggle.active span:after { 124 | top: 0; 125 | } 126 | 127 | #nav-toggle.active span:before { 128 | -webkit-transform: rotate(45deg); 129 | transform: rotate(45deg); 130 | } 131 | 132 | #nav-toggle.active span:after { 133 | -webkit-transform: rotate(-45deg); 134 | transform: rotate(-45deg); 135 | } 136 | 137 | /* Off Canvas Navigation */ 138 | 139 | main { 140 | width: 100%; 141 | position: absolute; 142 | left: 0; 143 | transition: .3s ease all; 144 | } 145 | 146 | aside { 147 | width: 250px; 148 | height: 100%; 149 | position: fixed; 150 | top: 0; 151 | left: -250px; 152 | background: #343434; 153 | font-size: .8em; 154 | font-family: sans-serif; 155 | font-weight: 300; 156 | transition: all .3s ease; 157 | } 158 | 159 | aside p { 160 | color: #cdcdcd; 161 | padding: 20px; 162 | } 163 | 164 | aside nav ul { 165 | margin: 0; 166 | padding: 0; 167 | } 168 | 169 | aside nav ul li:first-of-type { 170 | border-top: 1px solid #565656; 171 | } 172 | 173 | aside nav ul li { 174 | border-bottom: 1px solid #565656; 175 | } 176 | 177 | aside nav ul li a { 178 | padding: 10px 20px; 179 | display: block; 180 | color: #fff; 181 | text-decoration: none; 182 | } 183 | 184 | aside nav ul li a:hover { 185 | background: #454545; 186 | } 187 | 188 | /* JavaScript toggle */ 189 | 190 | .show-nav aside, 191 | .show-nav .position, 192 | .show-nav main { 193 | -webkit-transform: translateX(250px); 194 | transform: translateX(250px); 195 | } 196 | 197 | .show-nav .position { 198 | position: fixed; 199 | } 200 | 201 | .show-nav article { 202 | padding: 0 80px; 203 | } 204 | 205 | a { 206 | text-decoration: none; 207 | color: #6699cc; 208 | } 209 | 210 | a:hover { 211 | text-decoration: underline; 212 | } -------------------------------------------------------------------------------- /Dark Arts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dark Arts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 25 |
26 |
27 |
28 |

Greatest Arts of Darkness

29 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

30 | Read More 31 |
32 | 33 |
34 |
35 |
36 |
37 |
38 |

Artists from around the World

39 |

Lorem Ipsum is simply dummy text

40 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

41 |
42 |
43 |
44 |
45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 |
53 |
54 | 96 | 97 | 98 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /Nav Sticky/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:after, 3 | *:before { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | -webkit-box-sizing: border-box; 8 | -moz-box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font: 1em 'Helvetica Neue', Helvetica, Arial, sans-serif; 13 | } 14 | 15 | p { 16 | line-height: 1.3; 17 | margin-bottom: 20px; 18 | } 19 | 20 | body { 21 | background: #ffffff; 22 | /*padding-top: 40px; */ 23 | } 24 | 25 | a, 26 | a:hover { 27 | text-decoration: none; 28 | } 29 | 30 | .navigation { 31 | width: 100%; 32 | height: 70px; 33 | background: gray; 34 | } 35 | 36 | .navigation a { 37 | color: #666666; 38 | text-decoration: none; 39 | } 40 | 41 | .navigation a:hover { 42 | color: #262626; 43 | text-decoration: none; 44 | } 45 | 46 | .brand { 47 | position: absolute; 48 | float: left; 49 | padding-left: 20px; 50 | color: white; 51 | line-height: 70px; 52 | } 53 | 54 | .brand a { 55 | color: white; 56 | font-size: 1.4em; 57 | font-family: ; 58 | text-decoration: none; 59 | font-weight: 600; 60 | } 61 | 62 | .brand a:visited, 63 | .brand a:active { 64 | color: #262626; 65 | } 66 | 67 | .brand a:hover { 68 | text-decoration: none; 69 | } 70 | 71 | .container { 72 | max-width: 1000px; 73 | margin: 0 auto; 74 | padding: 0px 20px; 75 | } 76 | 77 | .nav-container { 78 | max-width: 1200px; 79 | margin: 0 auto; 80 | padding: 0px 0px; 81 | } 82 | 83 | .nav-dropdown { 84 | display: none; 85 | position: absolute; 86 | left: 0; 87 | width: 200px; 88 | z-index: 1; 89 | } 90 | 91 | nav { 92 | float: right; 93 | position: relative; 94 | display: inline-block; 95 | font-size: 14px; 96 | font-weight: 600; 97 | } 98 | 99 | nav ul { 100 | list-style: none; 101 | text-align: left; 102 | } 103 | 104 | nav ul li { 105 | float: left; 106 | display: inline; 107 | position: relative; 108 | } 109 | 110 | nav ul li a { 111 | display: block; 112 | color: #666666; 113 | padding: 0 20px; 114 | line-height: 70px; 115 | background: #efefef; 116 | } 117 | 118 | nav ul li a:hover, 119 | nav ul li a:focus, 120 | nav ul li a:active { 121 | text-decoration: none; 122 | } 123 | 124 | nav ul li>a:hover { 125 | background: #dedede; 126 | color: #262626; 127 | } 128 | 129 | nav ul li>a:not(:only-child):after { 130 | padding-left: 4px; 131 | content: ' ▾'; 132 | } 133 | 134 | nav ul li ul li { 135 | width: 190px; 136 | } 137 | 138 | nav ul li ul li a { 139 | background: #efefef; 140 | display: block; 141 | padding: 15px; 142 | line-height: 20px; 143 | z-index: 1; 144 | } 145 | 146 | nav ul li ul li a:hover { 147 | background: #dedede; 148 | color: #262626; 149 | } 150 | 151 | /* Mobile navigation */ 152 | .nav-mobile { 153 | display: none; 154 | position: absolute; 155 | top: 0; 156 | right: 0; 157 | background: gray; 158 | height: 70px; 159 | width: 70px; 160 | } 161 | 162 | @media only screen and (max-width: 768px) { 163 | .nav-mobile { 164 | display: block; 165 | } 166 | 167 | .logo { 168 | position: absolute; 169 | } 170 | 171 | nav { 172 | width: 100%; 173 | padding: 70px 0 15px; 174 | } 175 | 176 | nav ul { 177 | display: none; 178 | } 179 | 180 | nav ul li { 181 | width: 100%; 182 | float: none; 183 | } 184 | 185 | nav ul li>a { 186 | padding: 15px; 187 | line-height: 20px; 188 | } 189 | 190 | nav ul li:hover .nav-dropdown { 191 | display: none; 192 | } 193 | 194 | nav ul li ul li a { 195 | line-height: 20px; 196 | } 197 | 198 | .nav-dropdown { 199 | position: static; 200 | width: 100%; 201 | } 202 | } 203 | 204 | @media screen and (min-width: 768px) { 205 | .nav-list { 206 | display: block !important; 207 | } 208 | } 209 | 210 | #nav-toggle { 211 | position: absolute; 212 | left: 18px; 213 | top: 22px; 214 | cursor: pointer; 215 | padding: 10px 35px 16px 0px; 216 | } 217 | 218 | #nav-toggle span, 219 | #nav-toggle span:before, 220 | #nav-toggle span:after { 221 | cursor: pointer; 222 | border-radius: 1px; 223 | height: 5px; 224 | width: 35px; 225 | background: white; 226 | position: absolute; 227 | display: block; 228 | content: ''; 229 | transition: all 300ms ease-in-out; 230 | } 231 | 232 | #nav-toggle span:before { 233 | top: -10px; 234 | } 235 | 236 | #nav-toggle span:after { 237 | bottom: -10px; 238 | } 239 | 240 | #nav-toggle.active span { 241 | background-color: transparent; 242 | } 243 | 244 | #nav-toggle.active span:before, 245 | #nav-toggle.active span:after { 246 | top: 0; 247 | } 248 | 249 | #nav-toggle.active span:before { 250 | transform: rotate(45deg); 251 | } 252 | 253 | #nav-toggle.active span:after { 254 | transform: rotate(-45deg); 255 | } 256 | 257 | .fixed { 258 | position: fixed; 259 | top: 0; 260 | z-index: 999; 261 | width: 100%; 262 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); 263 | } 264 | 265 | .margin { 266 | margin-top: 75px; 267 | } 268 | 269 | #title { 270 | text-align: center; 271 | margin: 20px 0 20px 0; 272 | font-size: 10vw; 273 | padding: 0px; 274 | color: transparent; 275 | font-family: '8BITWONDERNominal', sans-serif; 276 | text-shadow: 5px -5px 0 #FCB42A, 1px -1px 0 #F7F461, 0px 0px 0 #2e2e2e, -1px 2px 0 #2c2c2c, -2px 3px 0 #2a2a2a, -3px 4px 0 #282828, -4px 5px 0 #262626, -5px 6px 0 #242424, -6px 7px 0 #222, -7px 8px 0 #202020, -8px 9px 0 #1e1e1e, -9px 10px 0 #1c1c1c, -10px 11px 0 #1a1a1a, -11px 12px 0 #181818, -12px 13px 0 #161616, -13px 14px 0 #141414, -14px 15px 0 #121212, -10px 15px 30px rgba(0, 0, 0, 0.9); 277 | } -------------------------------------------------------------------------------- /Dark Arts/css/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #333; 3 | --secondary-color: #444; 4 | --overlay-color: rgba(0, 0, 0, 0.7); 5 | } 6 | 7 | * { 8 | box-sizing: border-box; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | body { 14 | font-family: 'Catamaran', sans-serif; 15 | line-height: 1.6; 16 | color: #333; 17 | font-size: 1.1rem; 18 | } 19 | 20 | h1, 21 | h2, 22 | h3, 23 | h4 { 24 | line-height: 1.3; 25 | } 26 | 27 | a { 28 | color: var(--secondary-color); 29 | text-decoration: none; 30 | } 31 | 32 | ul { 33 | list-style: none; 34 | } 35 | 36 | img { 37 | width: 100%; 38 | } 39 | 40 | .baphomet { 41 | border-radius: 12px; 42 | border: 1px solid black; 43 | } 44 | 45 | .container { 46 | max-width: 1100px; 47 | margin: auto; 48 | overflow: hidden; 49 | padding: 0 2rem; 50 | } 51 | 52 | .navbar { 53 | font-size: 1.2rem; 54 | padding-top: 0.3rem; 55 | padding-bottom: 0.3rem; 56 | } 57 | 58 | .navbar .container { 59 | display: grid; 60 | grid-template-columns: repeat(2, 1fr); 61 | } 62 | 63 | .navbar .logo { 64 | font-size: 2rem; 65 | } 66 | 67 | .navbar .nav { 68 | justify-self: flex-end; 69 | display: flex; 70 | align-items: center; 71 | justify-content: center; 72 | } 73 | 74 | .navbar .nav a { 75 | padding: 0 1rem; 76 | } 77 | 78 | .navbar .nav a:hover { 79 | color: #555; 80 | } 81 | 82 | .section-a { 83 | margin: 2rem 0; 84 | } 85 | 86 | .section-a .container { 87 | display: grid; 88 | grid-template-columns: repeat(2, 1fr); 89 | grid-gap: 3rem; 90 | align-items: center; 91 | justify-content: center; 92 | } 93 | 94 | .section-a h1 { 95 | font-size: 4rem; 96 | color: var(--primary-color); 97 | } 98 | 99 | .section-a p { 100 | margin: 1rem 0; 101 | } 102 | 103 | .section-b { 104 | position: relative; 105 | background: url('../img/showcase.jpg') no-repeat bottom center/cover; 106 | height: 600px; 107 | } 108 | 109 | .section-b-inner { 110 | color: white; 111 | height: 100%; 112 | display: flex; 113 | flex-direction: column; 114 | align-items: center; 115 | justify-content: center; 116 | text-align: center; 117 | margin: auto; 118 | max-width: 860px; 119 | padding: 5rem 0; 120 | } 121 | 122 | .section-b-inner h3 { 123 | font-size: 2rem; 124 | } 125 | 126 | .section-b-inner h2 { 127 | font-size: 5rem; 128 | margin-top: 1rem; 129 | } 130 | 131 | .section-b-inner p { 132 | font-size: 1.5rem; 133 | margin-top: 1rem; 134 | } 135 | 136 | .section-c .gallery { 137 | display: grid; 138 | grid-template-columns: repeat(5, 1fr); 139 | } 140 | 141 | .section-c .gallery a:first-child { 142 | grid-row: 1/3; 143 | grid-column: 1/3; 144 | } 145 | 146 | .section-c .gallery a:nth-child(2) { 147 | grid-column: 3/5; 148 | } 149 | 150 | .section-c .gallery img, 151 | .section-c .gallery a { 152 | width: 100%; 153 | height: 100%; 154 | } 155 | 156 | .section-footer { 157 | background: var(--primary-color); 158 | color: white; 159 | padding: 4rem 0; 160 | } 161 | 162 | .section-footer .container { 163 | display: grid; 164 | grid-template-columns: repeat(4, 1fr); 165 | grid-gap: 1rem; 166 | } 167 | 168 | .section-footer h2 { 169 | font-size: 2rem; 170 | margin-bottom: 1rem; 171 | } 172 | 173 | .section-footer h3 { 174 | margin-bottom: 0.7rem; 175 | } 176 | 177 | .section-footer a { 178 | line-height: 1.9; 179 | color: white; 180 | } 181 | 182 | .section-footer a>i { 183 | color: #555; 184 | margin-right: 0.5rem; 185 | } 186 | 187 | .email-form { 188 | width: 100%; 189 | display: inline-block; 190 | background-color: #555; 191 | position: relative; 192 | border-radius: 20px; 193 | line-height: 0; 194 | margin-top: 1rem; 195 | } 196 | 197 | .email-form .form-control { 198 | display: inline-block; 199 | border: 0; 200 | outline: 0; 201 | font-size: 1rem; 202 | color: #ddd; 203 | background-color: transparent; 204 | font-family: inherit; 205 | margin: 0; 206 | padding: 0 3rem 0 1.5rem; 207 | width: 100%; 208 | height: 45px; 209 | border-radius: 20px; 210 | } 211 | 212 | .email-form .submit { 213 | display: inline-block; 214 | position: absolute; 215 | top: 0; 216 | right: 0; 217 | width: 45px; 218 | height: 45px; 219 | background-color: #eee; 220 | font-size: 1rem; 221 | text-align: center; 222 | margin: 0; 223 | padding: 0; 224 | outline: 0; 225 | border: 0; 226 | color: #333; 227 | cursor: pointer; 228 | border-radius: 0 20px 20px 0; 229 | } 230 | 231 | .btn { 232 | display: inline-block; 233 | background: var(--primary-color); 234 | color: white; 235 | padding: 0.8rem 1.5rem; 236 | border: none; 237 | cursor: pointer; 238 | font-size: 1.1rem; 239 | border-radius: 16px; 240 | } 241 | 242 | .btn:hover { 243 | background: var(--secondary-color); 244 | } 245 | 246 | .overlay { 247 | position: absolute; 248 | top: 0; 249 | left: 0; 250 | height: 100%; 251 | width: 100%; 252 | background-color: var(--overlay-color); 253 | } 254 | 255 | @media(max-width: 700px) { 256 | .section-a .container { 257 | grid-template-columns: 1fr; 258 | text-align: center; 259 | } 260 | 261 | .section-a .container div:first-child { 262 | order: 2; 263 | } 264 | 265 | .section-a .container div:last-child { 266 | order: -1; 267 | } 268 | 269 | .section-a img { 270 | width: 80%; 271 | margin: auto; 272 | } 273 | 274 | .section-b-inner h2 { 275 | font-size: 3.5rem; 276 | } 277 | 278 | .section-c .gallery { 279 | grid-template-columns: repeat(3, 1fr); 280 | } 281 | 282 | .section-c .gallery a:first-child { 283 | grid-row: 1/1; 284 | grid-column: 1/1; 285 | } 286 | 287 | .section-c .gallery a:nth-child(2) { 288 | grid-row: 2/2; 289 | grid-column: 2/4; 290 | } 291 | 292 | .section-c .gallery a:last-child { 293 | display: none; 294 | } 295 | 296 | .section-footer { 297 | padding: 2rem 0; 298 | } 299 | 300 | .section-footer .container { 301 | grid-template-columns: 1fr; 302 | text-align: center; 303 | } 304 | 305 | .section-footer div:nth-child(2), 306 | .section-footer div:nth-child(3) { 307 | display: none; 308 | } 309 | } -------------------------------------------------------------------------------- /Nav Sticky/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Responsive Navigation Bar 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 | Logo 20 |
21 | 72 |
73 |
74 | 75 |
76 |
77 |
78 |
79 |

Title

80 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper 81 | porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

82 |

Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus 83 | non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 84 | inceptos himenaeos.

85 |

Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam 86 | ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus 87 | orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui.

88 |

Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices 89 | enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor.

90 |

Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, 91 | accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, 92 | ligula.

93 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper 94 | porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

95 |

Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus 96 | non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 97 | inceptos himenaeos.

98 |

Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam 99 | ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus 100 | orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui.

101 |

Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices 102 | enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor.

103 |

Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, 104 | accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, 105 | ligula.

106 |
107 |
108 | 109 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /Dark Arts/js/simple-lightbox.min.js: -------------------------------------------------------------------------------- 1 | !function(ot,st,lt){"use strict";ot.fn.simpleLightbox=function(N){N=ot.extend({sourceAttr:"href",overlay:!0,spinner:!0,nav:!0,navText:["‹","›"],captions:!0,captionDelay:0,captionSelector:"img",captionType:"attr",captionsData:"title",captionPosition:"bottom",captionClass:"",close:!0,closeText:"×",swipeClose:!0,showCounter:!0,fileExt:"png|jpg|jpeg|gif|webp",animationSlide:!0,animationSpeed:250,preloading:!0,enableKeyboard:!0,loop:!0,rel:!1,docClose:!0,swipeTolerance:50,className:"simple-lightbox",widthRatio:.8,heightRatio:.9,scaleImageToRatio:!1,disableRightClick:!1,disableScroll:!0,alertError:!0,alertErrorMessage:"Image not found, next image will be loaded",additionalHtml:!1,history:!0,throttleInterval:0,doubleTapZoom:2,maxZoom:10,htmlClass:"has-lightbox"},N);function P(){return s.hash.substring(1)}function h(){P();var t="pid="+(V+1),e=s.href.split("#")[0]+"#"+t;o?history[f?"replaceState":"pushState"]("",lt.title,e):f?s.replace(e):s.hash=t,f=!0}function t(e,a){var n;return function(){var t=arguments;n||(e.apply(this,t),n=!0,setTimeout(function(){return n=!1},a))}}function a(t){t.trigger(ot.Event("show.simplelightbox")),N.disableScroll&&(u=T("hide")),N.htmlClass&&""!=N.htmlClass&&ot("html").addClass(N.htmlClass),b.appendTo("body"),_.appendTo(b),N.overlay&&l.appendTo(ot("body")),m=!0,V=$.index(t),K=ot("").hide().attr("src",t.attr(N.sourceAttr)).attr("data-scale",1).attr("data-translate-x",0).attr("data-translate-y",0),-1==d.indexOf(t.attr(N.sourceAttr))&&d.push(t.attr(N.sourceAttr)),_.html("").attr("style",""),K.appendTo(_),C(),l.fadeIn("fast"),ot(".sl-close").fadeIn("fast"),g.show(),J.fadeIn("fast"),ot(".sl-wrapper .sl-counter .sl-current").text(V+1),c.fadeIn("fast"),tt(),N.preloading&&w(),setTimeout(function(){t.trigger(ot.Event("shown.simplelightbox"))},N.animationSpeed)}function Z(t,e,a){return t").addClass("sl-overlay"),r=ot(""),c=ot("
").addClass("sl-counter").html('/'),m=!1,V=0,v=0,x=ot("
").addClass("sl-caption "+N.captionClass+" pos-"+N.captionPosition),_=ot("
").addClass("sl-image"),b=ot("
").addClass("sl-wrapper").addClass(N.className),tt=function(s){if(K.length){var l=new Image,r=st.innerWidth*N.widthRatio,c=st.innerHeight*N.heightRatio;l.src=K.attr("src"),K.data("scale",1),K.data("translate-x",0),K.data("translate-y",0),at(0,0,1),ot(l).on("error",function(t){$.eq(V).trigger(ot.Event("error.simplelightbox")),U=!(m=!1),g.hide();var e=1==s||-1==s;v===V&&e?it():(N.alertError&&alert(N.alertErrorMessage),nt(e?s:1))}),l.onload=function(){void 0!==s&&$.eq(V).trigger(ot.Event("changed.simplelightbox")).trigger(ot.Event((1===s?"nextDone":"prevDone")+".simplelightbox")),N.history&&(f?p=setTimeout(h,800):h()),-1==d.indexOf(K.attr("src"))&&d.push(K.attr("src"));var t=l.width,e=l.height;if(N.scaleImageToRatio||r=$.length-1&&ot(".sl-next").hide(),0").html(N.additionalHtml).addClass("sl-additional-html").appendTo(ot(".sl-image"))}}},y=function(t,e){""!==t&&void 0!==t&&N.captions&&x.html(t).css({width:e+"px"}).hide().appendTo(ot(".sl-image")).delay(N.captionDelay).fadeIn("fast")},et=function(t,e){var a={};a[i+"transform"]="translateX("+e+")",a[i+"transition"]=i+"transform "+t+"s linear",ot(".sl-image").css(a)},at=function(t,e,a){var n={};n[i+"transform"]="translate("+t+","+e+") scale("+a+")",K.css(n)},C=function(){ot(st).on("resize."+G,tt),ot(lt).on("click."+G+" touchstart."+G,".sl-close",function(t){t.preventDefault(),U&&it()}),N.history&&setTimeout(function(){ot(st).on("hashchange."+G,function(){U&&P()===Q&&it()})},40),J.on("click."+G,"button",t(function(t){t.preventDefault(),L=0,nt(ot(this).hasClass("sl-next")?1:-1)},N.throttleInterval));var e,a,n,i,o,s,l,r,c,h,p,d,u,f,g,m,v,x,b,y,C,w,T,E,S,M,I,k=0,q=0,X=0,D=0,Y=!1,A=!1,O=0,R=!1,W=Z(1,1,N.maxZoom),F=!1;_.on("touchstart."+G+" mousedown."+G,function(t){if("A"===t.target.tagName&&"touchstart"==t.type)return!0;if("mousedown"==(t=t.originalEvent).type)c=t.clientX,h=t.clientY,e=_.height(),a=_.width(),o=K.height(),s=K.width(),n=_.position().left,i=_.position().top,l=parseFloat(K.data("translate-x")),r=parseFloat(K.data("translate-y")),R=!0;else{if(I=t.touches.length,c=t.touches[0].clientX,h=t.touches[0].clientY,e=_.height(),a=_.width(),o=K.height(),s=K.width(),n=_.position().left,i=_.position().top,1===I){if(F)return K.addClass("sl-transition"),Y=Y?(z(0,0,W=1),at("0px","0px",W),!1):(W=N.doubleTapZoom,z(0,0,W),at("0px","0px",W),ot(".sl-caption").fadeOut(200),!0),setTimeout(function(){K.removeClass("sl-transition")},200),!1;F=!0,setTimeout(function(){F=!1},300),l=parseFloat(K.data("translate-x")),r=parseFloat(K.data("translate-y"))}else 2===I&&(p=t.touches[1].clientX,d=t.touches[1].clientY,l=parseFloat(K.data("translate-x")),r=parseFloat(K.data("translate-y")),C=(c+p)/2,w=(h+d)/2,u=Math.sqrt((c-p)*(c-p)+(h-d)*(h-d)));R=!0}return!!A||(B&&(O=parseInt(_.css("left"))),A=!0,j=L=0,k=t.pageX||t.touches[0].pageX,X=t.pageY||t.touches[0].pageY,!1)}).on("touchmove."+G+" mousemove."+G+" MSPointerMove",function(t){if(!A)return!0;if(t.preventDefault(),"touchmove"==(t=t.originalEvent).type){if(!1===R)return!1;f=t.touches[0].clientX,g=t.touches[0].clientY,I=t.touches.length,0,1=$.length-1&&0N.swipeTolerance&&e?nt(0=$.length-1?0:V+1,e=V-1<0?$.length-1:V-1>=$.length-1?0:V-1;ot("").attr("src",$.eq(t).attr(N.sourceAttr)).on("load",function(){-1==d.indexOf(ot(this).attr("src"))&&d.push(ot(this).attr("src")),$.eq(V).trigger(ot.Event("nextImageLoaded.simplelightbox"))}),ot("").attr("src",$.eq(e).attr(N.sourceAttr)).on("load",function(){-1==d.indexOf(ot(this).attr("src"))&&d.push(ot(this).attr("src")),$.eq(V).trigger(ot.Event("prevImageLoaded.simplelightbox"))})},nt=function(e){$.eq(V).trigger(ot.Event("change.simplelightbox")).trigger(ot.Event((1===e?"next":"prev")+".simplelightbox"));var t=V+e;if(!(m||(t<0||t>=$.length)&&!1===N.loop)){V=t<0?$.length-1:t>$.length-1?0:t,ot(".sl-wrapper .sl-counter .sl-current").text(V+1);var a={opacity:0};N.animationSlide&&(B?et(N.animationSpeed/1e3,-100*e-L+"px"):a.left=parseInt(ot(".sl-image").css("left"))+-100*e+"px"),ot(".sl-image").animate(a,N.animationSpeed,function(){setTimeout(function(){var t=$.eq(V);K.attr("src",t.attr(N.sourceAttr)),-1==d.indexOf(t.attr(N.sourceAttr))&&g.show(),ot(".sl-caption").remove(),tt(e),N.preloading&&w()},100)})}},it=function(){if(!m){var t=$.eq(V),e=!1;t.trigger(ot.Event("close.simplelightbox")),N.history&&(o?history.pushState("",lt.title,s.pathname+s.search):s.hash="",clearTimeout(p)),ot(".sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter").fadeOut("fast",function(){N.disableScroll&&T("show"),N.htmlClass&&""!=N.htmlClass&&ot("html").removeClass(N.htmlClass),ot(".sl-wrapper, .sl-overlay").remove(),J.off("click","button"),ot(lt).off("click."+G,".sl-close"),ot(st).off("resize."+G),ot(st).off("hashchange."+G),e||t.trigger(ot.Event("closed.simplelightbox")),e=!0}),K=ot(),m=U=!1}},T=function(t){var e=0;if("hide"==t){var a=st.innerWidth;if(!a){var n=lt.documentElement.getBoundingClientRect();a=n.right-Math.abs(n.left)}if(lt.body.clientWidth