I have 3 items (boxes) within my flexbox that I want to use as hyperlinks. However, when I wrap the in tags it completely breaks the layout. How can I set each item (box) as a hyperlink so that users can click the entire area and it takes them to another website? As of now, I have the text within the boxes set as links. But I want to use the entire box as a link.
Here is a codepen for it: https://codepen.io/mrhoward/pen/dqqOxj
HTML:
<!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, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div class="col gaming"><h3 class="title">1</h3></div>
<div class="col music"><h3 class="title">2</h3></div>
<div class="col dev"><h3 class="title">3</h3></div>
</div>
</body>
</html>
CSS:
body {
background: #333;
color: #fff;
padding: 20px;
}
a {
text-decoration: none;
}
/* FLEXBOX */
* {
box-sizing: border-box;
}
.col {
padding: 20px;
}
.maincontain {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between;
}
.maincontain .col {
width: 32%;
height:400px;
align-items: stretch;
}
#media only screen and (max-width: 40em) {
.maincontain {
flex-direction: column;
height: 300px;
margin: 0 0 10px 0;
}
}
#media only screen and (max-width: 40em) {
.maincontain .col {width: 100%;}
.maincontain h3 { font-size: 1.3vh}
}
/* Item Stylig */
.gaming {
background: #d836eb;
}
.music {
background: #0000ff;
}
.dev {
background: #00ff00;
}
/* Font Styling */
h1 {
font-size:5vw;
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
text-align: center;
padding: 50px;
}
h2 {
font-size:2vw;
font-family: 'Press Start 2P', cursive;
text-align: center;
padding: 0px 0px 20px 0px;
}
h3 {
font-size: 1.3vw;
font-family: 'Press Start 2P', cursive;
padding-top: 10px;
object-fit: cover;
}
.title{
color: white;
text-shadow: 1px 1px 4px #000000;
}
check this example:
<div id="select">
<p class="options left">
<a id="leftq" href="#selectionSet">the quick brown fox jumps over the lazy</a>
</p>
<p class="options right">
<a id="rightq" href="#selectionSet">dog</a>
</p>
</div>
#select {
color: #fff;
float: left;
height: 188px;
width: 631px;
}
#select p.options {
color: #FFFFFF;
float: left;
font-family: 'ComfortaaBold',cursive;
font-size: 20px;
height: 100%;
margin: 0 auto;
text-align: center;
width: 48%;
}
p.options.left {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-left-radius: 100px;
border-right: 2px solid #FFFFFF;
border-top-left-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
p.options.right {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-right-radius: 100px;
border-left: 2px solid #FFFFFF;
border-top-right-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
#select p.options a {
color: #636363;
padding: 80px 0;
text-decoration: none;
display:block;
width:100%;
}
#select p.options a:hover {
color: #FFFFFF;
}
p.options.right:hover, p.options.left:hover {
background-color: #00AEEF !important;
}
.rightq {
width: 100%;
}
Below is a link to a pen I forked and saved =>
https://codepen.io/kipomaha/pen/OooWXL
Below is the HTML, I changed the class from the div and put it onto the a element that I wraps the div.
<!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, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div><h3 class="title">1</h3></div>
<div><h3 class="title">2</h3></div>
<a class="col dev" href="#"><div><h3 class="title">3</h3></div></a>
</div>
</body>
</html>
Try adding the <a> tag inside <h3> element like below
<h3><a hrer =""><a></h3>
With
. maincontain a{
display :block;
}
Related
I wonder why my code not works! I want to center my images on my two circle shape but currently I do not understand why they are not centered despite having set everything right, in my opinion, I hope someone can help me, thanks. This is my code!
with width and height 100% there is no problems, but I would like to leave some space on the sides of the internal images
* {box-sizing: border-box;}
body {
margin: 0;
font-family: "DM Sans", sans-serif;
overflow: auto;
}
button, a {
cursor: pointer;
}
.header {
background-color: #f1f1f1;
width: 100%;
padding: 0.5% 5%;
}
.header-left, .header-right {
color: var(--main-color);
padding: 0 2%;
}
.menu {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.social {
color: var(--main-color);
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
padding: 0;
}
.social-button {
text-decoration: none !important;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 20px;
position: relative;
color: #1F1C2E; /* colore icona */
border: 2px solid #1F1C2E; /* colore bordo */
padding: 0;
}
#kofi_img, #github_img {
text-align: center;
width: 100%;
display: inline-flex;
margin: auto;
padding: 2%;
}
.header span, a, button {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
border-radius: 4px;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
</head>
<body>
<header class="header">
<div class="header-left">
<span id="name" class="name menu">mySite</span>
</div>
<div class="header-right">
<div class="social">
<a id="github" class="social-button menu" target="_blank" href="https://github.com">
<img src="https://i.ibb.co/LZfPtzn/Git-Hub-Mark-64px.png" alt="GitHub" height="84%" width="84%">
</a>
<a id="kofi" class="social-button menu" target="_blank" href="https://ko-fi.com">
<img src="https://i.ibb.co/PCyyCY8/kofi.png" alt="kofi" height="84%" width="84%"></img>
</a>
</div>
</div>
</header>
</body>
I can see a small discrepancy of white space between edges of images icons and borders.
Maybe try removing width and height percentages from your HTML and using CSS to apply these sizes, instead.
This stretched the images to fit more centered.
Your icons are collapsing when the screen resizes, as well. Adding a containing div or other semantic tag will keep this from occurring.
Lastly, your #kofi_img and #github_img selectors aren't doing what you may think.
By removing the underscores from each, you will indeed be selecting the images within those anchors!
Here's my code:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
</head>
<body>
<div class="social">
<div class="icon_container">
<a id="github" class="social-button menu" target="_blank" href="https://github.com">
<img src="https://i.ibb.co/LZfPtzn/Git-Hub-Mark-64px.png" alt="GitHub">
</a>
</div>
<div class="icon_container">
<a id="github" class="social-button menu" target="_blank" href="https://github.com">
<img src="https://i.ibb.co/LZfPtzn/Git-Hub-Mark-64px.png" alt="GitHub">
</a>
</div>
</div>
</body>
.social {
color: var(--main-color);
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
padding: 0;
}
.icon_container {
background-color: coral;
}
.social-button {
background-color: teal;
text-decoration: none !important;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 20px;
position: relative;
color: #1F1C2E; /* colore icona */
border: 2px solid #1F1C2E; /* colore bordo */
padding: 0;
}
#kofi img, #github img {
width: 85%;
text-align: center;
margin: auto;
padding: 2%;
}
Here's a fiddle: https://jsfiddle.net/permalik/0csfnu6L/32/
If you look closely at the Github image you can see that it is not itself absolutely centered - you are bound to get a larger gap at the bottom of the circle than at the top. Here is a blown up screen shot:
I can't see the same problem with the kofi logo
I have a vertical menu div and a paragraph div each in a separate line but I want them glued beside each other.
body {
margin: 0;
padding: 0;
background-color: rgb(252, 252, 252);
}
link {
display: none;
}
.vertical-men {
width: 130px;
margin-left: 10px;
margin-top: 25px;
text-align: center;
}
.vertical-men a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
transition-duration: 0.7s;
}
.vertical-men a:hover {
background-color: #ccc;
}
.vertical-men a.activate {
background-color: #4CAF50;
color: white;
}
.container-men {
border: black solid 3px;
width: 50%;
}
<html lang="">
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="header"></div>
<p id="p1" class="head-1">example</p>
<img id="imag" alt="logo" src="logo-black.png">
<br>
</header>
<main>
<div class="vertical-men">
Home
Link 1
Link 2
Link 3
Link 4
</div>
<div class="container-men">
</div>
</main>
</body>
</html>
I just want the innertext (class="container-men") to be animatedly changed by clicking on each (class="vertical-men")
and also I'd be really grateful if you could give me the Javascript codes for that purpose. thanks a lot!!
There are multiple ways to achieve what you try. CSS-Grid, Flexbox, Float... However the modern techniques are to use either flexbox or css-grid.
Using a CSS-Grid:
You use the container main and change it into a grid layout by applying display: grid;. Then you add a 2 column layout with grid-template-columns: min-content auto;. That way The navbar will consume as much space as declared and the content all remaining space.
body {
margin: 0;
padding: 0;
background-color: rgb(252, 252, 252);
}
link {
display: none;
}
.vertical-men {
width: 130px;
margin-left: 10px;
margin-top: 25px;
text-align: center;
}
.vertical-men a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
transition-duration: 0.7s;
}
.vertical-men a:hover {
background-color: #ccc;
}
.vertical-men a.activate {
background-color: #4CAF50;
color: white;
}
.container-men {
border: black solid 3px;
width: 50%;
}
/* added changes */
.vertical-men {
margin: 0;
}
.container-men {
width: auto;
}
main {
margin-top: 25px;
padding: 0 10px;
display: grid;
grid-template-columns: min-content auto;
}
<html lang="">
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="header"></div>
<p id="p1" class="head-1">example</p>
<img id="imag" alt="logo" src="logo-black.png">
<br>
</header>
<main>
<div class="vertical-men">
Home
Link 1
Link 2
Link 3
Link 4
</div>
<div class="container-men">
</div>
</main>
</body>
</html>
Using Flexbox:
In this case you use display: flex; on the container (<main>). Then you can use flex-direction: row; to align the 2 elements next to each other. To span the content the remaining width, you can use flex-grow: 1; on the content element.
body {
margin: 0;
padding: 0;
background-color: rgb(252, 252, 252);
}
link {
display: none;
}
.vertical-men {
width: 130px;
margin-left: 10px;
margin-top: 25px;
text-align: center;
}
.vertical-men a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
transition-duration: 0.7s;
}
.vertical-men a:hover {
background-color: #ccc;
}
.vertical-men a.activate {
background-color: #4CAF50;
color: white;
}
.container-men {
border: black solid 3px;
width: 50%;
}
/* added changes */
.vertical-men {
margin: 0;
}
.container-men {
flex-grow: 1;
}
main {
margin-top: 25px;
padding: 0 10px;
display: flex;
flex-direction: row;
}
<html lang="">
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="header"></div>
<p id="p1" class="head-1">example</p>
<img id="imag" alt="logo" src="logo-black.png">
<br>
</header>
<main>
<div class="vertical-men">
Home
Link 1
Link 2
Link 3
Link 4
</div>
<div class="container-men">
</div>
</main>
</body>
</html>
I've been working on my website the entire day but now I suddenly noticed that in mobile format my buttons (the logo and the menu button they are called #logo and #menu-icon) don't work anymore. The used to work some time ago. And in the desktop (over 768 pixel wide) version they all work fine.
/*--------STYLE.CSS--------*/
#import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300,500,700');
* {
margin: 0;
padding: 0;
border: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background: #424949;
color: #f5f5f5;
font-family: 'Alegreya Sans', sans-serif;
margin: 0;
}
h2 {
font-size: 250%;
font-weight: 700;
text-align: center;
padding-top: 2%;
}
p {
font-size: 160%;
font-weight: 500;
line-height: 150%;
padding: 3%;
text-indent: 2%;
text-align: justify;
}
img {
max-width: 100%;
height: auto;
width: auto;
margin-bottom: -4px;
}
header {
background-color: #1a1a1a;
width: 100%;
height: 86px;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
#logo {
margin: -5px 0 -5px 20px;
padding: 0 10px 0 10px;/*top right bottom left*/
float: left;
width: 96px;
height: 96px;
background: url(img/logohead96x.png) no-repeat center; /*org img/logo128x.png*/
}
nav {
float: right;
padding: 4px 20px 0 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style-type: none;
margin-right: 10px;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
margin-top: 35px;
}
nav ul li a {
color:#f5f5f5;
text-decoration: none;
padding: 25px;
}
nav ul li a:hover {
color: #707b7c;
}
.current {
color: #707b7c;
}
.container {
overflow: hidden;
width: 100%;
height: auto; /*calc(100% - 86px - 29px)*/
background-color: #1a1a1a;
}
.container-inner {
height: 100%;
max-width: 1100px;
margin: 0 auto;
}
.container img {
max-height: 100%;
min-width: 100%;
height: 100%;
}
.container video {
max-height: 100%;
min-width: 100%;
height: 100%;
}
footer {
background: #1a1a1a;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i {
font-size: 460%;
margin: 1%;
padding: 5% 5% 5% 4%;
color: #707b7c
}
.social i:hover {
color: #f5f5f5;
}
footer.second {
background-color: #424949;
margin: 0;
}
footer.second p {
margin: 4px 0 0 0; /*top right bottom left*/
padding: 0 0 0 0;
text-align: left;
font-size: 130%;
font-family: 'Alegreya Sans', sans-serif;
}
/*--------MEDIA--------*/
#media screen and (max-width: 768px) {
h2 {
font-size: 150%;
}
p {
font-size: 120%;
}
header {
position: absolute;
}
#logo {
margin: -5px 5px -5px 5px;
background: url(img/logohead64x.png) no-repeat center;
}
#menu-icon {
display: inline-block;
}
nav {
padding: 25px;
}
nav ul, nav:active ul {
display: none;
z-index: 1;
position: absolute;
padding: 20px;
background: #1a1a1a;
right: 20px;
top: 60px;
border: 3px solid #ffffff;
border-radius: 10px 0 10px 10px;
width: 40%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0 10px 0;
}
.banner {
padding-top: 86px;
}
.social i {
font-size: 180%;
}
}
<!-- Home page of slothy.cloud -->
<!DOCTYPE html>
<html>
<!--
My small cozy website.
© veryslothysloth 2018
-->
<head>
<!-- Links -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#2e86c1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Open Graph Protocol -->
<meta property="og:url" content="://slothy.cloud" />
<meta property="og:type" content="website" />
<meta property="og:title" content="slothy.cloud | by veryslothysloth" />
<meta property="og:description" content="A small slothy website." />
<meta property="og:image" content="img/slothyicon.png" />
<meta property="og:image:secure_url" content="img/slothyicon.png" />
<!-- Twitter card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="slothy.cloud |by veryslothysloth">
<meta name="twitter:description" content="A small slothy website.">
<meta name="twitter:image" content="img/slothyicon.png">
<meta name="twitter:image:src" content="img/slothyicon.png">
<!-- Data -->
<title>slothy.cloud | by veryslothysloth</title>
<meta charset="utf-8">
<meta name="description" content="A small slothy website.">
<meta name="keywords" content="sloth,slothy,veryslothysloth,file,upload,hosting,lolisafe">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#aed6f1">
</head>
<body>
<header>
<!-- Header -->
<div id="header-inner">
<nav>
<ul>
<li>Home</li>
<li>Cloud</li>
<li>Stat</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!-- Main Body -->
<div class="container">
<video loop>
<source src="img/alley.mp4" type="video/mp4">
</video>
<!--<div class="container-inner">
<p>Test Text</p>
</div>-->
</div>
<!-- Footer -->
<footer>
<ul class="social">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-steam"></i></li>
<li><i class="fa fa-at"></i></li>
</ul>
</footer>
<!-- Second Footer -->
<footer class="second">
<p>© veryslothysloth</p>
</footer>
</body>
</html>
This may be a completely stupid mistake or small typo but I'm quite tired and can't seem to figure this out myself with my really limited coding skills... I'm quite new to all this. Thanks in advance!
The div .container lies over the nav and menu-icon. So the hover doesnt works.
add a z-index to the header to solve it
header {
z-index: 99;
}
I'm not 100% sure what "they don't work" means, but it does stand out that one of the links is to index.html and the other is to #. The first will reload the current page (assuming the HTML you provided is index.html, the second will scroll the current page to the top. What behavior are you seeing, and what behavior are you looking for?
When moving my div container from float:center; to float:left;
Ideally i'd like for the button to touch the bottom of the div "self"
It adds extra space below my contact button.
Any suggestions?
I've tried playing with margin, padding,overflow:hidden; etc inside the div container .self in the CSS file but with no luck.
body{
/*background-color: rgb(17, 17, 17);*/
background-color: ghostwhite;
}
.self {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
height:auto;
margin: auto;
text-align: center;
font-family: sans-serif;
background-color: ghostwhite;
float:left;
}
.title {
color: black;
font-family: sans-serif;
font-size: 18px;
}
ul.school {
list-style:none;
list-style-position: inside;
padding-left:0;
margin-left:0;
}
.degrees{
color: black;
font-family: sans-serif;
font-size: 14px;
}
button {
border: none;
outline: 0;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover, a:hover {
opacity: 0.7;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Steven Amerman">
<meta name="pragma" content="no-cache">
<link rel="stylesheet" type = "text/css" href="..\css\index.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Steven Amerman</title>
</head>
<body>
<div class="self">
<img src="..\images\Steven.png" alt="Steven Amerman" style="width:100%">
<h1>Steven Amerman</h1>
<p class="title">Software Developer</p>
<ul class="school">
<li><img src="../images/wvuIcon.png" id="wvuIcon" alt="WVU" style="width:20px; height:20px"> West Virginia University</li>
</ul>
<p class="degrees">B.S. in Computer Science</p>
<i class="fa fa-linkedin-square"></i>
<p><button>Contact</button></p>
</div>
</body>
</html>
extra space
no space
The issue is on the p tag's margin containing the contact button. You should change its margin to 0, for instance:
.self p:last-child{
margin-bottom: 0px;
}
Just remove the <p></p> tags around the button at the bottom.
body {
/*background-color: rgb(17, 17, 17);*/
background-color: ghostwhite;
}
.self {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
height: auto;
margin: auto;
text-align: center;
font-family: sans-serif;
background-color: ghostwhite;
float: left;
}
.title {
color: black;
font-family: sans-serif;
font-size: 18px;
}
ul.school {
list-style: none;
list-style-position: inside;
padding-left: 0;
margin-left: 0;
}
.degrees {
color: black;
font-family: sans-serif;
font-size: 14px;
}
button {
border: none;
outline: 0;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover,
a:hover {
opacity: 0.7;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Steven Amerman">
<meta name="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="..\css\index.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Steven Amerman</title>
</head>
<body>
<div class="self">
<img src="..\images\Steven.png" alt="Steven Amerman" style="width:100%">
<h1>Steven Amerman</h1>
<p class="title">Software Developer</p>
<ul class="school">
<li><img src="../images/wvuIcon.png" id="wvuIcon" alt="WVU" style="width:20px; height:20px"> West Virginia University</li>
</ul>
<p class="degrees">B.S. in Computer Science</p>
<i class="fa fa-linkedin-square"></i>
<button>Contact</button>
</div>
</body>
</html>
Cheers! So I've got this page, you know? And I'm practicing some of this html/css stuff in my spare time, it looks fun, and I've got this title on my front page and I want to add a subtitle under it, that is aligned to the left of the title, but I've got no idea and I can't find it anywhere on the web. I've got knackered, and I'm no longer in the mood. I marked the place where I want to slap the text.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Anime-uri online, cu subtitrare în limba română." />
<meta name="author" content="Redd" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<title>Taciturn | 沈黙寡言</title>
<link rel="stylesheet" type="text/css" href="/assets/css/bss.css" />
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>沈黙寡言</h1>
<a class="button" href="/portal.php">Portal</a>
</div>
</div>
</section>
</body>
#import url('https://fonts.googleapis.com/css?family=Raleway');
#import url('https://fonts.googleapis.com/css?family=Oswald');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url(/assets/img/biX0.jpg) no-repeat;
display: table;
top: 0;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 500px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: 'Raleway', sans-serif;
color: #AE070A;
text-shadow: 0px 0px 300px #000;
font-size: 600%;
-webkit-text-stroke: 0.5px #FFF;
}
.button {
border-radius: 9px;
font-family: 'Oswald', sans-serif;
color: #036AB1;
font-size: 140%;
padding: 10px 20px;
border: solid #036AB1 3px;
text-transform: uppercase;
text-decoration: none;
}
.button:hover {
color: #AE070A;
border: solid #AE070A 3px;
}
/* Paragraph
p {
font-size: 160%;
line-height: 210%;
text-align: justify;
margin: 3%;
font-family: sans-serif;
}
Paragraph */
#media screen and (max-width: 768px) {
.content h1 {
font-size: 250%;
}
.button {
font-size: 110%;
padding: 7px 15px;
}
p {
font-size: 100%;
line-height: 160%;
}
}
align left in css will do, but you need put your sub title inside same code block.