Skip to content

Instantly share code, notes, and snippets.

@joel-extremo

joel-extremo/about.html

Last active August 3, 2022 21:34
Show Gist options
  • Save joel-extremo/2a5587040d1fc82896bd449466a8e8a3 to your computer and use it in GitHub Desktop.
Save joel-extremo/2a5587040d1fc82896bd449466a8e8a3 to your computer and use it in GitHub Desktop.
Download ZIP
Nav Bar
Raw
about.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>About Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- google font -->
<link href="https://fonts.googleapis.com/css?family=PT+Sans|Unica+One" rel="stylesheet">
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<!-- css -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/about_styles.css">
<link rel="stylesheet" type="text/css" href="css/nav.css">
</head>
<body>
<nav class="container">
<section id="logo" class="left">
<a href="index.html">CareerFoundry</a>
</section><!-- end left nav -->
<section id="links" class="right">
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<a href="#">FAQ</a>
</section><!-- end right nav -->
</nav><!-- end nav -->
<section id="content" class="container">
<section class="header">
<h1>About Me</h1>
</section><!-- end header -->
<section class="image column">
<img src="img/jose.jpg" alt="Kitten">
</section><!-- end image -->
<section class="intro column">
<h3>Introduction</h3>
<p>I'm a software developer that like challenges project and always try to improve myself.</p>
</section><!-- end intro -->
<section class="skills column">
<h3>My Skills</h3>
<ul id="skill-list">
<li>PHP</li>
<li>Laravel</li>
<li>MVC</li>
<li>Relational DB(MySQL, MariaDB, AuroraDB)</li>
<li>Scrum</li>
<li>Git(Bitbucket, Github)</li>
<li>Raspberry Pi(NodeJS)</li>
<li>Amazon Web Services</li>
<li>Deployments</li>
</ul>
</section><!-- end skill -->
<section class="main-text">
<h3>My Story</h3>
<p>My parents were computer science and when I was a chield I was interested in technology, so when I was growing up I used to much computers and then when I was a teenager I choose what I want to do in my live. And at this point I know that I have to learn more and improve my skills to be the best.</p>
<p>My parents were computer science and when I was a chield I was interested in technology, so when I was growing up I used to much computers and then when I was a teenager I choose what I want to do in my live. And at this point I know that I have to learn more and improve my skills to be the best.</p>
<p>My parents were computer science and when I was a chield I was interested in technology, so when I was growing up I used to much computers and then when I was a teenager I choose what I want to do in my live. And at this point I know that I have to learn more and improve my skills to be the best.</p>
<p>My parents were computer science and when I was a chield I was interested in technology, so when I was growing up I used to much computers and then when I was a teenager I choose what I want to do in my live. And at this point I know that I have to learn more and improve my skills to be the best.</p>
</section><!-- end main-text -->
<section class="emoji">
<span>😋</span>
</section><!-- end emoji -->
</section><!-- end container -->
</body>
</html>
Raw
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans+Condensed:300" rel="stylesheet">
<!-- css -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/contact_styles.css">
<link rel="stylesheet" type="text/css" href="css/nav.css">
</head>
<body>
<nav class="container">
<section id="logo" class="left">
<a href="index.html">CareerFoundry</a>
</section><!-- end left nav -->
<section id="links" class="right">
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<a href="#">FAQ</a>
</section><!-- end right nav -->
</nav><!-- end nav -->
<section id="content" class="container">
<section class="info column">
<h1>Get in touch</h1>
<p>I'm very approachable and I would love to speak to you. Feel free to call, send me an email, Tweet me or complete the enquiry form</p>
<ul id="contact-list">
<li><i class="fas fa-phone"></i>1-829-849-2121</li>
<li><i class="far fa-envelope"></i>jmrv002@gmail.com</li>
<li><i class="fab fa-instagram"></i>@jmrv002</li>
<li><i class="fab fa-facebook-square"></i>https://www.facebook.com/joel.rodriguezvarona</li>
</ul>
</section><!-- end info -->
<section class="form-container column">
<h1>Send us a message</h1>
<form id="form" action="joke.html">
<input type="text" name="" placeholder="YOUR NAME">
<input type="text" name="" placeholder="EMAIL ADDRESS">
<input type="text" name="" placeholder="TELEPHONE NUMBER">
<textarea placeholder="YOUR MESSAGE"></textarea>
<button type="submit">SUBMIT</button>
</form><!-- end form -->
</section><!-- end form-container -->
</section>
<script type="text/javascript">
// alert("Don't forget to submit the form ;)")
</script>
</body>
</html>
Raw
nav.css
/* nav */
.left { float: left; }
.right { float: right; }
nav {
background-color: #689F38;
padding: 20px 10%;
position: fixed;
width: 100% !important; /*to override the width of the class .container that give more importan because is a class and this rule is set to a tag*/
top: 0;
left: 0;
}
nav a {
color: white;
margin-left: 15px;
text-decoration: none;
}
nav #links a:hover {
color: black;
transition: color 600ms;
-webkit-transition: color 600ms;
}
nav #links {
font-size: 1.1em;
}
nav #logo {
font-size: 1.4em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment