A saga de meu primeiro progeto "serío"(html e css)
Aqui está o texto corrigido:
No começo deste ano, eu recebi acesso à plataforma de cursos da B7Web. Então, lá fui eu fazer o curso que me parecia mais apropriado ao meu hardware(html e css). Acontece que uso o computador do meu pai para programar (devido ao notebook com Linux aqui de casa estar inusável). Porém, este computador tem restrições por ser um desktop de empresa e, além disso, meu pai o usa para trabalhar em home office durante o dia. Portanto, eu não poderia baixar programas como o VSCode. Sem falar que o computador é um Core 2 Duo com 4GB de RAM rodando Windows 10. Após vários momentos assistindo às aulas, cheguei ao primeiro projeto: era um site com o nome de Medicenter. Era um template bastante genérico, mas eu estava animado para usar todos os meus conhecimentos adquiridos.
Agora era hora de colocar a mão na massa e começar a trabalhar. Para minha mais profunda alegria, achei o Sublime Text 3 instalado no PC do meu pai, o que quebrou um galho gigantesco. Durante o processo, tive que apagar tudo e recomeçar devido a um código que era indescifrável. Senti a falta do Git, já que muitas vezes "quebrei o código". Depois de muitas dores de cabeça (mais do que gostaria), consegui "terminar" meu projeto. Faltaram etapas grandes do desenvolvimento, como deixar o site responsivo e fazer o rodapé, mas estou um pouco cansado deste projeto, pois demandou muito tempo. Ao tentar deixar meu código responsivo, tive alguns problemas, já que acabei comprometendo a limpeza do código durante a criação.
Para completar a novela, fui colocar meu projeto no GitHub para mostrar ao mundo todas as minhas habilidades, mas descobri que é algo mais complicado do que só subir a pasta do projeto. Ao ver um tutorial, percebi que precisaria do terminal do Windows (para isso, tenho que colocar o CMD como administrador, mas preciso da senha do administrador, que não possuo). Acho que consigo colocar no GitHub de outra maneira, mas isso será história para outra hora.
Em geral, esse foi o meu processo de desenvolvimento do meu primeiro projeto "sério". Agora quero pular para o próximo projeto e, principalmente, escrever um código mais limpo. Também quero descobrir como colocar meu código no GitHub para o mundo ver.
o meu codigo para curiosos:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=0">
<link rel="stylesheet" type="text/css" href="assets/css/template.css">
<title>Medicenter</title>
</head>
<body>
<header>
<div class="container">
<div class="logo">
<a href=""><img src="assets/images/logo.png" alt="Logo"></a>
</div>
<div class="menu">
<nav>
<ul>
<li class="active"><a href="">HOME</a></li>
<li><a href="">Blog</a></li>
<li><a href="">planos</a></li>
<li><a href="">suporte</a></li>
<li><a href="">parceiros</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section id="banner">
<div class="container column">
<div class="banner_headline">
<h1>Mediceter</h1>
<h2>Na Medicenter, sua saúde é nossa prioridade.</h2>
</div>
<div class="banner_options">
<div class="banner1">
<div class="banner_title"> caso de emergência</div>
<div class="banner_desc">Na Medicenter, estamos prontos para atender você nos momentos que mais precisa. Com uma equipe dedicada e instalações preparadas, garantimos cuidados rápidos e eficientes em casos de emergência. Sua saúde é nossa prioridade máxima.</div> <!--configurações de banner-->
<a href="">Saiba mais!</a>
</div>
<div class="banner2">
<div class="banner_title"> Horários disponíveis</div>
<div class="banner_desc">Marcar um horário na Medicenter é simples e rápido. Basta entrar em contato conosco por telefone ou através do nosso site, onde você pode escolher o melhor dia e horário para sua consulta. Estamos aqui para facilitar o cuidado com a sua saúde </div>
<a href="">Saiba mais!</a>
</div>
<div class="banner3">
<div class="banner_title"> Horarios
<div class="banner_horarios">Segunda - Sexta <div class="horas">8.00 - 17.00</div> </div>
<div class="banner_horarios">Sabado <div class="horas">9.30 - 17.00</div> </div>
<div class="banner_horarios">Domingo <div class="horas">9.30 - 15.00 </div> </div>
</div>
</div>
</div>
</section>
<section id="geral">
<div class="container">
<section>
<div class="widget">
<div class="widget">
<div class="widget_title">
<div class="widget_title_text">Latest News</div>
<div class="widget_title_bar"></div>
</div>
<div class="widget_body flex">
<article>
<a href="">
<div class="news_data">
<div class="news_posted_at">12 DEC 12</div>
<div class="news_comments">2</div>
</div>
<div class="news_thumbnail">
<img src="assets/images/dr.jpg">
</div>
<div class="news_title">
Lorem ipsum dolor sit amat velum.
</div>
<div class="news_resuem">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
</div>
</a>
</article>
<article>
<a href="">
<div class="news_data">
<div class="news_posted_at">12 DEC 12</div>
<div class="news_comments">2</div>
</div>
<div class="news_thumbnail">
<img src="assets/images/dr.jpg">
</div>
<div class="news_title">
Lorem ipsum dolor sit amat velum.
</div>
<div class="news_resuem">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
</div>
</a>
</article>
<article>
<a href="">
<div class="news_data">
<div class="news_posted_at">12 DEC 12</div>
<div class="news_comments">2</div>
</div>
<div class="news_thumbnail">
<img src="assets/images/dr.jpg">
</div>
<div class="news_title">
Lorem ipsum dolor sit amat velum.
</div>
<div class="news_resuem">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
</div>
</a>
</article>
<article>
<a href="">
<div class="news_data">
<div class="news_posted_at">12 DEC 12</div>
<div class="news_comments">2</div>
</div>
<div class="news_thumbnail">
<img src="assets/images/dr.jpg">
</div>
<div class="news_title">
Lorem ipsum dolor sit amat velum.
</div>
<div class="news_resuem">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
</div>
</a>
</article>
</div>
</div>
</section>
<aside>
<div class="widget">
<div class="widget_title">
<div class="widget_title_text"> Departamentos</div>
<div class="widget_title_bar"> </div>
</div>
<div class="widget_body">
<div class="deps">...</div>
<div class="deps">...</div>
<div class="deps">...</div>
<div class="deps">...</div>
<div class="deps">...</div>
<div class="deps">...</div>
</div>
</div>
<div class="widget">
<div class="widget_title">
<div class=" widget_title_text">Make an appointement</div>
<div class=" widget_title_bar"></div>
</div>
<div class="widget_body">
<div class="widget_desc_text">It is a long established fact that It is a long est
ablished fact that a reader will be distracted by.
</div>
<div class="widget_contact">
<div class="widget_contact_text">
<a href=""><img src="/assets/images/telefone.png" alt=""></a>
<u>by phones:</u><b> 1-800-643-4300</b>
</div>
<div class="widget_contact_text">
<a href=""><img src="/assets/images/telefone.png" alt=""></a>
<u>by email:</u><a href=""> [email protected]</a>
</div>
<div class="widget_contact_text">
<a href=""><img src="/assets/images/telefone.png" alt=""></a>
<u>or</u><a href=""> lih in the form </a> ond out contact page
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
</section>
<footer>
<div class="container flexcolumn">
<div class="footer_menu">
<div class="fm_1">
...
</div>
<div class="fm_2">
...
</div>
<div class="fm_3">
...
</div>
</div>
<div class="footer_area">
<div class="footer_area_item">
<div class="widget">
<div class="widget_title">
<div class="widget_title_text">Medicenter Clinic</div>
<div class="widget_title_bar"></div>
</div>
<div class="widget_body">
...
</div>
</div>
</div>
<div class="footer_area_item">
<div class="widget">
<div class="widget_title">
<div class="widget_title_text">Latest News</div>
<div class="widget_title_bar"></div>
</div>
<div class="widget_body">
...
</div>
</div>
</div>
<div class="footer_area_item">
<div class="widget">
<div class="widget_title">
<div class="widget_title_text">Latest Tweets</div>
<div class="widget_title_bar"></div>
</div>
<div class="widget_body">
...
</div>
</div>
</div>
</div>
<div class="footer_copy">
compryth-Todos os direitos reservados
</div>
</footer>
</body>
</html>
css:
* {
font-family:Arial;
}
body {
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: center;
height: 120px;
}
.container {
display: flex;
justify-content: space-between;
width: 100%; /* Alterado para 100% para ocupar toda a largura */
max-width: 990px; /* Máximo de 990px */
padding: 0 10px; /* Adicionei padding para dar um respiro ao conteúdo */
box-sizing: border-box; /* Para incluir o padding na largura total */
}
.logo {
display: flex;
align-items: center;
}
.menu {
display: flex;
align-items: center;
}
nav ul,
nav li {
list-style: none;
margin: 0;
padding: 0;
}
nav ul {
display: flex;
}
nav a {
display: block;
padding: 15px;
text-decoration: none;
text-transform: uppercase;
color: #727272;
font-family: Arial;
}
nav .active a,
nav a:hover {
background-color: #39aae1;
color: #ffffff;
}
#banner {
display: flex;
justify-content: center;
background-image: url('../images/img1.jpg');
background-position: center;
background-size: cover;
height: 670px;
width: 100%; /* Certificar que o banner ocupa toda a largura */
padding: 0;
margin: 0;
}
.column {
display: flex;
flex-direction: column;
width: 100%;
padding: 0;
margin: 0;
}
.banner_headline {
flex: 1;
display:flex;
flex-direction:column;
justify-content:center;
margin: 0; /* Remove qualquer margem */
}
.banner_headline h1 {
color:#ffffff;
font-size:70px;
text-shadow:1px 1px 0px #000000;
margin:0;
padding:0;
max-width:350px;
}
.banner_headline h2 {
color:#ffffff;
font-size:21px;
text-shadow:1px 1px 0px #000000;
margin:0;
padding:0;
max-width:350px;
margin-top:30px;
}
.banner_options {
height:210px;
display:flex;
margin: 0; /* Remove qualquer margem */
}
.banner1,
.banner2,
.banner3{
flex:1;
color:#ffffff;
padding:20px;
}
.banner1{
background-color:#39aae1;
}
.banner2{
background-color:#0079c7;
}
.banner3{
background-color:#2b4c99;
}
.banner_title{
font-size:21px;
}
.banner_desc{
font-size:12px;
margin-top:20px;
margin-bottom:20px;
}
.banner_options a {
display:inline-block;
border:1px solid #ffffff;
padding:5px;
color:#ffffff;
font-size:13px;
text-decoration:none;
}
.banner_horarios{
flex: 1;
font-size: 14px;
border-bottom: 1px solid #527272;
margin-top: 20px;
padding-bottom: 5px;
}
.horas{
float: right;
}
#geral{
display:flex;
justify-content:center;
}
#geral section {
flex:2;
}
#geral aside{
flex:1;
}
.widget_title {
margin-top:30px;
margin-bottom:20px;
}
.widget_title_text {
color:#000000;
font-size: 21px;
font-weight: bold;
}
.flex{
display: flex;
flex-wrap: wrap;
}
article{
flex: 1;
min-width: 300px;
margin-right: 20px;
}
.widget_title_bar{
width:50px;
height:3px;
background-color: #36a9e1;
margin-top: 10px;
}
article .news_data {
display: flex;
}
article .news_posted_at {
background-color: #2b4c99;
color: #fff;
font-size: 12px;
padding: 10px;
margin-right: 2px;
}
article .news_comments {
background-color: #39aae1;
color: #fff;
font-size: 12px;
padding: 10px;
}
article .news_thumbnail {
margin-top: 30px;
}
article .news_thumbnail img {
width: 100%;
height: auto;
}
article .news_title {
margin-top:25px;
margin-bottom:25px;
font-size: 23px;
}
article .news_resuem{
color:#5c5c5c;
line-height: 19px;
font-size:14px;
margin-bottom:30px;
}
a {
text-decoration:none;
color:black;
}
.widget_body{
display: flex;
justify-content:space-around;
flex: 1;
align-items:center;
flex-flow: row wrap;
}
.deps{
width: 140px;
height: 140px;
margin-top: 10px;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
background-color: #0079c7;
display: flex;
}
.widget_contact_text{
margin-bottom: 10px;
margin: 5px;
align-items: center;
font-size: 13px;
margin-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #5c5c5c;
margin-bottom: 10px;
}
.widget_contact_text{
display: flex;
margin-left: 2px;
margin-right: 1px;
}
.widget_contact_text,u{
margin-left: 5px;
color: #727272;
font-size: 15px;
text-decoration: none;
}
footer{
background-color: #1e1e1e;
display:flex;
justify-content: center;
}
.footer_menu{
display: flex;
}
.fm_1,.fm_2,.fm_3 {
flex: 1;
color: #ffffff;
padding: 20px;
}
.fm_1{
background-color:#39aae1;
}
.fm_2{
background-color:#0079c7;
}
.fm_3{
background-color:#2b4c99;
}
.flexcolumn {
flex-direction:column; ;
}
.footer_area{
display:flex;
}
.footer_area_item{
color: white;
flex: 1;
}
footer .widget_title_text {
color: white;
}
.footer_copy{
border-top:1px solid #2c2c2c;
height: 40px;
line-height: 40px;
color: #5c5c5c;
font-size:12px;
margin-top: 30px;
}
@media (max-width:600px) {
.banner_headline h1 {
font-size:55px;
}
.banner_headline h2{
font-size: 17px;
}
}
