Commit 766a857d authored by Carlo Angelo Cordero's avatar Carlo Angelo Cordero
Browse files

Upload New File

parent 187570b1
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400');
@import url('https://fonts.googleapis.com/css?family=Metal+Mania');
@font-face {
font-family: "Booter - Zero Zero";
src: url("Booter - Zero Zero.woff") format("woff"),
url("Booter - Zero Zero.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
* { /* everything selector to set a few general styles to apply to all elements in our html */
box-sizing: border-box; /* the width attribute takes account the padding as well */
font-family: Raleway; /* to change font style of all */
color: #777; /* to change color of all */
}
html, body {
margin: 0;
padding: 0; /* to remove padding and margins */
}
.nav ul {
margin: 0; /* ul element has a default margin on the top, this is to remove the margins */
}
.nav li {
display: inline; /* to display in one row home store and about */
}
.nav a {
display: inline-block; /* to have padding on all sides up down left right*/
padding: .5em; /* to have some spacing */
color: white; /* to change color of home store and about*/
text-decoration: none; /* to remove the underline from home store and about */
}
.main-nav { /* this will be applied only to main-nav */
text-align: center;
font-size: 1.1em; /* make it 10% bigger */
font-weight: lighter;
border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.main-nav li {
padding: 0 5%; /* 0 for top and bottm, 5% for left and right*/
}
.nav a:hover {
background-color: rgba(255, 255, 255, .3)
}
.main-header {
background-color: rgba(0, 0, 0, .5); /* to make it darker.. .6 is at 60% transparency*/
background-image: url("Header Background.jpg");
background-blend-mode: multiply; /* as it can only read color or image, this is
use to combine color and image together */
background-size: cover; /* tell the background to expand as much as it can
until one of the borders it as the very edge of either the width or the
height so it will expand either at as wide as it can or as tall as it can
until it cant get any larger without surpassing the size of the image */
padding-bottom: 30px; /* to add a space below the title */
}
.band-name {
text-align: center;
margin: 0; /* h1 elements by default has margins*/
font-size: 4em;
font-family: "sans-serif";
font-weight: normal;
color: white;
}
.band-name-large {
font-size: 5em;
}
.content-section {
margin: 1em; /* gives same on all sides */
}
.container {
max-width: 900px; /* when enlarging the screen, it will have a limit of
expanding the space of the write up */
margin: 0 auto; /* auto center from left and right */
padding: 0 1.5em;
}
.section-header {
font-family: "sans-serif";
font-weight: normal;
color: #333;
text-align: center;
font-size: 2.5em;
}
.section-sub-header {
font-family: "sans-serif";
font-weight: normal;
color: #333;
text-align: center;
font-size: 1.5em;
}
.about-band-image {
float: left;
height: 200px;
width: 350px;
margin: 15px; /* to push text away from the image */
border-radius: 30%;
}
.about-band-image2 {
float: left;
height: 200px;
width: 200px;
margin: 15px; /* to push text away from the image */
border-radius: 0%;
}
.main-footer {
background-color: #56CCF2;
color: white;
padding: .25em 0;
}
.main-footer-container {
display: flex;
align-items: center;
}
.main-footer-container ul {
flex-grow: 1;
text-align: end;
}
.footer-nav li {
padding: 0 .5em;
}
.footer-nav img {
width: 60px;
height: 60px;
}
.btn {
text-align: center;
vertical-align: middle;
padding: .67em;
cursor: pointer;
}
.btn-header {
margin: .5em 15% 2em 15%;
color: white;
border: 2px solid #2D9CDB;
background-color: rgba(255, 255, 255, .1);
border-radius: 0;
font-size: 1.5em;
font-weight: lighter;
padding-left: 2em;
padding-right: 2em;
}
.btn-header:hover {
background-color: rgba(255, 255, 255, .3)
}
.btn-play {
display: block; /* in order for margin auto below to work,
we add display block as buttons are not block elements
and only block elements can have an auto margin */
margin: 0 auto;
color: #2D9CDB;
font-size: 4em;
border-radius: 50%;
padding: 0;
width: 100px;
height: 100px;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment