diff --git a/Coders/Web Development/NETFLIX_CLONE/style.css b/Coders/Web Development/NETFLIX_CLONE/style.css new file mode 100644 index 0000000..c2bd064 --- /dev/null +++ b/Coders/Web Development/NETFLIX_CLONE/style.css @@ -0,0 +1,115 @@ +* { + + margin:0; + box-sizing: border-box; + } + + body{ + font-family: Arial, Helvetica, sans-serif; + background-color: rgba(20, 1, 1, 0.932); + } + .row__poster{ + width: 100%; + object-fit: contain; + max-height: 100px; + margin-right: 10px; + transition: transform 450ms; + + } + .row__posters{ + display: flex; + overflow-y: hidden; + overflow-x: scroll; + padding: 20px; + } + .row__poster:hover{ + transform: scale(1.08); + + } + .row__posters::-webkit-scrollbar{ + display:none; + } + .row__posterLarge{ + max-height: 250px; + } + .row__posterLarge:hover{ + transform: scale(1.09); + } + .row{ + color:white; + margin-left: 20px; + } + .banner{ + background-image:url('https://wallpaperaccess.com/full/2855615.jpg'); + background-size:cover; + background-position: center center; + color: white; + object-fit: contain; + height: 448px; + } + .banner__contents{ + margin-left: 30px; + padding-top: 140px; + height: 190px; + } + .banner__title{ + font-size: 3rem; + font-weight: 800; + padding-bottom: 0.3rem; + } + .banner__description{ + width: 45rem; + line-height: 1.3; + padding-top: 1rem; + font-size: 0.8rem; + max-width: 360px; + height: 180px; + } + .banner__button{ + cursor: pointer; + color: white; + outline: none; + border: none; + font-weight: 700; + border-radius: 0.2vw; + padding-left :2rem; + padding-right:1rem; + padding-top:0.5rem; + padding-bottom:0.5rem; + background-color:rgba(51, 51, 51, 0.5); + } + .banner__button:hover{ + color:#000; + background-color:whitesmoke; + transition: all 0.2s; + } + .banner--fadebottom{ + margin-top: 145px; + height: 7.4rem; + background-image: linear-gradient(180deg,transparent,rgba(37,37,37,0.61),black); + } + /* + .nav__logo{ + width: 80px; + object-fit: contain; + } + .nav__avatar{ + width: 30px; + object-fit: contain; + } + .nav{ + position:fixed; + top:0; + width: 100%; + display: flex; + justify-content: space-between; + padding: 20px; + z-index: 1; + transition-timing-function: ease-in; + transition: all 0.5s; + + } + .nav__black{ + background-color: black; + } + */