JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>

<div id='page_container'>
<div id='topbar'>

    <a class='logo' href=''>HorseMarks</a>

    <div class='grow'></div>

    <a class='link' href=''>Search</a>
    <a class='link' href=''>Forum</a>
    <a class='link' href=''>Account</a>
</div>

<div id='topbanner'></div>

<div id='page_content'>
    
    <div class='title_1'>Welcome to HorseMarks</div>
    
    <p>What is this project? A little experiment to track horse coats (phenotypes) across generations, compare them and look for patterns in inheritance.</p>
    
    <p>I was inspired by <a href=''>L K's blog</a>. While researching for her horse colour books, she collected hundreds of pages of notes and pictures of interestingly-marked horses. I thought to myself: "Gosh, wouldn't it be convenient to have a database? To search for horses by traits or relatives, and instantly bring up results, instead of flicking through stacks of paper?"</p>
    
    <p>HorseMarks is that database. It can be searched by phenotype (does a horse have diluted colour? Roaning? Sootiness?), genotype (known genes, confirmed by testing), name, sex, breed, parentage, year of foaling. Logged-in members can create Tags to collect lists of horses. There's also a small-but-detailed image of every horse's coat, so you can compare traits visually.</p>
    
    <p>How useful will it be? Not sure. But nobody has created something like this before, so we'll see! If nothing else, some equine genetic nerds might enjoy browsing family trees and speculating where a trait was passed down from.</p>
    
    <div class='menu'>
        <a class='link' href=''>More info about project</a>
        <a class='link' href=''>Add your horses!</a>
        <a class='link' href=''>How to use the database</a>
    </div>
    
    <div class='images rows4'>
        
        <div>
            <img src='ggg'>
            <br>ffff
        </div>
        <div>
            <img src='ggg'>
            <br>ffff
        </div>
        <div>
           ...

CSS

body {
    background-image: url("https://images.pexels.com/photos/4314490/pexels-photo-4314490.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

html, body {
    color: rgba(0, 0, 0, 0.7);
    font-family: 'Nunito', sans-serif;
}

a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.7);
}

a:hover {
    color: rgba(0, 0, 0, 1);
}

#container {
    width: 90%;
    max-width: 1000px;
    margin: 30px auto;
}

#page_container {
    width: 100%;
    background-color: #fff;
    border: 1px solid silver;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.3);
}

#topbar {
    background-color: #fff;
    padding: 10px 30px;
    display: flex;
}

#topbar .grow {
    flex: 111;
}

#topbar .logo {
    border: 1px dotted silver;
}

#topbar .link, #topbar .logo {
    padding: 10px;
    margin: 0px 5px;
    transition: 0.3s;
}

#topbar .link:hover {
    background-color: #eee;
    transition: 0.3s;
}

#topbanner {
    height: 200px;
    background-image: url("https://images.pexels.com/photos/4314490/pexels-photo-4314490.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
    background-size: cover;
    background-position: center;
}

#page_content {
    background-color: #fff;
    padding: 1.5em;
}

.title_1 {
    text-align: center;
    font-size: 30px;
}

.menu {
    margin: 20px auto;
    text-align: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

.menu .link {
    padding: 10px;
    margin: 0px 10px;
    transition: 0.3s;
}

.menu .link:hover {
    background-color: #eee;
    transition: 0.3s;
}

.section {
    padding: 1.5em;
    margin: 20px auto;
    border: 1px solid silver;
}

.images {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

.images div {
    border: 0px solid silver;
    text-align: center;
}

.rows2 div {
    width: 50%;
}
.rows3 div {
    width: 33.33%;
}
.rows4 div {
    width:...

JavaScript

/*
(storing photos would take up too much server space, and photos can be difficult to 'read' due to light/shade. so a tiny template is filled in, to represent their colours and markings).

<p>Think of highly variable traits such as sootiness, pangare, unusual darkness (liver chestnut, chocolate palomino) and the extensiveness and locations of white markings. We can be sure that there are hidden modifier genes involved. But</p>


nice fonts:

Cabin
Nunito
Lato
Andika New Basic

PT Sans

*/