mascDriver/estudo_.idea_deployment.xml

## estudo_.idea_deployment.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="PublishConfigData" autoUpload="Always" serverName="estudos">
    <serverData>
      <paths name="estudo ">
        <serverdata>
          <mappings>
            <mapping deploy="/" local="$PROJECT_DIR$" />
          </mappings>
        </serverdata>
      </paths>
      <paths name="estudos">
        <serverdata>
          <mappings>
            <mapping deploy="/" local="$PROJECT_DIR$" web="/importacao/teste//" />
          </mappings>
        </serverdata>
      </paths>
    </serverData>
    <option name="myAutoUpload" value="ALWAYS" />
  </component>
</project>

## estudo_.idea_estudo.iml
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
  <component name="NewModuleRootManager">
    <content url="file://$MODULE_DIR$" />
    <orderEntry type="inheritedJdk" />
    <orderEntry type="sourceFolder" forTests="false" />
  </component>
</module>

## estudo_.idea_misc.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="JavaScriptSettings">
    <option name="languageLevel" value="ES6" />
  </component>
</project>

## estudo_.idea_modules.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="ProjectModuleManager">
    <modules>
      <module fileurl="file://$PROJECT_DIR$/.idea/estudo.iml" filepath="$PROJECT_DIR$/.idea/estudo.iml" />
    </modules>
  </component>
</project>

## estudo_css3_animações_animacao.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animacao</title>
    <link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
    <div id="box-animacao">

    </div>

</body>
</html>

## estudo_css3_animações_estilo.css
#estilo{
    width: 400px;
    height: 400px;
    margin: 50px auto;
    padding: 8px;
    background: green;
    box-shadow: 10px 10px 10px black, -10px -10px -10px red;
}

#estilo h1{
    color: white;
    font-size: 60px;
    text-shadow: 4px 4px rgba(0,0,0,0.5);
}
@keyframes animacao-box {
    from{

        background: yellow;
        border-radius: 100px;
        top: 400px;
        left: 40%;
    }

    to{
        background: red;
        border-radius: 0px;
        top: 0;
        left: 0;

    }
}
#box-animacao{
    width: 300px;
    height: 300px;
    background: red;
    position: relative;
    animation-name: animacao-box;
    animation-duration: 5s;
    animation-direction: alternate-reverse;
}

## estudo_css3_bordas_estilo.css
#borda{
    width: 300px;
    height: 70px;
    background: #b9c941;
    padding: 20px;
    border-radius: 20px 80px;
}

## estudo_css3_bordas_normalize.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>normalize</title>
    <link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
    <div id="borda">
        nome<input type="text"> <br>
        nome<input type="text"><br>
        <input type="submit"> <br>
    </div>


</body>
</html>

## estudo_css3_degrade_degrade.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>degrade</title>
    <link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
    <div id="degrade">
        <h1>TItulo</h1>
        <p>aufgoaifhoahfioahfoiahsoifhaoifhoaishfoiash</p>
    </div>
</body>
</html>

## estudo_css3_degrade_estilo.css
#degrade{
    width: 300px;
    height: 300px;
    padding: 10px;
    background: linear-gradient(red,yellow,green);
}

## estudo_css3_sombras_estilo.css
#estilo{
    width: 400px;
    height: 400px;
    margin: 50px auto;
    padding: 8px;
    background: green;
    box-shadow: 10px 10px 10px black, -10px -10px -10px red;
}

#estilo h1{
    color: white;
    font-size: 60px;
    text-shadow: 4px 4px rgba(0,0,0,0.5);
}

## estudo_css3_sombras_sombras.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sombras</title>
    <link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
    <div id="estilo">
        <h1>titulo</h1>
        <p>ajfaijfapjfpaojfa</p>
    </div>
</body>
</html>

## estudo_css3_transicao_estilo.css
#estilo{
    width: 300px;
    height: 300px;
    background: orange;
}

#estilo p:hover{
    width: 400px;
    background: black;
    transition: all 2s;

}

## estudo_css3_transicao_transicao.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transicao</title>
    <link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
    <div id="estilo">
        <h1>Transicao</h1>
        <p>aufaofhoaifhaiofahfoia</p>
    </div>
</body>
</html>

## estudo_input.html
<!doctype html>
<html lang="pt-br">
<head>
    <title>Novas tags input HTML5</title>
    <meta charset="utf-8">
</head>

<body>

<form>

    <!-- Associar Label com os elementos - Boa prática -->
    <label for="nome">Nome</label>
    <input type="text" id="nome">
    <br><br>

    <!-- Novos Inputs e atributos HTML 5 -->
    <!-- Email Atributo required -->
    <label for="email">Email</label>
    <input type="email" id="email" placeholder="teste@teste.com.br" autofocus>
    <br><br>

    <!-- Número -->
    <label for="numero">Número</label>
    <input type="number" id="numero" min="5" max="10" step="2">
    <br><br>

    <!-- Url -->
    <label for="url">Url</label>
    <input type="url" id="url" placeholder="ex: http://wwww.">
    <br><br>

    <!-- Pesquisar -->
    <label for="pesquisa">pesquisa</label>
    <input type="search" id="pesquisa" placeholder="ex: digite algo...">
    <br><br>

    <!-- Range -->
    <label for="range">Range</label>
    <input type="range" id="range" min="1" max="10" value="5">
    <br><br>

    <!-- Data -->
    <label for="data">Data</label>
    <input type="date" id="data">
    <br><br>

    <!-- Cor -->
    <label for="cor">Cor</label>
    <input type="color" id="cor">
    <br><br>

    <input type="submit" value="enviar">
</form>

</body>

</html>
	<?xml version="1.0" encoding="UTF-8"?>
	<project version="4">
	<component name="PublishConfigData" autoUpload="Always" serverName="estudos">
	<serverData>
	<paths name="estudo ">
	<serverdata>
	<mappings>
	<mapping deploy="/" local="$PROJECT_DIR$" />
	</mappings>
	</serverdata>
	</paths>
	<paths name="estudos">
	<serverdata>
	<mappings>
	<mapping deploy="/" local="$PROJECT_DIR$" web="/importacao/teste//" />
	</mappings>
	</serverdata>
	</paths>
	</serverData>
	<option name="myAutoUpload" value="ALWAYS" />
	</component>
	</project>
	<?xml version="1.0" encoding="UTF-8"?>
	<module type="WEB_MODULE" version="4">
	<component name="NewModuleRootManager">
	<content url="file://$MODULE_DIR$" />
	<orderEntry type="inheritedJdk" />
	<orderEntry type="sourceFolder" forTests="false" />
	</component>
	</module>
	<?xml version="1.0" encoding="UTF-8"?>
	<project version="4">
	<component name="JavaScriptSettings">
	<option name="languageLevel" value="ES6" />
	</component>
	</project>
	<?xml version="1.0" encoding="UTF-8"?>
	<project version="4">
	<component name="ProjectModuleManager">
	<modules>
	<module fileurl="file://$PROJECT_DIR$/.idea/estudo.iml" filepath="$PROJECT_DIR$/.idea/estudo.iml" />
	</modules>
	</component>
	</project>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>animacao</title>
	<link rel="stylesheet" type="text/css" href="estilo.css">
	</head>
	<body>
	<div id="box-animacao">

	</div>

	</body>
	</html>
	#estilo{
	width: 400px;
	height: 400px;
	margin: 50px auto;
	padding: 8px;
	background: green;
	box-shadow: 10px 10px 10px black, -10px -10px -10px red;
	}

	#estilo h1{
	color: white;
	font-size: 60px;
	text-shadow: 4px 4px rgba(0,0,0,0.5);
	}
	@keyframes animacao-box {
	from{

	background: yellow;
	border-radius: 100px;
	top: 400px;
	left: 40%;
	}

	to{
	background: red;
	border-radius: 0px;
	top: 0;
	left: 0;

	}
	}
	#box-animacao{
	width: 300px;
	height: 300px;
	background: red;
	position: relative;
	animation-name: animacao-box;
	animation-duration: 5s;
	animation-direction: alternate-reverse;
	}
	#borda{
	width: 300px;
	height: 70px;
	background: #b9c941;
	padding: 20px;
	border-radius: 20px 80px;
	}
	#degrade{
	width: 300px;
	height: 300px;
	padding: 10px;
	background: linear-gradient(red,yellow,green);
	}
	<!doctype html>
	<html lang="pt-br">
	<head>
	<title>Novas tags input HTML5</title>
	<meta charset="utf-8">
	</head>

	<body>

	<form>

	<!-- Associar Label com os elementos - Boa prática -->
	<label for="nome">Nome</label>
	<input type="text" id="nome">
	<br><br>

	<!-- Novos Inputs e atributos HTML 5 -->
	<!-- Email Atributo required -->
	<label for="email">Email</label>
	<input type="email" id="email" placeholder="teste@teste.com.br" autofocus>
	<br><br>

	<!-- Número -->
	<label for="numero">Número</label>
	<input type="number" id="numero" min="5" max="10" step="2">
	<br><br>

	<!-- Url -->
	<label for="url">Url</label>
	<input type="url" id="url" placeholder="ex: http://wwww.">
	<br><br>

	<!-- Pesquisar -->
	<label for="pesquisa">pesquisa</label>
	<input type="search" id="pesquisa" placeholder="ex: digite algo...">
	<br><br>

	<!-- Range -->
	<label for="range">Range</label>
	<input type="range" id="range" min="1" max="10" value="5">
	<br><br>

	<!-- Data -->
	<label for="data">Data</label>
	<input type="date" id="data">
	<br><br>

	<!-- Cor -->
	<label for="cor">Cor</label>
	<input type="color" id="cor">
	<br><br>

	<input type="submit" value="enviar">
	</form>

	</body>

	</html>