Gofen

Developer
Boaz
Size
8,745 Kb
Views
10,120
  1. Gofen Previews
  2. Gofen HTML Codes
  3. Gofen CSS Codes
  4. Gofen JS Codes

How do I make an gofen?

A sideproject for displaying and choosing proper open-source, free quality fonts in hebrew.. What is a gofen? How do you make a gofen? This script and codes were developed by Boaz on 16 December 2022, Friday.

Gofen Previews
IQ Test

Gofen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gofen</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--side project for free-opensource hebrew fonts-->
<menu class="tools"> <h2><select width="600px" class="nice-select">
<option class="option choose" value="">בחר גופן</option> <option value="opensanshebrew" class="option opensanshebrew" >Open Sans Hebrew אופן סנס עברית</option> <option class="option alef" value="alef">alef אלף</option> <option class="option rubik" value="rubik">rubik רוביק</option> <option class="option Heebo" value="heebo" >היבו Heebo </option> <option class="option assistant" value="assistant" >אסיסטנט Assistant </option> <option class="option varela" value="varela" >Varela round ווארללה מעוגלת</option><option class="option noto" value="noto">noto נוטו</option> <!--<option class="option Miriamlib" value="miriam" >מרים ליברה Miriam libre (פונט מונוספייס) </option> <option class="option Secular" value="secular" >סקולר 1 Secular One רק משקל בולד) </option> <option class="option Suez" value="suez" >סואז 1 Suez One רק לכותרות </option>--> </select></h2> <div class="title"> <h1> הטובים לרשת

Gofen - Script Codes CSS Codes

/*the fonts*/
@import 'https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900&subset=hebrew';
@import 'https://fonts.googleapis.com/css?family=Miriam+Libre:400,700&subset=hebrew';
@import 'https://fonts.googleapis.com/css?family=Alef|Arimo|Secular+One|Suez+One|Varela+Round';
@import url(https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&subset=hebrew);
@import url(https://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
@import 'https://fonts.googleapis.com/css?family=Alef:400,700&subset=hebrew';
@import url(https://fonts.googleapis.com/earlyaccess/opensanshebrewcondensed.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosanshebrew.css);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700italic,700,400italic);
@import 'https://fonts.googleapis.com/css?family=Assistant:200,300,400,600,700,800&subset=hebrew';
.opensanshebrew { font-family: 'Open Sans Hebrew';
}
.opensanshebrewcondenesd { font-family: 'Open Sans Hebrew Condensed', sans-serif;
}
.alef { font-family: "Alef";
}
.noto { font-family: 'Noto Sans Hebrew', 'Noto Sans';
}
.varela { font-family: 'Varela Round';
}
.rubik { font-family: 'Rubik', sans-serif;
}
.Heebo { font-family: 'Heebo', sans-serif;
}
.Arimo { font-family: 'Arimo', sans-serif;
}
/*.Suez { font-family: 'Suez One', serif;}.Miriamlib { font-family: 'Miriam Libre', sans-serif;}.Secular { font-family: 'Secular One', sans-serif;}*/
.assistant { font-family: 'Assistant', sans-serif;
}
body { direction: rtl; font-family: sans-serif; background: ghostwhite;
}
.about,
.testing { padding-top: 120px;
}
.about,
.testing,
.tools { max-width: 900px; margin: 0 auto; color: #444;
}
.card { position: relative; display: inline-block; vertical-align: top; height: auto; width: 350px; margin: 10px; display: block; margin-top: 10px; padding: 20px; border-radius: 6px; background: white; z-index: 1; box-shadow: 0 2px 1px rgba(17, 10, 0, 0.25);
}
.tools { position: fixed; top: 0; left: 0; right: 0; z-index: 9; height: 120px; padding: 0 20px; display: block; background: #EA5959; color: white; width: 100%; box-shadow: 0px 35px 70px rgba(0, 0, 0, 0.4);
}
.testing p { width: 350px; display: inline-block; padding: 1rem;
}
/*niceselect*/
.nice-select { background-color: #fff; border-radius: 5px; border: solid 1px #e8e8e8; box-sizing: border-box; clear: both; cursor: pointer; display: inline; font-family: inherit; font-weight: normal; height: 80px; line-height: 40px; outline: none; padding-left: 18px; padding-right: 30px; position: relative; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; white-space: nowrap; width: auto;
}
.nice-select:hover { border-color: peach;
}
.nice-select:active,
.nice-select:focus { border-color: #999;
}
/*niceselect end*/
.small { font-size: small;
}
input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button { display: none;
}
button { display: block; margin: 3em auto; padding: .5rem 2rem; font-size: 125%; color: white; border: none; border-radius: .25rem; background-color: #6163D3; outline: none; box-shadow: 0 .4rem .1rem -.3rem rgba(0, 0, 0, .1); z-index: 1;
}
button:hover { background: #3BAEA0;
}
h2,
h3 { max-width: 450px; float: right; padding: 1rem;
}
h4,
img { display: inline-block; width: 50%;
}
img { float: left; padding: 2rem;
}
.first { font-size: 20px;
}
.jumbo { font-size: 80px; font-style: bold; font-weight: 900; color: #F72464; text-shadow: 0px 15px 60px rgba(47, 36, 100, 0.4); z-index: 0;
}
.humango { font-size: 180px; display: inline-block; break-word: break-all; max-width: 350px; color: grey; padding: 12px; z-index: 0;
}
h1 span { display: inline-block; background: #F72464; color: ghostwhite; padding: 0 8px;
}
h2,
h3 { color: #BF00FF;
}
.label { font-size: 14px; font-weight: bold; color: #6163D3;
}
.right { float: right;
}
.left { float: left; display: inline-block;
}
.card li { list-style-type: none; direction: rtl; padding: 1rem 0 0
}
.card li:before { content: ''; display: block; position: relative; left: 25px; top: 12px; width: 3px; height: 6px; border: solid #3BAEA0; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.card li i { color: grey; font-size: 80%; padding: 12px;
}
.testing input,
.testing select { display: block; margin: 0em; min-width: 250px; -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); line-height: 1.2142em; padding: 1em 1em; margin: 1rem; background: #ffffff; border: 1px solid rgba(34, 36, 38, 0.15); color: #212121; border-radius: 4px; -webkit-transition: box-shadow 0.1s ease, border-color 0.1s ease; transition: box-shadow 0.1s ease, border-color 0.1s ease; box-shadow: none; z-index: 1;
}
svg { fill: white;
}
a { color: #6163D3;
}
/*search*/
input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button { display: none;
}
input[type=search] { background: white url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; -webkit-border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; margin-bottom: 42px;
}
input:focus { border-color: #6163D3; -webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5); -moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5); box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}
form { margin-top: 80px; max-width: 330px; padding: 40px 40px;
}
/*feed*/
..ui.feed>.event:first-child { border-top: 0; padding-top: 0;
}
.ui.feed:last-child { margin-bottom: 0;
}
.ui.feed { font-size: 12px; margin: 1em 0;
}
.ui.feed>.event { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; width: 100%; padding: .21428571rem 0; margin: 0; background: 0 0; border-top: none;
}
.ui.feed>.event>.content { display: block; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; word-wrap: break-word;
}
.label img { width: 48px; display: inline; height: auto; padding: 0 5px; position: relative; top: -17px; border-radius: 500rem;
}
.ui.feed>.event>.content .summary { margin: 0; font-size: 1em; font-weight: 700; color: rgba(0, 0, 0, .87);
}
/*animation*/
card:hover { -webkit-transform: translate(0, -5px); -ms-transform: translate(0, -5px); -o-transform: translate(0, -5px); transform: translate(0, -5px)
}
.relatedthumb { max-height: 60px; overflow: hidden
}
.testing { clear: left; opacity: 0; -webkit-transform: translate(0, 50px); -ms-transform: translate(0, 50px); -o-transform: translate(0, 50px); transform: translate(0, 50px); -webkit-transition: opacity 600ms, transform 600ms; -o-transition: opacity 600ms, transform 600ms; transition: opacity 600ms, transform 600ms
}
.testing .about,
.loaded .testing { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0)
}
.choose { color: grey;
}
.contact{background-color: white; line-height: 1.4; text-align: center; font-size: 1em; font-weight: 200; text-decoration: underline; margin: 1%; padding: 5px 10px; border-radius: 2px; display: none; color: Black; text-shadow: none; -webkit-font-smoothing: antialiased; Float: right;}
@media screen and (max-width: 800px) { .title { display: none; }.humango, .jumbo{word-break: break-all;} .right, .left{float:none;}
}

Gofen - Script Codes JS Codes

/* we are assigning change event handler for select box */
/* it will run when selectbox options are changed */
$('select').change(function() { if ($('select').val() == 'opensanshebrew') { $('body').removeClass(); $('body').addClass('opensanshebrew'); } else if ($('select').val() == 'alef') { $('body').removeClass(); $('body').addClass('alef'); } else if ($('select').val() == 'noto') { $('body').removeClass(); $('body').addClass('noto'); } else if ($('select').val() == 'varela') { $('body').removeClass(); $('body').addClass('varela'); } else if ($('select').val() == 'rubik') { $('body').removeClass(); $('body').addClass('rubik'); } else if ($('select').val() == 'heebo') { $('body').removeClass(); $('body').addClass('Heebo'); } else if ($('select').val() == 'suez') { $('body').removeClass(); $('body').addClass('Suez'); } else if ($('select').val() == 'assistant') { $('body').removeClass(); $('body').addClass('assistant'); } else if ($('select').val() == 'secular') { $('body').removeClass(); $('body').addClass('Secular'); } else if ($('select').val() == 'miriam') { $('body').removeClass(); $('body').addClass('Miriamlib'); } $('body').addClass('loaded');
});
Gofen - Script Codes
Gofen - Script Codes
Home Page Home
Developer Boaz
Username Aniboaz
Uploaded December 16, 2022
Rating 3
Size 8,745 Kb
Views 10,120
Do you need developer help for Gofen?

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!

Boaz (Aniboaz) Script Codes
Name
SVG animations for portfolio
Online Tools 2.0
Background patterns
Kanban Board
A Pen by Boaz
Online Tools
Digital assets
New navbar
Online Tools 3.0
Top nav menu test
Create amazing blog posts 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!