revitalk/portfolio.html

## portfolio.html
<!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="custom.css">
    <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="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>RAMELVIS PORTFOLIO</h1>
            <h2>Illustrator and Digital Designer</h2>
        </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>

     <footer>Copyrights Ramelvis De La Cruz 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>


## style.css
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;
    }

}
	<!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="custom.css">
	<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="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>RAMELVIS PORTFOLIO</h1>
	<h2>Illustrator and Digital Designer</h2>
	</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>

	<footer>Copyrights Ramelvis De La Cruz 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>
	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;
	}

	}