Practical week 3: CSS

https://github.com/tsotnekekelia/practical-3

Name it: style.css and place it in res/css/ directory

Add style.css to index.html by adding this tag to head:

<link rel="stylesheet" href="res/css/style.css">

Find suitable font on : https://fonts.google.com/

Add <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

to index.html head

Add code below to style.css

* {

    font-family: 'Open Sans', sans-serif;

html, body {

    margin: 0;

    padding: 0;

    background-color: #f7f7f7;

Add search-container class to second div of the nav tag.

Copy this code to style.css

nav {

    display: flex;

    background-color: #ffffff;

    align-items: center;

nav div{

    height: 30px;

    flex-grow: 4;

    padding: 10px;

nav div img {

    height: 100%;

nav div.search-container > input {

    box-sizing: border-box;

    height: 30px;

    width: 80%;

    margin: 0;

    padding: 5px;

    border: 1px solid #e0e0e0;

nav div.search-container > button {

    box-sizing: border-box;

    height: 30px;

    width: 20%;

    margin: 0;

    padding: 5px;

    border: 1px solid #e0e0e0;

    cursor: pointer;

    background-color: #e0e0e0;

Add video-container class to first div of the section tag.

Copy this code to style.css

section {

    display: flex;

    width: 80%;

    margin: 30px auto;

section div.video-container{

    flex-grow: 10;

section div.suggested-container{

    flex-grow: 2;

.video-container video{

    width: 100%;

    min-height: 400px;

.video-container h1{

    margin: 15px 15px;

.video-container h6{

    margin: 15px 15px;

    font-size: 12px;

    font-weight: lighter;

    color: #bcbcbc;

Add suggested-container class to second div of the section tag.

Copy this code to style.css

.suggested-container h3 {

    margin: 15px;

    padding: 15px;

    color: #ffffff;

    background-color: #b71c1c;

.suggested-container ul {

    margin: 15px;

    padding: 0;

.suggested-container ul li {

    list-style: none;

.suggested-container ul li div {

    margin: 20px 0;

.suggested-container ul li div::after {

    content: "";

    display: block;

    clear: both;

.suggested-container ul li img{

    width: 35%;

    height: 100px;

    object-fit: cover;

    float: left;

    margin-right: 20px;

.suggested-container ul li h4{

    margin-top: 0;

    margin-bottom: 10px;

.suggested-container ul li h4 a{

    color: #1a1a1a;

    text-decoration: none;

.suggested-container ul li h4 a:hover{

    color: #ff5f52;

    text-decoration: none;

.suggested-container ul li small{

    color: #bcbcbc;

Tasks