Last active
August 17, 2020 19:13
-
-
Save john92paul/85d3b41b6696160ede5e3c0f757d6da9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <!-- General --> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title>Responsive Website UI Design for a aqua fish page</title> | |
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | |
| <!-- Loading Necessary Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;600;700;900&display=swap" rel="stylesheet"> | |
| </head> | |
| <style> | |
| /* General Css */ | |
| html{width: 100vw;height: 100vh;overflow: hidden;font-family:"Roboto", sans-serif;color: #363636;background-color: #fff;} | |
| body{margin: 0} | |
| a{text-decoration: none;color: #363636} | |
| .center {margin: 0; position: absolute; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);text-align: center;} | |
| /* Css for scroll bar */ | |
| ::-webkit-scrollbar {width: 8px;height: 8px;border-radius: 8px;} | |
| ::-webkit-scrollbar-button {display: none;} | |
| ::-webkit-scrollbar-corner, ::-webkit-scrollbar-track {background: #e1e1e1;} | |
| ::-webkit-scrollbar-thumb {background: #757575;border-radius: 8px;} | |
| /* Navigation Bar Css */ | |
| .nav-bar{position: absolute;width: 100%;height: 70px;display: inline-flex;z-index: 10;cursor: pointer;} | |
| .nav-logo{display: inline-flex;} | |
| .logo-svg{padding: 24px;padding-right: 12px;} | |
| .logo-text{padding: 20px;padding-left: 0;color: #fff;font-weight: 500;text-transform: uppercase;font-size: 18px;line-height: 32px;} | |
| .nav-text{height: 70px;line-height: 76px;padding-left: 30px;text-transform: uppercase;font-size: 14px;font-weight: 500;cursor: pointer;color: #f7f7f7;} | |
| /* Body Css */ | |
| .content-box-wrapper{position: absolute;width: 100vw;height: 100vh;top: 0;left: 0;} | |
| .content-box{width: 100%;height: 100vh;} | |
| .background-image{width: 100%;height: 100vh;} | |
| .background-img{-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0 0 0 / 0.3)), to(rgba(0,0,0,0)));mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));position: absolute;right: -20%;top: -50%;} | |
| .siamese-text{position: absolute;top: 13%;left: 21%;font-size: 45px;font-family: sans-serif;font-weight: 800;color: #ff6248;} | |
| .fish-img{max-height: 100vh;max-width: 50%;left: 75%;} | |
| .fighting-text{position: absolute;top: 19%;left: 10%;font-size: 95px;font-family: sans-serif;font-weight: 800;color: #f2fcff;background: -webkit-linear-gradient(left, #8198af , #ffffff);background: -o-linear-gradient(right, red, yellow);background: -moz-linear-gradient(right, red, yellow);background: linear-gradient(to left, #8198af , #ffffff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} | |
| .fish-text{position: absolute;top: 34%;left: 36%;font-size: 95px;font-family: sans-serif;font-weight: 800;color: #f2fcff;color: #f2fcff;background: -webkit-linear-gradient(left, #ffffff, #8198af);background: -o-linear-gradient(right, red, yellow);background: -moz-linear-gradient(right, red, yellow);background: linear-gradient(to left, #ffffff, #8198af);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} | |
| /* Description, Footer Css */ | |
| .footer{position: absolute;bottom: 0;display: inline-flex;padding: 12px;width: calc(100% - 24px);} | |
| .footer-about{width: 250px;color: #fff;margin-left: 30px;} | |
| .about-text{font-size: 12px;font-weight: 500;color: #d4d4d4;line-height: 22px;font-family: 'Open Sans', sans-serif;} | |
| .read-more-text{text-transform: uppercase;font-size: 14px;cursor: pointer;font-family: 'Roboto', sans-serif;} | |
| .underline{width: 40px;height: 3px;background-color: #ff5d3e;margin: 10px 0;} | |
| .social-share{position: absolute;right: 30px;width: 150px;display: inline-flex;bottom: 0;padding: 8px;} | |
| .share-us-text{margin: 0;color: #fff;font-size: 12px;line-height: 32px;margin-right: 8px;} | |
| .social-item{background-color: #fff;margin-left: 8px;cursor: pointer;} | |
| /* Large portrait devices */ | |
| @media only screen and (max-width: 800px){ | |
| .content-box{height: 60vh;} | |
| .siamese-text{position: unset;margin: 0;font-size: 54px;} | |
| .fighting-text{position: unset;font-size: 90px;margin: 0;} | |
| .fish-text{position: unset;font-size: 90px;margin: 0;} | |
| .fish-img{max-width: 60%;z-index: -1;left: 50%;top: 50%;} | |
| .footer{display: unset;} | |
| .footer-about{width: 100%;margin: 0px;} | |
| .social-share{position: unset;margin-top: 16px;padding: 0;} | |
| .text-box{margin: 0; position: absolute; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);text-align: center;top: 38%;} | |
| } | |
| /* Medium to Small portrait devices */ | |
| @media only screen and (max-width: 600px){ | |
| .logo-text{display: none;} | |
| .siamese-text{font-size: 40px;} | |
| .fighting-text{font-size: 54px;} | |
| .fish-text{font-size: 54px;} | |
| .fish-img{max-width: 90%;} | |
| } | |
| /* Small Landscape Devices */ | |
| @media only screen and (max-width: 850px) and (orientation: landscape){ | |
| .footer-about{display: none;} | |
| .siamese-text{font-size: 36px;} | |
| .fighting-text{font-size: 75px;} | |
| .fish-text{font-size: 75px;top: 38%;} | |
| } | |
| </style> | |
| <body> | |
| <!-- Page Body --> | |
| <div class="main"> | |
| <!-- Navigation Bar --> | |
| <div class="nav-bar"> | |
| <div class="nav-logo"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="logo-svg" height="24" viewBox="0 0 24 24" width="24"><path d="M24 0H0v24h24V0zm0 0H0v24h24V0zM0 24h24V0H0v24z" fill="none"/><path d="M17.66 8L12 2.35 6.34 8C4.78 9.56 4 11.64 4 13.64s.78 4.11 2.34 5.67 3.61 2.35 5.66 2.35 4.1-.79 5.66-2.35S20 15.64 20 13.64 19.22 9.56 17.66 8zM6 14c.01-2 .62-3.27 1.76-4.4L12 5.27l4.24 4.38C17.38 10.77 17.99 12 18 14H6z" fill="#fff"/></svg> | |
| <div class="logo-text">Aquastore</div> | |
| </div> | |
| <span class="nav-text">Home</span> | |
| <span class="nav-text">Store</span> | |
| <span class="nav-text">Search</span> | |
| </div> | |
| <!-- Body Content --> | |
| <div class="background-image"><img class="background-img" src="https://s7.gifyu.com/images/fish.png"></div> | |
| <div class="content-box-wrapper"> | |
| <div class="content-box center"> | |
| <h4 class="siamese-text">SIAMESE</h4> | |
| <h1 class="fighting-text">FIGHTING</h1> | |
| <img class="fish-img center" src="https://s7.gifyu.com/images/fish.png"> | |
| <h1 class="fish-text">FISH</h1> | |
| </div> | |
| </div> | |
| <!-- Description and Footer Content --> | |
| <div class="footer"> | |
| <div class="footer-about"> | |
| <h2>Overview</h2> | |
| <div class="underline"></div> | |
| <div> | |
| <span class="about-text">The Siamese fighting fish, also known as the betta, is a popular fish in the aquarium trade. Bettas are a member of the gourami family and are known to be highly territorial. Males in particular are prone to high levels of aggression and will attack each other if housed in the same tank.</span> | |
| <span class="read-more-text">Read More</span> | |
| </div> | |
| </div> | |
| <!-- Social Share Element --> | |
| <div class="social-share"> | |
| <p class="share-us-text">SHARE US</p> | |
| <div><svg width="30" height="30" viewBox="0 0 24 24" class="social-item"><path d="M0 0v24h24v-24h-24zm16 7h-1.923c-.616 0-1.077.252-1.077.889v1.111h3l-.239 3h-2.761v8h-3v-8h-2v-3h2v-1.923c0-2.022 1.064-3.077 3.461-3.077h2.539v3z" fill="#0d3948"></path></svg></div> | |
| <div><svg width="30" height="30" viewBox="0 0 24 24" class="social-item"><path d="M0 0v24h24v-24h-24zm18.862 9.237c.208 4.617-3.235 9.765-9.33 9.765-1.854 0-3.579-.543-5.032-1.475 1.742.205 3.48-.278 4.86-1.359-1.437-.027-2.649-.976-3.066-2.28.515.098 1.021.069 1.482-.056-1.579-.317-2.668-1.739-2.633-3.26.442.246.949.394 1.486.411-1.461-.977-1.875-2.907-1.016-4.383 1.619 1.986 4.038 3.293 6.766 3.43-.479-2.053 1.079-4.03 3.198-4.03.944 0 1.797.398 2.396 1.037.748-.147 1.451-.42 2.085-.796-.245.767-.766 1.41-1.443 1.816.664-.08 1.297-.256 1.885-.517-.44.656-.997 1.234-1.638 1.697z" fill="#0d3948"></path></svg></div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment