drum-it / colmar Goto Github PK

Learning

https://github.com/drum-IT/colmar/blob/master/index.html#L73

in panel 2 and panel 4, the right sides are a little too large and the images inside them are also too large
the left hand div doesn't need to be a flex container
the right hand div does need to be a flex column as you have it
the info-box divs within them are flex container rows, as you have them
if you put their images inside a media-container div, they will resize well and look more precisely like the wireframes

.media-container {
overflow: hidden;
}

.media-container img,
.media-container video {
display: block;
width: 100%;
}

sample code for the 35-65 split of the info-box class

/* Universal Component - Content Image Box */

.info-box {
display: flex;
padding: 1rem 0 1rem 1rem;
border-bottom: 1px solid rgb(245, 245, 245);
}

.info-box .media-container {
width: 35%;
}

.info-box .text-content {
display: flex;
flex-direction: column;
justify-content: center;
width: 65%;
padding: 0 0.75rem 0 1rem;
}

https://github.com/drum-IT/colmar/blob/master/index.html#L44

and

https://github.com/drum-IT/colmar/blob/master/resources/css/style.css#L124

the flexbox can start on the div after the headline. h1s and h2 are block elements and will be on a newline

<div id="thesis">
    <h1>Thesis exhibits</h2>
    <div class="flex-content">                 <-- the flexbox class I used in earlier issue
       <div class="main-content">

etc-

learning is similar ... can be regular div and then flexbox starts on div under headline. flex-wrap as you have it

 <div id="learning">
    <h2>Start learning</h2>
    <div class="courses">

https://github.com/drum-IT/colmar/blob/master/resources/css/style.css#L242

in head, so that it shows up in browser tab
there are instructions in week 7 article on managing assets

https://github.com/drum-IT/colmar/blob/master/index.html#L3

panels 1, 2, and 4 (banner, info and thesis) all have same structure: parent is a row. inside parent, left side is 60% of parent div, right side is 40%. all 3 have specific padding settings. so try making all 3 using these 3 classes. will reduce repetition and add consistency

/* Universal Component - Flex Content Container */

.flex-content {
display: flex;
padding: 0 1.5rem;
}

.flex-content .main-content {
width: 60%;
padding: 2rem 1.5rem 2rem 0;
border-right: 1px solid rgb(245, 245, 245);
}

.flex-content .supporting-content {
display: flex;
flex-direction: column;
width: 40%;
padding: 2rem 0;
}

https://github.com/drum-IT/colmar/blob/master/index.html#L28

there is actually an error in the wireframes here. keep the image from banner where, in the wireframes, there is a grey rectangle

https://github.com/drum-IT/colmar/blob/master/resources/css/style.css#L338