I want this layout:
So I tried this:
<h2>Make search awesome using Open Source</h2>
.banner .section_title h2 {
font-family: "Oswald", Arial, sans-serif;
font-size: 5em;
line-height: 1.4em;
text-transform: uppercase;
overflow: hidden;
text-align: center;
display: inline;
padding: 0 30px;
background: #176072;
}
But I am getting this result:
So, I want to add that padding (the red circle). How can I do that?
For the responsive design, I want this result:
Here's one solution. Wrap the components that you want on separate lines with a span or div element. This will you to style the sections of text independently but keep the full text within a heading tag.
<h2><span>Make Search Awesome Using</span> <span>Open Souce</span></h2>
h2 span {
font-family: "Oswald", Arial, sans-serif;
font-size: 3em;
line-height: 1.4em;
text-transform: uppercase;
padding: 0 30px;
background: #176072;
color: #FFFFFF;
display: inline-block;
}
h2 {
background-color: #062949;
padding: 25px;
text-align: center;
}
jsFiddle: http://jsfiddle.net/vcpo5rmj/
Note: This is not a complete responsive solution.
To dynamically keep the padding on your text you need to use the CSS outline property:
body {
background-color: #033569;
}
.container {
text-align: center;
}
h2 {
display: inline;
text-transform: uppercase;
background-color: #176684;
color: white;
font-family: sans-serif;
outline: 5px solid #176684;
}
<div class="container">
<h2>Make search awesome using Open Source</h2>
<p>Click Full Page button then resize the browser</p>
</div>
Or view the example and adjust the container width in this fiddle.
Container width at 200px below:
Oh just use CSS3 box shadows to emulate the padding on either side of each line:
body {
font-family: Arial, sans-serif;
color: #FFFFFF;
background-color: #003366;
}
.section_title {
text-align: center;
}
.section_title h2 {
display: inline;
font-size: 3em;
background: #176072;
box-shadow: -.5em 0 #1D758C, .5em 0 #1D758C;
}
<div class="section_title">
<h2>Make search awesome using Open Source</h2>
<p>A different color box-shadow is used for illustration.</p>
</div>
best i could do https://jsfiddle.net/tonytansley/91j10osv/3/ - not responsive sorry
<div class="banner">
<div>
<h2>Make search awesome using</h2>
<h2>Open Source</h2>
</div>
</div>
<hr/>
<div class="banner">
<div>
<h2>Make search awesome using <br/>
Open Source</h2>
</div>
</div>
<hr/>
<div class="banner">
<div>
<h2>Make search awesome using<em></em><br/>
<em></em>Open Source</h2>
</div>
</div>
css
.banner div{
text-align:center;
}
.banner h2, .banner p{
font-family:"Oswald", Arial, sans-serif;
font-size: 2em;
line-height: 1.4em;
text-transform:uppercase;
text-align:center;
display: inline;
padding: 0 30px;
background: #176072;
color:white;
}
.banner h2:first-of-type{
margin-bottom:0.2em;
}
em{
width:30px;
display:inline-block;
}
try this
html code...
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="holder">
<h2> Make search awesome using </h2>
<h2> Open Sources </h2>
</div>
</body>
</html>
css code
body{
margin:0;
}
div.holder{
width:auto;
height: auto;
text-align: center;
}
div.holder h2{
font-family:"Oswald", Arial, sans-serif;
font-size: 4.5em;
text-transform:uppercase;
background: #176072;
display: inline;
line-height: 80px;
}
Related
So I've been trying to make myself a personal portfolio, however I've run into issues regarding that. Whenever I try to resize my image using the width thing in CSS3, my image does not respond. I've tried resizing it to 25%, 50%, 75%, and nothing works!
Here's my code:
body {
margin: 0px;
background-color: white;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/*Nav Styles*/
.brand {
font-family: 'Titillium Web';font-size: 15px;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 38px;
}
.left-side {
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform: uppercase;
}
.nav-link-wrapper {
font-family: 'Titillium Web';font-size: 15px;
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color: #8a8a8a;
text-decoration: none;
transition: color 0.5s
}
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color:black
}
/*About Page Styles*/
.profile-image-wrapper {
text-align: center;
width: 50%;
}
.profile-content-wrapper {
padding: 30px;
text-align: center;
}
.profile-content-wrapper h1 {
color: black;
font-family: 'Titillium Web';font-size: 22px;
}
.profile-content-wrapper p {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
.profile-content-wrapper h4 {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mika's Portfolio</title>
<link href='https://fonts.googleapis.com/css?family=Titillium Web' rel='stylesheet'>
</head>
<body>
<div class = "container">
<div class="nav-wrapper">
<div class = "left-side">
<div class="nav-link-wrapper">
Home
</div>
<div class="nav-link-wrapper">
Projects
</div>
<div class="nav-link-wrapper">
About
</div>
</div>
<div class = "right-side">
<div class="brand">
<div>
MIKA TAN
</div>
</div>
</div>
</div>
<div class="profile-image-wrapper">
<img src="https://cdn.pixabay.com/photo/2020/09/16/20/30/lighthouse-5577451_1280.jpg">
</div>
<div class="profile-content-wrapper">
<h1>
Hey there!
</h1>
<p>
Now you've got a quick look around my website, think about hiring me to make you your own website!
</p>
<p>
Thanks, have a great day.
</p>
<h4>
GMAIL:
</h4>
<p>
mikayxtan#gmail.com
</p>
</div>
</div>
</body>
</html>
My image called mika.png is in a class called profile-image-wrapper, and also does not respond to the text-align: center; thing.
I have tried in-line style coding, which works to an extent (however I prefer to not have to use in-line style so I can create a media query later), and I have used the !important attribute for CSS which only works for text-align and not the width.
To make your image responsive you should give it a max-width: 100% right now it follows the width of the container and it stays inside of it. So add this new piece of code.
.profile-image-wrapper img {
max-width: 100%;
}
now the image fills 50% of the width as you wanted to do. Now if you want your image to be in the middle with 50% width just add margin: 0 auto; to the image wrapper and you should be good to go.
.profile-image-wrapper {
text-align: center;
width: 50%;
margin: 0 auto;
}
if you want the image to be fill width you can remove the width 50% from the wrapper.
with 50% width applied to the wrapper
without the 50% width on the wrapper, it would look something like this.
Note that in both cases the image is responsive duo to the fact you added max-width:100% to the img tag.
That's not what you are looking for? please let me know and show me a screenshot of the desired output.
Try it:
.profile-image-wrapper img{
width:15%
}
Please set margin: 0 auto; for .profile-image-wrapper selector to make center horizontally.
Please set display: inline-block; CSS in .profile-image-wrapper img selector
Updated snippet :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mika's Portfolio</title>
<link href='https://fonts.googleapis.com/css?family=Titillium Web' rel='stylesheet'>
</head>
<style>
body {
margin: 0px;
background-color: white;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/*Nav Styles*/
.brand {
font-family: 'Titillium Web';font-size: 15px;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 38px;
}
.left-side {
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform: uppercase;
}
.nav-link-wrapper {
font-family: 'Titillium Web';font-size: 15px;
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color: #8a8a8a;
text-decoration: none;
transition: color 0.5s
}
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color:black
}
/*About Page Styles*/
.profile-image-wrapper {
text-align: center;
width: 50%; margin:0 auto;
}
.profile-image-wrapper img{ width:50%; display: inline-block;}
.profile-content-wrapper {
padding: 30px;
text-align: center;
}
.profile-content-wrapper h1 {
color: black;
font-family: 'Titillium Web';font-size: 22px;
}
.profile-content-wrapper p {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
.profile-content-wrapper h4 {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
</style>
<body>
<div class = "container">
<div class="nav-wrapper">
<div class = "left-side">
<div class="nav-link-wrapper">
Home
</div>
<div class="nav-link-wrapper">
Projects
</div>
<div class="nav-link-wrapper">
About
</div>
</div>
<div class = "right-side">
<div class="brand">
<div>
MIKA TAN
</div>
</div>
</div>
</div>
<div class="profile-image-wrapper">
<img src="https://i.imgur.com/HPrl3u8.jpg">
</div>
<div class="profile-content-wrapper">
<h1>
Hey there!
</h1>
<p>
Now you've got a quick look around my website, think about hiring me to make you your own website!
</p>
<p>
Thanks, have a great day.
</p>
<h4>
GMAIL:
</h4>
<p>
mikayxtan#gmail.com
</p>
</div>
</body>
</html>
I am new to coding and am stuck trying to fit each div to the screen (see the triangle buttons that move to the next section - ideally I want those to move to a "new page" or "new screen" if that makes sense). Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Budget</title>
<style>
h1 {font-family: "Footlight MT Light";
font-size: 52px; color: white; font-weight: bold; }
h2 {font-family: "Footlight MT Light";
font-size: 42px; color: white; font-weight: bold; }
h3 {font-family: "Footlight MT Light";
font-size: 32px; color: white; font-weight: bold; }
h4 {font-family: "Footlight MT Light";
font-size: 22px; color: white; font-weight: bold; }
h5 {font-family: "Footlight MT Light";
font-size: 16px; color: white; font-weight: bold; }
h6 {font-family: "Footlight MT Light";
font-size: 12px; color: white; font-weight: bold; }
p {font-family: "Footlight MT Light";
font-size: 20px; color: white; font-weight: none; }
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: none;
}
li {
float: right;
}
li a {
display: block;
color: #FC4A1A;
font-family: "Footlight MT Light";
font-size: 22px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #062f4f;
}
p {
margin: 0;
}
h1{
margin: 0;
}
</style>
</head>
<body>
<div style=background-color:#f7b733;">
<ul><strong>
<li>Contact</li>
<li>Ideas</li>
<li>Our Work</li>
<li>About Us</li></strong>
</ul>
<h1><center>Let's Make Your Budget Experience Extraordinary</center></h1><br>
<p style="text-align: center;">SEE WHAT WE CAN DO FOR YOU</p>
<h1 style="text-align: center;"><strong><font color="#4abdac">🔻</font></strong></h1><br>
</div>
<div style="background-color:#4abdac;">
<h1 id="section2"><h1 style="text-align: left;">Making budget offices better</h1>
<p>Here's a caption on making budget offices better.</p><br>
<h1 style="text-align: center;"><strong><font color="#062f4f">🔻</strong></h1><br>
</div>
<div style="background-color:#062f4f;">
<h1 id="section3"><h1 style="text-align:right;">Learn All About Budget</h1>
<p style="text-align:right;">Here's a caption on learning about budget processes.<h1 style="text-align: center;"><strong><font color="#9c9b9b">🔻</strong></h1> <br>
</div>
<div style="background-color:#9c9b9b;">
<h1 id="section4"><h1 style="text-align:left;">We Make Technology Accessible</h1>
<p>Here's a caption about how we can use technology to improve your processes.</p><br>
<h1 style="text-align: center;"><strong><font color="#FC4A1A">🔻</strong></h1><br>
</div>
<div style="background-color:#FC4A1A;">
<h1 id="section5"><h1 style="text-align:right;">Grow Your Career</h1>
<p style="text-align:right;">Here's a caption on career development.</p><br>
</div>
<div>
<div id="column1" style="float: left; margin: 0; width: 33%;">
<h3><span style="color: #062f4f;">Get in touch
</span></h3>
<p style="padding: 2px; color: #062f4f;">B
and SOCIAL MEDIA ICONS</p>
</div>
<div id="column2" style="float: left; margin: 0; width: 33%;">
<h3><span style="color: #062f4f;">Sign Up </span></h3>
<p style="padding: 2px; color: #062f4f;">sign up here.</p>
</div>
<div id="column3" style="float: left; margin: 0; width: 33%;">
<h3><span style="color: #062f4f;">Send Us Your Ideas
</span></h3>
<p style="padding: 2px; color: #062f4f;">Link to detailed use case form.</p>
</body>
</html>
You could do something like this: https://jsfiddle.net/uorwdwzc/1/
a{
color: #fff;
font-size: 25px;
}
#slide1{
width: 100%;
height: 100vh;
background-color:blue;
}
#slide2{
width: 100%;
height: 100vh;
background-color:red;
}
#slide3{
width: 100%;
height: 100vh;
background-color:green;
}
<div id="slide1">
<h1>
Page 1
</h1>
Next Page
</div>
<div id="slide2">
<h1>
Page 1
</h1>
Next Page
</div>
<div id="slide3">
<h1>
Page 1
</h1>
Back to Top
</div>
I just made this quickly but you could add triangular buttons and additional styling to suit your needs.
If you want to make it slide to instead of jump you will need to add JS.
The CSS units vw and vh are a certain percentage of the screen size ('vertical width' and 'vertical height').
100vh is 100% of the screen height. However: if you have padding in your #slide1-2-3 divs, it may overflow the size. Width and height add to the padding, so 2vw padding will make the entire width be 100vw + 2vw, which overflows. Keep that in mind when you set your amounts!
Here I'm creating a button but for some odd reason the text is a little off and isn't centered even though I have used display: block; and text-align: center; inside my css file.
Line 30 is where my button starts here is my html and custom css code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="bootstrap/js/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<title>Proto X Media - Home</title>
</head>
<body>
<div class="bg1">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="lgsize" src="logo.gif" alt="Logo">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="pushdown">
<div class="col-md-6 col-md-offset-3">
<span class="text-center title">Proto X Media</span>
<p class="text-center subtext">Professional Media Production & Hardware Consultation.</p>
<div class="buttonpad">
<div class="button">
<span>Explore</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And here is my css on line 39 is where the code for my button is
.title {
font-family: 'Bree Serif', serif;
font-weight: 800;
font-size: 500%;
color: 373d44#;
display: block;
text-align: center;
}
.bg1 {
background-image: url("bg2.jpg");
background-size: cover;
}
.lgsize {
width: 120px;
height: 110px;
}
.pushdown {
padding-top: 100px;
padding-bottom: 250px;
}
.menu {
font-size: 100%
font-family: 'Bree Serif', serif;
}
a {
color:inherit;
text-decoration: none;
}
a:hover {
background-color: transparent;
text-decoration: none;
}
.subtext {
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 18px;
display: block;
}
.button {
width: 82.61px;
height: 37.65px;
box-sizing: border-box;
background-color: white;
font-weight: 700px;
box-shadow: 0px .2em 0px 0px #ebebeb;
display: block;
text-align: center;
background-position: center;
border: none;
margin: auto;
font-family: 'Bree Serif', serif;
}
.buttonpad {
padding-top: 10px;
}
Thank you very much ! Also if you haven't noticed I'm using Bootstrap for my grid.
For centering horizontal, change your markup to this and you should be fine
<div class="button"><span>Explore</span></div>
When breaking line using an inline element, that line break cause a white space at the end pushing the text slightly to the left
For centering vertical, use line height, like this
.button {
width: 82.61px;
height: 37.65px;
line-height: 37.65px; /* added property */
box-sizing: border-box;
background-color: white;
font-weight: 700px;
box-shadow: 0px .2em 0px 0px #ebebeb;
display: block;
text-align: center;
background-position: center;
border: none;
margin: auto;
font-family: 'Bree Serif', serif;
}
Try to use padding like this;
padding: 6px 12px;
OR
.button{
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
One simple fix is to use line-height as the height of the containing div, as in this jsfiddle :
.button span
{
display: block;
line-height: 37px;
}
https://jsfiddle.net/az2vs6y3/1/
Or you could also use negative margin and absolute positionning, but it would be slightly less flexible.
Why are you using div as button, use html button for hyperlink and css looks fine
<input type="submit" value="Explore">
Hi in the below code logo and text was not displaying. when I am adding the style to vertical-align:center.I want image and text should me center
Any one help me
.logo{
display:inline-block;
}
.logo a {
font-size: 3em;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
color: #fff;
font-family: "Roboto Slab", serif;
}
.logo a img{
vertical-align:middle;
}
.logo p {
color: #000;
text-transform: uppercase;
font-size: 1.2em;
margin-top: -10px;
display:inline-block;
}
<div class="logo">
<img src="images/logo_sml.jpg">
<p>Newton Public School<br>
Kanaka Nagar-Rt Nagar<br>
Reach Out, Reach High, Reach Beyond</p>
</div>
Update log class like this:
.logo{
text-align: center;
display:inline-block;
width:100%;
}
For horizontal align change logo style to:
.logo {
display: block;
text-align: center;
}
And HTML to:
<div class="logo">
<p><img src="images/logo_sml.jpg"></p>
<p>Newton Public School<br>
Kanaka Nagar-Rt Nagar<br>
Reach Out, Reach High, Reach Beyond</p>
</div>
If you want to center the div only horizontally, simply put the .logo div inside a center element, like this: <center><div class="logo">...</div></center>.
If you want to center it both horizontally and vertically, try out this answer of a very old question.
Modify it
.logo{
text-align: center;
display:inline-block;
width:100%;
}
.logo a {
font-size: 3em;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
color: #fff;
font-family: "Roboto Slab", serif;
padding-left: 50%;
}
.logo a img{
vertical-align:middle;
}
.logo p {
color: #000;
text-transform: uppercase;
font-size: 1.2em;
margin-top: -10px;
display:inline-block;
}
<div class="logo">
<img src="images/logo_sml.jpg">
<p>Newton Public School<br>
Kanaka Nagar-Rt Nagar<br>
Reach Out, Reach High, Reach Beyond</p>
</div>
I have coded the layout below, but when tested the 'Login or Signup' link is not positioning to the right side of the page. Any help is appreciated.
HTML
<header>
<h1>Heading</h1>
<p>A clean, minimal, grid-based layout focusing attention on your work.</p
Login or Signup
</header>
CSS
body {
font-family: 'open sans';
color: #333;
}
header {
padding: 20px 20px 20px 50px;
}
a {
color: #333;
text-decoration: none;
}
h1, h2 {
font-weight: 300;
}
Desired Outcome
Here is a working solution:
DEMO
html
<header>
Login or Signup
<h1>Heading</h1>
<p>A clean, minimal, grid-based layout focusing attention on your work.</p>
</header>
css
body {
font-family: 'open sans';
color: #333;
}
header {
padding: 20px 20px 20px 50px;
}
header a {
color: #333;
text-decoration: none;
float: right;
padding-top: 30px;
}
h1, h2 {
font-weight: 300;
}
First thing, please write html in correct way and write css with class name.
here is your answer :
HTML :
<header>
<h1>Heading</h1>
Login or Signup
<p>A clean, minimal, grid-based layout focusing attention on your work</p>
</header>
CSS :
* {
padding: 0;
margin: 0;
}
body {
font-family: 'open sans';
color: #333;
}
header {
padding: 20px;
}
a {
color: #333;
text-decoration: none;
float: right;
}
h1, h2 {
font-weight: 300;
margin :0;
padding: 0;
}
header h1{
width: 70%;
display: inline-block;
}
header a{
width: 30%;
display: inline-block;
padding-top: 10px;
}
Demo Link
Some small changes. the H1 and p have full width so a must be below p. Change the css to
a {
color: #333;
text-decoration: none;
float: right;
margin-right: 70px;
}
p{width: 70%;float: left;}
h1, h2 {
font-weight: 300;
width: 70%;
float: left;
}
Will work fine.
First of all there is a missing > at the end of <p>...</p>
Then try this :
CSS
a
{
color: #333;
text-decoration: none;
display : block;
float : right;
}
HTML
<header>
Login or Signup
<h1>Heading</h1>
<p>A clean, minimal, grid-based layout focusing attention on your work.</p>
</header>
And the jsFiddle http://jsfiddle.net/HxWNh/
<div class="wrapper" style="margin:auto; width:960px:">
<div class="header" style="height:80px;">
<div style="float:left">
<h1 style="float: left;">Heading</h1>
</div>
<div class="login" style="float:right">
Login or Signup
</div>
</div>
<div class="DisplayArea" style="float:left;">
<p>A clean, minimal, grid-based layout focusing attention on your work.</p>
</div>
</div>
.wrapper{
margin:auto;
width:960px;
}
See if this helps...
i always find it easy to easy n convenient to position elements using .