Skip to content

Commit

Permalink
portafolio MADEM
Browse files Browse the repository at this point in the history
  • Loading branch information
@andresMZ-ec
andresMZ-ec committed Sep 21, 2021
0 parents commit 5aa5cd5
Show file tree
Hide file tree
Showing 4 changed files with 299 additions and 0 deletions.
182 changes: 182 additions & 0 deletions estilos.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');


*{
box-sizing: border-box;
}

:root{
--bg: #09042d;
--violeta: #db00b6;
--orange: #fa6f00;
--azul: #00d9ff;
--blanco: #ffff;
--f-lg: 'Monoton', cursive;
--f-ttle: 'Righteous', cursive;
--f-txt: 'Baloo 2', cursive;
}



body{
background-color: var(--bg);
padding: 0;
margin: 0;
}
body::-webkit-scrollbar{
display: none;
}

header.bg-main{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.bg-main .backg{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.bg-main .backg>img{
width: 100%;
height: 100%;
opacity: 70%;
object-fit: cover;
}
.bg-main .flex{
display: flex;
justify-content: space-between;
width: 80%;
align-items: center;
}
.flex .cl-1 h1{
font-family: var(--f-lg);
font-weight: 400;
font-size: 7.8rem;
margin: 0;
line-height: 100%;
color: var(--blanco);
/* text-shadow: 0 0 10px var(--rojo); */
}
.flex .cl-1 h2{
line-height: 100%;
margin: 0;
font-size: 3rem;
color: var(--violeta);
font-family: var(--f-lg);
font-weight: 100;
}
.flex .cl-2 .redirecc{
list-style: none;
text-align: right;
font-family: var(--f-ttle);
font-size: 1.6rem;
text-transform: uppercase;
}
.redirecc li {
margin-bottom: 10px;
}
.redirecc li a{
text-decoration: none;
color: var(--blanco);
transition: all ease .3s;
}
.redirecc li a:hover{
color: var(--orange);
padding-right: 20px;
border-right: 5px solid var(--orange);
}

main{
width: 100%;
height: 100%;
}
main .btn_home{
color: var(--blanco);
width: 50px;
height: 50px;
background-color: var(--violeta);
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 1.2rem;
border-radius: .3rem;
position: sticky;
top: 0;
left: 50px;
}
.grid_developers{
padding: 10vh;
width: 80%;
height: 100%;
margin: auto;
overflow: hidden;
display: grid;
grid-template-columns: 1fr;
grid-gap: 10%;
}
.grid_developers .container_dev{
width: 100%;
display: grid;
font-family: var(--f-ttle);
align-items: center;
grid-template-columns: 40% 60%;
}
.container_dev .profile{
justify-content: center;
display: flex;
}
.container_dev .profile img{
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 100%;
border:5px solid #ffff;
background-color: #ffff;
}
.container_dev .infor .name_dev{
color: var(--violeta);
font-weight: 600;
font-size: 2.3rem;
margin: 0;
}
.container_dev .infor .social_m{
color: var(--blanco);
font-weight: 600;
font-size: 1.3rem;
}
.container_dev .infor .social_m .flex{
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(auto-fill, 25px);
width: 90%;
margin: 7px auto;
}
.container_dev .infor .social_m .flex a{
color: var(--blanco);
}
.container_dev .infor .social_m h4{
color: var(--orange);
border-bottom: 3px solid var(--orange);
width: auto;
margin: 10px 0;
display: inline-flex;
}

footer{
background: linear-gradient(#323333, #2a2b2b);
padding: 2rem 0;
text-align: center;
}
.pie{
color: white;
}
Binary file added images/anchundia.jfif
Binary file not shown.
Binary file added images/moncayo.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
117 changes: 117 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="en">
<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">
<script src="https://kit.fontawesome.com/34cf304f66.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="estilos.css">
<title>MADEM | Developers</title>
</head>
<body>
<header class="bg-main" id="home">
<div class="backg">
<img src="https://i.pinimg.com/originals/b0/4e/36/b04e3630ac0152e4517908dff6589a09.gif" />
</div>
<div class="flex">
<div class="cl-1">
<h1 class="tt">MADEM</h1>
<h2 class="subtt">Programming</h2>
</div>
<div class="cl-2">
<ul class="redirecc">
<li><a href="#developers">Desarrolladores</a></li>
<li><a href="#grid_developers">Tecnologías Implementadas</a></li>
</ul>
</div>
</div>
</header>
<main>
<a href="#home" class="btn_home"><i class="fas fa-home"></i></a>
<section class="grid_developers" id="developers">
<div class="container_dev">
<div class="profile">
<img src="./images/moncayo.jpg" />
</div>
<div class="infor">
<h1 class="name_dev">Moncayo Zambrano Andrés</h1>
<div class="social_m">
<h4>CONTACTO:</h4>
<div class="flex">
<a href="#" class="item_social"><i class="fab fa-instagram"></i></a>
<a href="#" class="item_social"><i class="far fa-envelope"></i></a>
</div>
</div>
</div>
</div>
<div class="container_dev">
<div class="profile">
<img src="./images/anchundia.jfif" />
</div>
<div class="infor">
<h1 class="name_dev">Anchundia Lucas Leonel</h1>
<div class="social_m">
<h4>CONTACTO:</h4>
<div class="flex">
<a href="#" class="item_social"><i class="fab fa-instagram"></i></a>
<a href="#" class="item_social"><i class="far fa-envelope"></i></a>
</div>
</div>
</div>
</div>
<div class="container_dev">
<div class="profile">
<img src="" />
</div>
<div class="infor">
<h1 class="name_dev">Mendoza Pilligua Jonathan</h1>
<div class="social_m">
<h4>CONTACTO:</h4>
<div class="flex">
<a href="#" class="item_social"><i class="fab fa-instagram"></i></a>
<a href="#" class="item_social"><i class="far fa-envelope"></i></a>
</div>
</div>
</div>
</div>
<div class="container_dev">
<div class="profile">
<img src="" />
</div>
<div class="infor">
<h1 class="name_dev">Espinoza López Eddy</h1>
<div class="social_m">
<h4>CONTACTO:</h4>
<div class="flex">
<a href="#" class="item_social"><i class="fab fa-instagram"></i></a>
<a href="#" class="item_social"><i class="far fa-envelope"></i></a>
</div>
</div>
</div>
</div>
<div class="container_dev">
<div class="profile">
<img src="" />
</div>
<div class="infor">
<h1 class="name_dev">Delgado Alonso Pablo</h1>
<div class="social_m">
<h4>CONTACTO:</h4>
<div class="flex">
<a href="#" class="item_social"><i class="fab fa-instagram"></i></a>
<a href="#" class="item_social"><i class="far fa-envelope"></i></a>
</div>
</div>
</div>
</div>
</section>
</main>

<footer>
<p class="pie">
Developed and designed by MADEM. ©2021. A ll rights reserved.
</p>
</footer>

</body>
</html>

0 comments on commit 5aa5cd5

Please sign in to comment.