I am creating the homepage of a website for a school assignment, but my webpage doesn't scroll so the offscreen divs are not visible. I have browsed this forum and the web studying the solutions proposed to other relevant questions, but they don't seem to work for me.
I put my code below (I have removed those parts which are not relevant)... please, can somebody tell me what is wrong?
Thanks in advance for any help.
*{margin: 0; box-sizing: border-box}
body {
height: 100vh;
overflow-y: scroll;
}
.wrap {
width: 59em;
margin: 0 auto;
height: 100%
}
img.resize {
width: 944px;
}
#header {
background: url("...") 100% no-repeat;
background-position: center center;
position: fixed;
right: 0;
left: 0;
top:0;
display: block;
width: 100%;
height: 14.37em;
}
#testo-header{
background-color: white;
height: 4.375em;
width: 50%;
position: absolute;
top: 5em;
left: 0;
text-align: center;
line-height: 4.375em;
z-index: 2;
padding-left: 8em;
}
#testo-header:before {
content: '\0020';
background-image: url(...);
background-repeat: no-repeat;
width: 100%;
height:5.625em;
display:block;
position: absolute;
left: 11.25em;
z-index: -1;
}
ul#nav {
background-color: white;
height: 70px;
width: 50%;
position: absolute;
top: 80px;
right: 0;
font-family: 'Hind', sans-serif;
font-size: 1em;
font-weight: bold;
list-style-type: none;
line-height: 35px;
display: block;
z-index: 5;
}
ul#nav li {
float: left;
text-align: center;
vertical-align: text-top;
padding: 20px;
}
#main {
background-color: white;
position: relative;
top:1em;
}
#title {
height: 15em;
position: relative;
border-top: 1px solid #888888;
width: 944px;
margin: 0 auto;
line-height: 36px;
padding-top: 20px;
padding-bottom: 20px;
}
ul#social {
list-style: none;
display: block;
position: absolute;
top: 20px;
right: 0;
}
ul#social li {
padding: 3px;
float: left;
}
#content {
background-color: white;
display: block;
position: relative;
width: 600px;
height: 400px;
top: 120px;
}
#ingredienti {
height: 300px;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style2.css"/>
<link href="https://fonts.googleapis.com/css?family=Hind|Play" rel="stylesheet">
</head>
<body>
<div id="header">
<div class="wrap">
<div id="testo-header">
<h1>Tomatoes</h1>
</div>
<ul id="nav">
<li>Home</li>
<li>Ricette</li>
<li>Categorie</li>
<li>Blog</li>
<li>Contatti</li></li>
</ul>
</div>
<div id="main">
<div class="wrap">
<div id="title">
Starters
<ul id="social">
<li><img src="..." width="25" height="25"></li>
<li><img src="..." width="25" height="25"></li>
<li><img src="..." width="25" height="25"></li>
</ul>
<h2>salad</h2>
<img class="resize" src="...">
</div>
<div id="content">
<div id="ingredients">
<h3>Ingredients</h3>
</div>
<div id="comments"></div>
</div>
<div id="aside">
</div>
</div>
</div>
<footer>
<div class="wrap">
<div class="column">
<h4>Informazioni</h4>
</div>
<div class="column">
<h4>Categorie</h4>
</div>
<div class="column">
<h4>Mangiare fuori</h4>
</div>
<div id="bottom">
<h5>Newsletter</h5>
</div>
</div>
</footer>
</body>
</html>
You are missing a close div starting from where you opened the <div id="header">, add that and the scroll bar will appear
Related
i have a div that i want to place below another div.But i think its getting overlapped and is not visible. I'm trying to get a div below the div that split into 2.
<body>
<div class="split left">
<div class="centered">
<img src="assets/img/tms1.png" alt="Avatar woman" />
<h2>our solution</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="assets/img/logo.jpg" alt="Avatar man" />
<h2>our cause</h2>
</div>
</div>
<div class="page2"><img src="assets/img/logo.png" /></div>
the <div class="page2"><img src="assets/img/logo.png" /></div> is not visible.
css:
body {
font-family: sans-serif;
font-size: 30px;
color: white;
height: 100%;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: white;
color: black;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 250px;
border-radius: 50%;
}
css for the div that is not getting displayed.
.page2 {
position: relative;
margin-top: 100%;
top: 100%;
width: 100%;
background-color: #111;
}
https://jsfiddle.net/uxfynrmj/
There are a few issues. Most importantly, you need to remove the position: fixed if you want another element statically positioned below your .split divs.
Most notably I removed the fixed position and absolute positioned child and added a wrapping div width display: flex.
Code snippet below:
html {
scroll-behavior: smooth;
/*height: 100%;*/
}
body {
font-family: sans-serif;
font-size: 30px;
color: white;
height: 100%;
}
.splits {
display: flex;
}
.split {
flex: 1 1 50%;
background: black;
}
.right {
right: 0;
background-color: white;
color: black;
}
.centered {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.centered img {
width: 100px;
height: 100px;
border-radius: 50%;
}
.page2 {
width: 100%;
background-color: pink;
}
.page2 img {
width: 100%;
background-color: pink;
}
<html>
<head>
<title>THS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="splits">
<div class="split">
<div class="centered">
<img src="http://lorempixel.com/400/200" alt="Avatar woman" />
<h2>our solution</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="http://lorempixel.com/400/400" alt="Avatar man" />
<h2>our cause</h2>
</div>
</div>
</div>
<div class="page2"><img src="http://lorempixel.com/400/400" /></div>
</body>
</html>
I've got four columns (25% width each) that take up 100% width and height of the screen. The idea is to have one image associated with each column, and when a user hovers over each column, the image changes to correspond with the text/icon in the column (the image itself should take up 100% width/height).
Is something like this possible with only HTML + CSS? I'm assuming I'd need some JS.
So far, I've got it set up where everything 'works', except for the image spanning across all of the columns. I've tried changing:
.col:hover { width: 100%; }
This seems to work okay for the first column, but the others flicker and glitch upon hover.
Check out the code below (I'm just using color blocks as images for now) /
Or view on CodePen here: https://codepen.io/sdorr/pen/VqLzBQ
<!doctype html>
<head></head>
<body>
<div class="container">
<a class="button" href="#">learn more</a>
<div class="col col-1">
<div class="vertical-align">
<h1 class="hero-text">data</h1>
</div>
</div>
<div class="col col-2">
<div class="vertical-align">
<h1 class="hero-text">intelligence</h1>
</div>
</div>
<div class="col col-3">
<div class="vertical-align">
<h1 class="hero-text">experience</h1>
</div>
</div>
<div class="col col-4">
<div class="vertical-align">
<h1 class="hero-text">activation</h1>
</div>
</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
height: 100vh;
position: relative;
}
.col {
display: inline;
float: left;
width: 25%;
height: 100vh;
background-color: red;
position: relative;
text-align: center;
z-index: 0;
overflow: hidden;
}
.button {
padding: 20px 0;
width: 100%;
background-color: purple;
color: #ffffff;
text-decoration: none;
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.button:hover {
background-color: orange;
}
.col-1:hover {
background-color: pink;
}
.col-2:hover {
background-color: blue;
}
.col-3:hover {
background-color: green;
}
.col-4:hover {
background-color: yellow;
}
.vertical-align {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
</style>
</html>
Use an image instead of a color, and get it to cover the whole element:
.col-1:hover {
background-image: url(...);
background-repeat: no-repeat;
background-size: cover;
}
.col-1:hover {
background-color: pink;
background-image: url(...);
background-repeat: no-repeat;
width: 100%
}
How about this? It works on my side.
https://codepen.io/progr4mm3r/pen/maJBda
I've made some good progress on this issue and figured I'd post where I'm at so far. There's definitely still some kinks that need to be worked out, but it's coming along nicely.
The concept came from Joshua Johnson
Check out the CodePen or the source code below:
<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<ul>
<div class="col">
<li>
data
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm">
</li>
</div>
<div class="col">
<li>
intelligence
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</li>
</div>
<div class="col">
<li>
experience
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</li>
</div>
<div class="col">
<li>
activation
<img src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg">
</li>
</div>
</ul>
</nav>
<img src="https://helpx.adobe.com/nz/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg">
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background: #333;
}
.col {
width: 24.9%;
height: 100vh;
float: left;
display: inline;
border-right: 1px dashed #ffffff;
text-align: center;
}
.col:last-child {
border-right: none;
}
.container {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
}
.container img {
position: absolute;
top: 0;
left: 0;
z-index: -60;
width: 100%;
height: 100vh;
}
.container li img {
position: absolute;
top: 0;
left: 100%;
z-index: -50;
/*transition: all 1s ease;*/
width: 100%;
height: 100vh;
}
nav {
width: 100%;
height: 100vh;
}
ul {
width: 100%;
height: 100vh;
list-style: none;
text-align: center;
}
li {
width: 100%;
height: 100vh;
display: flex;
padding-top: 100px;
}
li a {
z-index: 1;
color: #ffffff;
text-decoration: none;
font-size: 36px;
width: 100%;
height: 100vh;
}
li a:hover + img {
left: 0;
}
</style>
<script type="text/javascript">
</script>
</html>
I know a lot of people asked that already but nothing seems to work. I want my footer to be on the bottom of the page. So far it is on the bottom of the screen, but if the page is bigger and you need to scroll, it just sticks there and stays in the middle. If I put position: fixed the footer scrolls with you. I want it to be at the VERY BOTTOM of the page, though, so you have to scroll down to see it in the first place, if the page is too big.
I tried several different wrappers and pushers but nothing seems to work.
You should overthink your layout and read about the HTML box model.
I put all your elements in a wrapper which is position: relative, so the footer with position: absolute can align properly. Also I had to remove position: absolute of .pageframe:
.pagelist {
background-color: deeppink;
position: relative;
float: right;
width: 20%;
height: 70%;
overflow-y: scroll;
margin-right: 10px;
}
.pageimg {
position: relative;
float: left;
width: 100%;
min-height: 500px;
text-align: center;
display: flex;
align-items: center;
}
.pageimg img {
margin: 0 auto;
}
.pagetext {
position: relative;
float: left;
margin-top: 1%;
width: 100%;
text-align: center;
padding-bottom: 10px;
}
.pageframe {
/* position: absolute; */
width: 75%;
margin-left: 10px;
text-align: center;
}
.comiclist {
background-color: lightgrey;
padding-left: 5px;
width: 90%;
}
.floatbutt-right {
float: right;
}
.floatbutt-left {
float: left
}
.footer {
position: absolute;
width: 100%;
bottom: 0;
height: 30px;
background-color: lightgrey;
font-size: 12px;
color: grey;
}
.footer span {
float: right;
margin-top: 5px;
margin-right: 10px;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.spacer {
width: 100%;
height: 95px;
}
.content {
height: 100%;
width: 100%;
margin-bottom: -30px;
/* Footer */
}
#wrapper {
min-width: 100%;
min-height: 100%;
display:inline-block;
position:relative;
}
<head lang="de">
<link rel="stylesheet" href="inc/layout.css">
<script src="inc/javascript.js"></script>
<meta charset="UTF-8" />
<title>komix.lit</title>
</head>
<body>
<div id="wrapper">
<div id="navbar">
<img class="logo" src="inc/logo.png" /> komix.lit
<button id="home" class="navbutt" onClick="location.href='home.php'">Home</button>
<button id="comics" class="navbutt" onClick="location.href='komix.php'">Komix</button>
<button id="login" class="navbutt" onClick="location.href='login.php'">Einloggen</button></div>
<div class="content">
<div class="spacer"></div>
<div class="pagelist">
<ul style="list-style-type: none;">
<li><a style='text-decoration: none; color: black;' href='pages.php?id=84'>Seite 1</a></li>
<li><a style='text-decoration: none; color: black;' href='pages.php?id=86'>Seite 2</a></li>
<li><a style='text-decoration: none; color: black;' href='pages.php?id=85'>Seite 3</a></li>
</ul>
</div>
<div class='pageframe'>
<div class='pageimg' style='height: 1024;'>
<img src='komix\19_03_18_10_21_31-12.jpg' alt='seite 1' style='max-width:100%' /> </div>
<div class='pagetext'>seite 1</div><button class='floatbutt-right' onClick="location.href='pages.php?id=86'">nächste Seite</button></div>
</div>
<div class="footer">
<span>text</span>
</div>
</div>
</body>
</html>
You can try this, hope this will help you
Remove min-height for pageimg class and content class then you will get your output.
.pagelist {
background-color: deeppink;
position: relative;
float: right;
width: 20%;
height: 70%;
overflow-y: scroll;
margin-right: 10px;
}
.pageimg {
position: relative;
float: left;
width: 100%;
/* min-height: 500px; */
text-align: center;
display: flex;
align-items: center;
}
.pageimg img {
margin: 0 auto;
}
.pagetext {
position: relative;
float: left;
margin-top: 1%;
width: 100%;
text-align: center;
padding-bottom: 10px;
}
.pageframe {
position: absolute;
width: 75%;
margin-left: 10px;
text-align: center;
}
.comiclist {
background-color: lightgrey;
padding-left: 5px;
width: 90%;
}
.floatbutt-right {
float: right;
}
.floatbutt-left {
float: left
}
.footer {
position: absolute;
width: 100%;
bottom: 0;
height: 30px;
background-color: lightgrey;
font-size: 12px;
color: grey;
}
.footer span {
float: right;
margin-top: 5px;
margin-right: 10px;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.spacer {
width: 100%;
height: 95px;
}
.content {
width: 100%;
margin-bottom: -30px;
/* Footer */
}
<div id="navbar">
<img class="logo" src="inc/logo.png" />
komix.lit
<button id="home" class="navbutt" onClick="location.href='home.php'">Home</button>
<button id="comics" class="navbutt" onClick="location.href='komix.php'">Komix</button>
<button id="login" class="navbutt" onClick="location.href='login.php'">Einloggen</button></div>
<div class="content">
<div class="spacer"></div><div class="pagelist"><ul style="list-style-type: none;"><li><a style='text-decoration: none; color: black;' href='pages.php?id=84'>Seite 1</a></li><li><a style='text-decoration: none; color: black;' href='pages.php?id=86'>Seite 2</a></li><li><a style='text-decoration: none; color: black;' href='pages.php?id=85'>Seite 3</a></li></ul></div><div class='pageframe'><div class='pageimg' style='height: 1024;'>
<img src='komix\19_03_18_10_21_31-12.jpg'
alt='seite 1' style='max-width:100%'/> </div><div class='pagetext'>seite 1</div><button class='floatbutt-right' onClick="location.href='pages.php?id=86'">nächste Seite</button></div></div>
<div class="footer">
<span>text</span>
</div>
What I have
A header that is fixed
Inside the header is a piece of text in the top right
When I click on the text an absolute positioned div appears underneath it with some 'options'
In the main content I also have a column on the right that's fixed with a button inside
The Issue
When clicking the text to display the absolute position div 'overlay', the button appears 'on top' of it.
Question
How do I ensure that when I click the text and the additional panel appears, that it appears on top of everything else?
Some quick code to demonstrate
If you click on the text in the top right, you'll see the issue.
$('.text').click(function(){
$('.dropdown').toggle();
});
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
float: left;
}
.header {
width: 100%;
height: 70px;
position: fixed;
background: #ebebeb;
}
.text {
width: 200px;
float: right;
position: relative;
}
.text .dropdown {
width: 100%;
position: absolute;
top: 65px;
right: 0;
background: #888;
display: none;
}
.text .dropdown ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 100%;
height: 100%;
float: left;
margin-top: 80px;
}
.content .right-col {
width: 30%;
height: 200px;
float: right;
background: #ebebeb;
}
.content .actions {
width: 100%;
position: fixed;
top: 80px;
right: 10px;
}
.content .button {
padding: 20px;
float: right;
background: green;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header">
<div class="text">
<span> Some text </span>
<div class="dropdown">
<ul>
<li> Text </li>
<li> Text </li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="right-col">
<div class="actions">
<div class="button"> Button </div>
</div>
</div>
</div>
</div>
Set your z-index of your header class lets say 1001 and then set z-index:1000 action class.
.header {
width: 100%;
height: 70px;
position: fixed;
background: #ebebeb;
z-index:1001;
}
.content .actions {
width: 100%;
position: fixed;
top: 80px;
right: 10px;
z-index:1000; /* less then the header*/
}
Hope this helps.
$('.text').click(function(){
$('.dropdown').toggle();
});
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
float: left;
}
.header {
width: 100%;
height: 70px;
position: fixed;
background: #ebebeb;
}
.text {
width: 200px;
float: right;
position: relative;
}
.text .dropdown {
z-index:100;
width: 100%;
position: absolute;
top: 65px;
right: 0;
background: #888;
display: none;
}
.text .dropdown ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 100%;
height: 100%;
float: left;
margin-top: 80px;
}
.content .right-col {
width: 30%;
height: 200px;
float: right;
background: #ebebeb;
}
.content .actions {
width: 100%;
position: fixed;
top: 80px;
right: 10px;
}
.content .button {
padding: 20px;
float: right;
background: green;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header" style="z-index:199;">
<div class="text">
<span> Some text </span>
<div class="dropdown" >
<ul>
<li> Text </li>
<li> Text </li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="right-col">
<div class="actions">
<div class="button"> Button </div>
</div>
</div>
</div>
</div>
<div class="header" style="z-index:199;">
I created a layout with 4 columns centered with margin and a triangle as an arrow-down with a star in the middle...
this is working nice in my computer:
But triangle and star are far away to be responsive, only way I achieved to position it correctly is with absolute position:
.triangle-down {
display: block;
position: absolute;
top: 0;
left: 318px;
width: 0;
height: 0;
border-left: 532px solid transparent;
border-right: 532px solid transparent;
border-top: 400px solid blue;
}
.star {
display: block;
position: absolute;
vertical-align: middle;
font-size: 250px;
text-align: center;
color: white;
top: -434px;
left: -109px;
}
How can I put the element in top of the others and make it responsive in the same way columns and it's margins?
NOTES:
layout is a countdown, but javascript is not important for the question.
You can find a functional (no JS) fiddle here
You can see actual result (with JS) here
I can use sass if necessary
How about this updated fiddle?
https://jsfiddle.net/ondrakoupil/0rtvcnon/11/
Basically, these are the changes:
use flexbox for column layout
sizes are measured using viewport-relative units (vw)
triangle is created as standard rectangular <div> and rotated via CSS - you have better control over its position and size
There are some CSS3 techniques used. For IE, you'll need to prefix them in CSS (use Autoprefixer). Other browsers should handle it "as it is".
html, body {
height: 100%;
margin: auto;
padding-left:1%;
background: yellow;
font: normal 16px 'Roboto', sans-serif;
}
.container {
margin: auto;
width: 80%;
height: 100%;
position: relative;
display: flex;
justify-content: space-between;
}
.bar {
background: red;
font-weight: 700;
text-align: center;
color: yellow;
width: 15%;
}
.init {
position:absolute;
bottom: 10px;
right: 20px;
background: yellow;
margin-left: 0px;
font-weight: 700;
text-align: right;
color: red;
}
a:link, a:visited {
color: red;
text-decoration: none;
}
::-moz-selection {
color: yellow;
background: red;
}
::selection {
color: yellow;
background: red;
}
p.numbers {
font-size: 8vw;
margin-top: 45vw;
margin-bottom: 20px;
}
p.meta, p.strings {
font-size: 2vw;
}
h1 {
font-size: 4.5em;
}
.triangle-down {
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
}
.triangle-color {
margin: auto;
width: calc(80vw / 1.4142);
height: calc(80vw / 1.4142); /* sqrt of 2 */
background-color: blue;
transform: translateY(calc(-1 * 80vw / 1.4142 / 2)) rotate(45deg);
}
.star {
position: absolute;
vertical-align: middle;
font-size: 15vw;
text-align: center;
color: white;
top: 5vw;
left: 0;
right: 0;
z-index: 1;
}
<body>
<div class="container">
<div class="triangle-down">
<div class="triangle-color"></div>
<div class="star">★</div>
</div>
<div class="bar">
<p id="d" class="numbers days">00</p>
<p class="strings">DIES</p>
</div>
<div class="bar">
<p id="h" class="numbers hours">00</p>
<p class="strings">HORES</p>
</div>
<div class="bar">
<p id="m" class="numbers minutes">00</p>
<p class="strings">MINUTS</p>
</div>
<div class="bar">
<p id="s" class="numbers seconds">00</p>
<p class="strings">SEGONS</p>
</div>
</div>
<div class="init">
ENTRA
</div>
</body>
Take a look at this. I was need to rewrite it from scratch, because you've got a lot of absolutes and they all calculated through js, as I understood. Hope, this will satisfy your requirements.
html, body {
margin: 0;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background-color: yellow;
font: normal 16px 'Roboto', sans-serif;
position: relative;
}
.triangle-aspect-keeper {
width: 50%;
padding-bottom: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
}
.triangle-container {
}
.triangle-down {
width: 100%;
height: 100%;
background-color: blue;
transform: rotate(45deg);
position: absolute;
top: -50%;
left: 0;
}
.star {
font-size: 1100%;
text-align: center;
color: white;
width: 100%;
line-height: 200%; /* control star vertical position */
position: absolute;
top: 0;
left: 0;
}
.bar-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
.bar-inner-container {
margin-left: auto;
margin-right: auto;
width: calc(50% * 1.41); /* sqrt(2) = 1.41. Length of the diagonal of the square*/
height: 100%;
display: flex;
justify-content: space-between;
}
.bar:first-child {
margin-left: 0;
}
.bar {
background-color: red;
height: 100%;
width: 15%;
color: yellow;
font-weight: 700;
}
p.numbers {
font-size: 5em;
margin-top: 350%;
}
p.meta, p.strings {
font-sie: 1.5em;
}
a:link, a:visited {
color: red;
text-decoration: none;
}
.init {
position: absolute;
bottom: 0;
right: 0;
padding: 10px;
font-weight: 700;
}
<body>
<div class="container">
<div class="bar-container">
<div class="bar-inner-container">
<div class="bar bar-first">
<p id="d" class="numbers days">00</p><br>
<p class="strings">DIES</p><br>
</div>
<div class="bar bar-second">
<p id="h" class="numbers hours">00</p><br>
<p class="strings">HORES</p><br>
</div>
<div class="bar bar-third">
<p id="m" class="numbers minutes">00</p><br>
<p class="strings">MINUTS</p><br>
</div>
<div class="bar bar-fourth">
<p id="s" class="numbers seconds">00</p><br>
<p class="strings">SEGONS</p><br>
</div>
</div>
</div>
<div class="triangle-aspect-keeper">
<div class="triangle-container">
<div class="triangle-down"></div>
<div class="star">★</div>
</div>
</div>
<div class="init">
ENTRA
</div>
</div>
</body>
#import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
html,
body {
background: yellow;
height: 100%;
}
.container {
position: relative;
height: 100%;
}
.row {
height: 100%;
}
.col-xs-3 {
height: 100%;
}
.col-xs-3,
.col-xs-12 {
padding: 0 6.25%;
}
.bar {
color: yellow;
background: red;
min-height: 100%;
padding-top: 333%;
}
.triangle-down {
position: absolute;
width: 100%;
height: auto;
z-index: 1;
}
.triangle-color {
margin-bottom: -30%;
}
.triangle-color * {
fill: blue
}
.star * {
fill: white
}
.numbers {
font-size: 5vw;
padding-bottom: 2vw;
}
.strings {
font-size: 1.5vw;
}
<div class="container text-center">
<div class="row triangle-down">
<div class="col-xs-12">
<svg class="triangle-color" viewBox="0 0 100 40">
<polygon points="0,0 100,0 50,40"/>
</svg>
<svg class="star" viewBox="0 0 1400 188">
<polygon points="700,0 640,188 790,68 610,68 760,188"/>
</svg>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">DIES</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">HORES</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">MINUTS</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">SEGONS</div>
</div>
</div>
</div>
</div>
You can simply do this.
HTML:
<div class="parent">
<div class="triangle">
<div class="star">
...
</div>
</div>
</div>
CSS:
.parent {
width: xx%; /*Whatever percentage*/
height: yy%; /*Whatever percentage*/
margin: 0 auto;
position: relative;
}
.triangle {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.star {
font-size: xx%; /*some percentage (assuming star is a font icon)*/
position: absolute;
top: 15vh;
margin: 0 auto;
}