I have a problem in inline-block, i cannot make block over my hyperlink and block are going some other position.
Here the code of Html and CSS.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
background-color: #fff;
color: #555;
font-family: 'Lato','Arial', sans-serif;
font-weight: 400;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
Header{
background-image:linear-gradient(rgba(0, 0, 0, 0.7) , rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
margin: 0;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn{
display: inline-block;
padding: 10px 30px;
font-weight: 300 ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style1.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700" rel="stylesheet" type="text/css">
<title>Thefoodieefreak</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>GoodBye junk food.<br> Hello super healthy meals</h1>
<a class="btn btn-full" href="#">I'm hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
</body>
</html
In the code of Html, i have added a class of btn inside <a> tag and after that in CSS code, i put display:inline-block, but its goes some other position.
This is the website image where block goes some other position:
One more image of website with console
web image with console
Insert the two anchor tag inside of the div element and add css .btn_row{text-align:center;}
<header>
<div class="hero-text-box">
<h1>GoodBye junk food.<br> Hello super healthy meals</h1>
<div class="btn_row">
<a class="btn btn-full" href="#">I'm hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</div>
</header>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style1.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700" rel="stylesheet" type="text/css">
<title>Thefoodieefreak</title>
</head>
<body>
<header>
<div class="container">
<div class="hero-text-box">
<h1>GoodBye junk food.<br> Hello super healthy meals</h1>
<a class="btn btn-full" href="#">I'm hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</div>
</header>
</body>
</html>
and css here:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
background-color: #fff;
color: #555;
font-family: 'Lato','Arial', sans-serif;
font-weight: 400;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
Header{
background-image:linear-gradient(rgba(0, 0, 0, 0.7) , rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.container{
width: 1140px;
}
.hero-text-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
margin: 0;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn{
display: inline-block;
padding: 10px 30px;
font-weight: 300 ;
}
Related
I'm currently following the tutorial on parallax effects on W3Schools. Basically, I have it so where the parallax is scrolling over my background correctly, but it's not scrolling over the text as well.
I tried a lot of things but it still doesn't work. I also saw one other post about this issue, but their code differed a lot from mine so it was hard to understand.
Here is the image of what is happening (the words are scrolling up with the page):
Here's my code:
*{
box-sizing: border-box;
}
body{
margin: 0px;
background-color: #ffffff;
}
ul{
text-align: center;
padding: 0px 20px;
margin: 12px auto;
list-style: none;
position: fixed;
z-index:10;
top: 0;
}
ul, li{
display: inline-table;
}
li{
margin: 10px 30px;
font-size: 15px;
color: #42385d;
font-weight: bold;
font-family: 'Roboto Slab', serif;
}
.navbar{
background-color: #ffcfda;
position: fixed;
width: 100%;
border-bottom: 1px solid #ffcfda;
z-index: 10;
height: 70px;
top: 0;
overflow: hidden;
}
#parallax{
background-image: url("pinkbackground.jpg");
min-height: 100vh;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
}
.transition{
height: 200px;
background-color: #42385d;
width: 100%;
}
.intro-text{
text-align: center;
width: 100%;
color: #42385d;
padding: 37vh;
height: 100vh;
width: 100%;
font-size: 50px;
font-family: 'Roboto Slab', serif;
position: relative;
background-attachment: initial;
}
.question{
font-size: 30px;
font-family: 'Roboto Mono', monospace;
color: #42385d;
font-weight: bolder;
padding-top: 40px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>schpiel - Applying, Made Easier</title>
<!--meta data-->
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name = "description" content =
"schpiel, like the name implies, makes applying easier.
no, it doesn't sound like that? :(. Using our new autofill
feature, with one click you can apply instantly!">
<!--styling-->
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght#1,300&family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="icon" href="https://i.imgur.com/RoPgdJh.jpg">
</head>
<body>
<div id="navigation">
<nav class="navbar";>
<ul>
<li>
<a>
Home
</a>
</li>
<li>
<a>
About
</a>
</li>
<li>
<a>
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="parallax">
<div class="intro-text">
text
<br>
here
</div>
</div>
<div class="transition"></div>
<section id="whatIsSchpiel">
<div class="question">
What is schpiel?
</div>
<div class="answer">
sscsdafads
</div>
</section>
</body>
<footer>
</footer>
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
.navbar {
background-color: #000000;
border-color: 1px solid #000000;
}
.card-box {
border-radius: 2.5rem;
padding-bottom: 10px;
margin-top:25px;
background-color: #000000b0;
box-shadow: 1px 1px 5px 1px grey;
}
.portfolio-item {
/* height: 250px; */
text-align: center;
}
.row {
margin: 0px;
}
h3 {
margin: 10px;
}
.app_rstudio, .app_rstudio-super {
margin-left: 15%;
}
.fa, .far, .fas, .fab {
font-size: 96px;
color: #55b0ff;
margin: 15px;
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head lang="en">
<title th:text="${title}"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" media="screen" th:href="#{${bootstrapCss}}" />
<link rel="stylesheet" media="screen" th:href="#{/css/default.css}"/>
<script th:src="#{${jqueryJs}}"></script>
<script th:src="#{${bootstrapJs}}"></script>
</head>
<body>
<img src="https://i.ibb.co/2Ww4xTB/background.png" id="bg" alt="">
<div th:replace="../fragments/navbar :: navbar"></div>
<div class="container" id="applist">
<div class="row" >
<div th:each="app: ${apps}">
<div th:class="${'col-md-4 portfolio-item app_' + app.id}">
<div class="card-box">
<a th:href="#{/app/}+${app.id}">
<i th:class="${app.logoURL}"></i>
</a>
<h3>
<a th:href="#{/app/}+${app.id}" th:text="${app.displayName == null} ? ${app.id} : ${app.displayName}" style="color: #55b0ff;"></a>
</h3>
<a th:if="${app.description != null}" th:href="#{/app_direct/}+${app.id + '/'}" style="color: #55b0ff; font-style: italic;" target="_blank">
<p th:text="${app.description}"></p>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I added the following CSS code to my HTML document:
body {
background-color: #333;
background-image: url(/assets/img/background.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
color: rgb(202, 202, 202);
}
But the image does not fill the browser window as expected. Where did I go wrong?
Here is the entire HTML code (probably more than you need but I'm not sure which bits are relevant):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head lang="en">
<title th:text="${title}"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" media="screen" th:href="#{${bootstrapCss}}" />
<link rel="stylesheet" media="screen" th:href="#{/css/default.css}"/>
<script th:src="#{${jqueryJs}}"></script>
<script th:src="#{${bootstrapJs}}"></script>
<style type="text/css">
body {
background-color: #333;
background-image: url(/assets/img/background.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
color: rgb(202, 202, 202);
}
.navbar {
background-color: #000000;
border-color: 1px solid #000000;
}
.card-box {
border-radius: 2.5rem;
padding-bottom: 10px;
margin-top:25px;
background-color: #000000b0;
box-shadow: 1px 1px 5px 1px grey;
}
.portfolio-item {
/* height: 250px; */
text-align: center;
}
.row {
margin: 0px;
}
h3 {
margin: 10px;
}
.app_rstudio, .app_rstudio-super {
margin-left: 15%;
}
.fa, .far, .fas, .fab {
font-size: 96px;
color: #55b0ff;
margin: 15px;
}
</style>
</head>
<body>
<div th:replace="../fragments/navbar :: navbar"></div>
<div class="container" id="applist">
<div class="row" >
<div th:each="app: ${apps}">
<div th:class="${'col-md-4 portfolio-item app_' + app.id}">
<div class="card-box">
<a th:href="#{/app/}+${app.id}">
<i th:class="${app.logoURL}"></i>
</a>
<h3>
<a th:href="#{/app/}+${app.id}" th:text="${app.displayName == null} ? ${app.id} : ${app.displayName}" style="color: #55b0ff;"></a>
</h3>
<a th:if="${app.description != null}" th:href="#{/app_direct/}+${app.id + '/'}" style="color: #55b0ff; font-style: italic;" target="_blank">
<p th:text="${app.description}"></p>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I also tried (and failed) to use an approach described here which suggests using the following CSS:
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
And HTML:
<img src="images/bg.jpg" id="bg" alt="">
In this case, the background will not fill the screen if the device you are using is portrait.
Try adding this to your style:
html {
min-height:100%;
}
The problem has to be with your local file path because when adding a url it works fine as seen below:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head lang="en">
<title th:text="${title}"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" media="screen" th:href="#{${bootstrapCss}}" />
<link rel="stylesheet" media="screen" th:href="#{/css/default.css}"/>
<script th:src="#{${jqueryJs}}"></script>
<script th:src="#{${bootstrapJs}}"></script>
<style type="text/css">
body {
background-color: #333;
background-image: url("https://images.unsplash.com/photo-1558481795-7f0a7c906f5e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1373&q=80");
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
color: rgb(202, 202, 202);
width: 100%;
height: 1600%;
z-index: -1;
}
.navbar {
background-color: #000000;
border-color: 1px solid #000000;
}
.card-box {
border-radius: 2.5rem;
padding-bottom: 10px;
margin-top:25px;
background-color: #000000b0;
box-shadow: 1px 1px 5px 1px grey;
}
.portfolio-item {
/* height: 250px; */
text-align: center;
}
.row {
margin: 0px;
}
h3 {
margin: 10px;
}
.app_rstudio, .app_rstudio-super {
margin-left: 15%;
}
.fa, .far, .fas, .fab {
font-size: 96px;
color: #55b0ff;
margin: 15px;
}
</style>
</head>
<body>
<div th:replace="../fragments/navbar :: navbar"></div>
<div class="container" id="applist">
<div class="row" >
<div th:each="app: ${apps}">
<div th:class="${'col-md-4 portfolio-item app_' + app.id}">
<div class="card-box">
<a th:href="#{/app/}+${app.id}">
<i th:class="${app.logoURL}"></i>
</a>
<h3>
<a th:href="#{/app/}+${app.id}" th:text="${app.displayName == null} ? ${app.id} : ${app.displayName}" style="color: #55b0ff;"></a>
</h3>
<a th:if="${app.description != null}" th:href="#{/app_direct/}+${app.id + '/'}" style="color: #55b0ff; font-style: italic;" target="_blank">
<p th:text="${app.description}"></p>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am working on a little project. Until now everything went well, but for one reason or another, when I am making my second page, it will only load a part of the CSS (everything until calendar). I tried to put it in another CSS file and link the two files to the HTML file, and that works, but I would like to have all my CSS in just one file.
Can you help me?
Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="headerWrapper">
<h1>Volg ons leven op deze website!</h1>
</div>
</div>
<div class="timeline" id="timeline">
<div class="timelineWrapper">
<h3>Tijdlijn</h3>
<div class="timelinegrid">
<img src="./assets/pictures/family_pic.jpg">
<p>Zeeland - 2018</p>
<p>Welkom Tuur in de familie - 11/01/2018</p>
<img src="./assets/pictures/tuur.jpg">
<img src="./assets/pictures/verjaardag-marie-2017.jpg">
<p>Verjaardag Marie - 2017</p>
<p>Verjaardag Eline - 2016</p>
<img src="./assets/pictures/verjaardag-eline-2016.jpg">
</div>
</div>
</div>
</body>
</html>
calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="calendar">
<div class="calendarWrapper">
<h3>Kalender</h3>
<div class="cal">
<!-- CalendarLink -->
</div>
</div>
</div>
style.css
#import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
html {
font-family: 'Oswald', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
/* Header */
.header {
background-image: url(assets/pictures/hero_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
max-width: 100%;
}
.nav {
width: 100%;
height: 100px;
}
.navWrapper {
width: 85%;
margin: auto;
}
.navWrapper img {
height: 35px;
padding-top: 32.5px;
}
.right {
padding-top: 32.5px;
float: right;
}
#homepage, #calendar, #photoalbum, #lists, #recipes {
color: #000;
font-weight: bold;
font-size: 16px;
margin-right: 35px;
letter-spacing: 0.6px;
}
.headerWrapper {
padding-top: 235px;
}
.headerWrapper h1 {
font-size: 8vw;
font-weight: bold;
color: #4A4A4A;
text-align: center;
letter-spacing: 3.33px;
}
/* Timeline */
.timeline {
width: 100%;
}
.timelineWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.timelineWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
.timelinegrid {
margin-top: 40px;
display: grid;
grid-template-columns: 500px 500px;
grid-auto-rows: auto auto;
grid-gap: 2%;
align-items: end;
justify-content: center;
}
.timelinegrid img {
width: 100%;
}
.timelinegrid p {
font-size: 30px;
color: #4A4A4A;
}
/* Calendar */
.calendar {
width: 100%;
}
.calendarWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.calendarWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
Your css has an error. In .timelinegrid(line 98), you have align-items set to end.
If you fix this, the css should fully load.
https://www.w3schools.com/cssref/css3_pr_align-items.asp
I am trying to have the three images centered and at the bottom of the page. I'm stuck with the images to the left instead of the center. I've tried many different ways to get it to work, but none have worked. If anyone could please help me it would be greatly appreciated
.banner {
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-color: #595959;
color: #fff;
text-align: center;
line-height: 180px;
font-family: 'Lato', sans-serif;
font-size: 25px;
}
body {
padding: 0;
margin: 0;
}
#imagesMain {
position: fixed;
bottom: 0;
padding: 0;
margin: 20px 10px;
text-align: center;
}
img {
margin-right: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>A-level Revision Website</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>A-Level Revision Website</h1>
</div>
</div>
<div id="imagesMain">
<a href="Maths.html">
<img src="images/Maths.jpg" alt="Maths" style="width:450px;height:270px;border:0;">
</a>
<a href="ComputerScience.html">
<img src="images/Computer_Science.jpg" alt="ComputerScience" style="width:450px;height:270px;border:0;">
</a>
<a href="Physics.html">
<img src="images/Physics.jpg" alt="Physics" style="width:450px;height:270px;border:0;">
</a>
</div>
</html>
Just add width:100% on #imagesMain. Your images are centered but the #imagesMain itself isn't wide enough to show it. width:100% makes it as wide as the viewport.
.banner{
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-color: #595959;
color: #fff;
text-align: center;
line-height: 180px;
font-family: 'Lato', sans-serif;
font-size: 25px;
}
body{
padding: 0;
margin: 0;
}
#imagesMain{
position: fixed;
bottom: 0;
padding: 0;
margin: 20px 10px;
text-align: center;
width:100%
}
img{
margin-right: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>A-level Revision Website</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>A-Level Revision Website</h1>
</div>
</div>
<div id="imagesMain">
<a href="Maths.html">
<img src="images/Maths.jpg" alt="Maths" style="width:450px;height:270px;border:0;">
</a>
<a href="ComputerScience.html">
<img src="images/Computer_Science.jpg" alt="ComputerScience" style="width:450px;height:270px;border:0;">
</a>
<a href="Physics.html">
<img src="images/Physics.jpg" alt="Physics" style="width:450px;height:270px;border:0;">
</a>
</div>
</html>
Just modify your css of "#imagesMain":
#imagesMain {
bottom: 0;
left: 0;
margin: 20px 10px;
padding: 0;
position: fixed;
right: 0;
text-align: center;
}
I want make a web site and I developing my website design but I have a problem.
I have Image and two button and 4 li element in my page , but them not true!
I upload my css and html and another files with image , please help me.
my request : I want buttons in center of picture , and picture fix all page size and li elements down of background - picture , but it's not true!
problem
problem_2
I want show all in center
and background image is fixed
this is my css code :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
direction: rtl;
}
#font-face {
font-family: 'BYekan';
src: url('/fonts/BYekan.eot');
src: local('b BYekan'), url('fonts/BYekan.woff') format('woff'), url('fonts/BYekan.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
html {
background-color: #fff;
color: #141414;
font-weight: normal;
font-family: 'BYekan','tahoma';
font-size: 16px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
header {
background-image: linear-gradient( rgba(0, 0, 0, 0.7) , rgba(0, 0, 0, 0.7) ), url(img/Header.png);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
right: 50%;
transform: translate( +25% , -50% );
}
h1 {
margin-top: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn:link,
.btn:visited{
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-full:link,
.btn-full:visited{
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-left: 15px;
}
.btn-ghost:link,
.btn-ghost:visited{
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
/*background-color: #3498db;*/
}
.btn-full:hover,
.btn-full:active{
background-color: #3498db;
border: 1px solid #3498db;
color: #fff;
}
.btn-ghost:hover,
.btn-ghost:active{
background-color: #2ecc71;
border: 1px solid #2ecc71;
color: #fff;
}
and this is my html code :
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/col.css">
<link rel="stylesheet" type="text/css" href="vendors/css/4cols.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<title>Techtime</title>
</head>
<body>
<nav>
<div class="row">
<img src="resources/css/img/Logo.jpg" alt="TechTime Logo" class="Logo">
<ul class="main-nav">
<li>صفحه اصـلی</li>
<li>دسته بنـدی</li>
<li>دربـاره ما</li>
<li>تماس با ما</li>
</ul>
</div>
</nav>
<header>
<div class="hero-text-box">
<h1>به دنیای برنامه نویسی سلام کنید</h1>
<a class="btn btn-full" href="#">سلام</a>
<a class="btn btn-ghost" href="#">اطلاعات بیشتر</a>
</div>
</header>
</body>
please help me
If I understood you correctly, you want to make the background cover everything, including <nav>?
In this case, you simply need to move <nav> inside <header>.
<header>
<nav>
<div class="row">
<img src="resources/css/img/Logo.jpg" alt="TechTime Logo" class="Logo">
<ul class="main-nav">
<li>صفحه اصـلی</li>
<li>دسته بنـدی</li>
<li>دربـاره ما</li>
<li>تماس با ما</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>به دنیای برنامه نویسی سلام کنید</h1>
<a class="btn btn-full" href="#">سلام</a>
<a class="btn btn-ghost" href="#">اطلاعات بیشتر</a>
</div>
</header>
farzam i suggest you to use bootstrap then you will get a lot of built in classes for styling your site which makes your styling pretty much easier.
so using bootstrap, this html would work as you want.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<div class="container-fluid" style="margin-top:30%;">
<div style="width:500px;margin:auto;">
<h1 style="text-align:center;">به دنیای برنامه نویسی سلام کنید</h1>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<a class="btn btn-full" href="#" style="margin:auto;float:right;">سلام</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<a class="btn btn-ghost" href="#" style="margin:auto;">اطلاعات بیشتر</a>
</div>
</div>
<div style="bottom:0;clear:both;position:fixed;">
<ul class="main-nav">
<li>صفحه اصـلی</li>
<li>دسته بنـدی</li>
<li>دربـاره ما</li>
<li>تماس با ما</li>
</ul>
</div>
</body>
</html>
and custom css that i used
html{
width:100%;
height: 100%;
}
body{
height;100%;
width:100%;
margin:0;
background: url("../img/slide1.jpg") no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}