Skip to content

Body odmello #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Odaraya wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Body odmello #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
00f4f61
'carrosel-shadow'
Odaraya May 5, 2020
7e1ebf6
icones about
Odaraya May 5, 2020
850c45d
todas sections
Odaraya May 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/banner origami.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/anaAlexandrino.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/montagem fagun.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/sorvete2019.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/thiago diniz.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
228 changes: 222 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-roxo">
<nav class="navbar navbar-expand-lg navbar-light bg-roxo">
<div class="container">
<a class="navbar-brand text-white" href="https://reprograma.com.br/" target="_blank">{Reprograma}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menudesktop" aria-controls="menudesktop" aria-expanded="false" aria-label="Alterna navegação">
Expand All @@ -29,14 +29,230 @@
</ul>
</div>
</div>
</nav>
</nav>

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./assets/banner origami.png" class="d-block w-100 imagem-carousel" alt="...">
<div class="carousel-caption d-none d-md-block text-body ">
<h2 class="destaque">FAGUN</h2>
<p class="destaque">Yoruba nigeriano sec.XIV, .n, girar; alongar; esticam; rotação; continuação; trecho... </p>
</div>
</div>
<div class="carousel-item">
<img src="./img/montagem fagun.png" class="d-block w-100 imagem-carousel" alt="...">
<div class="carousel-caption d-none d-md-block text-body ">
<h2 class="destaque">Gà mí ORÍ</h2>
<h6 class="destaque">Ioruba nagô-brasileiro, Gà: .n, Desenvolvimento; Mí: .p.p; mi, meu, minha; Orí: .n, Cabeça. </h6>
</div>
</div>
<div class="carousel-item">
<img src="./img/sorvete2019.jpg" class="d-block w-100 imagem-carousel" alt="...">
<div class="carousel-caption d-none d-md-block text-body ">
<h2 class="destaque">Desenvolvimento Web</h2>
<p class="destaque"> Projetos de aplicações à entrega de site implementado para cliente </p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

<section class=" text-center m-5">
<i class="fas fa-ankh justify-content icons_socialmedia "></i>
<h4 class="">Odaraya Mello</h4>
<h5 class="font-italic font-weight-lighter">Pessoa Desenvolvedora</h5>


<div class="d-flex flex-column flex-md-row justify-content-around my-5">
<a href="https://github.com/Odaraya" target="_blank">
<i class="fab fa-github icons_socialmedia"></i>
<span >github</span>
</a>
<a href="https://www.linkedin.com/in/odaraya-mello/" target="_blank">
<i class="fab fa-linkedin icons_socialmedia"></i>
<span >linkedin</span>
</a>
<a href="malito:odarayamello@gmail.com" target="_blank">
<i class="fas fa-envelope icons_socialmedia"></i>
<span > gmail.com</span>
</a>
</div>
</section>

<section class="habilities d-flex flex-wrap justify-content-around text-white">
<div class="icons m-4 col ">
<h3 class="d-flex justify-content-center m-4">Habilidades</h3>
<div class="d-flex justify-content-center">
<div class="text-center">
<i class="col fab fa-js-square"></i>
<p class="m-2">Javascript</p>
<i class="col fab fa-css3-alt"></i>
<p class="m-2">Css</p>
<i class="col fab fa-bootstrap"></i>
<p class="m-2">Bootstrap</p>
<i class="col fas fa-palette"></i>
<p class="m-2">Artista Visual</p>
</div>
<div class="text-center">
<i class="col far fa-file-code"></i>
<p class="m-2">JQuery</p>
<i class="col fab fa-html5"></i>
<p class="m-2">Html5</p>
<i class="col fas fa-tasks"></i>
<p class="m-2">Scrum</p>
<i class="col fas fa-fist-raised"></i>
<p class="m-2">Afro-Br People</p>
</div>

<div class="text-center">
<i class="col fab fa-react"></i>
<p class="m-2">React</p>
<i class="col fab fa-sass "></i>
<p class="m-2">Sass</p>
<i class="col fab fa-git-alt"></i>
<p class="m-2">Github</p>
<i class="col fas fa-adjust"></i>
<p class="m-2">Non-binary</p>
</div>
</div>
</div>

<div class="icons m-4 col text-center">
<h3 class="m-4">Sobre</h3>
<p>Aluna do bootcamp de front-end {reprograma}</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex optio ad consectetur commodi, repellat
ratione laudantium? Ut, optio rem voluptate praesentium natus nesciunt molestias eos, tenetur cupiditate
fugit ipsum maiores.</p>
<p>interesse</p>
</div>
</section>

<h3 class="text-center m-4 font-weight-bold">Portifólio</h3>

<div class="d-flex flex-wrap justify-content-around">
<div class="card text-center" style="width: 18rem;">
<img src="./img/anaAlexandrino.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">M de Maravilhosa</h5>
<button type="button" class="btn bg-roxo text-white m-auto m-5" data-toggle="modal" data-target="#modal1">
Launch demo modal
</button>
</div>
</div>
<!-- Button trigger modal -->


<!-- Modal -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>

<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>





<div class="card text-center" style="width: 18rem;">
<img src="./img/thiago diniz.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Artistico</h5>
<button type="button" class="btn bg-roxo text-white m-auto m-5" data-toggle="modal" data-target="#modal2">
Launch demo modal
</button>
</div>
</div>
<!-- Button trigger modal -->


<!-- Modal -->
<div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>

<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<a href="http://cargocollective.com/odarayamello"></a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

<div class="card text-center" style="width: 18rem;">
<img src="./assets/portfolio-nome.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">To Do List</h5>
<button type="button" class="btn bg-roxo text-white m-auto m-5" data-toggle="modal" data-target="#modal3">
Launch demo modal
</button>
</div>
</div>
</div>
<!-- Button trigger modal -->



<!-- Modal -->
<div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>

<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>


<footer class="bg-roxo footer text-center md-3">
<p class="text-white">Desenvolvido por <a class="text-white font-weight-bold"
href="X">Odaraya Mello </a>{reprograma} 2020</p>
</footer>

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
</body>



Expand Down
51 changes: 51 additions & 0 deletions styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,55 @@

a:hover{
font-weight: bold;
}

.imagem-carousel {
object-fit: cover;
object-position: 0 40%;
height: 65vh;
}

.destaque {
text-shadow:1px 1px 2px whitesmoke;

}

.icons_socialmedia {
color: #7E459B;
}
span{
color: #7E459B;
}
.about {
padding: 40px;
}

.icons {
color: white;

}

.habilities {
background-color:#7E459B;
}

.card-img-top {
object-fit: fill;
height: 300px;
border-bottom: 1px solid rgb(216, 209, 209);

}

.btn-roxo {
color: #fff;
background-color: #7E459B;
}

.btn-roxo:hover {
color: beige;
}

.footer {
margin-top: 40px;
padding: 10px;
}