LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed adipisci saepe neque omnis possimus, non rem ipsam at nesciunt iure qui aspernatur eum, consequuntur blanditiis optio itaque exercitationem est officiis.
Enim harum porro tenetur quos fugiat nisi, ut accusamus? Aspernatur sapiente enim sit aliquid corrupti architecto reprehenderit voluptates, nulla perferendis odit hic nihil quia vero impedit cumque quam delectus harum!
Minima nam quis debitis quae obcaecati voluptas exercitationem laboriosam quibusdam enim quo saepe incidunt sit cumque placeat, ut nemo totam eos velit, eligendi, recusandae officia pariatur. Saepe quisquam beatae omnis?
Delectus sint aut sapiente amet voluptates inventore quos dolores, fuga corporis. Ullam nam dicta et sit neque, distinctio reiciendis, eligendi excepturi doloribus fugiat ipsam! Natus aliquid accusamus maiores dicta eum?

My services:

My toolskills:

HTML5
CSS
Javascript
React
Jquery
Sass
Bootstrap
Node.js
PHP
Firebase
Mysql
MongoDB
Wordpress
WooCommerce
Adobe Photoshop
Adobe Illustrator
Git
Webpack
Gulp

My work:

CSS
body {
  margin: 0;
  
}

.header {
  background-color: #3D362E;
  height: 220px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  clip-path: polygon(100% 0, 100% 100%, 50% 78%, 0 99%, 0 0);
  

  
}

.logo {
  display: flex;
  align-items: center;
  margin-left: 30px;
  
}

.imagen {
  width: 95px;
  height: 95px;
  display: flex;
  align-items: stretch;
  margin-top: 25px;
}

.logo_nombres {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  align-items: stretch;
}

.logo_nombres p:first-child {
  font-size: 45px;
  font-weight: bold;
  color: #d1d0d0;
  font-family: 'Comfortaa', cursive;
}

.logo_nombres p:nth-child(2) {
  font-size: 20px;
  //margin-left: 50px;
  margin-top: -45px;
  color: #d1d0d0;
  font-family: 'Comfortaa', cursive;
}

.links {
  
  margin-right: 30px;
  
}

.lista {
  list-style: none;
  display: flex;
  flex-direction: row;
}

.lista li a {
  text-decoration: none;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 22px;
  margin-left: 50px;
}

.lista li:first-child {
  //margin-left: 0;
  border-bottom: 5px solid #fff;
  padding-bottom: 10px;
}







.section1 {
  background-color: #fff;
  height: 500px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 150px 0 150px;
}

.photo_bio {
  width: 380px;
  height: 380px;
}

.profile_bio {
  font-size: 17px;
  font-family: 'Lato', sans-serif;
  margin-left: 50px;
}







.section2 {
  background-color: #e0e0e0;
  height: 600px;
  clip-path: polygon(100% 0, 100% 90%, 0 100%, 0 10%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.services {
  width: 50%;

  display: flex;
  flex-direction: column;
  
  align-items: center;
  padding-top: 30px;
}

.services p {
  font-size: 35px;
  font-family: 'Lato', sans-serif;
  text-align: center;
  font-weight: bold;
  color: #494947;
}

.services_icons{
  display: flex;
  justify-content: center;
  //flex-wrap: wrap;
  //width: 80%;  
}

// .services_icons div{
  height: 120px;
  width: 120px;
  background-color: #E77F24;
  margin: 20px;
  
}

.icon{
  height: 250px;
  //width: 200px;
}

.toolskills {
  width: 50%;
  
  display: flex;
  flex-direction: column;
  align-items: center;
}



.toolskills p {
  font-size: 35px;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  color: #494947;
}

.name_skills{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  //align-items: center;
}

.name_skills div{
  font-size: 18px;
 //margin-left: 15px;
 //margin-right: 15px;
  margin-bottom: 5px;
  padding: 5px;
  background-color: #ebd6be;
  border-left: 5px solid #915b1f;
  border-radius:5px
}










.section3 {
  background-color: #fff;
  height: 600px;
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.section3 p {
  width: 100%;
  font-size: 35px;
  font-family: 'Lato', sans-serif;
  text-align: center;
  font-weight: bold;
  color: #494947;
}


.sec_portfolio {
  display: flex;
  //justify-content: center;
  width: 40%;
  height: 200px;
  margin: 0 5px 0 5px;
  
}

.sec_portfolio > div {
  //background-color: blue;
  //width: 50%;
  
  //margin: 5px;
}

.portfolio_img {
  width: 60%;
}
.sec_portfolio img {
  width: 100%;
  height: 100%;
  
}

.portfolio_a{
  display: flex;
  flex-direction: column;
  //align-items: center;
  width: 40%;
}

.portfolio_a div {
  display: flex;
  flex-direction: column;
  //align-items: center;
  //align-content: center;
}

.portfolio_a div a{
 //margin: auto;
 color: #fff;
 text-decoration: none;
 font-family: 'Lato', sans-serif;
 background-color: #3D362E;
 //width: 40%;
 margin: 5px;
 text-align: center;
 padding: 5px;
}





.section4 {
  background-color: #D24D57;
  height: 500px;
  
}
Term
Wed, 12/27/2017 - 06:59

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv