Web Dev GCM

Tutorials of (Web dev gcm) by Gabriel moraru

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Web Dev GCM</title>
  <meta charset='utf-8'>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
		<title>Gabriel C Moraru Freelance Developer</title>
		<link rel='stylesheet' type='text/css' href='styles.css'>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  	<body>
		<div id='home' class='page'>
			<header>
				<a href='#home'><img class='logo' src='images/gcm.svg' alt="logo"></a>
				<nav class='navbar'>
					<a class='menu-icon'></a>
					<ul>
						<li><a href='#home'><img class='list-item' src='images/home.svg' alt='home'></a></li>
						<li><a href='#bio'><img class='list-item' src='images/user-circle.svg' alt='bio'></a></li>
						<li><a href='#services'><img class='list-item' src='images/map.svg' alt='services'></a></li>
						<li><a href='#contact'><img class='list-item' src='images/envelope.svg' alt='contact'></a></li>
					</ul>
				</nav>
			</header>
			<div class='picture'>
				<div class='photo'>
					<picture>
						<source media='(min-width: 641px)'
						srcset='images/photo-big.jpg'/>
						<source media='(max-width: 640px)'
						srcset='images/photo-tall.jpg'/>
						<img src='images/photo-small.jpg' alt='main background' />
					</picture>
				</div>
			</div>
			<div id='bio' class='section bio'>
				<h2>Who am I ?</h2>
				<br>
				<img class='profilePic' src='images/gcm.jpg' alt='Profile Picture'>
				<div>
					<p>I was first introduced to web development back in 2012 by a childhood friend who's been in the industry for more then 20 years now. Even from the beggining, when I started learning the basics of coding everything felt logical and somehow simple, maybe that was just  me as I always had been a bit technologically inclined.Moving forward I've developed a passion for coding and the unkown, always looking for the next challenge, I'm guessing just an opportunity to acquire new skills, to learn something new.</p>
					<p>So if you are looking to build a personalised website, why not build it with someone that's truly passionate about it, someone with a keen eye for detail and always striving to achieve perfection, someone that will not rest untill you're ideas are perfectly represented on to your website.</p>
				</div>
				<br>
				<div class='skills'>
					<h2>Skills <img class='skillsCode' src='images/code.svg' alt='code'></h2>
					<ul>
						<li><img class='skill' src='images/html5.svg' alt='HTML5'></li>
						<li><img class='skill' src='images/css3.svg' alt='CSS3'></li>
						<li><img class='skill' src='images/javascript.svg' alt='JavaScript'></li>
						<li><img class='skill' src='images/sass.svg' alt='Sass'></li>
						<li><img class='skill' src='images/less.svg' alt='Less'></li>
						<li><img class='skill' src='images/jquery.svg' alt='Jquery'></li>
						<li><img class='skill' src='images/foundation.svg' alt='Foundation'></li>
					</ul>
					<ul>
						<li><img class='skill' src='images/bootstrap.svg' alt='Bootstrap'></li>
						<li><img class='skill' src='images/wordpress.svg' alt='Wordpress'></li>
						<li><img class='skill' src='images/drupal.svg' alt='Drupal'></li>
						<li><img class='skill' src='images/php.svg' alt='php'></li>
						<li><img class='skill' src='images/mysql.svg' alt='MySql'></li>
						<li><img class='skill' src='images/git.svg' alt='Sass'></li>
						<li><img class='skill' src='images/ubuntu.svg' alt='Ubuntu'></li>
						<li><img class='skill' src='images/ssh.svg' alt='SSH'></li>
					</ul>
				</div>

			</div>
			<div id='services' class='section website'>
				<article>
					<img src='images/development.svg' alt='development'>
					<h1>Web Development</h1>
					<br>
					<p>Bespoke professional services using the latest best practices and cutting-edge technologies that will offer a flawless user experience whilst maintaining 'Search Engine Friendliness' throughout the website.</p>
				</article>
			</div>
			<div class='section ecommerce'>
				<article>
					<img src='images/ecommerce.svg' alt='ecommerce'>
					<h1>E-commerce</h1>
					<br>
					<p>Highly interactive, powerful and robust websites, with custom tailored Content Management System to perfectly suit individual client needs, that will help kick-start your online business.</p>
				</article>
			</div>
			<div class='section seo'>
				<article>
					<img src='images/seo.svg' alt='seo'>
					<h1>SEO</h1>
					<br>
					<p>Increase you websites online visibility with Search Engine Optimisation, using only organic growth from meaningful traffic to your site that will have a positive long term effect on your business.</p>
				</article>
			</div>
			<footer>
				<div class='contact'>
					<div class='email'>
						<form method='POST' action='http://formspree.io/[email protected]'>
							<h3 id='contact'>For any enquiries please use the form below:</h3>
							<input type='email' name='email' placeholder='Please input your Email'>
						<!-- 	<input type="hidden" name="_next" value="//site.io/thanks.html" />
							<input type="text" name="_replyto" placeholder="Your email" /> -->
							<textarea name='message' placeholder="Don't forget to write a message as well !" rows="10" cols="10"></textarea>
							<br>
							<button type='submit'>Send Email</button>
						</form>
					</div>
					<div class='socialMedia'>
						<ul>
							<li><a href='https://www.instagram.com/gabrielcmoraru/' target='_blank'><img src='images/instagram.svg' alt='instagram'></a></li>
							<li><a href='https://www.facebook.com/FreelanceWebDeveloperLondon/' target='_blank'><img src='images/facebook.svg' alt='facebook'></a></li>
						</ul>
						<ul>
							<li><a href='https://twitter.com/GabrielCMoraru' target='_blank' data-size="large"><img src='images/twitter.svg' alt='twitter'></a></li>
							<li><a href='https://www.linkedin.com/in/gabrielcmoraru/' target='_blank'><img src='images/linkedin.svg' alt='linkedin'></a></li>
						</ul>
						<ul>
							<li><a href='https://github.com/gabrielcmoraru' target='_blank'><img src='images/github.svg' alt='github'></a></li>
							<li><a href='https://codepen.io/gabrielcmoraru/' target='_blank'><img src='images/codepen.svg' alt='codepen'></a></li>
						</ul>
					</div>
				</div>
				<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FFreelanceWebDeveloperLondon%2F&width=106&layout=button_count&action=like&size=small&show_faces=false&share=true&height=46&appId" width="106" height="46" style="border:none;overflow:hidden;display: center;"></iframe>
				<small>&copy; Created & designed by Gabriel C Moraru</small>
			</footer>
		</div>
	</body>
  
  

</body>

</html>
/* Downloaded from https://www.codeseek.co/ */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

header {
background: #ffffff;
width: 100%;
height: 90px;
position: relative;
top: 0;
left: 0;
z-index: 1;
}

footer {
background-color: #7F7F7F;
padding: 5px;
opacity: 0.90;
width: 100%;
text-align: center;
display: block;
margin-top: 5px;
}

nav {
float: right;
padding: 20px;
}

ul {
list-style: none;
}

li {
display: inline-block;
padding: 10px;
}

article{
display: inline-block;
text-align: center;
padding: 10px;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 16px;
font-weight: bold;
}

article img {
width: 5em;
}

h1,h2{
font-family: Verdana, Geneva, sans-serif;
}
h3{
font-family: Verdana, Geneva, sans-serif;
font-size: 1em;
padding: 5px;
color: white;
}

.seo:hover, .ecommerce:hover, .website:hover {
background-color: #555;
transition-duration: 0.4s;
color: white;
}

.list-item {
width: 2em;
}

.skill {
width: 4em;
}

.skills {
display: inline-block;
text-align: center;
}

.skillsCode {
width: 1em;
}

.logo {
margin: 7px 0 7px 0 ;
padding: 0 ;
width: 300px;
}

.menu-icon{
display: hidden;
width: 38px;
height: 38px;
background: url(images/bars.svg) center no-repeat;
}

.picture {
max-width: 959px;
height: 300px;
justify-content: inherit;
align-items: inherit;
display: block;
overflow: hidden;
}

.photo img {
width: 100% ;
display: block ;
}

.profilePic {
width: 130px;
height: 200px;
border-radius: 120px;
display: inline-block;
margin: 20px;
}

.page{
display: flex;
flex-wrap: wrap;
}

.section {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
margin-top: 5px;
}

.bio {
border: 5px solid #7F7F7F;
height: auto;
flex-wrap: wrap;
display: inline-block;
text-align: center;
padding: 10px;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 16px;
font-weight: bold;
}

.website {
border: 5px #e65100;
border-style: solid hidden solid solid;
}

.ecommerce {
border: 5px #7cb342;
border-style: solid hidden solid hidden;
}

.seo {
border: 5px #00bcd4;
border-style: solid solid solid hidden;
}

.contact{
display: flex;
flex-wrap: wrap;
align-items: center;
}

.email {
flex: 1;
width: 50%;
}

.email input, textarea, button {
margin: 5px;
padding: 3px;
}

.email button {
position: relative;
background-color: white;
border: none;
color: black;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-weight: bold;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 15px;
}

.email button:hover {
background-color: #555;
color: white;
border: 1px solid white;
}

.socialMedia {
width: 50%;
padding: 10px;
margin: 10px;
}

.socialMedia img{
width: 3em;
}

small {
text-align: center;
display: block;
margin: 0;
color: white;
}

/* Mobile */
@media only screen and (max-width: 400px) {
.website,
.ecommerce,
.seo {
border-style: solid;
margin: 5px;
background-color: #555;
color: white;
}
.bio, .picture {
margin:  5px;
}
.logo {
margin: 7px 0 7px 0 ;
padding: 0 ;
width: 220px;
}
.email {
width: 100%;
}
.email input{
width: 90%;
height: 25px;
}
.email textarea{
width: 90%;
height: 225px;
}
.socialMedia{
width: 100%;
}
.contact{
flex-direction: column;
}
header {
height: 70px;
}
nav {
padding:  15px 10px 0 0 ;
}
}

/* Tablet */
@media only screen and (min-width: 401px) and (max-width: 960px) {
.website,
.ecommerce {
width: 50%;
}
.website{
border-style: solid hidden solid solid;
}.ecommerce{
border-style: solid solid solid hidden;
}
.seo{
border-style: solid;
margin-top: 5px;
}
.email input{
width: 100%;
height: 25px;
}
.email textarea{
width: 100%;
height: 175px;
}
header{
height: 80px;
}
footer{
height: auto;
}
}

/* Desktop */
@media only screen and (min-width: 961px){
.page {
width: 960px;
margin: 0 auto;
}
.website,
.ecommerce,
.seo {
width: 33.3%;
}
.header {
height: 400px;
}
.bio {
order: 2;
}
.profilePic{
float: left;
}
.email input{
width: 100%;
height: 25px;
}
.email textarea{
width: 100%;
height: 125px;
}
footer{
height: auto;
order: 3;
}
}

/* Navigation bar + footer */
@media only screen and (max-width : 641px) {

.menu-icon {
display:inline-block;
}

.menu-icon:hover {
background-color: #888;
}

.navbar ul, .navbar:active ul {
display: none;
position: absolute;
padding: 10px;
background: #fff;
border: 5px solid #444;
right: 10px;
top: 60px;
width: 30%;
border-radius: 8px 0 8px 8px;
}

.navbar li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}

.navbar:hover ul {
padding: 0;
display: block;
}

.email {
width: 100%;
}
.email input{
width: 90%;
height: 25px;
}
.email textarea{
width: 90%;
height: 225px;
}
.socialMedia{
width: 100%;
}

}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Web Dev GCM ) is write by gabriel moraru, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © gabriel moraru