10. The Event

A simple solution in boxes

Mentor Hiram Abif

Hiram eyes you with a critical look. “You should know how this is structured by now.” He gestures toward the draft. You’ve already got all the classes in your CSS – you just need to assign one ID and one class. He leans over the table and runs his finger along the sketch. “You’ll wrap the two left boxes into an additional container, so you can use Flex to split them into two clean columns. And the sign-up should link to the contact section.”

With a low grumble, he finally grabs the pen and sketches out the box layout for you. “So you get it right from the start.”

Your Task

Build the event layout.

While writing your HTML, keep an eye on which styles have already been defined —
there’s no need to reinvent what’s already written:

CSS
/* CSS */
@font-face {
    font-family: 'Roboto Slab';
    src: url('../fonts/RobotoSlab-SemiBold.woff2') format('woff2'),
        url('../fonts/RobotoSlab-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('../fonts/RobotoSlab-Black.woff2') format('woff2'),
        url('../fonts/RobotoSlab-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-Regular.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-Bold.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MaterialIconsRounded';
    src: url('../fonts/MaterialSymbolsRounded-VariableFont_FILL\,GRAD\,opsz\,wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ROOT */

:root {
    /* Colors */
    --primary: #51301a;
    --secondary: #b32e0f;
    --dark: #1c1512;
    --light: #faf5eb;
    --highlight: #edb200;
    --green: #2d7b09;
    --transparent-dark: rgba(0, 0, 0, 0.4);

    /* Fonts */
    --font-size-base: 1rem;
    --font-size-large: 2.5rem;
    --font-size-title: 1.5rem;
    --line-height-normal: 1.7;
    --line-height-small: 1.1;
    --headline: 'Roboto Condensed', sans-serif;
    --paragraph: 'Roboto', sans-serif;
    --accent-font: 'Roboto Slab', serif;
    --bold: bold;

    /* Spacing */
    --spacing-small: 0.5rem;
    --spacing-base: 1rem;
    --spacing-large: 2rem;
    --spacing-extra-large: 6rem;

    /* border-radius */
    --border-small: 5px;
    --border-large: 15px;
    --border-round: 50%;

    /* Shadows */
    --shadow-light: 5px 5px 7px #0000003d;
    --shadow-dark: 2px 2px 3px #000000;
}

/* Fonts */
.headline {
    font-family: var(--headline);
}

.lh-sm {
    line-height: var(--line-height-small);
}

.fs-title {
    font-size: var(--font-size-title);
}

.fs-lg {
    font-size: var(--font-size-large);
}

.fw-bold {
    font-weight: var(--bold);
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.center {
    text-align: center;
}

/* colors */
.secondary {
    color: var(--secondary);
}

.bg-secondary {
    background-color: var(--secondary);
}

.dark {
    color: var(--dark);
}

.bg-dark {
    background-color: var(--dark);
}

.light {
    color: var(--light);
}

.bg-light {
    background-color: var(--light);
}

.bg-highlight {
    background-color: var(--highlight);
}


/* Shadow / Effects */
.box-shadow-light {
    box-shadow: var(--shadow-light);
}

.multiply {
    mix-blend-mode: multiply;
}

/* Spacing */
.p-sm {
    padding: var(--spacing-small);
}

.p-lg {
    padding: var(--spacing-large);
}

.my-sm {
    margin-top: var(--spacing-small);
    margin-bottom: var(--spacing-small);
}

.my-lg {
    margin-top: var(--spacing-large);
    margin-bottom: var(--spacing-large);
}

/* Border-Radius */
.b-radius-sm {
    border-radius: var(--border-small);
}

.b-radius-xl {
    border-radius: var(--border-large)
}

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

/* 2. selection */
::selection {
    background-color: var(--highlight);
    color: var(--dark)
}

/* 3.body */
body {
    background-image: url('../img/background.jpg');
    text-wrap: pretty;
    font-family: var(--paragraph);
    line-height: var(--line-height-normal);
    font-size: var(--font-size-base);
    color: var(--primary);
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-base);
}

.container-large {
    width: min(95%, 1920px);
    margin: var(--spacing-extra-large) auto;
}

@media screen and (min-width: 1200px) {
    .container-large {
        width: min(90%, 1920px);
    }
}

/* Typography*/
h1,
h2,
h3 {
    font-family: var(--headline);
    font-weight: var(--bold);
    text-wrap: balance;
    color: var(--color-primary)
}

h1 {
    text-transform: uppercase;
    font-weight: normal;
    font-size: var(--font-size-large);
}

h2 {
    font-weight: var(--bold);
    font-size: var(--font-size-large);
}

h3,
h1 {
    font-family: var(--accent-font);
}

h2::first-letter {
    font-size: var(--font-size-large);
}

/* Links */
a {
    color: var(--secondary);
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--headline);
    font-weight: var(--normal);
    transition: 0.3s;
}

a:hover {
    color: var(--green);
}

/* Buttons*/
.btn {
    background: var(--secondary);
    color: var(--light);
    padding: 10px 20px;
    border-radius: var(--border-small);
    display: inline-block;
    letter-spacing: 2px;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}

.btn:hover {
    text-decoration: none;
    background: var(--green);
    color: var(--light);
}

/*Images*/
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Logo */
.logo {
    max-width: 120px;
    height: auto;
}

/* Icons*/
.material-icons-rounded {
    font-family: 'MaterialIconsRounded';
    font-size: 5rem;
    font-style: normal;
    color: var(--secondary);
}

/* Flex */
.flex {
    display: flex;
}

.space-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

/* Overlay Nav */
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background: url(../img/heroes/lyara.jpg) right bottom no-repeat, url(../img/background.jpg) repeat;
    overflow-x: hidden;
    transition: width 0.5s ease;
    background-blend-mode: multiply;
}

.overlay-content {
    position: relative;
    top: 50%;
    max-width: 400px;
    margin: auto;
    text-align: center;
    transform: translateY(-50%);
    background-color: #ffffff9c;
    padding: var(--spacing-large);
    border-radius: var(--border-large);
}

.overlay-content a {
    padding: 15px;
    text-decoration: none;
    font-size: var(--font-size-title);
    color: var(--primary);
    display: block;
    transition: 0.3s;
    font-family: var(--accent-font)
}

.overlay-content a:hover {
    color: var(--secondary);
}

.closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    color: white;
    text-decoration: none;
}

.open-btn {
    padding: 5px 10px;
    background-color: var(--primary);
    border-radius: var(--border-small);
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

.open-btn:hover {
    background-color: var(--secondary);
}

.open-btn i {
    font-size: var(--font-size-large);
    color: var(--light);
}

/* hero section */
.slide-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    grid-gap: var(--spacing-large);
    align-items: center;
}

/* Media Queries */

@media (width<768px) {
    .slide-grid {
        grid-template-columns: 1fr;
    }

    .slider-container {
        order: 2;
        height: 400px;
    }

    .hero {
        order: 1;
    }
}

/* Buttons */
.btn {
    background: var(--secondary);
    color: var(--light);
    padding: 10px 20px;
    border-radius: var(--border-small);
    display: inline-block;
    letter-spacing: 2px;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}

.btn:hover {
    text-decoration: none;
    background: var(--green);
    color: var(--light);
}

.btn .material-icons-rounded {
    font-size: 1.3rem;
    color: var(--light);
    font-style: normal;
    vertical-align: middle;
}

h1 {
    margin-top: -1.1rem;
}

Solve the task here in the console [–> Open in a new tab]

HTML
<!-- HTML -->
<section id="event">
     <h2 class="my-lg center"><span class="secondary bold">Call
          </span> to Assembly</h2>

     <div class="b-radius-xl bg-dark date container flex box-shadow-light">
          <div>
               <div class="bg-highlight p-lg center b-radius-xl">
                    <h3 class="dark fs-lg ">Saturday, <span
                              class="bg-light p-sm secondary b-radius-sm">03.10.2076</span>
                         at <span class="bg-dark p-sm light fs-large b-radius-sm">8 PM</span></h3>
                    <p class="headline fs-title dark fw-bold">At the Grand Castle Square in front of the Cathedral</p>
                    <p class="secondary fw-bold">Gather, protest, rebel, stand up for your values!</p>
                    <a href="#contact" class="btn my-lg"><i class="material-icons-rounded">arrow_circle_right</i>
                         Sign up!</a>
               </div>
               <div class="bg-secondary light p-lg center b-radius-xl my-lg">
                    <h3 class="fs-title uppercase">The Time Has Come!</h3>
                    <p class="headline">Cobol's rule has oppressed us, silenced our voices, and turned the city into his
                         tool. <strong>But Aetheron belongs to everyone!</strong>
                         <br><br>
                         Gather! Bring light into the shadows of Ironspire! Let your voices be heard across the world.
                         <strong>Together we are unstoppable.</strong>
                    </p>
               </div>
          </div>

          <div class="bg-dark">
               <img src="img/event.jpg" alt="" class="img-fluid b-radius-xl">
          </div>
     </div>

</section>
Treat for Bastet?
Treat for Bastet?
Scroll to Top