Suzangithub

## index.html
<!DOCTYPE html>

<html>
  <head>
    <link href="
    <link
      href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap"
      rel="stylesheet"
    />
    <link href="application.css" rel="stylesheet" type="text/css" />

## Python exercises
SYNTAX
print ("Hello World")
# This is a comment

VARIABLE
carname = "Volvo"

x=5
y = 10
print(x+y)

## React: Render State in the User Interface
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'freeCodeCamp'
    }
  }
  render() {
    return (
      <div>

## ES6: Declare a Read-Only Variable with the const Keyword
function printManyTimes(str) {
  "use strict";

  // change code below this line

const SENTENCE = str + " is cool!";
  for(let i = 0; i < str.length; i+=2) {
    console.log(SENTENCE);

  }

## CSS Grid: Create Flexible Layouts Using auto-fit
<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}

  .container {
    font-size: 40px;
    min-height: 100px;

## CSS Grid: Use grid-column to Control Spacing
<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}

  .item5 {
    background: PaleGreen;
    /* add your code below this line */
    grid-column: 2 / 4;

## CSS Flexbox: Use the flex-wrap Property to Wrap a Row or Column
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 100%;
      flex-wrap: nowrap;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;

## CSS Flexbox: Align Elements Using the justify-content Property
<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    justify-content: center;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;

## CSS Flexbox: Add Flex Superpowers to the Tweet Embed
<style>
  body {
    font-family: Arial, sans-serif;
  }
  header {
    display: flex;
  }
  header .profile-thumbnail {
    width: 50px;
    height: 50px;

## Applied Accessibility: Add an Accessible Date Picker
<body>
  <header>
    <h1>Tournaments</h1>
  </header>
  <main>
    <section>
      <h2>Mortal Kombat Tournament Survey</h2>
      <form>
        <p>Tell us the best date for the competition</p>
        <label for="pickdate">Preferred Date:</label>
	<!DOCTYPE html>

	<html>
	<head>
	<link href="
	<link
	href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap"
	rel="stylesheet"
	/>
	<link href="application.css" rel="stylesheet" type="text/css" />
	SYNTAX
	print ("Hello World")
	# This is a comment

	VARIABLE
	carname = "Volvo"

	x=5
	y = 10
	print(x+y)
	class MyComponent extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	name: 'freeCodeCamp'
	}
	}
	render() {
	return (
	<div>
	function printManyTimes(str) {
	"use strict";

	// change code below this line

	const SENTENCE = str + " is cool!";
	for(let i = 0; i < str.length; i+=2) {
	console.log(SENTENCE);

	}
	<style>
	.item1{background:LightSkyBlue;}
	.item2{background:LightSalmon;}
	.item3{background:PaleTurquoise;}
	.item4{background:LightPink;}
	.item5{background:PaleGreen;}

	.container {
	font-size: 40px;
	min-height: 100px;
	<style>
	#box-container {
	background: gray;
	display: flex;
	height: 100%;
	flex-wrap: nowrap;
	}
	#box-1 {
	background-color: dodgerblue;
	width: 25%;
	<style>
	body {
	font-family: Arial, sans-serif;
	}
	header {
	display: flex;
	}
	header .profile-thumbnail {
	width: 50px;
	height: 50px;
	<body>
	<header>
	<h1>Tournaments</h1>
	</header>
	<main>
	<section>
	<h2>Mortal Kombat Tournament Survey</h2>
	<form>
	<p>Tell us the best date for the competition</p>
	<label for="pickdate">Preferred Date:</label>