revitalk/footer.php

## footer.php
 <footer>Copyrights <?php bloginfo( 'name' ); ?> 2018</footer>
    </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  </body>
</html>

## header.php
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

      <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

      <title>Hello, world!</title>
  </head>
  <body>

    <div id="wrapper" class="container">
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                    <a class="navbar-brand" href="#">
                        <img src="<?php echo get_template_directory_uri(); ?>/logo.png" width="80" alt="logo"></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item" ><a href="#" class="nav-link" >Home</a></li>
                            <li class="nav-item" ><a href="#" class="nav-link" >Gallery</a></li>
                            <li class="nav-item" ><a href="#" class="nav-link" >Review</a></li>
                            <li class="nav-item" ><a href="#" class="nav-link" >Contact</a></li>
                        </ul>
                    </div>
            </nav>
        <header>
            <h1><?php bloginfo( 'name' ); ?></h1>
            <h2><?php bloginfo( 'description' ); ?></h2>
        </header>

## index.php
<?php get_header(); ?>

<div id="content">
            <div class="row">
                <div id="about_photo" class="col-sm-4">
                    <img src="myphoto.jpg" alt="my photo">
                </div>
                <p class="col-sm-8">My name is Ramelvis De La Cruz, a young upcoming artist from the urban city of Brooklyn, New York. Whose interest in art started in illustration, experienced mostly with graphite and ink. The satisfaction to see an idea come to life is the motivation behind my work. I have done other art pieces besides illustrations. As a hobby, I participated in tattooing potential clients. I take pride in the conversion of lead on paper to a needle on skin. It doesn’t stop there as I saw the limitless possibility that graphic design withholds. The virtual tools given to me had forever left my curiosity thirty for more knowledge. Currently, I’m studying in the field of multimedia arts and wish one day I would achieve my degree and make a difference in the world.
    </p>
            </div>


        </div>

<?php get_footer(); ?>

## style.css
/*
Theme Name: Portfolio theme
Author: Your Name
*/


body{

}


header{
    background-image: url("sky.jpg");
    color:#fff;
    margin-left:-15px;
    margin-right:-15px;
    background-size: cover;
    height:300px;
    display:flex;
    flex-direction: column;
    justify-content: center; /* aligns the titles vertically */
    align-items: flex-end; /* aligns the titles horizontally */
    padding-right: 50px;
}

#content{
    margin-top:15px;
    padding:15px;
}

h1{
    background-color: #fff;
    color:deepskyblue;
    width:50%;
    margin:0;
    padding:5px;
    text-align: center;
}
h2{
    background-color: deepskyblue;
    color:#fff;
    width:50%;
    margin:0;
    padding:5px;
    text-align: center;


}
#about{
    display:flex;
    flex-direction:row;

}


#about_photo img{
    width:100%;
}

.bg-dark{
    background-color:#251b7d !important;
}

#wrapper{
    background-color: #251b7d;
}

#content{
    background-color: #fff;
}

footer{
    color:#fff;
    padding-top:1em;
    padding-bottom:1em;
    text-align: center;
}

@media (max-width:640px){
    #about{
        flex-direction:column;
    }

    h1{
        width:100%;
    }
    H2{
        display:none;
    }
    header{
        padding:0;
        height:200px;
    }

}
	<?php get_header(); ?>

	<div id="content">
	<div class="row">
	<div id="about_photo" class="col-sm-4">
	<img src="myphoto.jpg" alt="my photo">
	</div>
	<p class="col-sm-8">My name is Ramelvis De La Cruz, a young upcoming artist from the urban city of Brooklyn, New York. Whose interest in art started in illustration, experienced mostly with graphite and ink. The satisfaction to see an idea come to life is the motivation behind my work. I have done other art pieces besides illustrations. As a hobby, I participated in tattooing potential clients. I take pride in the conversion of lead on paper to a needle on skin. It doesn’t stop there as I saw the limitless possibility that graphic design withholds. The virtual tools given to me had forever left my curiosity thirty for more knowledge. Currently, I’m studying in the field of multimedia arts and wish one day I would achieve my degree and make a difference in the world.
	</p>
	</div>


	</div>

	<?php get_footer(); ?>
	/*
	Theme Name: Portfolio theme
	Author: Your Name
	*/


	body{

	}


	header{
	background-image: url("sky.jpg");
	color:#fff;
	margin-left:-15px;
	margin-right:-15px;
	background-size: cover;
	height:300px;
	display:flex;
	flex-direction: column;
	justify-content: center; /* aligns the titles vertically */
	align-items: flex-end; /* aligns the titles horizontally */
	padding-right: 50px;
	}

	#content{
	margin-top:15px;
	padding:15px;
	}

	h1{
	background-color: #fff;
	color:deepskyblue;
	width:50%;
	margin:0;
	padding:5px;
	text-align: center;
	}
	h2{
	background-color: deepskyblue;
	color:#fff;
	width:50%;
	margin:0;
	padding:5px;
	text-align: center;


	}
	#about{
	display:flex;
	flex-direction:row;

	}



	#about_photo img{
	width:100%;
	}

	.bg-dark{
	background-color:#251b7d !important;
	}

	#wrapper{
	background-color: #251b7d;
	}

	#content{
	background-color: #fff;
	}

	footer{
	color:#fff;
	padding-top:1em;
	padding-bottom:1em;
	text-align: center;
	}

	@media (max-width:640px){
	#about{
	flex-direction:column;
	}

	h1{
	width:100%;
	}
	H2{
	display:none;
	}
	header{
	padding:0;
	height:200px;
	}

	}