Solutions - CSS 3
Online newspaper design
You can also download the complete solution.
Main style
/* header */
body > header {
background-color: #046dd5;
color: white;
padding: 1em;
}
body > header h1, body > header h2{
margin: 0;
}
body > header a {
color: white;
text-decoration: none;
}
body > header #signup a:first-child {
border-right: 1px solid white;
}
body > header #signup a {
padding: 0 1em;
}
body > header #signup a:first-child {
padding-left: 0;
}
/* navigation */
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
background-color: white;
text-align: center;
list-style-type: none;
padding: 1em 0;
}
#menu li a{
color: black;
text-decoration: none;
}
#menu li:hover {
background-color: #2a2f33;
}
#menu li:hover a{
color: white;
}
#hamburger, .hamburger {
display: none;
}
/* article */
#news header {
max-width: 10em;
padding: 1em;
position: absolute;
}
#news header h1{
margin: 0;
text-shadow: .2em .2em .2em black;
}
#news header a{
color: white;
text-decoration: none;
}
#news img {
width: 100%;
}
#news > article {
background-color: white;
margin: 1em 1em 1em 0;
}
#news > article > p{
padding: 0 1em;
}
#news > article > p:first-of-type:first-letter{
font-size: 2em;
}
#news footer {
color: white;
background-color: #f4655f;
padding: 1em;
}
#news footer a{
color: white;
text-decoration: none;
border-bottom: 1px solid white;
padding-bottom: 2px;
}
#news footer .tags {
margin-right: 1em;
}
#news footer .comments {
margin-left: 1em;
}
#news footer .comments:after {
content: ' comments';
}
#news footer .author:before{
content: "By ";
}
/* related */
#related {
background-color: #2a2f33;
padding: 1em;
}
#related h1 a {
color: white;
text-decoration: none;
}
#related p {
color: white;
}
/* footer */
body > footer {
background-color: #2a2f33;
color: white;
padding: 1em;
margin-right: 1em;
height: 1em;
}
body > footer p {
margin: 0;
}
/* fonts */
body {
font-family: 'Verdana', sans-serif;
}
p {
font-family: "Georgia", serif;
line-height: 1.4em;
}
header h2 {
font-size: 1em;
}
header a {
font-size: 0.8em;
}
#news header {
font-size: 1.5em;
}
#news footer {
font-size: 0.8em;
}
/* section colors */
#menu li:nth-child(1) {
border-top: 5px solid #e1493e;
}
#menu li:nth-child(2) {
border-top: 5px solid #8aba56;
}
#menu li:nth-child(3) {
border-top: 5px solid #5b4282;
}
#menu li:nth-child(4) {
border-top: 5px solid #ff8932;
}
#menu li:nth-child(5) {
border-top: 5px solid #19b6e9;
}
#menu li:nth-child(6) {
border-top: 5px solid #e84c8b;
}
Positioning
/* main layout */
body {
background-color: #edeff0;
margin: 0 auto;
width: 60em;
display: grid;
grid-template-columns: [start] 4fr [middle] 1fr [end];
grid-template-rows: [start] auto [nav] auto [news] 1fr [footer] auto [end];
}
body > header {
grid-column: start / end;
}
#menu {
grid-column: start;
}
aside {
grid-column: middle;
grid-row: nav / end;
}
#news {
grid-column: start;
}
body > footer {
align-self: end;
}
/* header layout */
body > header {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
}
body > header h1 {
grid-column: 1;
grid-row: 1;
}
body > header h2 {
grid-column: 1;
grid-row: 2;
}
body > header #signup {
grid-column: 2;
grid-row: 2;
}
/* navigation layout */
#menu ul {
display: flex;
flex-direction: row;
}
#menu li {
display: block;
flex: 1;
}
/* article footer layout */
#news footer {
display: flex;
}
#news footer .author {
flex-grow: 1;
}
Responsive Design
/* responsive */
@media (max-width: 60em) {
body{
width: 100%;
grid-template-columns: [start] 4fr [end];
grid-template-rows: [start] auto [nav] auto [news] auto [footer] auto [end];
}
#news article {
margin: 0 0 1em;
}
#related {
display: none;
}
body > footer {
margin: 0;
}
}
@media (max-width: 30em) {
body > header {
display: block;
}
body > header h1 {
font-size: 1.5em;
}
body > header h2 {
display: none;
}
#menu .hamburger {
display: block;
background-color: #2a2f33;
color: white;
padding: 1em;
}
#menu .hamburger:before {
content:'\2630';
}
#menu ul {
flex-direction: column;
margin: 0;
padding: 0;
color: white;
}
#hamburger:checked + .hamburger + ul li{
max-height: 1em;
padding: 1em;
opacity: 1;
}
#hamburger:checked + .hamburger:before {
content:'\2715';
}
#menu li {
max-height: 0;
padding: 0 1em;
background-color: #edeff0;
text-align: left;
opacity: 0;
transition: all .3s ease-in-out;
}
#menu li:nth-child(1) {
border-top: none;
border-left: 5px solid #e1493e;
}
#menu li:nth-child(2) {
border-top: none;
border-left: 5px solid #8aba56;
}
#menu li:nth-child(3) {
border-top: none;
border-left: 5px solid #5b4282;
}
#menu li:nth-child(4) {
border-top: none;
border-left: 5px solid #ff8932;
}
#menu li:nth-child(5) {
border-top: none;
border-left: 5px solid #19b6e9;
}
#menu li:nth-child(6) {
border-top: none;
border-left: 5px solid #e84c8b;
}
#news .tags {
display: none;
}
#news header {
color: black;
max-width: 100%;
font-size: 1em;
padding: 1em;
position: static;
}
#news header h1 {
text-shadow: none;
}
#news header a{
color: black;
}
}
Comments Section
#comments {
margin: 1em;
}
#comments .user {
font-style: italic;
}
#comments .user:after {
font-style: normal;
content: ' said:';
}
#comments .date {
float: right;
}
#comments p {
background-color: #edeff0;
padding: 1em;
}
#comments p:before {
content: '\201C';
font-size: 3em;
position: relative;
top: 15px;
color: #ccc;
}
#comments form {
width: auto;
margin: 0;
background-color: #edeff0;
}
#comments input {
background-color: #edeff0;
}
#comments textarea {
display: block;
width: 100%;
height: 6em;
}
#comments input[type=submit] {
width: auto;
background-color: black;
color: white;
border: none;
margin: 1em;
padding: 1em;
margin-left: auto;
}
#comments form h2 {
font-size: 1em;
}
Forms Design
form {
background-color: white;
color: black;
margin: 2em auto;
width: 20em;
padding: 1em;
}
label {
padding: 1em;
}
label, input {
display: block;
}
input {
border: none;
background-color: white;
color: black;
border-bottom: 1px solid black;
margin-top: 1em;
width: 100%;
font-size: 0.9em;
}
input[type=submit] {
width: auto;
background-color: black;
color: white;
border: none;
margin: 1em;
padding: 1em;
margin-left: auto;
}
input:focus {
outline: none;
border-bottom: 1px solid #046dd5;
}
#register h1, #login h1 {
text-align: center;
}
@media (max-width: 30em) {
#register, #login {
background-color: white;
}
}
No FlexBox / Grid Design
Main style
html {
background-color: #ddddff;
}
body {
width: 800px;
margin: 0px auto;
font-family: times, serif;
background-color: #ffffff;
}
h1, h2, h3 {
font-family: verdana, sans-serif;
}
#header {
background-color: #666666;
color: #ffffff;
padding: 20px;
}
#menu {
background-color: #330000;
}
#menu a{
color: #ffffff;
text-decoration: none;
}
#menu ul {
list-style-type: none;
padding: 10px 0px;
margin: 0px;
}
#menu li {
display: inline;
margin: 10px;
display: inline;
border-right: 1px solid #ffffff;
padding-right: 10px;
margin-right: 0;
}
#menu li:last-child {
border: none;
}
#content {
padding: 0 10px;
}
#content a {
text-decoration: none;
}
#content h3 {
font-size: 160%;
margin: 10px 0;
}
#content img {
float: left;
padding: 0 10px 10px 0;
}
#content .introduction {
font-style: italic;
}
#content .news-item {
border-bottom: 1px solid black;
}
#content ul {
list-style-type: none;
padding: 0;
padding: 10px 0px;
margin: 0px;
}
#content li {
display: inline;
background-color: #333333;
padding: 3px 10px;
}
#content li a {
color: #ffffff;
text-decoration: none;
}
#footer {
padding: 0 10px;
}
Positioning
html {
background-color: #000000;
}
body {
font-family: times, serif;
background-color: #ffffff;
margin: 0;
padding-left: 40px;
background-image: url(stripe.png);
background-repeat: repeat-y;
}
h1, h2, h3 {
font-family: georgia, serif;
}
#header {
background-color: #000000;
color: #ffffff;
padding: 20px;
}
#header h1, #header h2 {
margin: 0;
}
#header h2 {
font-size: 100%;
}
#menu {
background-color: #333333;
}
#menu a{
color: #000000;
text-decoration: none;
}
#menu ul {
list-style-type: none;
padding: 0;
padding: 10px 0px;
margin: 0px;
}
#menu li {
display: inline;
margin: 10px;
display: inline;
padding: 0 10px;
margin-right: 0;
background-color: #ffffff;
}
#content {
padding: 0 10px;
width: 800px;
}
#content a {
text-decoration: none;
color: #883333;
}
#content h3 {
font-size: 160%;
margin: 10px 0;
}
#content img {
float: right;
padding: 0 0 10px 10px;
}
#content .introduction {
font-style: italic;
}
#content .news-item {
border-bottom: 1px solid black;
}
#content ul {
list-style-type: none;
padding: 0;
padding: 3px 0px;
margin: 0px;
background-color: #333333;
}
#content li {
display: inline;
padding: 3px 10px;
}
#content li a {
color: #ffffff;
text-decoration: none;
}
#footer {
padding: 0;
text-align: right;
width: 800px;
}
Responsive Design
html {
background-color: #ddddff;
}
body {
width: 800px;
margin: 0px auto;
font-family: times, serif;
background-color: #669933;
}
h1, h2, h3 {
font-family: verdana, sans-serif;
}
#header {
background-color: #336699;
color: #ffffff;
padding: 20px;
position: relative;
}
#header h2 {
position: absolute;
top: 0; left: 0;
margin: 0; padding: 0;
text-align: center;
background-color: #336699;
padding: 10px 0;
width: 100%;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
#menu {
background-color: #669933;
float: right;
width: 200px;
}
#menu a{
color: #ffffff;
text-decoration: none;
}
#menu li {
list-style-type: none;
text-align: center;
padding: 20px;
}
#menu ul {
width: 0px auto;
padding: 0;
}
#content {
padding: 0 10px;
margin: 0;
margin-right: 200px;
background-color: #ffffff;
}
#content a {
text-decoration: none;
}
#content h3 {
font-size: 160%;
margin: 0px 0;
margin-bottom: 10px;
}
#content img {
float: left;
padding: 0 10px 10px 0;
}
#content .introduction {
font-style: italic;
}
#content .news-item {
border-bottom: 1px solid black;
}
#content ul {
list-style-type: none;
padding: 0;
padding: 10px 0px;
margin: 0px;
}
#content li {
display: inline;
border-bottom: 3px solid #996633;
padding: 3px 10px;
}
#content li a {
color: #333333;
text-decoration: none;
}
#footer {
padding: 0 10px;
background-color: #ffffff;
}
#footer p {
margin: 0;
}
Blocks
Blocks Exercise - 1
body {
display: flex;
flex-direction: row;
}
#orange {
flex-grow: 1;
}
section {
order: 3;
}
#yellow {
order: 1;
}
#red {
order: 2;
}
Blocks Exercise - 2
body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"green green green"
"yellow orange red"
"yellow blue red";
}
#green {
grid-area: green;
}
#yellow {
grid-area: yellow;
}
#orange {
grid-area: orange;
}
#red {
grid-area: red;
}
#blue {
grid-area: blue;
}
Blocks Exercise - 3
body {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas:
"yellow yellow"
"blue orange"
"blue red"
"blue green"
}
#green {
grid-area: green;
}
#yellow {
grid-area: yellow;
}
#orange {
grid-area: orange;
}
#red {
grid-area: red;
}
#blue {
grid-area: blue;
}
#yellow ul, #red ul {
display: flex;
}
#red ul {
flex-direction: row-reverse;
}
#yellow li, #red li {
flex-grow: 1;
}
#yellow li:first-child {
flex-grow: 3;
}
Blocks Exercise - 4
body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 2fr 1fr;
grid-template-areas:
"green green green"
"yellow red blue"
"orange orange blue";
}
#green {
grid-area: green;
}
#yellow {
grid-area: yellow;
}
#orange {
grid-area: orange;
}
#red {
grid-area: red;
}
#blue {
grid-area: blue;
}
#yellow ul, #red ul {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
Acknowledgement
Exercises by André Restivo.