Practical week 3: CSS
2. Create CSS file
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">
3. Change font everywhere on the page
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;
}
3. Style navigation bar
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;
}
4. Style video container
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;
}
5. Style suggestions container
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;
}