Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created Jul 25, 2020
Embed
What would you like to do?
Codecademy export
<!DOCTYPE html>
<html>
<head>
<title> My Open Ended CV</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header class="About">
<h1>Hazhir Farahmand</h1>
<p>Sometimes I wonder that what i am here for? I am an <em>Endurance Runner/Coach</em> and entrepeneur based in IRAN. </p>
</header>
<nav class="back">
<ul>
<a href="#"><li>Home</li></a>
<a href="#projects"><li>My Projects</li></a>
<a href="#goals"><li>My Goals</li></a>
<a href="#subscribe"><li>Subscription</li></a>
<a href="#contact"><li>Contact Me</li></a>
</ul>
</nav><br><br><br>
<!--schefule table
<section class="schedule">
<table border="2">
<thead>
<tr>
<th colspan="4">My Weekly Schedule</th>
</tr>
</thead>
<tbody>
<tr>
<td>Week/Time</td>
<td>7-9</td>
<td>18-20</td>
<td>20-23</td>
</tr>
<tr>
<td>Sat</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Sun</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Mon</td>
<td></td>
<td>Aida</td>
<td></td>
</tr>
<tr>
<td>Tue</td>
<td>Behzad</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Wed</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Thu</td>
<td>Aida</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Fri</td>
<td>Long Run</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</section>
-->
<section id="projects">
<h2>My Projects</h2>
<p>There is some succesfull projects</p>
<a href="2.jpg" target="_blank"><img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-8/htmlcss1-img_bicycles.jpeg" alt="Formaliteh"></a>
<a href="3.jpg" target="_blank"><img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-8/htmlcss1-img_bicycles.jpeg" alt="formaliteh"></a>
<a href="4.jpg" target="_blank"><img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-8/htmlcss1-img_bicycles.jpeg" alt="formaliteh"></a>
</section>
<section id="subscribe">
<form method="POST" action="#">
<label for="email">Want more Running Tips?</label>
<input type="text" name="email" id="email" value="Your email" minlength="8" pattern="[0-9a-z]+" required>
<input class="email-b" type="submit" name="email" id="email">
</form>
</section>
<section id="goals">
<h2>My Goals</h2>
<p>
<strong id="huge">My</strong> main Goal is to become financialy independent in a way that i enjoy, so suffering in it become easier and enjoyable.
<br>
In my mind life is complicated becouse i make it so. I think about some past bullshit and negative stuff that i cannot change, that i decided to do so in the first place. Saman have told me before to stay, to wait until the time comes and i will see the future, the future wich brings me lots of money and happiness and wealth. ut i didnt listen to him so i should not have any, any regrets. i must man up and accept the responsibility of my life.
<br>
I have a long way to go to stay on my own fet. to prove others like Saman and Iryn and my family wrong, to prove them that i am capable of doint the things i love. i neet to be a man on my own feet. Maybe i am thinking about the future in the positive way but i really want to become a <em>Physiotherapist.</em>
</p>
<h5>14 Days ago</h5>
</section>
<section id="contact">
<form>
<h4>How can i Help?</h4>
<label for="help">Name</label>
<textarea id="help" cols="20" rows="1" ></textarea>
<label for="subject">Subject</label>
<textarea id="subject" cols="20" rows="2"></textarea>
<label for="description">Description</label>
<textarea id="description" cols="20" rows="5" minlength="30" maxlength="200"></textarea>
<input type="submit" name="help" value="Send" >
</form>
</section>
<footer>
<a href="https://www.instagram.com/hazhlife/" target="_blank"><img src="instagram.png">@hazhlife</a>
<a href="#"><img src="facebook.png">Hazhir Farahmand</a>
<a href="#"><img src="twitter.png">Hazhir Farahmand</a>
<h6>&copy; Copyright Reserved 2020</h6>
</footer>
</body>
</html>
#projects img {
height: 250px;
}
footer img {
height: 15px;
}
footer a {
color: white;
opacity: 0.9;
}
footer {
background-color: #105170;
padding-top: 40PX;
color: grey;
height: 100px;
}
body {
text-align: center;
background: #FDC167;
font-family: tahoma;
}
#subscribe {
margin-top: 70px;
margin-bottom: 40px;
background-color: #3572A0;
padding: 80px;
color: orange;
}
.email-b {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#contact {
background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-8/htmlcss1-img_bicycles.jpeg");
background-position: center;
padding: 60px;
color: white;
text-shadow: black
}
#contact textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
.About {
background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-8/htmlcss1-img_bicycles.jpeg");
height: 550px;
background-position: center;
color: white;
}
.About h1 {
padding-top: 225px;
}
.About p {
background-color: black;
padding: 20px;
}
#goals h5 {
opacity: 0.6;
}
/*MAIN MENU*/
}
.thx{
position: fixed;
left:50%;
transform:translateX(-50%);
bottom: 15px;
}
nav{
width: 100%;
position: relative;
top:50px;
text-align:center;
margin-bottom: 80px;
}
nav a{
font-family: 'Oswald', sans-serif;
font-weight:500;
text-transform:uppercase;
text-decoration:none;
color:#16151b;
margin:0 15px;
font-size:16px;
letter-spacing:1px;
position:relative;
display:inline-block;
}
nav a:before{
content:'';
position: absolute;
width: 100%;
height: 3px;
background:#16151b;
top:47%;
animation:out 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
nav a:hover:before{
animation:in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
@keyframes in{
0%{
width: 0;
left:0;
right:auto;
}
100%{
left:0;
right:auto;
width: 100%;
}
}
@keyframes out{
0%{
width:100%;
left: auto;
right: 0;
}
100%{
width: 0;
left: auto;
right: 0;
}
}
@keyframes show{
0%{
opacity:0;
transform:translateY(-10px);
}
100%{
opacity:1;
transform:translateY(0);
}
/*END OF MAIN MENU*/
.schedule {
padding-left: : 40px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.