Evolve Patterns

Developer
Alyssa
Size
27,954 Kb
Views
28,336
  1. Evolve Patterns Previews
  2. Evolve Patterns HTML Codes
  3. Evolve Patterns CSS Codes
  4. Evolve Patterns JS Codes

How do I make an evolve patterns?

Pattern Library. Made with love, using: Sass, Bourbon, Neat, Refills, jQuery, lazyload, SwipeJS and more.... What is a evolve patterns? How do you make a evolve patterns? This script and codes were developed by Alyssa on 08 September 2022, Thursday.

Evolve Patterns Previews
IQ Test

Evolve Patterns - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Evolve Patterns</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui">
<link rel="shortcut icon" type="image/x-icon" href="http://evolvegame.com/favicon.ico"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Syncopate:400,700'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='css/__codepen_io_alyda_pen_kd.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <style> .boxes, .timeline, .character, .swipe-container, .community, .news, article, .preorder, .error, .sticky { margin-top: 10%; } #Evolve { display: block; margin: auto; width: 650px; //550px; height: 180px; //80px; font-family: 'Syncopate'; }
</style>
<body class="container"> <header class="main-header"> <div class="wrapper"> <!--https://codepen.io/alyda/pen/nqwxI--> <svg id="Evolve"></svg> <h1 id="banner" hidden><a href="" class="loud">Evolve</a></h1> </div> <!-- Main Navigation --> <nav role='navigation'> <h1 hidden>Main Navigation</h1> <div class="wrapper"> <ul id="primary-nav"> <li> <span data-toggle="dropdown">About</span> <ul class="dropdown"> <li><a href="">Game</a></li> <li><a href="">Hunters</a></li> <li><a href="">Monsters</a></li> </ul> </li> <li> <span data-toggle="dropdown">Media</span> <ul class="dropdown"> <li><a href="">Video</a></li> <li><a href="">Images</a></li> </ul> </li> <li><a href="#">Commumity</a></li> <li><a href="#">News</a></li> </ul> <a id="preorder-btn" class="btn" href="">Pre-order</a> </div> </nav> </header> <section class="content"> <div class="wrapper"> <ul class="subnav"> <li><a href="">link 1</a></li> <li><a href="">link 2</a></li> <li><a href="">link 3</a></li> <li><span class="text">text</span></li> </ul> <!-- HOME --> <div class="boxes"> <h2 hidden>News</h2> <div class="featured"> <div class="wrap"> <h3 class="h2">Prisoner of Benda</h3> <p>Now what? For one beautiful night I knew what it was like to be a grandmother. Subjugated, yet honored. I just told you! You've killed me! </p> <a href=""><img class="img-responsive" src="http://placekitten.com/g/800/400" alt="" /></a> <a class="btn" href="">Call to Action</a> </div> </div> <div class="latest"> <div class="wrap"> <span class="h2">News</span> <p>Guards! Bring me the forms I need to fill out to have her taken away!</p> <a href=""><img class="img-responsive" src="http://placekitten.com/g/200/180" alt="" /></a> <h3 class="latest-title"><a href="">Kif Gets Knocked Up A Notch</a></h3> <time class="latest-date" datetime="2014-01-07 19:00">XX days ago</time> <p>Can I use the gun? There, now he's trapped in a book I wrote: a crummy world of plot holes and spelling errors! Yes. You gave me a dollar and some candy. That could be 'my' beautiful soul sitting naked on a couch. If I could just learn to play this stupid thing. It's okay, Bender. I like cooking too.</p> <a class="btn" href="">Read More</a> </div> </div> </div> <!-- GAME --> <div class="timeline"> <a class="btn" href="">Full timeline</a> <h2>Timeline</h2> <ul class="wrap"> <li> <time class="timeline-date" datetime="2010-10-01 00:00">October 01, 2010</time> <a href=""> <img class="img-responsive" src="http://placekitten.com/g/630/330" alt="" /> <p>Cave Environment Concept Art</p> </a> </li> <li> <time class="timeline-date" datetime="2012-03-01 00:00">March 01, 2013</time> <a href=""> <img class="img-responsive" src="http://placekitten.com/630/330" alt="" /> <p>Concept Art of the Laurie Ann Dropship</p> </a> </li> <li> <time class="timeline-date" datetime="2014-01-07 00:00">January 07, 2014</time> <a href=""> <img class="img-responsive" src="http://placekitten.com/g/630/330" alt="" /> <p>Game Informer Cover</p> </a> </li> <li> <time class="timeline-date" datetime="2014-02-11 00:00">February 11, 2014</time> <a href=""> <img class="img-responsive" src="http://placekitten.com/630/330" alt="" /> <p>Evolve Box Art</p> </a> </li> </ul> </div> <!-- HUNTERS (fupks) --> <!-- GRIFFIN (because this is MY PEN, I get to do the footer nav that I wanted) <div class="character"></div> --> <!-- MONSTERS (BhLyC) --> <!-- GOLIATH <div class="character"></div> --> <!-- MEDIA --> <h2 hidden>Media</h2> <div class="swipe-container"> <div id="Main-carousel" class="swipe"> <div class="swipe-wrap"> <div class="slide" data-title data-url-title data-url data-youtube-id="m97O1dQAyhc" data-share data-tweet > <div class="wrapper-16-9"> <iframe id="player-m97O1dQAyhc" type="text/html" frameborder="0" allowfullscreen="1" width="100%" height="100%" src="https://www.youtube.com/embed/m97O1dQAyhc?showinfo=0&amp;rel=0&amp;enablejsapi=1&amp;wmode=opaque"></iframe> </div> <h3 class="slide-title">Slide 1</h3> </div> <div class="slide" data-title data-url-title data-url data-phone data-tablet data-desktop data-tv data-share data-tweet > <div class="wrapper-16-9"> <img src="http://placekitten.com/g/1120/630" alt="" /> </div> <h3 class="slide-title">Slide 2</h3> </div> <div class="slide" data-title data-url-title data-url data-phone data-tablet data-desktop data-tv data-share data-tweet > <div class="wrapper-16-9"> <img src="http://placekitten.com/g/560/315" alt="" /> </div> <h3 class="slide-title">Slide 3</h3> </div> <div class="slide" data-title data-url-title data-url data-phone data-tablet data-desktop data-tv data-share data-tweet > <div class="wrapper-16-9"> <img src="http://placekitten.com/g/800/400" alt="" /> </div> <h3 class="slide-title">Slide 4</h3> </div> <div class="slide" data-title data-url-title data-url data-phone data-tablet data-desktop data-tv data-share data-tweet > <div class="wrapper-16-9"> <img src="http://placekitten.com/g/900/500" alt="" /> </div> <h3 class="slide-title">Slide 5</h3> </div> </div> <nav> <h1 hidden>carousel nav</h1> <span class="prev disabled">previous slide</span> <span class="next">next slide</span> </nav> <!-- <div class="overlay or modal"><span class="close-svg">close</span></div> --> <div class="tray"> <span class="share-svg">share</span> <span class="download-svg">download</span> </div> </div> </div> <div> <div id="Thumb-carousel" class="swipe"> <div class="swipe-wrap"> <div class="slide"> <a class="thumb current" href="" data-count="0"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 1</span> <time class="thumb-date "><i class="fa fa-clock-o"></i> date</time> </a> <a class="thumb" href="" data-count="1"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 2</span> <time class="thumb-date"><i class="fa fa-clock-o"></i> date</time> </a> <a class="thumb" href="" data-count="2"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 3</span> <time class="thumb-date"><i class="fa fa-clock-o"></i> date</time> </a> <a class="thumb" href="" data-count="3"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 4</span> <time class="thumb-date"><i class="fa fa-clock-o"></i> date</time> </a> </div> <div class="slide"> <a class="thumb" href="" data-count="4"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 5</span> <time class="thumb-date"><i class="fa fa-clock-o"></i> date</time> </a> <!--<a class="thumb" href="" data-count="5"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 6</span> <time class="thumb-date">date</time> </a>--> <!--<a class="thumb" href="" data-count="6"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 7</span> <time class="thumb-date">date</time> </a>--> <!--<a class="thumb" href="" data-count="7"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 8</span> <time class="thumb-date">date</time> </a>--> </div> </div> <nav> <h1 hidden>thumb nav</h1> <span class="prev disabled">previous slide</span> <span class="next">next slide</span> <ul class="dots"> <li class="current"><i class="fa fa-square"></i></li> <li><i class="fa fa-square"></i></li> </ul> </nav> </div> </div> <!-- COMMUNITY --> <h2 hidden>Community</h2> <div class="community"> <!--Column#2--> <div class="col col3"> <div class="post featured"> <a href=""><img class="img-responsive" src="http://placekitten.com/g/660/400" alt="" /></a> <span>Oh no! The professor will hit me! But if Zoidberg 'fixes' it&hellip; then perhaps gifts! A true inspiration for the children. Too much work. Let's burn it and say we dumped it in the sewer. My fellow Earthicans, as I have explained in my book 'Earth in the Balance'', and the much more popular ''Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards. Professor, make a woman out of me. Hey, guess what you're accessories to.</span> <div class="tray"> <time datetime>XX days ago</time> <a class="icon twitch" href="">TwitchTV</a> </div> </div> <div class="col"> <div class="post"> <a href=""><img class="img-responsive" src="http://placekitten.com/g/320/260" alt="" /></a> <span>Noooooo! Shinier than yours, meatbag. And so we say goodbye to our beloved pet, Nibbler, who's gone to a place where I, too, hope one day to go. The toilet.</span> <div class="tray"> <time datetime>XX days ago</time> <a class="icon facebook" href="">facebook</a> </div> </div> <div class="post"> <ul> <li>Meh.</li> <li>Who am I making this out to?</li> <li>Robot 1-X, save my friends! And Zoidberg!</li> </ul> <div class="tray"> <time datetime>XX days ago</time> <a class="icon twitter" href="">Twitter</a> </div> </div> <div class="post"> <span>I was all of history's great robot actors - Acting Unit 0.8; Thespomat; David Duchovny! You guys realize you live in a sewer, right? Bender, we're trying our best. Fry, we have a crate to deliver. And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it!</span> <div class="tray"> <time datetime>XX days ago</time> <a class="icon facebook" href="">Facebook</a> </div> </div> </div> <div class="col"> <div class="post"> <span>OK, if everyone's finished being stupid. You, a bobsleder!? That I'd like to see! It doesn't look so shiny to me. OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can.</span> <div class="tray"> <time datetime>XX days ago</time> <a class="icon twitter" href="">Twitter</a> </div> </div> <div class="post"> <a href=""><img class="img-responsive" src="http://placekitten.com/g/320/260" alt="" /></a> <span>Oh sure! Blame the wizards! Alright, let's mafia things up a bit. Joey, burn down the ship. Clamps, burn down the crew. Stop it, stop it. It's fine. I will 'destroy' you! Spare me your space age technobabble, Attila the Hun! File not found. I'm sure those windmills will keep them cool.</span> <div class="tray"> <time datetime>XX days ago</time> <a class="icon gplus" href="">Google+</a> </div> </div> <div class="post"> <ul> <li>Bender, we're trying our best.</li> <li>Ugh, it's filthy! Why not create a National Endowment for Strip Clubs while we're at it?</li> <div class="tray"> <time datetime>XX days ago</time> <a class="icon twitter" href="">Twitter</a> </div> </ul> </div> </div> </div> <!--Column#1--> <div class="col col2"> <div class="post"> <a href=""><img class="img-responsive" src="http://placekitten.com/g/430/350" alt="" /></a> <ol> <li>Fry, you can't just sit here in the dark listening to classical music.</li> <li>Michelle, I don't regret this, but I both rue and lament it.</li> <li>You're going to do his laundry?</li> </ol> <div class="tray"> <time datetime>XX days ago</time> <a class="icon facebook" href="">Facebook</a> </div> </div> <div class="post"> <a href=""><img class="img-responsive" src="http://placekitten.com/g/430/350" alt="" /></a> <span>And so we say goodbye to our beloved pet, Nibbler, who's gone to a place where I, too, hope one day to go. The toilet. Interesting. No, wait, the other thing: tedious. Kif might! We're rescuing ya. Negative, bossy meat creature!</span> <div class="tray"> <time datetime>XX days ago</time> <a class="icon gplus" href="">Google+</a> </div> </div> <div class="post"> <span>Negative, bossy meat creature! The alien mothership is in orbit here. If we can hit that bullseye, the rest of the dominoes will fall like a house of cards. Checkmate. She also liked to shut up! OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can. You seem malnourished. Are you suffering from intestinal parasites?</span> <div class="tray"> <time datetime>XX days ago</time> <a class="icon gplus" href="">Google+</a> </div> </div> <div class="post"> <span>Kif might! Come, Comrade Bender! We must take to the streets! Too much work. Let's burn it and say we dumped it in the sewer. Come, Comrade Bender! We must take to the streets!</span> <div class="tray"> <time datetime>XX days ago</time> <a class="icon twitter" href="">Twitter</a> </div> </div> </div> </div> <!-- NEWS --> <div class="news"> <h2 hidden>News</h2> <div class="article"> <a class="thumb" href=""> <img class="img-responsive" src="http://placekitten.com/g/250/225" alt="" /> </a> <h3 class="article-title"><a href="">Team Nerdist Takes on Evolve at E3 Tournament</a></h3> <time class="article-date" datetime>XX days ago</time> <p class="excerpt">The challenge has been issued! At E3, four teams of nerds – led by the <a href="">Nerdist.com</a> crew – will face off to see who has the best Hunters (and the best beast mode Monster).</p> </div> <div class="article"> <!--<a class="thumb" href=""> <img class="img-responsive" src="http://placekitten.com/g/250/225" alt="" /> </a>--> <h3 class="article-title"><a href="">Games Radar’s 100 Most Anticipated</a></h3> <time class="article-date" datetime>XX days ago</time> <p class="excerpt">GamesRadar.com picks Evolve as one of their ‘100 most anticipated games for 2014’!</p> </div> <div class="article"> <!--<a class="thumb" href=""> <img class="img-responsive" src="http://placekitten.com/g/250/225" alt="" /> </a>--> <h3 class="article-title"><a href="">Box Art Revealed</a></h3> <time class="article-date" datetime>XX days ago</time> <p class="excerpt">GamesRadar.com picks Evolve as one of their ‘100 most anticipated games for 2014’!</p> </div> <div class="article"> <!--<a class="thumb" href=""> <img class="img-responsive" src="http://placekitten.com/g/250/225" alt="" /> </a>--> <h3 class="article-title"><a href="">2k and Turtle Rock Studios Announce Evolve</a></h3> <time class="article-date" datetime>XX days ago</time> <p class="excerpt">GamesRadar.com picks Evolve as one of their ‘100 most anticipated games for 2014’!</p> </div> </div> <!-- ARTICLE --> <article> <figure><img class="img-responsive" src="http://placekitten.com/g/1100/425" alt="" /></figure> <h2>Love's Labors Lost in Space</h2> <p>And from now on you're all named Bender Jr. And then the battle's not so bad? Well, then good news! It's a suppository. Oh yeah, good luck with that. No, she'll probably make me do it. Yes, I saw. You were doing well, until everyone died.</p> <span class="h4">The Cyber House Rules</span> <p>Ow, my spirit! Alright, let's mafia things up a bit. Joey, burn down the ship. Clamps, burn down the crew. And when we woke up, we had these bodies. Fry! Stay back! He's too powerful! Michelle, I don't regret this, but I both rue and lament it. Fry, we have a crate to deliver.</p> <ul> <li>As an interesting side note, as a head without a body, I envy the dead.</li> <li>I don't want to be rescued.</li> </ul> <span class="h5">A Head in the Polls</span> <p>Whoa a real live robot; or is that some kind of cheesy New Year's costume? All I want is to be a monkey of moderate intelligence who wears a suit&hellip; that's why I'm transferring to business school! I'm sure those windmills will keep them cool.</p> <span class="h6">The Honking</span> <p>Large bet on myself in round one. Have you ever tried just turning off the TV, sitting down with your children, and hitting them? It's toe-tappingly tragic! Bender, quit destroying the universe!</p> <ol> <li>Well, then good news! It's a suppository.</li> <li>No argument here.</li> <li>And when we woke up, we had these bodies.</li> <li>Switzerland is small and neutral! We are more like Germany, ambitious and misunderstood!</li> </ol> <p>Kids have names? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? I love this planet! I've got wealth, fame, and access to the depths of sleaze that those things bring. When the lights go out, it's nobody's business what goes on between two consenting adults. In your time, yes, but nowadays shut up! Besides, these are adult stemcells, harvested from perfectly healthy adults whom I killed for their stemcells. No! The kind with looting and maybe starting a few fires!</p> </article> <!-- PREORDER --> <div class="preorder"> <h2>Preorder</h2> <form class="options"> <div id="region" class="select"> <span class="option default" data-toggle="dropdown" data-behavior="click">Choose Region</span> <ul class="dropdown"> <li class="option">United States</li> <li class="option">Canada</li> </ul> </div> <div id="platform" class="select disabled"> <span class="option default" data-toggle="dropdown" data-behavior="click">Choose Platform</span> <ul class="dropdown"> <li class="option">XBOX</li> <li class="option">PC</li> <li class="option">PS4</li> </ul> </div> <div id="retailer" class="select disabled"> <span class="option default" data-toggle="dropdown" data-behavior="click">Choose Retailer</span> <!--<ul class="dropdown"> <li></li> </ul>--> </div> <button class="disabled">Coming Soon</button> </form> </div> <!-- ERRORS --> <div class="error"> <h2>Error Pages</h2> <h3>404 - not found</h3> <h3>403 - forbidden</h3> <h3>401 - unauthorized</h3> <h3>500 - server error</h3> <h3>Maintenance</h3> </div> </div> </section> <!-- <div id="mobile-nav"></div> try to make this dynamically --> <footer class="sticky"> <div class="wrapper"> <small class="quiet">&copy; 2010–2014 TAKE-TWO Interactive Software, Inc. <span style="float:right;">CSS by <a href="http://alyda.me" target="_blank">Aly/da</a>.</span></small> </div> </footer>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/swipe/2.0/swipe.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.2.0/snap.svg-min.js'></script>
<script src='http://codepen.io/alyda/pen/nqwxI.js'></script>
<script src='http://codepen.io/alyda/pen/tughI.js'></script> <script src="js/index.js"></script>
</body>
</html>

Evolve Patterns - Script Codes CSS Codes

/* The version of Bourbon used in this Pen was 4.* */
@import "bourbon";
/* The version of Bourbon used in this Pen was 4.* */
@import "bourbon"; //https://codepen.io/alyda/pen/KDnxI.scss
// $$\ $$\ $$$$$$\ $$$$$$\ $$$$$$$\
// \$$\ $$ |\____$$\ $$ __$$\ $$ _____|
// \$$\$$ / $$$$$$$ |$$ | \__|\$$$$$$\
// \$$$ / $$ __$$ |$$ | \____$$\
// \$ / \$$$$$$$ |$$ | $$$$$$$ |
// \_/ \_______|\__| \_______/
// Utils: vars, mixins, functions, etc
$debug: false !default;
// COLORS ---------------------------------------------------------------------
$black: #0f0f0f;
$almost-black: #1a1a1a;
$red: #ff3c1f;
$white: #ececec;
$off-white: #ededed;
$gray: #333; // 262626 555 777
$blue: #4e8790;
$primary: $red;
$secondary: $off-white;
//$tertiary: $gray;
$accent: $blue;
//$accent2: #444; //dark
//$accent3:
$body-bg-color: $almost-black; //#4d4d4d;
$header-bg-color: $body-bg-color;
//$nav-bg-color: $header-bg-color;
$text-color: $secondary;
$quiet-color: #aaa; //muted
$loud-color: $primary;
$bright: $white;
$dark: $black;
$heading-color: #fff;
$link-color: $primary;
$link-hover-color: #ccc;
//$link-hover-color: saturate(#d54aaf, 20%);
$link-visited-color: $link-color; //$accent;
$rgba: rgba(0, 0, 0, 0.8); //need a better name
// FONTS ----------------------------------------------------------------------
$base-font-family: $helvetica;
$fallback: 'Segoe', $base-font-family;
$base-font-size: 16; //do not add 'px'
$line-height: em(22.48); //1.405 or modular-scale(16px, 1, $augmented-fourth);
//$fixed-font-family: monospace !default;
//$fixed-font-size: 15; //do not add 'px'
//$fixed-line-height: 1.2; // or modular-scale(15px, 1, $minor-third);
$UltraLight: 'UNicod Sans UltraLight', $fallback; // 100
$Light: 'UNicod Sans Light', $fallback; // 200
$Medium: 'UNicod Sans Medium', $fallback; // 500
$heading-font-family: $UltraLight;
$heading-font-weight: 500; //should be 100
$h1: 36; //2.25 or modular-scale(16px, ?, ?.???);
$h2: $h1;
$h3: 24; //1.5 or modular-scale(16px, 1, $perfect-fifth);
$h4: 18; //1.125 or modular-scale(16px, 1, $major-second);
$h5: $h4;
$h6: $h4;
$mobile-font-size: 20; //do not add 'px'
$mobile-line-height: em(26, $mobile-font-size); //1.286
$mobile-h1: 48;
$mobile-h2: 30;
//$mobile-h3: $mobile-h2;
//$mobile-h4: $mobile-h2;
//$mobile-h5: $mobile-h2;
$mobile-h6: $mobile-font-size;
$base-url: 'http://evolvegame.com/';
$img-path: '_/css/img/';
// GRID -----------------------------------------------------------------------
//@import "https://codepen.io/alyda/pen/tAism.scss";
//@import "https://s3-us-west-2.amazonaws.com/s.cdpn.io/129745/neat-helpers.scss";
// because we are using codepen, some of these settings must go into https://codepen.io/alyda/pen/KDnxI because of bourbon/neat dependencies
$min-width: 320; //or 480 and remove initial-scale=1.0,
//$sidebar: 240px; //(mobile nav)
$max-width: em(1140);
$gutter: em(20);
//$visual-grid: true;
$visual-grid-color: red;
$visual-grid-opacity: 0.1;
$desktop-cols: 12; // 12 $grid-columns
$mobile-cols: 4;
//$mobile: 480;
//$tablet: 768;
//$desktop: 960;
//$mobile-breakpoint: em($mobile);
//$tablet-breakpoint: em($tablet);
//$desktop-breakpoint: em($desktop);
// 320-479 XS
// 480-767 Small
// 768-1919 Medium
// 1920-oo Large
// // XSmall screen / phone
// $screen-xs: 320px !default; // & up
// $screen-phone: $screen-xs !default;
// // Small screen
// $screen-sm: 480px !default; // & up
// // Medium screen / tablet
//$screen-md: 768px !default; // & up
//$screen-tablet: $screen-md !default;
// // Large screen / desktop
//$screen-desktop: 960px !default;
// // XLarge Large screen / tv
// $screen-lg: 1920px !default; // & up
// $screen-tv: $screen-lg !default;
// // So media queries don't overlap when required, provide a maximum
// $screen-xs-max: ($screen-sm - 1) !default;
//$screen-sm-max: ($screen-md - 1) !default;
// $screen-md-max: ($screen-lg - 1) !default;
// Define your breakpoints (https://codepen.io/alyda/pen/KDnxI)
$mobile: new-breakpoint(max-width em(767) 4);
$tablet: new-breakpoint(min-width em(768) max-width em(959));
$desktop: new-breakpoint(min-width em(960));
//@import "https://s3-us-west-2.amazonaws.com/s.cdpn.io/129745/neat-1.6.0.scss";
//@import "https://codepen.io/alyda/pen/ImcBh.scss";
// Z-INDEXES !!!!
//$z-image: -5;
//$z-video: 0;
//$z-controls: 3;
//$z-content: 5;
//$z-nav: 20;
//$z-modals: 50;
//@import "global/fonts";
//@import url("//hello.myfonts.net/count/295a58"); // REQUIRED
//@include font-face(UNicod Sans Ultra Light, 'fonts/ultra', 200);
//@include font-face(UNicod Sans Light, 'fonts/light', 300);
//@include font-face(UNicod Sans Medium, 'fonts/medium', bold);
// $$\ $$\
// \__| \__|
// $$$$$$\$$$$\ $$\ $$\ $$\ $$\ $$$$$$$\ $$$$$$$\
// $$ _$$ _$$\ $$ |\$$\ $$ |$$ |$$ __$$\ $$ _____|
// $$ / $$ / $$ |$$ | \$$$$ / $$ |$$ | $$ |\$$$$$$\
// $$ | $$ | $$ |$$ | $$ $$< $$ |$$ | $$ | \____$$\
// $$ | $$ | $$ |$$ |$$ /\$$\ $$ |$$ | $$ |$$$$$$$ |
// \__| \__| \__|\__|\__/ \__|\__|\__| \__|\_______/
// debug Media Queries
// @mixin media-debug($message, $color: rgba(0 ,0 ,0, 0.3), $font-color: white ) {
// // https://codepen.io/niklas-r/pen/sHaAy
// &::before {
// font: 300 1em/1.2em 'Helvetica Neue', Helvetica, Arial, sans-serif;
// padding: .5em 0;
// content: $message;
// display: block;
// text-align: center;
// background: #{$color};
// color: #{$font-color};
// text-shadow: 0 1px grayscale(invert($font-color));
// position: fixed;
// bottom: 0;
// left: 0;
// right: 0;
// z-index: $z-debug;
// }
// } // end debug Media Queries
// Responsive image
//
// Keep images from scaling beyond the width of their parents.
@mixin img-responsive($display: block) { display: $display; max-width: 100%; // Part 1: Set a maximum relative to the parent height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}
// --------
@mixin wrappers { .wrapper-16-9 { @include wrapper; } //widescreen .wrapper-4-3 { @include wrapper(4, 3); } //standard
}
@mixin wrapper($width: 16, $height: 9){ position: relative; padding-bottom: percentage($height / $width); height: 0; :only-child { @extend %fit-to-wrapper; }
}
// --------
@mixin svgs { [class$="-svg"] { & + & { //remember, this is an IF case, not a WHEN (as in we don't always expect this to occur) margin-right: 10px; /*because they are floating right*/ //can't use ems because of hide-text() } } .download-svg, .share-svg { float: right; @include size(30px 24px); //can't use ems because of hide-text() @include pad(6px); //can't use ems because of hide-text() } .download-svg { @include svg('rel-3/download') } .share-svg { @include svg('rel-3/share') } .close-svg { @include position(absolute, 20px 20px auto auto); //can't use ems because of hide-text() @include svg( 'rel-3/close_button', 'rel-3/close_button_hover' ); @include size(32px); //can't use ems because of hide-text() }
}
@mixin svg($normal, $hover: false){ cursor: pointer; display: block; background-image: url('#{$base-url}'+'#{$img-path}'+$normal+'.svg'); background-repeat: no-repeat; //background-position: center; //background: url($normal) no-repeat center; @include hide-text; &:hover { @if type-of($hover) == string { $hover: unquote($hover); background-image: url('#{$base-url}'+'#{$img-path}'+$hover+'.svg'); background-repeat: no-repeat; } @else { opacity: .9; } }
}
// --------
@mixin ellipsis($lines-to-show: 3, $line-height: $line-height) { display: block; /* Fallback for non-webkit */ height: $lines-to-show * $line-height; /* Fallback for non-webkit */ display: -webkit-box; -webkit-line-clamp: $lines-to-show; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
// --------
//@mixin lists($type) {
// @include list-#{$type};
//}
@mixin list-centered { // https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/ // READ THE FIRST PARAGRAPH OF THAT ARTICLE text-align: center; li { float: none; display: inline-block; }
}
// --------
@mixin navigation { nav { a, span { @include nav; } } nav, .subnav, nav .wrapper { @include clearfix; &> ul > li, //nav &> li { //.subnav @extend .list-inline; } &> ul { //margin: 0; // don't use @extend %reset; } } .subnav { //height: 36px; background: $rgba; //background-clip: content-box; a, span { padding: 7px 10px; } a, span { @include base; color: $primary; font-family: $Light; } .current a, .current span, .text { color: $bright; } .text { cursor: default; } @include respond-to(phones) { @include list-centered; } } .dropdown { @include dropdown; .open & { display: block; //!important } } //#mobile-nav { //http://refills.bourbon.io/ - sliding menu //}
}
@mixin dropdown() { position: absolute; display: none; //z-index: $z-nav; background: $rgba; li { border-top: 1px solid transparent; .open & a { background: $primary; } } .open & { span, a { color: $dark; &:hover { color: $bright; } } }
}
@mixin nav(){ @include base; @include pad(em(7) em(10)); color: $primary; //anchors are already red, but spans aren't &:hover { background: $primary; // color: $bright; }
}
@mixin buttons(){ .btn, button { @include button; & + & { //remember, this is an IF case, not a WHEN (as in we don't always expect this to occur) margin-left: em(20); } &.red, &.primary { @include button($primary) }; &.blue, &.accent { @include button($accent) }; } button { @extend %reset; }
}
@mixin button ($bg: $primary) { //#555 @include base; @include pad(em(9) em(8) em(8)); width: em(230); //min- @include respond-to(phones) { width: em(250, $mobile-font-size); } background: $bg; color: $bright !important; //do some magic here text-align: center; //transition: all 0.2s ease; &:hover { background: $dark; }
}
@mixin base { //@extend .link; display: inline-block; cursor: pointer; font-family: $Medium; @include uc; //text-decoration: none; white-space: nowrap; &:hover { color: $bright; text-decoration: none; } &.disabled { cursor: not-allowed; background: $gray; color: #777 !important; &:hover { color: #777; background: $gray; } }
}
// --------
@mixin boxes { .boxes { @include row(); .wrap { padding: 0 25px 40px; } .featured, .latest { @include box; @include respond-to(phones) { margin-bottom: 40px; } } .featured { @include stacked; } .latest { @include omega; @include side-by-side(latest); } }
}
@mixin box { @include span-columns(6); //@include omega(2n); @include respond-to(phones) { @include span-columns(4); } background: $rgba; .h2 { text-align: center; & + p { text-align: center; //margin-left: $gutter; //margin-right: $gutter; } } .btn { clear: both; display: block; margin: 0 auto; //40px } //border: 1px solid red;
}
@mixin stacked { img { display: block; margin: 0 auto $gutter; }
}
@mixin side-by-side($class) { img { float: left; margin-right: $gutter; margin-bottom: $gutter; //margin-left: 40px; @include respond-to(max-width 480px) { float:none; margin: 0 auto 20px; width: 100%; } } h3 { //.latest-title or [class$="title"] margin: 0; } .#{$class}-date { //.latest-date or [class$="date"] @extend .italic; @extend .date; //color: $quiet-color; // this may be global for all time objects } .#{$class}-title ~ p { @include ellipsis; margin-top: 5px; }
}
// --------
@mixin timeline { .timeline { @include row(); background: $rgba; .btn { float: right; } h2 { margin-left: 40px; // $gutter * 2 } // specificty. normally this would go above the 2 separate declarations, but in order for the responsive mq to work (without !important or more specificity) it should go here h2, .btn { margin-top: $gutter; @include respond-to(max-width 480px) { display: block; float: none; margin: $gutter auto; text-align: center; } } } .timeline .wrap { @include clearfix; //@include row(table); margin: 40px; li { @include span-columns(3); @include entry; @include respond-to(phones) { @include span-columns(4); & + li { margin-top: 40px; } } } }
}
@mixin entry { //timeline- background: url(#{$base-url}#{$img-path}rel-3/timeline-dot.png) no-repeat center 30px; time { // is this the same as an h4??? display: block; text-align:center; font-family: $Medium; @include uc; @include respond-to(phones) { max-width: 230px; margin: 0 auto; padding-top: $gutter; border-top: 1px solid #393939; } } a { display: block; position: relative; margin-top: 40px; color: $bright; &:before { //@include position(absolute, -10px null null 50%); display: block; position: absolute; top: -17px; left: 50%; margin-left: -8px; content: url("#{$base-url}#{$img-path}rel-3/marker.png"); @include size(17px 10px); //background-image: ; //background-repeat: no-repeat; } img { border: 1px solid; @include pulse; } &:hover { color: $primary; &:before { content: url("#{$base-url}#{$img-path}rel-3/marker-red.png"); } } }
}
// --------
@mixin classes($class) { .#{$class} { //@include clearfix; @include row(); a { @include span-columns(3); @include respond-to(phones) { @include span-columns(2); @include omega(2n); } @include respond-to(max-width 480px) { //@include span-columns(4); //margin: 0 !important; width: 100% !important; @include omega(); img { width: 100% !important; /* override .img-responsive */ } } @include class(); } }
}
@mixin class { img { } &:hover img { //http://refills.bourbon.io/ - image with gradient overlays ??? I hope that will work } .class-title { text-align: center; }
}
//@import "mixins/characters";
// --------
@mixin posts($div) { .#{$div} { @include clearfix; } .col { @include post(); &.col2{width:40%;} &.col3{width:60%;} & & { //sub cols width: 50%; padding:0; padding-left:0px; //& ~ & { // padding-left:16px; //} } @include respond-to(phones) { width: 100% !important; img { width: 100%; } & & { width: 100%; } }
// @include respond-to(tablet) {
// width: 50%;
// &.featured {
// width: 100%;
// }
// } }
}
@mixin post() { float: left; box-sizing: border-box; width:20%; // padding: 8px; .post { padding: 10px; width:100%; //margin-bottom:12px; clear:both; background-color: #000; /*#eaeaea*/ box-shadow:rgba(0,0,0,0.3) 0px 0px 5px; border:5px solid #1a1a1a; box-sizing: border-box; //cursor:pointer; @include pulse; img + span, a + span { display: block; padding-top: 20px; } }
}
// --------
@mixin news() { .news { .article { @include row(); @include article(article); border-top: 1px solid #333; /*& + & { clear: both; }*/ } } article { @include article(article); }
}
@mixin article($class) { .thumb { @include span-columns(2); margin: $gutter; margin-right: $gutter; //& + .copy { //} } .main { } .#{$class}-date { @extend .italic; @extend .date; }
}
//@import "mixins/select";
// --------
@mixin sliders { @include swipe; // .swipe { // @include slider(thumbs); // @include slider-nav(thumbs); // } //.swipe-container { // position: relative; // background: $rgba; @include slider; //(main); @include slider-nav; //(main); //}
}
@mixin slider { //($var) // Thumbs .swipe { .slide { // @include row(); padding-left: 50px; padding-right: 50px; .thumb { @include span-columns(3); // 4-count. could be 2-count @include respond-to(phones) { @include span-columns(2); @include omega(2n); } img { outline: 1px solid $dark; outline-offset: -1px; @include pulse; } @include respond-to(max-width 480px) { width: 100% !important; @include omega(); img { width: 100% !important; /* override .img-responsive */ } } &.current, &:hover { img { outline-width: 3px; outline-color: $bright; outline-offset: -3px; //http://stackoverflow.com/a/19160711 } } &:hover { text-decoration: none; } .thumb-title { display: block; } .thumb-date { @extend .date; //color: $quiet-color; } } } } .dots { @include list-centered; @include dots; } // Main .swipe-container { position: relative; .slide { padding-left: 0; padding-right: 0; } .tray { @include clearfix; position: absolute; right: 10px; bottom: 20px; } }
}
@mixin slider-nav() { // Thumbs .swipe { .prev, .next { position: absolute; top: 0; height: 68%; // desktop width: 40px; background-size: 18px; /*&:not('.disabled') {*/ background-color: $primary; /*}*/ &.disabled { background-color: #333; } @include respond-to(phones) { height: 200px; top: 50%; margin-top: -150px; } } .prev { left: 0; @include svg('rel-3/arrow-left', 'rel-3/arrow-left-hover'); background-position: center; } .next { right: 0; @include svg('rel-3/arrow-right', 'rel-3/arrow-right-hover'); background-position: center; //should go into svg mixin } } // Main .swipe-container { position: relative; .prev, .next { //position: absolute; top: 50%; margin-top: -42px; @include size(75px 84px); background: rgba(0,0,0,.5); background-size: 36px; background-position: center; //might need to add this to the svg mixin &.disabled { display: none; } &:hover { opacity:.8; } } .prev { left: 10px; @include svg('rel-3/arrow-left-lg'); } .next { right: 10px; @include svg('rel-3/arrow-right-lg'); } }
}
// base
@mixin swipe { // https://github.com/thebird/Swipe .swipe { overflow: hidden; visibility: hidden; position: relative; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap > div { float:left; width:100%; position: relative; }
}
@mixin dots { text-align: center; li { width: 10px; height: 10px; margin: 10px; color: #818181; cursor: pointer; &:hover { color: $primary; } &.current { color: $bright; } }
}
//@import "mixins/modals"; http://refills.bourbon.io/ - modals
@mixin modals { .modal { @include modal; }
}
@mixin modal { position: relative;
}
// --------
@mixin pulse { //need a better name transition: all 0.2s ease; &:hover { transform: scale(0.98); }
}
// --------
@mixin respond-to($media) { @if $media == phones { @include media($mobile) { @content; } } @else if $media == tablets { @include media($tablet) { @content; } } @else if $media == desktop { @include media($desktop) { @content; } } @else { @include media($media) { @content; } }
}
// --------
%reset { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
//table {
// border-collapse: collapse;
// border-spacing: 0;
//}
// $$\
// $$ |
// $$$$$$$\ $$$$$$\ $$$$$$$\ $$$$$$\
// $$ __$$\ \____$$\ $$ _____|$$ __$$\
// $$ | $$ | $$$$$$$ |\$$$$$$\ $$$$$$$$ |
// $$ | $$ |$$ __$$ | \____$$\ $$ ____|
// $$$$$$$ |\$$$$$$$ |$$$$$$$ |\$$$$$$$\
// \_______/ \_______|\_______/ \_______|
html, body { @extend %reset; @include fill-parent; min-width: em($min-width); background-color: $body-bg-color; @include respond-to(phones) { min-width: em($min-width, $mobile-font-size); }
}
//html {
// background-color: $body-bg-color;
//}
body { color: $text-color; font-family: $base-font-family; //font-weight: $base-font-weight; font-size: em($base-font-size); line-height: $line-height; -webkit-font-smoothing: antialiased; @include respond-to(phones) { font-size: em($mobile-font-size); line-height: $mobile-line-height; }
}
.wrapper { margin: 0 auto; max-width: $max-width;
}
.main-header { margin-bottom: 1.125em; //em($gutter); background: $header-bg-color; nav { border-top: 1px solid #262626; border-bottom: 1px solid #262626; @include respond-to(desktop) { height: 38px; /* keep a static height with thicker bottom-border on nav items */ } }
}
#primary-nav { @include respond-to(phones) { display:none; } &> li { border-left: 1px solid #262626; &:last-child { border-right: 1px solid #262626; } } span, a { min-width: em(130); // good for english, maybe not other languages padding-left: $gutter; } [data-toggle="dropdown"] { &:after { content: url('#{$base-url}#{$img-path}rel-3/arrow-down-red.png'); padding-left: em(23); } } &> .current, &> .open, :hover { [data-toggle="dropdown"] { &:after { content: url('#{$base-url}#{$img-path}rel-3/arrow-down-white.png'); padding-left: em(23); } } } .current, .open { &> span, &> a { color: $bright; } } &> .current { &> span, &> a { border-bottom: em(3) solid $primary; } } .open { background: $primary; }
}
#preorder-btn { //@extend .btn.red; float: right; &.current { // don't forget about me & my hover states background: $dark; border-bottom: em(3) solid $primary; &:hover { } } @include respond-to(phones) { display: block; float: none; margin: $gutter auto; }
}
//figure, ul { //@extend %reset;
//}
ul { @extend %reset; //& > & { //@extend %list-unstyled; //}
}
.img-responsive { @include img-responsive();
}
@include wrappers;
%fit-to-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
@include svgs;
@include modals;
//.ragged {
//}
//.addthis_toolbox {
// li {
// }
//}
// $$\
// $$ |
// $$$$$$\ $$\ $$\ $$$$$$\ $$$$$$\
// \_$$ _| $$ | $$ |$$ __$$\ $$ __$$\
// $$ | $$ | $$ |$$ / $$ |$$$$$$$$ |
// $$ |$$\ $$ | $$ |$$ | $$ |$$ ____|
// \$$$$ |\$$$$$$$ |$$$$$$$ |\$$$$$$$\
// \____/ \____$$ |$$ ____/ \_______|
// $$\ $$ |$$ |
// \$$$$$$ |$$ |
// \______/ \__|
@mixin typography { // the following all have the same styles, but it is easier to read the css if they are separated h1, .h1 { @extend .h1; margin: 1em 0 0.5em; @include uc; } h2, .h2 { @extend .h2; margin: 1em 0 0.5em; @include uc; } h3, .h3 { @extend .h3; margin: 1em 0 0.5em; @include uc; } h4, .h4 { @extend .h4; margin: 1em 0 0.5em; @include uc; } h5, .h5 { @extend .h5; margin: 1em 0 0.5em; @include uc; } h6, .h6 { @extend .h6; margin: 1em 0 0.5em; @include uc; } @include respond-to(phones) { h1 { //, .h1 font-size: em($mobile-h1, $mobile-font-size); line-height: 1em; } h2, h3, h4, h5 { //.h2, .h3, .h4, .h5 font-size: em($mobile-h2, $mobile-font-size); line-height: 1em; } h6 { //, .h6 font-size: em($mobile-h6, $mobile-font-size); } } p { @extend .block-margins; } // ul, ol, pre a { @extend .link; img { @include pulse; } } i, em { @extend .italic; } b, strong { @extend .bold; } ul { @extend .list-unstyled; } ol { @extend .ordered-list; } //pre, code { @extend .fixed; }
}
.link { color: $link-color; text-decoration: none; //border-bottom: 1px solid rgba(34,85,221,0.1); cursor: pointer; &:visited { color: $link-visited-color; } &:hover, &:visited:hover { color: $link-hover-color; text-decoration: underline; } &:active, &:focus { color: $link-hover-color; outline: none; }
}
//.fixed { font-family: $fixed-font-family; font-size: $fixed-font-size; line-height: $fixed-line-height; }
.h1, .h2, .h3, .h4, .h5, .h6 { display: block; color: $heading-color; font-family: $heading-font-family; font-weight: $heading-font-weight; text-rendering: optimizeLegibility; // Fix the character spacing for headings // this is pretty cool, but it creates too much markup //& + & { // remember, this is an if case, not a when. // margin: 0 !important; //}
}
.h1, .h2 { line-height: 1.1; }
.h3, .h4 { line-height: 1.3; }
.h1 { font-size: em($h1); /*letter-spacing: -2px;*/ }
.h2 { font-size: em($h2); /*letter-spacing: -1px;*/ }
.h3 { font-size: em($h3); }
.h4 { font-size: em($h4); font-family: $Medium; color: #999; }
.h5 { font-size: em($h5); font-family: $Medium; color: #999; }
.h6 { font-size: em($h6); font-family: $Medium; color: #999; }
.quiet { color: $quiet-color; }
.loud { color: $loud-color; }
.italic { font-style: italic; }
.bold { font-weight: 700; @extend .loud; }
@mixin uc { text-transform: uppercase; } //.uc { text-transform: uppercase; }
.block-margins { margin: 1em 0; }
.unordered-list { list-style-type: disc; }
.ordered-list { list-style: decimal; }
.list-unstyled { list-style-type: none; }
.date { color: $quiet-color;
}
//.typography {
@include typography();
//}
.list-inline { float: left;
}
//.list-centered {}
@include buttons;
@include navigation;
@include boxes; // Home
@include timeline; // Game
@include classes(hunters); // Hunters
@include classes(monsters); // Monsters
//@import "layout/characters"
@include sliders; // Media
@include posts(community); // Community
@include news(); // News | Article
//@import "layout/preorder";
@mixin select() { .preorder { @include row() } .options { @include span-columns(4); @include shift(4); border-top: 1px solid #333;
/* border: 1px solid; */ button { display: block; margin: 1em auto; } } .select { position: relative; //@include options; text-align: center; /*& + & {*/ border-bottom: 1px solid #333; /*}*/ span, li { display: block; @include fill-parent; padding: .5em; @include uc; &:hover { background: #0f0f0f; } &.selected { cursor: pointer; } .disabled & { color: #333; cursor: not-allowed !important; &:hover { background: none; } } } }
}
//@mixin options() {
//}
@include select;
// @import "lang/lang";
// Internet Explorer
// @import "ie.scss";
//@import "shame";
[hidden] { display: none !important;
}

Evolve Patterns - Script Codes JS Codes

// This should go into 'stuff for head' but it ouputs something weird on the 'full' page, but not on 'debug' nor the 'editor' page. Slight FOUC, but oh well...
(function() { var path = '//easy.myfonts.net/v2/js?sid=190729(font-family=UNicod+Sans+UltraLight)&sid=190735(font-family=UNicod+Sans+Light)&sid=190736(font-family=UNicod+Sans+Medium)&key=Z8Hf5oVOYd', protocol = ('https:' == document.location.protocol ? 'https:' : 'http:'), trial = document.createElement('script'); trial.type = 'text/javascript'; trial.async = true; trial.src = protocol + path; var head = document.getElementsByTagName("head")[0]; head.appendChild(trial);
})();
Evolve Patterns - Script Codes
Evolve Patterns - Script Codes
Home Page Home
Developer Alyssa
Username alyda
Uploaded September 08, 2022
Rating 3
Size 27,954 Kb
Views 28,336
Do you need developer help for Evolve Patterns?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alyssa (alyda) Script Codes
Name
Evolve Media Gallery
Evolve JS
Evolve Logo SVG animation
Recommendation slider
360 Image Slider
Bootstrap Grid Configurator
Evolve Error Pages
Sass Photoshop to CSS letter-spacing function
Photo Gallery
CSS Patterns
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!