Patterns Screen

Developer
Derick Ruiz
Size
5,723 Kb
Views
10,120
  1. Patterns Screen Previews
  2. Patterns Screen HTML Codes
  3. Patterns Screen CSS Codes
  4. Patterns Screen JS Codes

How do I make an patterns screen?

What is a patterns screen? How do you make a patterns screen? This script and codes were developed by Derick Ruiz on 27 December 2022, Tuesday.

Patterns Screen Previews
IQ Test

Patterns Screen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Patterns Screen</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://unpkg.com/[email protected]/dist/flickity.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="Tracked" style="max-width: 414px; margin: 0 auto;"> <div class="Pstart(default) Pend(default) Ptop(default) Pbottom(default)"> <p class="Ff(default) Fz(u2) Lh(11) C(black)"> What am I noticing in my mind and body <span class="Fw(bold)">today</span>? </p> </div> <div class="Ff(default) Pstart(default) Pend(default) Pbottom(default) Ta(l) Td(u) Ta(l) C(chaliceSilver) Fz(default)">See my entire day.</div> <div class="BackgroundColor BackgroundColor--oxford Pstart(default) Pend(default) Ptop(default) Pbottom(default)"> <p class="Ff(default) Fz(u1) Lh(14) C(white)" style="font-size: 4vh;">

Patterns Screen - Script Codes CSS Codes

*,
*::before,
*::after { box-sizing: border-box;
}
input { border: none;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body,
p { margin: 0; padding: 0;
}
.Emotions { display: -ms-grid; display: grid; -ms-grid-columns: (50vw)[2]; grid-template-columns: repeat(2, 50vw); -ms-grid-rows: (calc(25vh - 11px))[4]; grid-template-rows: repeat(4, calc(25vh - 11px)); position: relative;
}
@-webkit-keyframes bounce { 0% { top: 50%; } 50% { top: 40%; } 100% { top: 50%; }
}
@keyframes bounce { 0% { top: 50%; } 50% { top: 40%; } 100% { top: 50%; }
}
.BackgroundColor--oxford { background-color: #090446;
}
.BackgroundColor--pastel { background-color: #786F52;
}
.BackgroundColor--rajah { background-color: #FEB95F;
}
.BackgroundColor--tractor { background-color: #F71735;
}
.BackgroundColor--pictoral { background-color: #C2095A;
}
.BackgroundColor--spanish { background-color: #E01A4F;
}
.BackgroundColor--smoky { background-color: #0C090D;
}
.BackgroundColor--caribeen { background-color: #03CEA4;
}
.BackgroundColor--white { background-color: white;
}
.Emotion { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative;
}
.W\(100\%\) { width: 100%;
}
.H\(100\%\) { height: 100%;
}
.W\(80\%\) { width: 80%;
}
.Pstart\(default\) { padding-left: 1rem;
}
.Pend\(default\) { padding-right: 1rem;
}
.Ptop\(default\) { padding-top: 1rem;
}
.Ptop\(u2\) { padding-top: 0.618rem;
}
.Pbottom\(u2\) { padding-bottom: 0.618rem;
}
.Pbottom\(default\) { padding-bottom: 1rem;
}
.Mtop\(d1\) { margin-top: 0.618rem;
}
.Mtop\(d2\) { margin-top: 0.618rem;
}
.Mtop\(u1\) { margin-top: 1.618rem;
}
.Mtop\(u2\) { margin-top: 2.61792rem;
}
.Mbottom\(d3\) { margin-bottom: 0.48589rem;
}
.C\(white\) { color: white;
}
.C\(chaliceSilver\) { color: #a0a0a0;
}
.Ff\(default\) { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.Fz\(default\) { font-size: 1rem;
}
.Fz\(u2\) { font-size: calc(16px * 1.272 * 1.272 * 1.272);
}
.Fz\(u1\) { font-size: 1.618rem;
}
.Fz\(10vh\) { font-size: 10vh;
}
.Lh\(14\) { line-height: 1.4;
}
.Lh\(11\) { line-height: 1.1;
}
.Fw\(bold\) { font-weight: 700;
}
.Fs\(italic\) { font-style: italic;
}
.Td\(u\) { text-decoration: underline;
}
.F\(left\) { float: left;
}
.W\(200vw\) { width: 200vw;
}
.W\(100vw\) { width: 100vw;
}
.Ox\(hidden\) { overflow-x: hidden;
}
.Oy\(hidden\) { overflow-y: hidden;
}
.Br\(default\) { border-right: 1px solid #252525;
}
.Bt\(default\) { border-top: 1px solid #252525;
}
.Br\(4px\) { border-radius: 4px;
}
.Ta\(c\) { text-align: center;
}
.Ta\(l\) { text-align: left;
}
.Clearfix:before,
.Clearfix:after { content: ""; display: table;
}
.Clearfix:after { clear: both;
}
.Screen { min-height: 100vh;
}
.Tracked--empty { background-color: #000; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.Tracked--emptyEmoji { font-size: 4.23580103125rem;
}
.FlexGrid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.FlexGrid.FlexGrid--full { width: 100%;
}
.FlexGrid.FlexGrid--fullHeight { height: 100%;
}
.FlexGrid.FlexGrid--guttersOneDown { margin-left: -0.618rem;
}
.FlexGrid.FlexGrid--guttersOneDown > .FlexGrid-cell { padding-left: 0.618rem;
}
.FlexGrid-cell { -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.FlexGrid-cell.FlexGrid-cell--flex { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.FlexGrid-cell.FlexGrid-cell--fullMinusNav { height: calc(100vh - 44px);
}
.FlexGrid-cell.FlexGrid-cell--nav { height: 44px;
}
.FlexGrid-cell.FlexGrid-cell--alignCenter { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.FlexGrid-cell.FlexGrid-cell--alignSelfCenter { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center;
}
.Day-details { position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4);
}

Patterns Screen - Script Codes JS Codes

var flkty = new Flickity('.js-days', { cellSelector: '.js-day', cellAlign: 'left', freeScroll: false, prevNextButtons: false, pageDots: false
});
Patterns Screen - Script Codes
Patterns Screen - Script Codes
Home Page Home
Developer Derick Ruiz
Username derickruiz
Uploaded December 27, 2022
Rating 3
Size 5,723 Kb
Views 10,120
Do you need developer help for Patterns Screen?

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!

Derick Ruiz (derickruiz) Script Codes
Name
Why CSS Architecture Matters Example 3
Hungry Carousel
Credit card form - Daily UI 002
Dating App
Rrremark.com Overlay Highlighter
Sign up form - DailyUI 001
Rrremark.com notification
Navigation
Why CSS Architecture Matters Example 2
Create amazing love letters 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!