jazlynbeiza/index.html

## index.html
<head>
<html>
<head>
<style>
body {
  background-image: url("https://media.istockphoto.com/id/1151289007/vector/stars-pastel-color-seamless-pattern-baby-colors-pink-violet-yellow-mint-neutral-light.jpg?s=612x612&w=0&k=20&c=qS-ph0AcZOmo1wByGk3anYy-q0dUZAirvZXj9fCBo3o=");
}
</style>
</head>
<body>
  <meta charset="UTF-8">
  <title>My Portfolio</title>
</head>

<body>

  <div class="section center">
    <ul class="nav">
      <li><a href=#skills> My Skills </a></li>
      <li><a href=#projects> Projects </a></li>
      <li><a href=#contact> Contact me </a></li>
    </ul>
  </div>

  <div class="section">
    <h1>Jazlyn B</h1>
    <p class="text-left"> Welcome to my portfolio! I love hanging out with my friends and family, my favorite genre for movies are coming of age, and my favoite movie currently is <span class="thirteen">thirteen</span> and I love the color <span class="pink">pink!</span>
</div>

  <div class="section">
    <!--  Image with alt text describing it    -->
<h2>HTML Image</h2>
<img src="https://wallpapersok.com/images/hd/aesthetic-profile-picture-palm-trees-y2e54khdndve9i1a.jpg" height="333">
  </div>

  <div class="section" id="skills">
    <!--  Skills  -->

    <h2>My Skills</h2>
    <!--  Unordered List    -->
    <div class="padding">
      <ul>
        <!--    List Items    -->
        <li>Shopping</li>
        <li>Listening to musc</li>
        <li>Sleeping</li>

        <li>Cheering</li>

      </ul>
    </div>

  </div>

  <div class="section" id="about-me">
    <!--  About Me    -->
    <h2>About Me</h2>
    <p class="text-left">I'm a junior in hishschool, currently learning French and I'm also on the varsity cheerleading team, going 3 years strong!</p>

  </div>

  <div class="section" id="hobbies">
    <!--  Projects    -->
    <h2>Hobbies</h2>
    <p>Painting<p>
    <p>Journaling<p>
    <p>Cooking<p>


  </div>

  <div class="section" id="fun-facts">
    <!--  Projects    -->

    <h2>Fun Facts</h2>
    <p>Dream job is to be a sonographer<p>
    <p>I've never been to a concert<p>
    <p>My fav book is "If only he had been with me"<p>
    <p>My favotite song at the moment is <iframe width="560" height="315" src="https://www.youtube.com/embed/6IkCGCLBljo?si=j2TuW3UBa932Zu21" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


  </div>

  <div class="section" id="projects">
    <!--  Projects    -->
    <h2>Projects</h2>
    <div class="container">
  <div class="section2">Item 1</div>
      <div class="section2">Item 2</div>
      <div class="section2">Item 3</div>
    </div>
    <p>Portfolio<p>

  </div>

  <div class="section" id="contact">
    <!--  Contact    -->
    <div class="form-padding">
      <form action="https://formspree.io/f/mrbprrav" method="POST">
        <label>Name:</label>
        <input type="text">
        <!--   line break     -->
        <br>
        <label>Email:</label>
        <input type="email">
        <button type="submit">submit</button>
      </form>

    </div>
  </div>

</body>

<footer class="section">This is the footer</footer>

## portfolio.markdown

      
    Raw
  

              portfolio.markdown
            
          
    Portfolio

A Pen by Jazlyn B on CodePen.
License.

  
## style.css
html {
  scroll-behavior: smooth;
}

body {
  font-family: "cursive", cursive;
  background-color: #DB162F;
  margin: 0;
  padding: 20px;
  text-align: center;

img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 20px auto;

}

img:hover {
  translate: -10px 20px;
  transition: 0.7s;
}

.section {
  background-color: #D4EBCF;
  margin: 20px auto;
  padding: 20px;
  max-width: 600px;
  border-radius: 8px;
}

ul {
  text-align: left;
  margin-top: 10px;
}

.nav {
  display: flex;
  list-style-type: none;
   justify-content: center;
}


.nav li {
  margin: 0px 10px;
}

form input,
form textarea {
  width: 80%;
  padding: 8px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

form button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

form button:hover {
  background-color: #45a049;
}

.padding {
  padding: 10px 10px;
 background-color: #F0FFFF;
}

.form-padding {
  padding: 100px, 0px;
}

.text-left {
  text-align: middle
}

.inter-header {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
  .container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
  h1 {
  background-color: pink;
}

div {
  background-color: lightblue;
}

p {
  background-color: lightgreen;
}
	<head>
	<html>
	<head>
	<style>
	body {
	background-image: url("https://media.istockphoto.com/id/1151289007/vector/stars-pastel-color-seamless-pattern-baby-colors-pink-violet-yellow-mint-neutral-light.jpg?s=612x612&w=0&k=20&c=qS-ph0AcZOmo1wByGk3anYy-q0dUZAirvZXj9fCBo3o=");
	}
	</style>
	</head>
	<body>
	<meta charset="UTF-8">
	<title>My Portfolio</title>
	</head>

	<body>

	<div class="section center">
	<ul class="nav">
	<li><a href=#skills> My Skills </a></li>
	<li><a href=#projects> Projects </a></li>
	<li><a href=#contact> Contact me </a></li>
	</ul>
	</div>

	<div class="section">
	<h1>Jazlyn B</h1>
	<p class="text-left"> Welcome to my portfolio! I love hanging out with my friends and family, my favorite genre for movies are coming of age, and my favoite movie currently is <span class="thirteen">thirteen</span> and I love the color <span class="pink">pink!</span>
	</div>

	<div class="section">
	<!-- Image with alt text describing it -->
	<h2>HTML Image</h2>
	<img src="https://wallpapersok.com/images/hd/aesthetic-profile-picture-palm-trees-y2e54khdndve9i1a.jpg" height="333">
	</div>

	<div class="section" id="skills">
	<!-- Skills -->

	<h2>My Skills</h2>
	<!-- Unordered List -->
	<div class="padding">
	<ul>
	<!-- List Items -->
	<li>Shopping</li>
	<li>Listening to musc</li>
	<li>Sleeping</li>

	<li>Cheering</li>

	</ul>
	</div>

	</div>

	<div class="section" id="about-me">
	<!-- About Me -->
	<h2>About Me</h2>
	<p class="text-left">I'm a junior in hishschool, currently learning French and I'm also on the varsity cheerleading team, going 3 years strong!</p>

	</div>

	<div class="section" id="hobbies">
	<!-- Projects -->
	<h2>Hobbies</h2>
	<p>Painting<p>
	<p>Journaling<p>
	<p>Cooking<p>


	</div>

	<div class="section" id="fun-facts">
	<!-- Projects -->

	<h2>Fun Facts</h2>
	<p>Dream job is to be a sonographer<p>
	<p>I've never been to a concert<p>
	<p>My fav book is "If only he had been with me"<p>
	<p>My favotite song at the moment is <iframe width="560" height="315" src="https://www.youtube.com/embed/6IkCGCLBljo?si=j2TuW3UBa932Zu21" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>



	</div>

	<div class="section" id="projects">
	<!-- Projects -->
	<h2>Projects</h2>
	<div class="container">
	<div class="section2">Item 1</div>
	<div class="section2">Item 2</div>
	<div class="section2">Item 3</div>
	</div>
	<p>Portfolio<p>

	</div>

	<div class="section" id="contact">
	<!-- Contact -->
	<div class="form-padding">
	<form action="https://formspree.io/f/mrbprrav" method="POST">
	<label>Name:</label>
	<input type="text">
	<!-- line break -->
	<br>
	<label>Email:</label>
	<input type="email">
	<button type="submit">submit</button>
	</form>

	</div>
	</div>

	</body>

	<footer class="section">This is the footer</footer>
	html {
	scroll-behavior: smooth;
	}

	body {
	font-family: "cursive", cursive;
	background-color: #DB162F;
	margin: 0;
	padding: 20px;
	text-align: center;

	img {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	margin: 20px auto;

	}

	img:hover {
	translate: -10px 20px;
	transition: 0.7s;
	}

	.section {
	background-color: #D4EBCF;
	margin: 20px auto;
	padding: 20px;
	max-width: 600px;
	border-radius: 8px;
	}

	ul {
	text-align: left;
	margin-top: 10px;
	}

	.nav {
	display: flex;
	list-style-type: none;
	justify-content: center;
	}


	.nav li {
	margin: 0px 10px;
	}

	form input,
	form textarea {
	width: 80%;
	padding: 8px;
	margin: 10px 0;
	border: 1px solid #ccc;
	border-radius: 4px;
	}

	form button {
	padding: 10px 20px;
	background-color: #4caf50;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	}

	form button:hover {
	background-color: #45a049;
	}

	.padding {
	padding: 10px 10px;
	background-color: #F0FFFF;
	}

	.form-padding {
	padding: 100px, 0px;
	}

	.text-left {
	text-align: middle
	}

	.inter-header {
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	}
	.container {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	}
	h1 {
	background-color: pink;
	}

	div {
	background-color: lightblue;
	}

	p {
	background-color: lightgreen;
	}