I do not want a space between my left page and the first box (home box) in my navigation bar. I attached a picture below to show what I mean.
here is the picture
And here is my HTML and CSS code. Please help I am new to HTML and CSS.If you notice any unusual codes or syntax and you know a better way to do it. Please let me know. Thank you so much for helping.
<!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">
<title>hello from amy</title>
<!-- Title is name of the page -->
<script src="https://kit.fontawesome.com/1c8222ee2c.js"
crossorigin="anonymous"></script>
</head>
<style>
h1{
font-size: 30px;
margin-bottom: -10px;
}
body{
background-color: white;
font-size: medium;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.center{
max-width: 500px;
margin: auto;
padding: 10px;
}
.topnav {
overflow: hidden;
background-color: black;
}
.topnav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color:white;
color: black;
}
.topnav a.active {
background-color:white;
color: black;
}
</style>
<body class="left">
<div class="topnav">
<a class="active" href="#home"> <i class="fa fa-fw fa-home"></i> home</a>
<i class="fa-solid fa-ship"></i> my journey
<i class="fa-solid fa-diagram-project"></i> my projects
<i class="fa fa-fw fa-envelope"></i> Login contact
</div>
<h1>hong thy nguyen <i class="fa-brands fa-space-awesome"></i> </h1>
<p>
"you can never cross the ocean until you have the courage to lose sight of the shore" - Christopher Columbus
</p>
<p>here is some information about me <i class="fa-regular fa-face-grin-beam"></i>
</p>
<p> preferred name: <i>amy</i></p>
<p>age: 21</p>
<p>education: university of central florida</p>
<p>major: computer science</p>
<p>year: first year</p>
<p>hobbies: drinking coffee <i class="fa-solid fa-mug-hot"></i> and writting code <i class="fa-solid fa-laptop"></i> in the morning</p>
<p>here is my youtube channel: Link
</p>
<p>give a look at all projects that I have done: Porject Page</p>
</body>
Related
So, recently I've been learning some coding for my course.
I've experimented with a few ideas, and I'm currently making this top header ("topbar") that acts as a mini-header just above the actual header, which displays some extra info.
Unfortunately, I'm a bit of a coding noob and I can't figure out what's going wrong in this code. If you run it, you'll see the social media icons on the right (I'm using Font Awesome) aren't in the header and it's a pain to try and get them there. They should be in line with the elements on the left (middle of the topbar in terms of height, and 30px inwards from the right).
I've played around with padding, margin, align and a bunch of other things but I just can't figure it out. Any help?
HTML 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">
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Noto+Sans+JP&family=Salsa&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>TestWeb</title>
</head>
<body>
<!-- ======= Top Bar ======= -->
<section id="topbar" class="d-flex align-items-center">
<div class="container d-flex justify-content-center justify-content-md-between">
<div class="contact-info d-flex align-items-center">
<i class="fa fa-envelope d-flex align-items-center">contact#example.com</i>
<i class="fa fa-map-marker d-flex align-items-center">1 Avenue, London, AB12 0AB</i>
<i class="fa fa-phone d-flex align-items-center ms-4"><span>123 456 78900</span></i>
<div class="social-links d-flec align-items-center">
<i class="fa fa-twitter d-flex align-items-center"></i>
<i class="fa fa-instagram d-flex align-items-center"></i>
<i class="fa fa-facebook-square d-flex align-items-center"></i>
</div>
</div>
</div>
</section>
</body>
</html>
CSS CODE:
/* ==============================
========== G L O B A L ==========
============================== */
*{
margin: 0;
padding: 0;
}
/* =============================
========= T O P B A R =========
============================= */
#topbar{
height: 30px;
width: 100%;
background-color: #313030;
color: white;
font-size: 14px;
font-family: 'Noto Sans JP', sans-serif;
transition: all 0.3s;
padding: 0;
padding-top: 5px;
padding-left: 10px;
}
#topbar .contact-info i a, #topbar .contact-info i span{
padding-left: 5px;
color: #A1B82B;
font-family: 'Noto Sans JP', sans-serif;
text-decoration: none;
}
#topbar .contact-info i a{
line-height: 0;
transition: 0.3s;
transition: 0.3s;
padding: 30px;
padding-left: 5px;
color: #A1B82B;
}
#topbar .contact-info i:hover{
text-decoration: underline;
}
#topbar .social-links i{
float: right;
color: white;
transition: 0.3s;
padding-right: 5px;
}
#topbar .social-links i:hover{
color: #909090;
text-decoration: none;
cursor: pointer;
}
The reason your social media icons aren't in line with everything else is because they are actually going below it.
Take a look at this image:
As you can see, the dashed blue line is your .social-links div, and it is going below the other items in your menu.
Why is this happening?
The reason this is happening is because by default a div has a display property of block
display: block means that the element should start on a new line, and take up the entire width of it's parent.
So, long story short, to fix your problem you could add something like:
#topbar .social-links{
float: right;
}
This code will make your .social-links div appear on the same line as the other items in your menu, as well as be forced to the right hand side of the navigation bar (which I'm assuming is where you want it.)
Now the icons are in the menu bar, but they're stuck to the top. To fix that remove this line of code:
#topbar .social-links i{
/* float: right; <-- REMOVE THIS */
color: white;
transition: 0.3s;
padding-right: 5px;
}
Just a side note, it looks like you're using a lot of unneeded classes in your HTML, try to only use a class if you have actual CSS written for it :)
Here's a working example of your site:
https://codepen.io/jacobcambell/pen/zYzzrjW
Hope this helped!
I'm very new to coding and have been just trying to code in my spare time. I have a code that when I go to view it has an obvious delay in the CSS. When you first load it for about a second the background will show as solid pink, the font changes, and the social media icons do not appear at the bottom of the screen. I have tried to search through here for answers, but the situations I've found that are similar to mine I didn't quite understand the answers as I have only been coding for about 3 weeks now.
Below is my HTML code and my CSS code:
/* BODY */
body {
background-image: url('https://i.ibb.co/vPn6tqR/clouds.jpg');
}
.cover-body {
background-color: #ffd5cd;
font-family: 'Libre Baskerville', serif;
color: #8675a9;
position: relative;
text-align: center;
height: 100%;
}
.cover-btn {
font-size: 80%;
font-weight: bold;
color: #8675a9;
letter-spacing: 1.5px;
border-width: medium;
}
.cover-btn:hover {
color: #2e2933;
}
.cover-header {
font-family: 'Great Vibes', cursive;
font-size: 6rem;
}
.cover-p {
margin-top: 15%;
margin-left: 20%;
font-size: 1.5rem;
}
.pc-cover-logo {
height: 6rem;
width: 7rem;
position: absolute;
right: 63%;
bottom:84%;
}
/* FOOTER */
a {
color: #8675a9;
}
a:hover {
color: #c3aed6;
}
.footer {
font-size: 80%;
margin-top: 6%;
margin-bottom: 0;
}
.social-media-icons {
word-spacing: 1.5rem;
padding-bottom: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<head>
<meta charset="utf-8">
<meta name="viewport" content ="width=device-width, initial-scale=1">
<title>Palette Clouds</title>
<!-- Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Libre+Baskerville&display=swap" rel="stylesheet">
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css" />
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/8346f7b19f.js" crossorigin="anonymous"></script>
</head>
<!-- BODY -->
<body class="cover-body">
<img alt="photo of clouds" class="pc-cover-logo" src="https://i.ibb.co/KrXCrp2/PC-Logo.png">
<p class="cover-p">welcome to</p>
<h1 class="cover-header">Palette Clouds</h1>
<button type="button" class="btn btn-outline-light cover-btn">coming soon</button>
<!-- FOOTER -->
<footer class="footer">
<div class="social-media-icons">
<a class="fab fa-twitter fa-2x" href="https://twitter.com/paletteclouds" target="_blank"></a>
<a class="fab fa-facebook-f fa-2x" href="https://www.facebook.com/PaletteClouds/" target="_blank"></a>
<a class="fab fa-instagram fa-2x" href="https://www.instagram.com/paletteclouds/" target="_blank"></a>
<a class="fas fa-envelope fa-2x" href="mailto:dionna#paletteclouds.com"></a>
</div>
<p>© 2020 Palette Clouds</p>
</footer>
</body>
</html>
Any help or suggestions would be much appreciated!!
Try adding an inline style like this:
<body class="cover-body" style="background-color: #ffd5cd;">
It makes it just that little bit faster and seems to prevent the flicker.
Update your css too:
.cover-body {
font-family: 'Libre Baskerville', serif;
color: #8675a9;
position: relative;
text-align: center;
height: 100%;
}
https://jsfiddle.net/e23udzk8/
How pages normally load is as follow:
HTML render first then css is called.
So here your image is called later (the few secs delay that you wait between html render and css), so a hack I use would be having a hidden image tag with the background source so the image source used in the background image will be loaded in the html render therefore faster and causing no delay until css load.
Also please notice that one reason of the delay is the huge size of the image so reducing the image size will decrease the loading time as well.
body {
background-image: url('https://i.ibb.co/vPn6tqR/clouds.jpg');
}
.cover-body {
background-color: #ffd5cd;
font-family: 'Libre Baskerville', serif;
color: #8675a9;
position: relative;
text-align: center;
height: 100%;
}
.cover-btn {
font-size: 80%;
font-weight: bold;
color: #8675a9;
letter-spacing: 1.5px;
border-width: medium;
}
.cover-btn:hover {
color: #2e2933;
}
.cover-header {
font-family: 'Great Vibes', cursive;
font-size: 6rem;
}
.cover-p {
margin-top: 15%;
margin-left: 20%;
font-size: 1.5rem;
}
.pc-cover-logo {
height: 6rem;
width: 7rem;
position: absolute;
right: 63%;
bottom:84%;
}
img {
display: none; //Added Code
}
<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<head>
<meta charset="utf-8">
<meta name="viewport" content ="width=device-width, initial-scale=1">
<title>Palette Clouds</title>
<!-- Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Libre+Baskerville&display=swap" rel="stylesheet">
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css" />
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/8346f7b19f.js" crossorigin="anonymous"></script>
</head>
<!-- BODY -->
<body class="cover-body">
<img alt="photo of clouds" class="pc-cover-logo" src="https://i.ibb.co/KrXCrp2/PC-Logo.png">
<p class="cover-p">welcome to</p>
<h1 class="cover-header">Palette Clouds</h1>
<button type="button" class="btn btn-outline-light cover-btn">coming soon</button>
<!-- FOOTER -->
<footer class="footer">
<div class="social-media-icons">
<a class="fab fa-twitter fa-2x" href="https://twitter.com/paletteclouds" target="_blank"></a>
<a class="fab fa-facebook-f fa-2x" href="https://www.facebook.com/PaletteClouds/" target="_blank"></a>
<a class="fab fa-instagram fa-2x" href="https://www.instagram.com/paletteclouds/" target="_blank"></a>
<a class="fas fa-envelope fa-2x" href="mailto:dionna#paletteclouds.com"></a>
</div>
<p>© 2020 Palette Clouds</p>
</footer>
<img src='https://i.ibb.co/vPn6tqR/clouds.jpg'/> //Added Code
</body>
</html>
Hello Peeps
Thanks a lot for taking your time in reading this. I am new in Wordpress. I want to update my footer.
I wrote an HTML code for my footer which I was going to use on Customisation>Layout>Footer.
But I am unable to link bootstrap 4 with that as the code window automatically removes the linked bootsrap line,
So I tried to add a footer widget but it is affecting my whole page. I want to use bootstrap 4 to make my footer responsive.
I don't know how to use media libraries. I managed to make my footer responsive with grid system (col-sm-12 , col-lg-4) but whenever I import my bootstrap 4 link.
Can you please help me on how should I make my footer responsive?
If you want to check it live
You can see footer of this page : https://techdevio.com/about/
Do not check footer of homepage as it is made by thrive architect and I was just trying to replicate it by writing code.
If you have any suggestions on how to make that code responsive without using bootstrap I would appreciate that too. :)
Thanks In Advance
.bg {
background-color: rgb(49, 65, 140);
color: white;
}
a {
color: white;
text-decoration: none;
}
.container {
text-align: center;
}
#social {
margin: 60px 0px auto;
overflow: hidden;
text-align: center;
}
#media screen and (max-width: 768px) {
#social {
margin: 26px auto;
}
}
#social ul {
margin: 0px auto;
list-style-type: none;
padding: 0px;
}
#social ul.social,
#social ul.contact {
display: inline-block;
}
#social li {
margin: 0 17px 0 0;
float: left;
color: black;
}
#media only screen and (max-width: 495px) {
#social li {
margin: 0 0 10px 0;
float: none;
clear: both;
}
}
#social li a {
color: black;
}
#social ul.social,
#social ul.contact {
display: inline-block;
}
.category {
font-weight: bold;
font-family: Literata !important;
font-size: 19px !important;
--g-regular-weight: 400;
--g-bold-weight: 700;
}
.cat-2 {
font-size: 18px;
font-family: Muli;
font-weight: 300 !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<footer class="bg">
<div class="container pt-3">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
Tech Dev I/O
<p>Tech Dev I/O Keeps You Updated With Latest Tech News & Gadgets. We Also provide Reviews Of Trending Gadgets </div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
<p class="category">Information</p>
<p>➤ Contact us</p>
<p>➤ About us</li>
<p>➤ Privacy policy</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
<p class="category">Contact Us</p>
<p> <i class="fa fa-phone" aria-hidden="true"></i>📱 +91 89998 17454</p>
<p><a class="cat-2" href="https://www.google.com/maps/place/Pune,+Maharashtra/#18.5245649,73.7228812,11z/data=!3m1!4b1!4m5!3m4!1s0x3bc2bf2e67461101:0x828d43bf9d9ee343!8m2!3d18.5204303!4d73.8567437" target="_blank"><i class="fa fa-map-marker" aria-hidden="true"></i>
📌 123, Society, Pune, MH 440013</a></li>
</p>
<p>
<i class="fa fa-envelope" aria-hidden="true"></i> 📧 techdevio20#gmail.com
</p>
</ul>
</div>
</div>
</div>
<div id="social">
<ul class="social">
<li><a target="_blank" href="https://www.facebook.com/techdevio.io">Facebook</a></li>
<li><a target="_blank" href="https://twitter.com/TechDev17">Twitter</a></li>
<li><a target="_blank" href="https://www.instagram.com/techdevio/">Instagram</a></li>
<li class="last"><a target="_blank" href="https://in.pinterest.com/techdevio/">Pintrest</a></li>
</ul>
</div>
<div id="social" style="margin-top: 0px;">
<p>©2020 Tech Dev I/O</p>
</div>
</footer>
</body>
</html>
You cannot apply stylesheets for specific HTML tags. You can scope them, for example - make all rules in the stylesheet related to the given tag/selector:
footer.bg {
/* Some footer styles */
}
footer.bg .category{
/* Some footer category styles */
}
but these styles are applied globally. Whenever the rule is matched, its styles are applied accordingly.
In your case, from what I understand, you need the Bootstrap grid tools like col, row, etc., but the import of the whole Bootstrap CSS overrides and breaks the styles you already have on that page.
There is an official Bootstrap grid CSS, which will provide only those responsive grid utilities. Keep in mind that it also comes with some display and flexbox utilities as well, which may potentially clash with some of your styles if you happen to use the same classes.
Here's the link: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap-grid.min.css
I want to create different pages corresponding to the information on the nav bar that is accessible by clicking on the buttons. How is this achieved? Here is the code for the Nav Bar, additional information will be given on request.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
</style>
<body>
<div class="navbar">
<a class="active" href="#Home"><i class="fa fa-fw fa-home"></i> Home</a>
<i class="fa fa-fw fa-search"></i> search
<i class="fa fa-fw fa-envelope"></i> Contact
<i class="fa fa-fw fa-user"></i> More Info
</div>
</body>
You link to other pages by placing the path to the files of those pages in href. Say if you have a file named search.html in the same folder, you would link to it using this a tag:
search
If the file is outside of the folder, you use ../ to navigate out of the folder. For example, if contact.html is in another folder called pages, you would do ../pages/contact.html.
if you have move one page to another page using html only, you can use href tag. "page.html" is a page which u have to move on button click here is code....
And make sure that page.html file should be present in same folder or if not then change the path in href accordingly
<button >Click me</button>
Want to add my uni and free Code Camp projects on my website. I'm trying to make text float left and picture float right along with being mobile friendly. For some reason I can only see picture on desktop version but not on mobile. Picture is not displaying on mobile. Only text on the right. At first I've been trying to give text col-xs-2 col-sm-2 and img src="" col-xs-8 col-sm-8 but it didn't work. Now I'm trying to achieve desirable result by making this picture as a background for that section=projects but still doesn't work. How can I include picture on the right? Can't figure out what am I doing wrong? Please help.
Please find pictures attached.
Here is my website: http://www.kiljakandweb.com
Here is my **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">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="javascript/main.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<section id="header" class="text-center">
<h1>Kiljak<br> + Web </h1>
<br>
<br>
<br>
<h3> I'm a freelance front-end web developer <br> based in London. I develop responsive, high-performance <br>websites using HTML5, CSS, and JavaScript.
</h3>
<br>
<i class="fa fa-chevron-circle-down fa-3x" aria-hidden="true"></i>
</section>
<section class="projects">
<div class="row">
<div class="col-sm-4 col-xs-4 col-md-5 col-lg-5">
<h2><span style="font-family: 'Open Sans';
font-size: 200px">01</span> Wikipedia Viewer </h2>
</div>
</div>
</section>
<div id="googleMap">
<footer>
<div class="container">
<div class="text-center">
<h4><strong>KILJAK + WEB</strong>
</h4>
<p>Ace Hotel Shoreditch
<br>London, UK E1 6JQ</p>
<ul class="list-unstyled">
<li><i class="fa fa-phone fa-fw"></i> (44) 7568599454</li>
<li><i class="fa fa-envelope-o fa-fw"></i> edgar.kiljak#kiljakandweb.com
</li>
</ul>
<br>
<ul class="list-inline">
<li>
<i class="fa fa-facebook fa-fw fa-3x"></i>
</li>
<li>
<i class="fa fa-twitter fa-fw fa-3x"></i>
</li>
</ul>
<hr class="small">
<p class="text-muted">Copyright © KILJAK + WEB 2016</p>
</div>
</div>
<a id="to-top" href="#top" class="btn btn-dark btn-lg"><i class="fa fa-chevron-up fa-fw fa-1x"></i></a>
</footer>
</body>
</html>
And CSS:
#import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
#import url('https://fonts.googleapis.com/css?family=Oswald:300');
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');
#import url('https://fonts.googleapis.com/css?family=Roboto:300');
#header{
width: 100%;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: white;
}
h1 {
font-family: 'Abril Fatface', cursive;
font-size: 92px;
line-height: 90px;
color: black;
}
h2 {
margin-top:250px;
float: left;
font-family: 'Abril Fatface', cursive;
font-size: 30px;
font-weight: normal;;
color: black;
}
h3 {
font-family: 'Open Sans';
font-size: 13px;
font-weight: lighter !important;
color: black;
}
hr {
color: black !important;
}
.fa {
color: black !important;
}
.fa:hover {
color: red !important;
}
.projects {
float: right;
background-image: url('images/ipad.png');
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin-top:500px;
width: 100%; /* Span the entire width of the screen */
height: 800px;
}
#googleMap {
padding-top: 100px !important;
margin-top: -10px;
width: 100%; /* Span the entire width of the screen */
height: 400px; /* Set the height to 400 pixels */
-webkit-filter: grayscale(100%);
filter: grayscale(100%); /* Change the color of the map to black and white */
}
footer {
position: static;
background-color: white;
padding: 100px 0;
font-family: 'Open Sans';
font-size: 13px !important;
font-weight: lighter;
line-height: 15px;
}
/* Really small phones */
#media screen and (max-width:320px) {}
/* Regular smart phones, including iPhone 6 + with 414px viewport! */
#media screen and (min-width: 321px) {}
/* Regular Tablets from 480 to 800px including Galaxy tablets - 768px is only good for iPad */
#media screen and (min-width: 481px) {}
/* Desktops and Laptops */
#media screen and (min-width: 801px) {}
Try a row with 2 columns and put text and picures in seperate columns like this:
<div class="row">
<div class="col-sm-12 col-xs-12 col-md-4">
<h2><span style="font-family: 'Open Sans';
font-size: 200px">01</span> Wikipedia Viewer </h2>
</div>
<div class="col-sm-12 col-xs-12 col-md-8">
<img class="img-responsive" src="images/ipad.png">
</div>
</div>
You can find a demo code in the below link:
https://jsfiddle.net/Djav/m93p7ove/1/