I'm new to HTML/CSS and working from scratch on a website. I'm using some kind of template for the background I found that has different gradients on the background depending on what time of day you visit the site. I like it so I'm sticking with it for now until I find something better. The only problem is the gradient doesn't fill the screen and cuts off at the bottom. Can someone check out this code and help fix it?
Here's my site: http://OmnipointStudios.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Omnipoint Studios</title>
<meta name="description" content=""/>
<link href="css/styles.css" rel="stylesheet">
<link href="css/gradients.css" rel="stylesheet">
</head>
<body class="">
<div class="wrapper">
<header>
<nav class="website-nav">
<ul>
<li><a class="home-link" href="index.html">Omnipoint Studios</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="text" align="center">
<a class="twitter-link" href="https://twitter.com/Omnipoint"><img src="img/tweet.svg" /></a>
<div class="text">
<h2>Omnipoint on Twitter</h2>
</div>
</div>
<br>
<br>
<div class="text" align="center">
<iframe width="35%" height="500" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/808499157&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</div>
<div class="text" align="center">
<iframe width="35%" height="175" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/639444903&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</div>
<div class="text" align="center">
<iframe width="35%" height="175" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/287224418&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</div>
<a align="center" href="https://www.soundcloud.com/omnipointmusic"><h2>Music by Omnipoint</h2></a>
</div>
</div>
<footer>
<div align='center'><a href='http://www.hit-counts.com'><img src='http://www.hit-counts.com/counter.php?t=MTQyNDM2NQ==' border='0' alt='Hit Counter'></div>
</footer>
</div>
<script src="js/set-background.js"></script>
</body>
</html>
Gradient.css
/* Gradients */
.heaven-0 { background: #00000A; }
.heaven-1 { background: linear-gradient(to bottom, #020214 85%,#191922 100%); }
.heaven-2 { background: linear-gradient(to bottom, #020214 60%,#20202D 100%); }
.heaven-3 { background: linear-gradient(to bottom, #020214 10%,#303054 100%); }
.heaven-4 { background: linear-gradient(to bottom, #20202D 0%,#505070 100%);
}
.heaven-5 { background: linear-gradient(to bottom, #404050 0%,#7070AA 80%,#8C78AA 100%);
}
.heaven-6 { background: linear-gradient(to bottom, #4A4A69 0%,#7878B4 50%,#C878A0 100%);
}
.heaven-7 { background: linear-gradient(to bottom, #7878BE 0%,#8282BE 60%,#E6B4D2 100%);
}
.heaven-8 { background: linear-gradient(to bottom, #82AADC 0%,#F0B4B4 100%);
}
.heaven-9 { background: linear-gradient(to bottom, #96C8FA 1%,#AAE6FF 70%,#B4B4F0 100%);
}
.heaven-10 { background: linear-gradient(to bottom, #B4E6FF 0%,#96DCFF 100%); }
.heaven-11 { background: linear-gradient(to bottom, #9BDCFF 0%,#64D2FA 100%); }
.heaven-12 { background: linear-gradient(to bottom, #96DCFF 0%,#37A0D2 100%); }
.heaven-13 { background: linear-gradient(to bottom, #5ABEE6 0%,#236EAA 100%); }
.heaven-14 { background: linear-gradient(to bottom, #2D91BE 0%,#1E508C 100%); }
.heaven-15 { background: linear-gradient(to bottom, #2473ab 0%,#1E508C 70%,#5A7882 100%);
}
.heaven-16 { background: linear-gradient(to bottom, #1E508C 0%,#285A8C 50%,#A0AA6E 100%);
}
.heaven-17 { background: linear-gradient(to bottom, #1E508C 0%,#738C7D 50%,#EBD25A 100%);
}
.heaven-18 { background: linear-gradient(to bottom, #143C78 0%,#5A6E73 30%,#E1C85A 70%,#B4643C 100%);
}
.heaven-19 { background: linear-gradient(to bottom, #143C50 0%,#505046 30%,#C8782D 60%,#BC460F 80%, #320F05 100%);
}
.heaven-20 { background: linear-gradient(to bottom, #051928 0%,#051928 30%,#8C3C14 80%,#230F05 100%);
}
.heaven-21 { background: linear-gradient(to bottom, #000A0F 30%,#5A230A 80%,#280A05 100%);
}
.heaven-22 { background: linear-gradient(to bottom, #0A0500 50%,#4B1E05 100%); }
.heaven-23 { background: linear-gradient(to bottom, #00000A 80%,#140A00 100%); }
.heaven-24 { background: #00000A;
}
Styles.css
* {
margin: 0;
}
html, body {
height: 100%;
}
html {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Roboto, Arial, sans-serif;
font-size: 62.5%;
color: white;
background: linear-gradient(to bottom, #2473ab 0%,#1e528e 70%,#5b7983 100%);
}
body {
font-size: 1.8rem;
}
h1, h2, h3 {
font-weight: normal;
}
h1 {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}
a {
color: white;
text-decoration: none;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -7rem;
position: relative;
}
footer, .push {
height: 7rem;
}
footer .footer-contents {
padding: 0 5rem;
position: relative;
}
.website-nav {
position: relative;
padding: 5rem;
}
.website-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.website-nav ul li {
float: left;
padding: 0.5rem 2rem 0.5rem 0;
line-height: 21px;
}
.website-nav ul li a {
color: white;
text-decoration: none;
}
.home-link {
font-weight: bold;
}
.message {
position: relative;
padding: 0 5rem;
margin-bottom: 3rem;
width: auto;
}
.message .twitter-link {
float: left;
margin-right: 20px;
}
.message .twitter-link img {
width: 40px;
height: 40px;
}
.message .text {
float: left;
}
.message:after, .website-nav:after {
content: " ";
display: table;
clear: both;
}
.graphics {
display: none;
position: absolute;
bottom: 0;
left: 0;
margin-bottom: 0;
}
.graphics .tower svg {
width: calc(100vw);
height: calc(90vh);
}
.graphics .cloud {
top: 30rem;
position: relative;
}
.page-content {
padding: 1rem 5rem;
}
.page-content p {
margin-bottom: 1rem;
}
.path {
stroke-dasharray: 4000;
stroke-dashoffset: 4000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@media (min-height: 500px) and (min-width: 700px) {
.message {
padding: 0;
width: 50%;
left: calc(50vw - 5rem);
top: calc(15vh - 5rem);
}
.message .text {
padding-right: 0rem;
}
.graphics {
display: block;
margin-bottom: 6rem;
}
.message .twitter-link img {
width: 70%;
height: 70%;
}
.page-content {
padding: 3rem 5rem;
}
}
@media (min-height: 500px) and (min-width: 1240px) {
.message {
left: calc(50vw - 10rem);
top: calc(25vh - 5rem);
}
h1 {
font-size: 5rem;
}
.message .twitter-link img {
width: 80%;
height: 80%;
}
}
@media (min-aspect-ratio: 11/5) {
.graphics {
display: none;
}
}
Aucun commentaire:
Enregistrer un commentaire