A Pen by Pralie

Thumbnail
This awesome code was written by praliedutzel, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright praliedutzel ©
  • HTML
  • CSS
  • JavaScript
    <main class="grid">
    <section class="grid__item hero">
        Hero
<!--         <div class="grid__item hero__background"></div>
        <div class="grid__item hero__content"></div> -->
    </section>
    
    <section class="grid__item articles">
        <article class="grid__item article">
            <p class="article__topic">Spaceflight</p>
            <div class="article__media">
                <img src="http://via.placeholder.com/800x400" alt="">
            </div>
            <div class="article__content">
                <h2 class="article__title">Article Title</h2>
                <p class="article__date">Nov 10</p>
                <p class="article__excerpt">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit veritatis vel vero explicabo vitae tempora, repudiandae quibusdam, incidunt nisi alias voluptate architecto eveniet atque deserunt cum nulla, quas eius doloremque. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit veritatis vel vero explicabo vitae tempora, repudiandae quibusdam, incidunt nisi alias voluptate architecto eveniet atque deserunt cum nulla, quas eius doloremque.</p>
                <a href="javascript:void(0);" class="article__link">Read more</a>
            </div>
        </article>
        <article class="grid__item article">
            <p class="article__topic">Tech</p>
            <div class="article__media">
                <img src="http://via.placeholder.com/800x400" alt="">
            </div>
            <div class="article__content">
                <h2 class="article__title">A Very Long and Verbose Article Title</h2>
                <p class="article__excerpt">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit veritatis vel vero explicabo vitae tempora, repudiandae quibusdam, incidunt nisi alias voluptate architecto eveniet atque deserunt cum nulla, quas eius doloremque.</p>
            </div>
        </article>
        <article class="grid__item article article--horizontal">
            <p class="article__topic">Science & Astronomy</p>
            <div class="article__media">
                <img src="http://via.placeholder.com/800x400" alt="">
            </div>
            <div class="article__content">
                <h2 class="article__title">Title</h2>
                <p class="article__excerpt">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit veritatis vel vero explicabo vitae tempora, repudiandae quibusdam, incidunt nisi alias voluptate architecto eveniet atque deserunt cum nulla, quas eius doloremque.</p>
            </div>
        </article>
    </section>
    
    <section class="grid__item events">
        <ul class="grid__item events__list">
            <li class="event">
                <span class="event__date">
                    <span class="event__month">Nov</span>
                    <span class="event__day">10</span>
                </span>
                <span class="event__name">Orbital ATK Resupply Mission to Space Station (Orbital ATK CRS-8)</span>
            </li>
            <li class="event">
                <span class="event__date">
                    <span class="event__month">Nov</span>
                    <span class="event__day">10</span>
                </span>
                <span class="event__name">NOAA Joint Polar Satellite System-1 (JPSS-1)<br><em>4:47 a.m. Eastern</em></span>
            </li>
            <li class="event">
                <span class="event__date">
                    <span class="event__month">Dec</span>
                    <span class="event__day">08</span>
                </span>
                <span class="event__name">ICON (Ionospheric Connection Explorer)</span>
            </li>
        </ul>
        <ul class="grid__item events__list">
            <li>Event</li>
        </ul>
        <ul class="grid__item events__list">
            <li>Event</li>
        </ul>
        <ul class="grid__item events__list">
            <li>Event</li>
        </ul>
    </section>
    
    <footer class="grid__item footer">
        <p class="footer__description">Created by <a href="" target="_blank" rel="noopener noreferrer">Pralie Dutzel</a>. Headlines from <a href="" target="_blank" rel="noopener noreferrer">Space.com</a>. Images from <a href="" target="_blank" rel="noopner noreferrer">Unsplash</a>.</p>
    </footer>
</main>

/*Downloaded from https://www.codeseek.co/praliedutzel/a-pen-by-pralie-ZXYgRb */
    @import url('https://fonts.googleapis.com/css?family=Playfair+Display|Roboto');

// Variables
$violet: #27296D;
$lavender: #5E63B6;
$lilac: #A393EB;
$pink: #F5C7F7;
$serif: 'Playfair Display', Georgia, serif;
$sans-serif: 'Roboto', Helvetica, Arial, sans-serif;

*, *:before, *:after { box-sizing: border-box; }

img {
    max-width: 100%;
}

.grid {
    background: #ccc;
    padding: 1em;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    font-family: $sans-serif;
    line-height: 1.5;
    
    @supports (display: grid) {
        display: grid;
        grid-template-rows: 100vh 2fr 1fr;
        grid-template-columns: 1fr 3fr;
        grid-gap: 2em;        
    }
}

.grid__item {
    background: rgba($lavender, 0.85);
    border: 1px solid #fff;
}

.hero {
    width: 100%;
    height: 100vh;
    
    @supports (display: grid) {
        grid-row: 1;
        grid-column: 1 / span 2;
    }
}

.articles {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    
    @supports (display: grid) {
        grid-row: 2;
        grid-column: 1 / span 2;
        display: grid;
        grid-template-rows: 1em 3fr 1em 1fr;
        grid-template-columns: 2fr repeat(2, 3fr) 3fr 1fr 2fr;
        grid-gap: 2em;
    }
}

.article {
    margin: 1.5em;
    position: relative;
    
    @supports (display: grid) {
        margin: 0;
    }
}

.article:nth-child(1) {
    @supports (display: grid) {
        grid-row: 1 / span 3;
        grid-column: 2 / span 2;
    }
}

.article:nth-child(2) {
    width: 30%;
    margin-top: 5%;
    
    @supports (display: grid) {
        width: auto;
        margin-top: 0;
        grid-row: 2;
        grid-column: 4 / span 2;
    }
}

.article:nth-child(3) {
    width: 60%;
    
    @supports (display: grid) {
        width: auto;
        grid-row: 4;
        grid-column: 3 / span 3;
    }
}

.article__topic {
    margin: -1em 0 0 -1.85em;
    position: absolute;
    font-family: $serif;
    font-size: 2em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    
    &:before {
        content: '';
        position: relative;
        display: inline-block;
        vertical-align: middle;
        background-color: #000;
        width: 50px;
        height: 3px;
    }
}

.article__content {
    padding: 0 1.5em;
}

.article__title {
    margin: 0.25em 0 0.25em 0;
    font-family: $serif;
    font-weight: normal;
}

.article__date {
    margin: 0 0 0.5em 0;
    font-style: italic;
}

.article__excerpt {
    width: 100%;
    max-width: 480px;
    margin: 0;
    padding-left: 1em;
}

.article__link {
    margin-top: 1em;
    display: inline-block;
    font-style: italic;
    text-decoration: none;
}

.article--horizontal {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    
    .article__media { width: 40%; }
    .article__content { flex: 1; }
    .article__excerpt { max-width: none; }
}

.events {
    width: 75%;
    display: flex;
    order: 4;
    
    @supports (display: grid) {
        width: auto;
        grid-row: 3;
        grid-column: 2;
        display: grid;
        grid-template-rows: 1em 1fr;
        grid-template-columns: repeat(4, 1fr);
    }
}

.events__list {
    padding: 1em;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    list-style: none;
}

.events__list:nth-child(odd) {
    @supports (display: grid) {
        grid-row: 2;
    }
}

.events__list:nth-child(even) {
    @supports (display: grid) {
        grid-row: 1 / span 2;
    }
}

.event {
    padding: 1em 1em 1em 0;
    display: flex;
}

.event__date {
    margin: 0 1em 1em 0;
    display: block;
    font-family: $serif;
    font-size: 1.5em;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
}

.event__day {
    margin-top: -0.15em;
    display: block;
    font-size: 2.25em;
}

.event__name {
    
}

.footer {
    width: 25%;
    order: 3;
    position: relative;
    
    @supports (display: grid) {
        width: auto;
        grid-row: 3;
        grid-column: 1;
    }
}

.footer__description {
    // top: 0;
    // left: 0;
    position: absolute;
    transform: rotate(-90deg) translate(0%, -300%);
    transform-origin: right top;
}


/*Downloaded from https://www.codeseek.co/praliedutzel/a-pen-by-pralie-ZXYgRb */
    

Comments