Skip to content

Commit

Permalink
update 22/09/2023
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucasops96
lucasops96 committed Sep 22, 2023
1 parent 73dda1c commit b503575
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 25 deletions.
64 changes: 49 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,70 @@
<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Social</title>
</head>

<body>
<header>
<h1>Olá, mundo!!!</h1>
<h2>Quem sou eu?</h2>
<img src="imagensrs/img-lucas.jpg" alt="perfil">
</header>

<main>
<div class="div-card">
<p>
Meu nome é <strong>João Lucas</strong>,
estou cursando Ciências da Computação na Universidade Estadual da
Paraíba e com experiências nas tecnologias de React e Node.js. Ainda mais, conhecimento nas linguagens
de JavaScript, Java e Python.
</p>
</div>

<section>
<p>Meu nome é <strong>João Lucas</strong>, estou cursando Ciências da Computação na Universidade Estadual da Paraíba e com experiências nas tecnologias de React e Node.js. Ainda mais, conhecimento nas linguagens de JavaScript, Java e Python.</p>
<p><strong>ATENÇÃO: Veja meus Projetos no GitHub no link abaixo</strong></p>
</section>
<div class="div-card parceiro-magalu">
<p>
<strong>🚀Sou parceiro Magalu 🛒</strong>
<br>
Como parceiro oficial oferecemos a você uma seleção imbatível
de produtos em eletrônicos, eletrodomésticos, móveis e muito mais.
<br>
<strong>Confira no link abaixo.</strong>
<br>
<a href="https://www.magazinevoce.com.br/magazineluquetastore/" target="_blank"
rel="external">https://www.magazinevoce.com.br/magazineluquetastore/</a>
</p>
</div>

<div class="div-card">
<p><strong>ATENÇÃO: Veja meus Projetos no GitHub no link abaixo</strong></p>
</div>

<section>
<h2>Como falar comigo?</h2>
<ul>
<li><img src="imagensrs/icons8-instagram-32.png" alt="instagram"> <a href="https://www.instagram.com/lucasninesix/" target="_blank" rel="external">/lucasninesix</a>-Me segue lá no Instagram.</li>
<li><img src="imagensrs/icons8-twitter-32.png" alt="twitter"><a href="https://twitter.com/JLucas12277631" target="_blank" rel="external">/lucasops</a>-Me segue lá no Twitter.</li>
<li><img src="imagensrs/icons8-github-32.png" alt="github"><a href="https://github.com/lucasops96" target="_blank" rel="external">/lucasops96</a>-Veja meus projetos no GitHub.</li>
<li><img src="imagensrs/icons8-linkedin-32.png" alt="linkdin"><a href="https://www.linkedin.com/in/jo%C3%A3o-lucas-362549216/" target="_blank" rel="external">/JoãoLucas</a>-Me adciona lá no Linkedin.</li>
<li><img src="imagensrs/icons8-reproduzir-youtube-32.png" alt="youtube"><a href="https://www.youtube.com/channel/UConDxrGzupxeKw54YENLbGw" target="_blank" rel="external">/JoãoLucas</a>-Se inscreva no meu canal do Youtube.</li>
</ul>
</section>

<div class="div-card">
<h2 class="title-fala-comigo">Como falar comigo?</h2>
<ul>
<li><img src="imagensrs/icons8-instagram-32.png" alt="instagram"> <a
href="https://www.instagram.com/lucasninesix/" target="_blank"
rel="external">/lucasninesix</a>-Me
segue lá no Instagram.</li>
<li><img src="imagensrs/icons8-twitter-32.png" alt="twitter"><a
href="https://twitter.com/JLucas12277631" target="_blank" rel="external">/lucasops</a>-Me segue
lá no Twitter.</li>
<li><img src="imagensrs/icons8-github-32.png" alt="github"><a href="https://github.com/lucasops96"
target="_blank" rel="external">/lucasops96</a>-Veja meus projetos no GitHub.</li>
<li><img src="imagensrs/icons8-linkedin-32.png" alt="linkdin"><a
href="https://www.linkedin.com/in/jo%C3%A3o-lucas-362549216/" target="_blank"
rel="external">/JoãoLucas</a>-Me adciona lá no Linkedin.</li>
<li><img src="imagensrs/icons8-reproduzir-youtube-32.png" alt="youtube"><a
href="https://www.youtube.com/channel/UConDxrGzupxeKw54YENLbGw" target="_blank"
rel="external">/JoãoLucas</a>-Se inscreva no meu canal do Youtube.</li>
</ul>
</div>
</main>
</body>

</html>
66 changes: 56 additions & 10 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body{
font-family: 'Roboto Mono', monospace;
margin: auto;
Expand All @@ -23,34 +29,74 @@ header > img {
height: 200px;
}

section {
.div-card {
text-align: center;
margin-top: 30px;
padding: 15px;
max-width: 600px;
margin: auto;
margin-bottom: 20px;
border-radius: 15px;
background-color: white;
}

section p{
.div-card p{
text-align: justify;
background-color: white;
border-radius: 10px;
padding: 10px;
}

section ul{

.parceiro-magalu{
text-align: center;
padding: 15px;
max-width: 600px;
margin: auto;
margin-bottom: 20px;
border-radius: 15px;
background: rgb(117, 117, 238);
}

.parceiro-magalu p{
text-align: center;
}

.parceiro-magalu a{
background: whitesmoke;
color: black;
width: 100%;
padding: 2px;
border-radius: 5px;
}

.title-fala-comigo{
color: black;
}

.div-card ul{
background-color: white;
display: inline-block;
border-radius: 10px;
padding: 10px;
text-align: left;
list-style-position: inside;
list-style-type: none;
}


section a{
.div-card a{
color:rgb(49, 49, 180);
}
section a:hover{
.div-card a:hover{
color: black;
}

@media screen and (max-width: 600px) {
.parceiro-magalu a {
background: whitesmoke;
color: black;
display: block;
width: 100%;
padding: 10px;
border-radius: 5px;
text-align: center;
margin-top: 10px;
font-size: 14px;
}
}

0 comments on commit b503575

Please sign in to comment.