Untitled
style.css
unknown
plain_text
3 years ago
7.9 kB
10
Indexable
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
img{
width: 100%;
}
: : root{
--color-gray-light-1:#F5F5F5; /* whitesmoke */
--color-gray-dark-1:#DDD;
--color-gray-dark-2:#AAA;
--color-gray-dark-3:#999;
--color-gray-dark-4:#555;
--color-gray-dark-5:#333;
--color-green-1:#008000; /*green*/
--color-green-2:#6B8E23; /*olivedrab*/
--color-yellow:#FFD700; /*gold*/
--color-red-1:#FF4500; /*orangered*/
--color-red-2:#B22222; /*firebrick*/
}
body{
font-weight: 300;
font-family: "Open Sans", sans-serif;
color: #333;
font-size: 14px;
}
/* header *********************************************/
.header{
max-width: 960px;
margin-left: auto;
margin-right: auto;
font-size: 16px;
display: flex;
justify-content: space-between;
}
.header-logo{
width: 60px;
margin: 5px 0;
}
.org-name{
align-self: center;
margin-right: auto;
margin-left: 10px;
font-size: 24px;
font-weight: 400;
color: green;
}
.nav{
display: flex;
align-items: stretch;
}
.navbar{
display: flex;
}
.navbar-item{
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 20px;
cursor: pointer;
}
.navbar-item img{
width: 20px;
height: 20px;
margin-top: 14px;
filter: opacity(.5);
}
.navbar-item span{
text-transform: lowercase;
font-weight: 500;
color: #AAA;
}
.navbar-item:hover, .navbar-item.activepage{
background: #FFD700;
}
/* title ********************************************/
.title-header{
background-color: olivedrab;
padding-top: 30px;
padding-bottom: 30px;
}
.title{
max-width: 960px;
display: flex;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: space-between;
}
.title-pagename{
color: white;
letter-spacing: 3px;
}
.title-recipename{
display: flex;
}
.title-recipename img{
align-self: center;
filter: invert(1);
width: 20px;
}
.title-recipename h2{
color: white;
font-weight: 400;
font-size: 21px;
letter-spacing: 2px;
}
/* main ********************************************/
main{
max-width: 950px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
}
/* quick info **************************************/
.quick-info{
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
}
.quick-info-shortdesc{
width: 250px;
margin: 20px;
}
.quick-info-title{
display: flex;
flex-basis: auto;
flex-direction: column;
align-items: center;
margin-bottom: 8px;
}
.quick-info-title h4{
font-weight: 400;
}
.quick-info-title h3, h4, .linda{
margin-bottom: 15px;
}
.linda{
border-radius: 50%;
width: 65px;
}
.quick-info-tabulardata{
display: flex;
flex-direction: row;
margin-bottom: 15px;
}
.quick-info-tabulardata li{
list-style: none;
margin-right: 20px;
}
.quick-info-image{
width: 660px;
height: 472px;
margin: 0px;
}
.quick-info-image img{
height: 472px;
}
/* ingredients & instructions ************************/
.instructions{
display: flex;
justify-content: space-between;
margin-top: 50px;
margin-bottom: 50px;
margin-left: 20px;
}
.ingredients-title h2, .instructions-title h2{
font-weight: 400px;
}
.ingredients-info{
margin-top: 12px;
}
.ingredients-info li{
list-style: none;
margin-top: 5px;
}
.instructions-section{
width: 650px;
}
.instructions-info{
margin-left: 20px;
margin-top: 12px;
margin-right: 30px;
}
.instructions-info li{
margin-top: 10px;
}
/* ratings ****************************************/
.ratings{
background-color: firebrick;
color:#FFF;
padding: 0 0 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.ratings-loaction{
display: flex;
align-items: center;
}
.ratings-tags{
display: flex;
align-items: center;
}
.ratings-icon{
width: 18px;
height: 18px;
filter: invert(1);
}
.ratings ul{
display: flex;
}
.ratings li{
list-style: none;
}
.ratings li:not(:first-child)::before{
content:" | ";
}
.ratings-stars{
display: flex;
align-items: center;
}
.ratings-votes{
background-color: orangered;
padding: 10px;
font-size: 12px;
display: flex;
flex-direction: column;
align-items: center;
}
.ratings-item .ratings-icon:first-of-type{
margin-right: 5px;
}
/* reccomendations *****************************************/
.recommendations{
background-color: #F5F5F5;
}
.recommendations-header{
text-align: center;
padding-top: 60px;
padding-bottom: 40px;
}
.recommendations-header h1{
font-weight: 300;
letter-spacing: 10px;
}
.recommendations-boxsection{
display: flex;
}
.recommendations-box{
background-color: white;
display: flex;
flex-direction: column;
margin: 10px 10px 80px 10px;
}
.recommendations-title{
display:flex;
flex-direction: column;
align-items: center;
padding-top: 30px;
}
.recommendations-title h2{
font-size: 16px;
font-weight: 700;
margin-bottom: 0;
}
.recommendations-stars{
display: flex;
align-items: center;
margin-right: auto;
margin-left: auto;
}
.recommendations-star{
width: 12px;
height: 12px;
margin-left: 5px;
}
.recommendations-description{
margin: 20px;
}
.user-section{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.user{
display: flex;
align-items: center;
margin-left: 20px;
}
.user img{
border-radius: 50%;
width: 50px;
}
.user-rating{
background-color: olivedrab;
border-radius: 3px;
text-align: center;
color: white;
padding: 8px 5px;
margin-right: 20px;
}
.user-rating p{
font-size: 12px;
font-weight: 300;
}
/* footer ***********************************************/
.footer{
background-color: #555;
}
.footer-section{
max-width: 960px;
display: flex;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: space-between;
}
.footer-icon{
width: 120px;
display: flex;
flex-direction: column;
align-items: center;
}
.footer-logo{
width: 100px;
}
.footer-title{
color: #DDD;
font-weight: 600;
font-size: 16px;
margin-top: 15px;
text-align: center;
}
.footer-contacts{
height: 180px;
width: 300px;
display: flex;
align-items: center;
margin-right: 250px;
margin-top: 16px;
}
.contacts-item{
list-style: none;
margin-top: 6px;
}
.contacts-item-icon{
width: 16px;
height: 16px;
filter: invert(1);
}
.contacts-item span{
color: #DDD;
margin-left: 10px;
}
.contacts-item p{
margin-left: 30px;
}
.socials{
display: flex;
margin-top: 100px;
}
.socials-icons{
width: 30px;
height: 30px;
filter: invert(70%);
margin-left: 25px;
}
.copyright{
background-color: #333;
}
.copyright-section{
width: 960px;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: stretch;
}
.copyright-kitchendepot, .web-development{
color: #AAA;
font-weight: 400;
font-size: 12px;
}
.web-development-section{
display: flex;
flex-direction: row;
}
.rocket{
width: 15px;
filter: invert(50%);
margin-right: 5px;
}
/* media ********************************************/
@media (max-width: 360px){
.header{
flex-direction: column;
align-items: center;
}
.header-logo{
align-content: center;
}
.org-name{
width: 360px;
align-text: center;
}
}Editor is loading...