I am currently new to the community, and would love some help with a HTML site I am creating for a friend of mine.
Basicly I man creating a simple website, but I have some issues with the text not going above the footer. I check the code and tried to figure out how to solve this, but I was unable to do so.
My question is: could someone help me putting the text above the footer?
Please let me know !
body {
margin: 0 auto;
min-height: 100%;
background-color: #111;
}
h1 {
color: #fff;
position: relative;
}
h2 {
color: #fff;
text-decoration: none;
letter-spacing: 2px;
}
.x {
color: #ef3937;
text-decoration: none;
letter-spacing: 2px;
}
.container {
height: auto;
width: 100%;
}
/*-------------------------------HEADER--------------------------------*/
.headercontainer {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
top:0px;
background-color: #111;
}
.header {
width: 95%;
margin-left: auto;
margin-right: auto;
}
.headerleft {}
.headercenter {
width: 100%;
height: 100%;
color:#f2f2f2;
}
.logo {
max-width: 200px;
margin-top: 20px;
}
.headerright {}
/*-----------------------------END HEADER------------------------------*/
/*------------------------------CONTENT--------------------------------*/
.contentcontainer {
Position: absolute;
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
background-color:#111;
}
.content {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.contenleft {}
.contentcenter {
text-align: center;
position: relative;
}
.contentright {}
/*-----------------------------END CONTENT-----------------------------*/
/*-------------------------------FOOTER--------------------------------*/
.clearfooter {}
.footercontainer {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
background-color: #111;
bottom: 20;
}
.footer {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.footerleft {}
.footercenter {
text-align: center;
font-size: 8px;
font-weight: normal;
font-family: 'Economica';
font-weight: 100;
letter-spacing: 1px;
}
.footerright {}
/*-----------------------------END FOOTER------------------------------*/
/*------------------------------ALGEMEEN-------------------------------*/
a {text-decoration: none; color: #fff;}
a:hover{text-decoration: underline;}
#font-face {
font-family: 'Champagne & Limousines';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines'), url('Champagne & Limousines.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Italic'), url('Champagne & Limousines Italic.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold'), url('Champagne & Limousines Bold.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold Italic'), url('Champagne & Limousines Bold Italic.woff') format('woff');
}
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">-->
<title>Froluv</title>
<meta name="Froluv." content="PSD to HTML5+CSS3 conversion.">
<meta name="Froluv" content="PSD, HTML5, CSS3">
<meta name="author" content="Vivaco">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" type="text/css" href="StyleCSS.css">
</head>
<body>
<div class="container">
<!-------------------------------------------------------------------------HEADER------------------------------------------------------------------------->
<div class="headercontainer">
<div class="header">
<div class="headerleft">
</div>
<div class="headercenter">
<div class="logocontainer">
<img src="" class="logo"> <!--insert logo here-->
</div>
</div>
<div class="headerright">
</div>
</div>
</div>
<!-----------------------------------------------------------------------END HEADER----------------------------------------------------------------------->
<!-------------------------------------------------------------------------CONTENT----------------------------------------------------------------------->
<div class="contentcontainer">
<div class="content">
<div class="contentleft">
</div>
<div class="contentcenter">
<h1 style="font-family:'Champagne & Limousines';font-weight:normal;font-size:42px">“Wij organiseren events, kom je <u><b>dansen</b></u>?”</h1>
<!--Insert ticket link here-->
</div>
<div class="contentright">
</div>
</div>
</div>
<!-----------------------------------------------------------------------END CONTENT-------------------------------------------------------------------->
<!-----------------------------------------------------------------------FOOTER------------------------------------------------------------------------->
<div class="footercontainer">
<div class="footer">
<div class="footerleft">
</div>
<div class="footercenter">
<h2>
FACEBOOK <span class="x">x</span> INSTAGRAM <span class="x">x</span> SPOTIFY <span class="x">x</span> TICKETS
<span class="x">x</span> <span class="x">x</span> <span class="x">x</span> PRIVACY POLICY <span class="x">x</span> FAQ <span class="x">x</span> JOBS
</h2>
</div>
<div class="footerright">
</div>
</div>
</div>
<!---------------------------------------------------------------------END FOOTER----------------------------------------------------------------------->
</div>
</body></html>
I would avoid using absolute positioning until you have a better understanding of when and where to use it and what problems it helps to solve.
By undoing the absolute positioning you have applied, the content will be in the correct order. Though, may likely need further refinement to fit your needs.
In my example below, I have used flexbox to push the footer to the bottom of the page. You'll also notice I've removed a lot of properties that are not necessary, i.e. width: 100% for a <div> (it does this by default).
body {
margin: 0;
min-height: 100vh;
background-color: #111;
display: flex;
flex-direction: column;
}
h1 {
color: #fff;
position: relative;
font-family: 'Champagne & Limousines';
font-weight: normal;
font-size: 42px;
}
h2 {
color: #fff;
text-decoration: none;
letter-spacing: 2px;
}
.x {
color: #ef3937;
text-decoration: none;
letter-spacing: 2px;
}
.container {}
/*-------------------------------HEADER--------------------------------*/
.headercontainer {}
.header {
width: 95%;
margin-left: auto;
margin-right: auto;
}
.headerleft {}
.headercenter {
color: #f2f2f2;
}
.logo {
max-width: 200px;
margin-top: 20px;
}
.headerright {}
/*-----------------------------END HEADER------------------------------*/
/*------------------------------CONTENT--------------------------------*/
.contentcontainer {
flex-grow: 1;
background-color: #111;
}
.content {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.contenleft {}
.contentcenter {
text-align: center;
}
.contentright {}
/*-----------------------------END CONTENT-----------------------------*/
/*-------------------------------FOOTER--------------------------------*/
.clearfooter {}
.footercontainer {}
.footer {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.footerleft {}
.footercenter {
text-align: center;
font-size: 8px;
font-weight: normal;
font-family: 'Economica';
font-weight: 100;
letter-spacing: 1px;
}
.footerright {}
/*-----------------------------END FOOTER------------------------------*/
/*------------------------------ALGEMEEN-------------------------------*/
a {
text-decoration: none;
color: #fff;
}
a:hover {
text-decoration: underline;
}
#font-face {
font-family: 'Champagne & Limousines';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines'), url('Champagne & Limousines.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Italic'), url('Champagne & Limousines Italic.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold'), url('Champagne & Limousines Bold.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold Italic'), url('Champagne & Limousines Bold Italic.woff') format('woff');
}
<!-- HEADER -->
<div class="headercontainer">
<div class="header">
<div class="headerleft">
</div>
<div class="headercenter">
<div class="logocontainer">
<img src="" class="logo">
<!-- insert logo here -->
</div>
</div>
<div class="headerright">
</div>
</div>
</div>
<!-- END HEADER -->
<!-- CONTENT -->
<div class="contentcontainer">
<div class="content">
<div class="contentleft">
</div>
<div class="contentcenter">
<h1>“Wij organiseren events, kom je <u><b>dansen</b></u>?”</h1>
<!--Insert ticket link here-->
</div>
<div class="contentright">
</div>
</div>
</div>
<!-- END CONTENT -->
<!-- FOOTER -->
<div class="footercontainer">
<div class="footer">
<div class="footerleft">
</div>
<div class="footercenter">
<h2>
FACEBOOK <span class="x">x</span> INSTAGRAM <span class="x">x</span> SPOTIFY <span class="x">x</span> TICKETS
<span class="x">x</span> <span class="x">x</span> <span class="x">x</span> PRIVACY POLICY <span class="x">x</span> FAQ <span class="x">x</span> JOBS
</h2>
</div>
<div class="footerright">
</div>
</div>
</div>
<!-- END FOOTER -->
As advised minutes ago, just remove the position:absolute from .contentcontainer and it should work: https://jsfiddle.net/ilkovs/yqdg62fe/3/
.contentcontainer {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
background-color:#111;
}
instead of :
.contentcontainer {
Position: absolute;
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
background-color:#111;
}
Separate your header and footer. 1. div for header, 2. another div for content 3. footer. in your footer css, add margin-bottom:0; and margin-top: 200px; That is a quick fix, but after separating the three, you can play around the CSS to fit your design need
You should understand how to use position:absolute, if you use absolute you are taking the <Div> out of the flow of the page, so I think you should use relative positioning instead of absolute.
Then again, if you are going to use absolute, you need to specify one of these four(4) properties which are:
top, bottom, left, right, these four properties help you to move the <div> around the page anyhow you like and can help you shift your text up.
Last thing all the different types of positions all use the same four properties I mentioned
Related
I have unsuccessfully been attempting to change the font family for my top navigation bar to Ubuntu. Currently, the text is not changing and is reverting to this default.
I have experimented with changing it to a div and improving specificity, but it's not working.
I'm not sure if it's being overwritten by the font settings I have put on top?
Would appreciate any guidance on this!
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
#importurl('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700');
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');
* {
font-family: system-ui, sans-serif;
}
* {
margin: 0;
padding: 0;
}
header {
font-family: 'Ubuntu';
}
body {
font-family: 'Montserrat';
text-align: left;
}
/*typography*/
h1 {
font-family: 'Montserrat';
font-style: normal;
font-weight: bold;
font-size: (45px+1vw);
line-height: 55px;
text-align: center;
letter-spacing: 1px;
}
h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: calc(30px+1vw);
line-height: calc(37px+1vw);
letter-spacing: 1px;
color: #FFFFFF;
}
h3 {}
ul {
list-style: inside disc;
font-family: 'Montserrat';
font-style: normal;
font-weight: normal;
font-size: calc(16px+1vw);
line-height: calc(22px+1vw);
color: #FFFFFF;
}
/* Header */
header {
width: 100%;
height: 122px;
background: #FFFFFF;
position: fixed;
}
.wrapper {
width: 90%;
margin: 0 auto;
}
.logo {
width: 30%;
float: left;
text-align: left;
line-height: 122px;
}
nav {
float: center;
line-height: 122px;
}
nav a {
font-family: 'Ubuntu';
text-decoration: none;
letter-spacing: 4px;
font-size: calc(50px+1vw);
color: #616161;
padding: 36px 10px;
margin: 0 1 px;
}
nav a:hover {
background: #F3EA65;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- <div class="box-area"> -->
<header>
<div class="wrapper">
<div class="logo">
<img src="asdf.png" alt="Logo" width="25%" ;>
</div>
<nav>
about
our team
who we help
get involved
Contact
Donate
</nav>
</div>
</header>
It is better to include the fonts link in header tag in HTML and then run.Also add space after #import in second link.
I am trying to hone my skills in on html5/css, by attempting a portfolio. The issue I am running into, is I have 3 inline-block divs, wrapped in a container div, but whenever I add more than 1 line of text (whether an h1 and h2 or h1 and a p) to only 1 div or all but 1, it shifts the other inline-block divs down. Shouldn't the inline-block div's stay where they are since the text is internal to that div? Furthermore, why are they breaking out of their parent/container div? Thanks for any help!
David
HTML
<html>
<head>
<title>Test Div - Portfolio</title>
<link rel="stylesheet" type="text/css" href="./style/alpha.css">
<link rel="stylesheet" type="text/css" href="./style/grid-alpha.css">
</head>
<body>
<header id="logo-bar">
<img src="#">
</header>
<div class="container">
<a href="#">
<div class="maps">
<h1>Level Design</h1>
<p>Check out some maps!</p><p>And even cooler maps!</p>
</div>
</a>
<a href="./sounds.html">
<div class="sound">
<h1>Sounds</h1>
</div>
</a>
<div class="proj">
<h1>Current</h1>
<p>Just a few notes here and there about my latest projects</p>
<p>And a few more here</p>
</div>
</div>
<footer>2020 Test | Contact</footer>
</body>
</html>
CSS
/*** Fonts ***/
#font-face {
font-family: 'Maven Pro';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/mavenpro/v20/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nejog.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
color: white;
}
body {
background-color: black;
}
header, footer {
background-color: #2d3436 !important;
}
h1, h2, h3, a, p {
font-family: "Maven Pro";
color: #dfe6e9;
}
a, a:active, a:hover, a:visited {
text-decoration: none;
color: #dfe6e9;
}
.container {
height: 85%;
width: 100%;
}
/** Div Backgrounds **/
#logo-bar {
background-color: white;
width: 100%;
height: 10%;
display: block;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.maps {
background-color: #7f8c8d;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
}
.sound {
background-color: #2980b9;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
}
.proj {
background-color: #2c3e50;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
}
.maps, .sound, .proj {
text-align:center;
}
/*** Footer***/
footer {
background-color: white/**#2c3e50**/;
font-family: "Maven Pro";
text-align: center;
font-size: 14px;
font: #95a5a6;
text-transform: uppercase;
position: absolute;
bottom: 0px;
width: 100%;
height: 5%;
vertical-align: middle;
}
Hi you missing a property for your children container tag.
Add vertical-align: top for each element with a display`
Let the classes maps, sound and proj the direct childs of the contanier div as follow
<div class="container">
<a href="#" class="maps">
<div>
<h1>Level Design</h1>
<p>Check out some maps!</p>
<p>And even cooler maps!</p>
</div>
</a>
<a href="./sounds.html" class="sound">
<div>
<h1>Sounds</h1>
</div>
</a>
<div class="proj">
<h1>Current</h1>
<p>Just a few notes here and there about my latest projects</p>
<p>And a few more here</p>
</div>
</div>
and float them to left
.maps, .sound, .proj{
float: left;
}
and insted of repeating the same code for the three classes
use this code
.maps, .sound, .proj {
text-align:center;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
float: left;
}
.maps {
background-color: #7f8c8d;
}
.sound {
background-color: #2980b9;
}
.proj {
background-color: #2c3e50;
}
I have a H1 that is placed inside a .container div with a width of 800px. I tried giving the H1 a width also and that didn't fix it either. I can't think of any reason why this H1 wouldn't take the full width (taking it out of the .container div makes it work). Any idea what's causing this?
Thanks in advance.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" id="header-block">
<h2>Cristian M.</h2>
<h3>Product Designer</h3>
<p>Hi, I'm Cristian Moisei and I'm currently a Product Designer at <a id="screencloud-link" href="https://www.screen.cloud">ScreenCloud</a>. I formerly worked as the Lead Product Designer for <a id="glofox-link" href="https://www.glofox.com">Glofox</a> and ran a design studio, <a id="hyperion-link" href="http://www.hyperion.co">Hyperion</a>, for 4 years.</p>
<div id="extra-info">
<p>
Resume <span id="slash">   /   </span>
My Process <span id="slash">   /   </span>
Contact
</p>
<p>I live in London, UK</p>
</div>
</div>
<div id="glofox-block">
<div class="container">
<img src="Images/macbook.png">
<div id="text">
<h1 id="number">01.</h1>
<h1>Reinventing Glofox's interface for a complex user base.</h1>
<div id="view-project">
View Project
<img src="Images/arrow-white.png">
</div>
</div>
</div>
</div>
<div id="webfaction-block">
<div class="container">
<div id="text">
<h1 id="number">02.</h1>
<h1>Helping Webfaction attract a less technical audience.</h1>
<div id="view-project">
View Project
<img src="Images/arrow-black.png">
</div>
</div>
<img id="ipad" src="Images/ipad.jpg">
</div>
</div>
</body>
</html>
CSS:
#import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=b4314e71-83d8-4cc4-bd90-9ceb4a5339d0");
#font-face{
font-family:"Tisa W01 Light";
src:url("Fonts/63d98d82-cdc2-4f22-8883-bede07823185.eot?#iefix");
src:url("Fonts/63d98d82-cdc2-4f22-8883-bede07823185.eot?#iefix") format("eot"),url("Fonts/163f4b9f-d9b9-42c5-9098-d70e0016ae27.woff2") format("woff2"),url("Fonts/cc68d660-f674-409c-9be1-7f7f8bc0542a.woff") format("woff"),url("Fonts/2385d9d0-f23e-4d30-abb4-28817eda1254.ttf") format("truetype"),url("Fonts/a9d1c46b-d28d-4dab-8373-bbaf41232d7f.svg#a9d1c46b-d28d-4dab-8373-bbaf41232d7f") format("svg");
}
#font-face{
font-family:"Tisa W01 Regular";
src:url("Fonts/885a1883-0bbc-429a-91f5-c32e88a82b0e.eot?#iefix");
src:url("Fonts/885a1883-0bbc-429a-91f5-c32e88a82b0e.eot?#iefix") format("eot"),url("Fonts/36a5385d-e6c3-4aba-ad04-fa161f5c96b0.woff2") format("woff2"),url("Fonts/9b2fef91-4d32-413d-864e-4aaa363673eb.woff") format("woff"),url("Fonts/131d9e79-a2a5-4e3a-8cb9-e8acfcaa1c8a.ttf") format("truetype"),url("Fonts/419b1ef5-3ea5-43d3-8c3f-f68edc3d0a2b.svg#419b1ef5-3ea5-43d3-8c3f-f68edc3d0a2b") format("svg");
}
#font-face{
font-family:"Tisa W01 Medium";
src:url("Fonts/7901ab62-60f6-49a3-9332-359efb61e81b.eot?#iefix");
src:url("Fonts/7901ab62-60f6-49a3-9332-359efb61e81b.eot?#iefix") format("eot"),url("Fonts/785e7c0f-c445-4077-b412-1fd0a1a8ab06.woff2") format("woff2"),url("Fonts/7ee6ca7c-fe74-4640-a75d-939ea0bd637d.woff") format("woff"),url("Fonts/d76d30ec-b31a-4502-acf4-89812c16447e.ttf") format("truetype"),url("Fonts/9ce8adf1-e8ae-4095-84d3-6b2f836cd33e.svg#9ce8adf1-e8ae-4095-84d3-6b2f836cd33e") format("svg");
}
#font-face{
font-family:"Tisa W01 Bold";
src:url("Fonts/0b58340f-a8ca-4e68-8eab-bfda350b0b58.eot?#iefix");
src:url("Fonts/0b58340f-a8ca-4e68-8eab-bfda350b0b58.eot?#iefix") format("eot"),url("Fonts/02a4b96f-e988-44fe-a0e7-57ff1b610f3b.woff2") format("woff2"),url("Fonts/78d1ac04-d453-4364-8326-035a105b0865.woff") format("woff"),url("Fonts/776e5c1b-6939-4b32-9c0d-2dee7c34c7da.ttf") format("truetype"),url("Fonts/edc51787-36cf-434d-a4f1-b04139da6bfc.svg#edc51787-36cf-434d-a4f1-b04139da6bfc") format("svg");
}
/* Global */
body, a {
font-family:"Tisa W01 Light", serif;
color: black;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
border-bottom: 1px solid black;
cursor: pointer;
}
p {
font-size: 19px;
line-height: 1.8;
}
h1{
font-size: 50px;
line-height: 1.2;
margin: 0 0 40px 0;
padding: 0;
}
h2{
font-size: 30px;
margin: 0;
padding: 0;
}
h3{
font-family: "Tisa W01 Medium", serif;
font-size: 26px;
margin: -5px 0 40px 0;
padding: 0;
}
.container{
width: 800px;
margin-left: auto;
margin-right: auto;
}
#view-project{
display: inline !important;
opacity: .5 !important;
border-bottom: 1px solid white;
}
#view-project a{
font-family: "San Francisco", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: bold;
}
#view-project img{
width: 15px !important;
margin: 0 0 0 5px !important;
padding: 0 !important;
float: none !important;
}
/* Intro Section */
#header-block{
padding: 140px 50px 140px 50px;
}
#extra-info{
margin-top: 40px !important;
font-size: 18px;
opacity: .4;
}
#extra-info p{
margin: 0;
padding: 0;
}
#extra-info a{
font-family: "Tisa W01 Medium", serif;
}
/* Glofox Section */
#glofox-block{
background-color: #2b4ea4;
height: 800px;
}
#glofox-block #number{
opacity: .2;
font-family: "Tisa W01 Regular", serif;
margin-bottom: 20px;
}
#glofox-block img{
z-index: 1;
width: 740px;
float: left;
margin-top: 60px;
}
#glofox-block .container #text{
position: relative;
top: -790px;
z-index: 2;
float: right;
width: 350px;
color: white;
float: right;
}
#glofox-block #view-project a{
color: white;
border: none;
}
/* Webfaction Section */
#webfaction-block #ipad{
z-index: 1;
width: 795px;
position: relative;
top: -100px;
}
#webfaction-block h1{
width: 750px;
}
#webfaction-block #text{
z-index: 2;
}
In order to fix this you need to add the following line to your CSS:
white-space: nowrap;
Please familiarise yourself with CSS whitespace parameters.
https://www.w3schools.com/cssref/pr_text_white-space.asp
I'm trying to create six individual boxes with content with in, however it seems I can only separate them horizontally and not vertically. For example the boxes can be spaced apart horizontally using 'width', however when I try to move the boxes like in this image https://imgur.com/a/INcit , they don't seem to separate vertically and stay in pairs of twos instead. If anyone knows a solution, it would be greatly appreciated. Thanks :)
body {
background-color: #323232;
max-width: 960px;
padding: 0;
margin: 0;
font-family: Lato;
}
nav a {
color: #fff;
text-decoration: none;
padding: 20px 25px;
display: inline-block;
}
.fixed-header, .fixed-footer {
background: #333;
color: #fff;
width: 100%;
position: fixed;
text-align: center;
z-index: 10;
background-color: #202020;
}
.fixed-header {
top: 0;
}
.fixed-footer {
bottom: 0;
padding: 20px 0px;
}
.fixed-header a:hover {
color: #c1c1c1;
}
.fixed-footer a {
color: #fff;
font-weight: lighter;
text-decoration: none;
}
.group-content {
max-width: 960px;
text-align: center;
}
.group-content h3 {
font-weight: normal;
font-size: 20px;
color: white;
}
.group-content p {
font-weight: lighter;
font-size: 20px;
color: white;
}
.content {
display: inline-block;
width: 30%;
background-color: #202020
}
#font-face {
font-family: "Lato";
font-weight: normal;
font-style: normal;
src: url('fonts/Lato-Regular.eot'),
src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Lato-Regular.ttf') format('truetype'),
url('fonts/Lato-Regular.woff') format('woff'),
url('fonts/Lato-Regular.woff2') format('woff2');
}
#font-face {
font-family: "Lato";
font-weight: bold;
font-style: normal;
src: url('fonts/Lato-Bold.eot'),
src: url('fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/Lato-Bold.ttf') format('truetype'),
url('fonts/Lato-Bold.woff') format('woff'),
url('fonts/Lato-Bold.woff2') format('woff2');
}
#font-face {
font-family: "Lato";
font-weight: lighter;
font-style: normal;
src: url('fonts/Lato-Light.eot'),
src: url('fonts/Lato-Light.eot?#iefix') format('embedded-opentype'),
url('fonts/Lato-Light.ttf') format('truetype'),
url('fonts/Lato-Light.woff') format('woff'),
url('fonts/Lato-Light.woff2') format('woff2');
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kumo99.cf</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="fixed-header">
<nav>
HOME
PROJECTS
ABOUT
</nav>
</div>
<div class="fixed-footer">
Made by Kumo © 2018
</div>
<div class="group-content">
<div class="content">
<img src="https://i.imgur.com/Xde6duk.png">
<h3>Arma 3: Exile Server</h3>
<p>A project for improving the exile mod.</p>
</div>
<div class="content">
<img src="https://i.imgur.com/Xde6duk.png">
<h3>Reserved Space</h3>
<p>Reserved space for future projects</p>
</div>
<div class="content">
<img src="https://i.imgur.com/Xde6duk.png">
<h3>Reserved Space</h3>
<p>Reserved space for future projects</p>
</div>
<div class="content">
<img src="https://i.imgur.com/Xde6duk.png">
<h3>Reserved Space</h3>
<p>Reserved space for future projects</p>
</div>
<div class="content">
<img src="https://i.imgur.com/Xde6duk.png">
<h3>Reserved Space</h3>
<p>Reserved space for future projects</p>
</div>
<div class="content">
<img src="https://i.imgur.com/Xde6duk.png">
<h3>Reserved Space</h3>
<p>Reserved space for future projects</p>
</div>
</div>
</body>
</html>
I created a jsfiddle with your layout and made changes to make it work
https://jsfiddle.net/rqvg3fd2/
Basically I added this rule to limit the size of the contents of each block:
.content >* {
max-width: 220px;
text-align: center;
margin: 0;
}
Then I added the last 3 lines to .group-content to make it a flex-grid. Notice the flex-wrap: wrap which makes the contents wrap around.
.group-content {
max-width: 960px;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
I also made the .content a flex-grid as a column and gave it a margin at the top to space out the rows
.content {
width: 30%;
background-color: #202020;
display: flex;
flex-direction: column;
padding-bottom: 20px;
align-items: center;
margin-top: 20px;
}
And last, I added a margin at the top of the H3 to separate it from the red box.
.group-content h3 {
margin-top: 10px;
font-weight: normal;
font-size: 20px;
color: white;
}
Im doing this kind of project for highschool and I need kind of help with adjusting site resolution. Im working on my laptop and when i tried to show it to my teacher site was all... Im working on resolution 1366x768. Is there any solution that sites looks better? I tried some solutions that i found here but nothing worked... Here's my code, thank you. I'm using custom fonts so you may have some troubles seeing it good
body {
background-color: white;
margin: 0 auto;
padding: 0;
width: 100%;
height: auto;
min-width: 1000px;
}
#font-face {
font-family: "Jocker";
src: url("JockeyOne-Regular.ttf") format("truetype");
}
#font-face {
font-family: "Pacifica";
src: url("PacificaCondensed-Regular.ttf") format("truetype");
}
#font-face {
font-family: "ReklameScript";
src: url("ReklameScript.ttf") format("truetype");
}
#font-face {font-family: "Stencil";
src: url("Stencil.eot");
src: url("Stencil.woff2") format("woff2");
src: url("Stencil.woff") format("woff");
src: url("Stencil.ttf") format("truetype");
}
h1 {
font-size: 120px;
text-align: left;
font-family: "Jocker";
margin-left: 45;
color: rgb(200, 101, 103);
}
#jedan {
background: black;
}
#dva {
background: white;
}
.naslov1 {
font-size: 70;
text-align: left;
font-family: "Jocker";
color: rgb(200, 101, 103);
}
.naslov2 {
font-size: 100;
text-align: left;
font-family: "Jocker";
color: rgb(200, 101, 103);
}
.main2-naslov2 {
font-family: "Stencil";
}
#header {
width: 100%;
height: 50px;
margin: auto;
}
#navigacija {
width: 100%;
margin-left: 0px;
padding: 0px;
height: 50px;
overflow: hidden;
text-align: right;
position: fixed;
background-color: #089DE3;
z-index: 9999;
}
.navitem {
background: #089DE3;
color: white;
text-decoration: none;
line-height: 50px;
font-size: 30px;
font-family: "Pacifica";
display: inline-block;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
padding-bottom: 0px;
}
#navigacija a {}
a#logo {
float: left;
font-family: "Jocker";
font-size: 30px;
color: white;
text-decoration: none;
margin-left: 50px;
}
.home:hover {
background: #00C5CD;
widthL auto;
}
.shop:hover {
background: #00C5CD;
}
.getpoints:hover {
background: #00C5CD;
}
.info:hover {
background: #00C5CD;
}
.main1 {
margin-left: 100px;
font-family: "ReklameScript";
font-size: 50;
text-align: left;
color: white;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
top: -1500;
right: 0px;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-wrapper {
width: 640px;
float: right;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
<!DOCYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MaxSkins-Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Home.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="navigacija">
<img src="logo.png">
<a href="Home.html">
<div class="navitem home"><b>HOME</b></div>
</a>
<a href="Shop.html">
<div class="navitem shop"><b>SHOP</b></div>
</a>
<a href="#">
<div class="navitem getpoints"><b>GET POINTS</b></div>
</a>
<a href="#">
<div class="navitem info"><b>INFO</b></div>
</a>
</div>
</div>
<h1><b>EARN POINTS,<br> GET SKINS!</b></h1>
<div id="jedan">
<div class="naslov1">How does it work?</div>
<div class="main1"><p><b>It's simple!<br> Watch videos, do tasks and have fun!<br>After collecting large amount of coins,<br> contact us to get your skins<b></p></div></div>
<div id="dva">
<div class="naslov2">How do I get my skin?</div>
<div class="main2-naslov2">1. EARN POINTS</div>
<div class="main2">Once you collect enough<br>points, go to shop page<br>and choose your skin.</div>
<div class="main3-naslov3">2. FRIENDS</div>
<div class="main3">When you select a<br>skin, add us on some<br>of our profiles.</div>
<div class="main4-naslov4">3. WAIT</div>
<div class="main4">Before you get your skin,<br>you need to wait 24 hours<br>after we accept you as a friend.<div>
<div class="main5-naslov5">4. SKIN</div>
<div class="main5">We are sending you the<br>skin as soon as we can.<br>If you already have the skin,<br>or if you don't have champion from which you want skin from,<br> you need to choose some other skin.</div>
</div>
<div id="tri">
<div class="main6">This site is not<br>associated with Riot<br>Games, inc.</div></div>
<div class="video-wrapper">
<div class="video-container">
<iframe width="640" height="360" src="https://www.youtube.com/embed/lwItL2NXwDw" frameborder="0" allowfullscreen></iframe>
</div>
<!-- /video -->
</div>
<!-- /video-wrapper -->
</body>
</html>