Please How Do I Recreate This Design - Programming

Please How Do I Recreate This Design - Programming - Nairaland

Nairaland Forum › Science/Technology › Programming › Please How Do I Recreate This Design (1668 Views)

Please How Do I Recreate This Design by Thirdwrist(op): 5:19pm On May 09, 2016

How do i recreate this big home picture in the home page of texasexes.org with the name : "join today" & "login" in bootstrap ? in a very responsive manner.
Your input will be much appreciated.
I have been trying to do it but my success is trickling in, in drops.

My previous code.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable="no">
    <title>Bootstrap 101 Template</title>

    <link rel="stylesheet" href="custom.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">

   
  </head>
  <body class="">
   
  <div id="imgholder"> 
  <div id="overimage">
  <div id="welcomediv">
              <h1 id="welcome">Welcome to FFT Old Students Association</h1>
              <br/>

              <a href="#" class="btn btn-primary" id="welcomethumb">last man </a>
              <a href="#" class="btn btn-primary" id="welcomethumb">last man </a>
              </div>
            </div>
   <img src="FFT.jpg" class="bigimg">
    
            </div>

Css:


.body{
	margin-left:0;
	margin-right:0;
	padding-right:0;
	padding-left:0;
}
#imgholder{
	position:relative;
}
#overimage{
	width:100%;
	height:100%;
	position:absolute;
	

}

#welcome{
	font-family:Impact,Charcoal, sans-serif;
	color:#FFFAF0;
	text-align:center;
	margin:auto;
	clear:left;
	/*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
*/
}
#welcomediv{
	background-color:;
	margin: 0 auto;
	width:50%;
	vertical-align:center;
	min-height:100%;
	min-height:100vh;
	display:flex;
	align-items:center;
}

#welcomethumb{
	
	
	
}

Re: Please How Do I Recreate This Design by Nobody: 5:57pm On May 09, 2016

Your question isn't clear enough.

If you want a responsive image, use relative measurement.
img{
width:100%
}

The image should resize accordingly.

1 Like

Re: Please How Do I Recreate This Design by Vince77(m): 6:02pm On May 09, 2016

sonOfLucifer:
Your question isn't clear enough.

If you want a responsive image, use relative measurement.
img{
width:100%
}

The image should resize accordingly.

U seem to kw tins abt networking and web development.
What do u really do?

Re: Please How Do I Recreate This Design by Nobody: 6:06pm On May 09, 2016

Vince77:
U seem to kw tins abt networking and web development.
What do u really do?

Technical Support official.
Web/App development hobby.

Hoping to go into full web/app dev this year.

Thanks for asking.

1 Like 1 Share

Re: Please How Do I Recreate This Design by Vince77(m): 6:24pm On May 09, 2016

sonOfLucifer:
Technical Support official.
Web/App development hobby.

Hoping to go into full web/app dev this year.

Thanks for asking.

Thanks for d reply.
I really wanna go into the world of IT.
Sometimes i get confused abt d one more profitable n fun.
Tho im gonna pay for a CCNA class soon and also wanna learn app development for android.
What do u think?

Re: Please How Do I Recreate This Design by Nobody: 8:29pm On May 09, 2016

Vince77:
Thanks for d reply.
I really wanna go into the world of IT.
Sometimes i get confused abt d one more profitable n fun.
Tho im gonna pay for a CCNA class soon and also wanna learn app development for android.
What do u think?

IT is huge. So many branches, so many distractions. cheesy

There's networking, hardware, software, programming, data mining, graphics etc
I assume you have an interest in networking. CCNA is a good start. Try to take COMPTIA if possible too. You'd learn the fundamentals of computer hardware and how they communicate.

If you wanna be real bad ass, install a Linux distro on your system. I'd advise you begin with Ubuntu 14.04.

Re: Please How Do I Recreate This Design by Thirdwrist(op): 9:08pm On May 09, 2016

sonOfLucifer:
Your question isn't clear enough.

If you want a responsive image, use relative measurement.
img{
width:100%
}

The image should resize accordingly.

The image should resize accordingly.[/quote]you have to view this from a computer system to be able to understand what i mean.
I want to write on an image and as well let the writing be responsive, and how do i also center the writing and thumbs, like in the picture of the web site attached.

Re: Please How Do I Recreate This Design by Nobody: 9:56pm On May 09, 2016

Thirdwrist:
The image should resize accordingly.

you have to view this from a computer system to be able to understand what i mean.
I want to write on an image and as well let the writing be responsive, and how do i also center the writing and thumbs, like in the picture of the web site attached.

Ok. I get you.

Use a div. Set the div background-image using css

div{
background-image:url("path to your image file" wink

;
width:100%;
}
Setting the width of the div to 100% should make the image responsive.

For the text, nest it within the div tage using a header tag or another div tag.

Re: Please How Do I Recreate This Design by Nobody: 11:29pm On May 09, 2016

Apologies, man. I missed the code you posted earlier.

make this edit to your code in css.

#imgholder{
background-image:url("path to your image file" wink

;
width:100%;
}

Re: Please How Do I Recreate This Design by macaranta(m): 11:35pm On May 09, 2016

sonOfLucifer:
Apologies, man. I missed the code you posted earlier.

make this edit to your code in css.

#imgholder{
background-image:url("path to your image file";
width:100%;
}

Hi man,you can partner with our website to teach some programing to Nigerians online.See signature.

Re: Please How Do I Recreate This Design by Nobody: 11:46pm On May 09, 2016

macaranta:
Hi man,you can partner with our website to teach some programing to Nigerians online.See signature.

Ok.

Hw much?

Re: Please How Do I Recreate This Design by Vince77(m): 11:49pm On May 09, 2016

sonOfLucifer:
IT is huge. So many branches, so many distractions. There's networking, hardware, software, programming, data mining, graphics etc
I assume you have an interest in networking. CCNA is a good start. Try to take COMPTIA if possible too. You'd learn the fundamentals of computer hardware and how they communicate.

If you wanna be real bad ass, install a Linux distro on your system. I'd advise you begin with Ubuntu 14.04.

Thank you very much. Let me go and start working on it.
I appreciate.

1 Like

Re: Please How Do I Recreate This Design by Nobody: 11:52pm On May 09, 2016

Vince77:
Thank you very much. Let me go and start working on it.
I appreciate.

You're welcome. Take your time.
http://www.catb.org/esr/faqs/hacker-howto.html

Go through this site. Helped me when I was lost and confused too.

1 Like

Re: Please How Do I Recreate This Design by Nobody: 11:54pm On May 09, 2016

macaranta:
Hi man,you can partner with our website to teach some programing to Nigerians online.See signature.

Registered.

1 Like 1 Share

Re: Please How Do I Recreate This Design by macaranta(m): 7:20am On May 10, 2016

sonOfLucifer:
Registered.

Awesome

Re: Please How Do I Recreate This Design by rejosom(m): 12:00pm On May 10, 2016

sonOfLucifer:
You're welcome. Take your time.
http://www.catb.org/esr/faqs/hacker-howto.html

Go through this site. Helped me when I was lost and confused too.

Bros,

Was an ardent follower of onyenkuzi.com, but have been away from IT for some time now. Was really enjoying the down-to-my-level method of teaching python and I think I was doing real good then. Please do came back oo

Re: Please How Do I Recreate This Design by Nobody: 1:30pm On May 10, 2016

rejosom:
Bros,

Was an ardent follower of onyenkuzi.com, but have been away from IT for some time now. Was really enjoying the down-to-my-level method of teaching python and I think I was doing real good then. Please do came back oo

Wow. Thanks. This means a lot. cool

I mistakenly crashed the site a few weeks back. grin

Should be back online this weekend. Thanks man. Glad you enjoyed the lessons and found them useful.

1 Like

1 Reply

• 2 • 3 • 4

Padding/margin I Need Help • How To Format Your Memory Card/drive With Diskpart • I Want To Become The Next Bill Gate