1 reply [Last post]
tusharg
tusharg's picture
Offline
newbie
IN
Last seen: 8 years 24 weeks ago
IN
Timezone: GMT+5.5
Joined: 2014-02-20
Posts: 1
Points: 2

HTML Code -

<!DOCTYPE html>
<html>
 <!-- Made by Yours Truly with loving support of Bootstrap 3.0 !-->
  <head>
    <title>Tushar Gupta | Web Developer & Designer</title>
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/animate.min.css" rel="stylesheet" media="screen">
 
 
    <link href="css/main.css" rel="stylesheet" media="screen">
     <link href="css/fontello.css" rel="stylesheet" media="screen">
     <link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,300,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
    <meta name="description" content="Tushar Gupta tech buff and a big fan of electronic music. ">
 
 
  </head>
  <body>
 
        <div class="jumbotron" id="header1">
 
 
 
 
          <div class="container" id="headers"> 
 
 
 
             <div><img src="images/hi.png" id="pic" alt="Hi!" class="line1"> </div>
              <h1 class="headings1 line2">Hi, I'm Tushar.</h1> 
 
            <p class="heading2  line3">A web developer who loves what he does.</p>
 
 
            <p class="heading2 line4">I love doing creative things like  <a href="#" style="text-decoration: none;" class="headeranchor  line4">designing</a>, </p> <p class="heading2 line5"> <a href="#" style="text-decoration: none;" class="headeranchor " >coding</a> and doing homework (sometimes). </p>
 
 
              <section class="buttondown line6"><a href="#personality" class="buttonhover"><span class="glyphicon glyphicon-chevron-down"></span></a></section>
 
 
          </div>
        </div>
 
 
		<section id="personality">
 
			<div class="container">
				<p class="intro animated fadeInDown fader"> I still remember the day when I went to a  friend's place and saw him editing a picture his dad took. He introduced me to the software known as <a href="#" style="text-decoration: none;" class="introlink">Paint.NET</a>. This happened when I was 12. Since that day, I've been doing what I love - Designing. </p>
 
				<p class="intro animated fadeInDown"> During the course of these three years, I've learnt a lot, gained experience and worked with many clients. 
				My favourite one has to be the user interface I made for KhanAcademy this summer. I had never worked on a mobile interface before, so I'd say it was an awesome experience. The most surprising thing was when I emailed Kitt Hirasaki, a designer at KhanAcademy and he responded with this :
				<blockquote class="quote animated fadeInDown intro2">
				Very nice! I shared your presentation with the team. <br>
 
I like the color palette you've chosen, I think the dark background looks very nice. <br>
 
Will you be attending university in the fall? If you're interested in pursuing design, it would be cool to have you apply as an intern for next summer! <br>
 - Kitt Hirasaki 
				</blockquote>
				<blockquote class="quote animated fadeInDown intro2"><p><a href="https://twitter.com/tushardesigns" style="text-decoration: none;" class="introlink">@tushardesigns</a> gorgeous work!</p>&mdash; Ben Kamens (@kamens) <a href="https://twitter.com/kamens/statuses/353914739476279296" style="text-decoration: none;" class="introlink">July 7, 2013</a> <br></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
 
 </p>
 
			</div>
		</section>
 				<!--INTRO MORE
 				 <p class="intro"> This was the first time I'd gained appreciation/feedback from the big guns, if I'd say. 	 				 					 </p>
 				<p class="intro"> I 
 				</p>
 
 
		<div class="jumbotron" id="hirediv">
 
			<div class="hire"> 
 
			<center>
 
 
				<p class="social animated fadeInDown">
 
 
 
					<font color="#ecf0f1">I'm pretty social. Let's talk on: </font><br><br>
					<a  class="new" target="_blank" href="https://www.twitter.com/madebytushar"><i class="fa fa-twitter fa-3x"></i></a>
					<a class="new" target="_blank" href="https://www.facebook.com/tushardesigns"><i class="fa fa-facebook fa-3x"></i> </a>
					<a class="new" target="_blank" href="https://instagram.com/madebytushar"><i class="fa fa-instagram fa-3x"></i> </a>
					<a class="new" target="_blank" href="https://www.google.com/+TusharGupta98"><i class="fa fa-google-plus fa-3x"></i></a>
 
				</p>					
 
 
 
 
			<p class="animated fadeInDown"> 	<font color="#ecf0f1">I check my twitter mentions <b>daily.</b><br>
				 Don't hesitate to write to me at <font color="#f1c40f">tushatwork[at]gmail.com</font>. <br>
				 I'm <b>available for work</b> and small talks and coffee. <br>
 
			</font>
			</p>
 
 
			</center>
 
			</div>
		</div>
 
 
 
 
 
 
 
 
		</div>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
 
    <script>
    <!-- Smooth Scroll -->
    $(document).ready(function(){
  $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname) {
      var $target = $(this.hash);
      $target = $target.length && $target
      || $('[name=' + this.hash.slice(1) +']');
      if ($target.length) {
        var targetOffset = $target.offset().top;
        $('html,body')
        .animate({scrollTop: targetOffset}, 1000);
       return false;
      }
    }
  });
});
 
 
 
    </script>
 
 
 
  </body>
</html>

CSS -

.jumbotron {
	margin: 0;
 
}
#menubar:hover {
	opacity: 1;
}
#headers {
	padding: 150px;
	font-family: 'Varela', sans-serif;
 
	color: #fcfcfc;
	 margin-top: -140px; 
	text-align: center;
 
 
 
 
}
 
.line1 {
	opacity: 0;
}
.line2 {
	display: none;
}
.line3 {
	display: none;
}
.line4 {
	display: none;
}
.line5 {
	display: none;
}
.line6 {
	display: none;
}
 
.heading2 {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 36px;
	color: #fcfcfc;
 
 
 
}
 
 
 
#header1 {
	background-color: #f39c12;
	height: 650px; 
 
}
 
 
 
 
 
.colbox {
	background-color: #323232;
	opacity: 0.9;
	color: blue;
}
 
.headeranchor {
	color: #f3ce3a;
 
	transition: all 0.4s linear 0s;
	border-bottom: 1px solid transparent;
 
}
 
.headeranchor:hover {
	color: #f3ce3a;
	border-bottom: 1px solid #FFFFFF;
}
 
 
 
 
 
#button1 {
 
	border-radius: 0;
}
 
#header2 {
	background-color: #323232;
	width: 100%;
	height: 500px;
	margin-top: -70px;
}
 
#pic {
	border-radius: 100%;
	border: 5px solid white;
	 max-width: 100%;
	height: auto; 
 
}
 
 
 
h2 {
	color: #ecf0f1;
	padding-top:  18px;
	font-family: 'Varela', sans-serif;
}
 
#header3 {
	width: 100%;
	height: 500px;
	background-color: #323232;
	margin-top: -30px;
 
}
 
#head {
	color: #ecf0f1;
	padding-top:  20px;
	font-family: 'Varela', sans-serif;
	text-align: center;
}
 
 
.intro {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 24px;
	color: #767676;	
	line-height: 40px;
	padding: 20px;
}
 
.introlink {
	color: #f3ce3a;
 
	transition: all 0.4s linear 0s;
	border-bottom: 1px solid transparent;
 
 
 
}
 
.introlink:hover {
	color: #f3ce3a;
	border-bottom: 1px solid #f39c12;
}
 
.hire {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 24px;
	color: #767676;	
	line-height: 40px;
	padding: 20px;
}
 
.quote {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 20px;
	color: #767676;	
	line-height: 40px;
	padding: 20px;
}
 
.buttondown {
	margin-top: 40px;
	margin-bottom: -105px;
}
 
.buttonhover {
	color: #f1c40f;
	-webkit-transition: color 0.3s ease-in; 
}
 
.buttonhover:hover {
	color: #ffffff;
}
 
#hirediv {
	background-color:#f39c12 ;
	padding: 0;
	margin: 0;
 
 
}
 
.social {
	padding: 50px;
}
 
i {
	padding: 50px;
	color: #ededed;
 
	transition: all 0.3s linear 0s;
 
}
 
i:hover {
	color: #f1c40f; 
}
 
.new {
	text-decoration: none;
	color: #323232;
}
 
b {
	font-weight: 400;
}
 
::selection {
	background: #f39c12; 
	color: white; /* Safari */
	}
::-moz-selection {
	background: #f39c12;
	color: white; /* Firefox */
}
 
 
 
 
 
 
 @media (max-width: 400px) {
 
	#header1 {
		height: 900px;
		width: 100%;
		padding: 0;
	}
	.headings1 {
		font-size: 25px;
		font-family: 'Varela', sans-serif;
		}
 
 
	#headers p {
		font-size: 24px;
		margin: 0 auto;
 
 
 
 
 
	}
 
	#pic {
 
 
	}
	/* .jumbotron {
		padding: 0;
		margin: 0;
	} */
}
 
@media (max-width: 990px) {
	#header1 {
		height: 750px;
 
	}
	.heading2 {
		font-size: 30px;
	}
 
 
 
}
@media (max-width: 633px) {
	#header1 {
		height: 750px;
 
	}
	.heading2 {
		font-size: 28px;
	}
 
 
 
}
@media (max-width: 619px) {
	#header1 {
		height: 700px;
 
	}
	.heading2 {
		font-size: 28px;
	}
 
 
 
}
@media (max-width: 612px) {
	#header1 {
		height: 700px;
 
	}
	.heading2 {
		font-size: 26px;
		max-width: 700px;
	}
 
 
 
}
@media (max-width: 614px) {
	#header1 {
		height: 750px;
 
	}
	.heading2 {
		font-size: 26px;
		max-width: 700px;
	}
 
 
 
}
@media (max-width: 593px) {
	#header1 {
		height: 700px;
 
	}
	.heading2 {
		font-size: 24px;
		max-width: 900px;
	}
 
 
 
}
@media (min-width: 481px) {
	#header1 {
		height: 700px;
 
	}
	.heading2 {
		font-size: 20px;
 
	}
 
 
 
}
@media (max-width: 480px) {
	#pic {
	border-radius: 100%;
	border: 4px solid white;
	max-width: 100%;
	height: auto;
 
 
    }
 
	#header1 {
		height: 800px;
 
	}
	#headers p {
		font-size: 17px;
 
		margin-right: -10px;
 
	}
	.intro {
		font-size: 19px;
	}
 
 
 
 
}
@media (max-width: 321px) {
	#pic {
		}
    #header1 {
		height: 1000px;
 
	}
 
	#headers p {
		font-size: 15px;
 
 
		min-width: 200px;
 
	}
	.intro {
		font-size: 15px;
	}
 
   .headings2 {
 
   }
 
 
 
}

The preview is available on - http://www.vitcloud.net/tush

The problem i'm facing is the fact that I can't make it fully responsive. I've tried a lot, but I keep getting stuck. Can anyone provide some insight?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi tusharg, What are you

Hi tusharg,
What are you getting stuck on?
Can you be more specific about the problems.