0
I’m not able to put these large images with background image or position Fixed. They change in size when I try and the page misshapen. http://codepen.io/murtinha/pen/vGLdBO
.container-fluid {
background-color: #E6E8FA;
}
#myname {
background-color:#B0C4DE;
font-family:Paytone One;
color:#4A777A;
margin-right:800px;
margin-left:50px;
}
header.cabeca a#myname:hover {
background-color:blue;
color:white;
}
#leftlist {
background-color: #AEEEEE;
}
ul#leftlist a.home:hover {
background-color:blue;
color:white;
}
ul#leftlist a.sobre:hover {
background-color:blue;
color:white;
}
ul#leftlist a.portf:hover {
background-color:blue;
color:white;
}
ul#leftlist a.cont:hover {
background-color:blue;
color:white;
}
.text-center {
margin-top: -700px;
}
.text-center h1 {
font-family: Paytone One;
font-size: 60px;
color: white;
text-shadow: 5px 5px 10px black;
}
.text-center h3 {
font-family: Nothing You Could Do;
font-size: 40px;
color: black;
text-shadow: 5px 5px 10px white;
}
#firstpage {
margin-top: -22px;
}
.fixed{
}
#buttonsfp {
margin-left: 350px;
margin-top: 30px;
font-family: Holtwood One SC;
}
div#buttonsfp a.face:hover {
color:white;
background-color:blue;
}
div#buttonsfp a.insta:hover {
color:white;
background-color:blue;
}
div#buttonsfp a.code:hover {
color:white;
background-color:blue;
}
div#buttonsfp a.cpen:hover {
color:white;
background-color:blue;
}
#secondpage {
margin-top: 400px;
}
#myself {
margin-top: -3200px;
margin-left: 900px;
border-radius: 50%;
width:400px;
}
.atitle {
margin-top: -1650px;
font-family: Tangerine;
font-size: 70px;
text-indent: 90px;
}
p {
text-indent: 30px;
font-size: 20px;
font-family: Rokkitt;
text-align:justify;
margin-left:20px;
}
.mself{
text-decoration:underline;
font-size:30px;
}
article#me a:hover {
color:red;
}
.cl1{
border-right:2px black solid;
margin-right:-15px;
}
#thirdpage {
margin-top: 350px;
}
.titulo h1{
margin-top:-750px;
font-family:Paytone One;
font-size:100px;
color:white;
text-shadow: 5px 5px 10px black;
}
div.thumbnail.trans{
background-color:transparent;
margin-top:-610px;
}
.thumblong{
width:400px;
}
.caption{
background-color:#D0D0D0 ;
}
.caption h3{
margin-left:50px;
margin-top:-5px;
text-shadow: 1px 1px 1px white;
color:black;
}
.caption p{
text-indent: 15px;
font-size: 15px;
font-family: Rokkitt;
text-align:justify;
margin-left:5px;
color:black;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!--Fonts-->
<link href='https://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Holtwood+One+SC' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>
<nav>
<div class="navbar navbar-default" >
<div class="navbar-fixed-top container-fluid">
<div class="navbar-header">
<header class="cabeca">
<button type="buton" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-content">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.youtube.com/longabordo" target="_blank" id="myname"> Eric Murta</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar-content">
<ul class="nav navbar-nav" id="leftlist">
<li><a href="#social-media " class="home" >Home</a></li>
<li ><a href="#me" class="sobre">About</a></li>
<li><a href="#recentworks" class="portf">Portfolio</a></li>
<li><a href="#"class="cont">Contact</a></li>
</ul>
</header>
</div>
</div>
</div>
</nav>
<section class="pages">
<article id="social-media">
<img src="https://images.unsplash.com/photo-1441035636554-212b9d7497fb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=d0a88730a149920879eac5314d426256" class="img-responsive" id="firstpage">
<header class="text-center">
<h1>Eric Murta Portfolio Webpage</h1>
<h3>Shaping your Webface.</h3>
</header>
<!--Buttons-->
<div id="buttonsfp">
<a href="http://www.facebook.com/ericmurta" target="_blank" class="btn btn-default btn-lg face" > Facebook</a>
<a href="http://www.instagram.com/ericmurtinha" target="_blank" class="btn btn-default btn-lg insta"> Instagram</a>
<a href="http://www.freecodecamp.com/murtinha" target="_blank" class="btn btn-default btn-lg code"> freeCodeCamp</a>
<a href="http://codepen.io/murtinha/" target="_blank" class="btn btn-default btn-lg cpen">CodePen</a>
</div>
</article>
<article id="me">
<img class="img-responsive" id="secondpage"src="https://images.unsplash.com/photo-1454367234670-bf0854963195?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=65cb413a1fc7cd9fed33f9f0197dea9d">
<img id="myself" src="https://fbcdn-photos-e-a.akamaihd.net/hphotos-ak-xta1/v/t1.0-0/q90/p206x206/12670576_960670440654472_6445109868176369830_n.jpg?oh=a3f6079008a9a0c988bf67ef0b482b33&oe=5793BACE&__gda__=1469050867_4f54ab9fd937a4f9b93c09a3ae3da0b0"></a>
<h1 class="atitle"> A little background. </h1>
<div class="row">
<div class="col-lg-4 cl1">
<p> My name is Eric and I'm 23 years old. I'm an unemployed electrical engineering that is now studying web development by <a href="http://www.freecodecamp.com/murtinha" class="mself" target="_blank">myself</a>. Things I really like doing are longboarding, playing guitar and hanging out with my friends. I had some programming lessons on my graduation that really helped me with algorithms and progamming logics.</p>
</div>
<div class="col-lg-4">
<p>I learned C language but now I've decided to study some fronted stuff like HTML5, CSS, JS. I hope to finish my CodeCamp course and so far I've learned a lot!</p>
</div>
</div>
</article>
<article id="recentworks">
<img class="img-responsive" id="thirdpage"src="https://images.unsplash.com/photo-1430165558479-de3cf8cf1478?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=a8d560cd877f002980248703b48efff0">
<div class="row">
<div class="col-lg-1 col-lg-offset-4 titulo">
<h1>Portfolio</h1>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-lg-offset-1">
<div class="thumbnail trans">
<img class="thumblong"src="https://scontent-gru2-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/1527000_687005504678183_968808326_n.png?oh=3c1d02ec03bde0dad99ce9f87bd76719&oe=575A2CAA">
<div class="caption"><h3>Youtube Channel</h3>
<p>That's my Youtube Channel where I post videos about longboarding. There are video reviews, trip videos, videos with my friends,trick tip videos and more.</p></div>
</a>
</div>
</div>
</div>
</article>
</section>
Could you be a little more specific? What exactly is your goal?
– Chun
I want to be able to fix the images to be on top of each other, occupying the whole screen and stay fixed, so that I can scroll the page give this effect here: http://codepen.io/FreeCodeCamp/full/VemmoX/
– Eric Murta
Man, if I’m not mistaken, that’s the Parallax effect, isn’t it? See this tutorial, it might help you =) http://tableless.com.br/parallax-simples-com-jquery-e-css/
– Rubens Barbosa
I’ll take a look, but the guy who did the one I sent didn’t use anything from js n or jquery
– Eric Murta