Skip to content

Commit

Permalink
add layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@TrixDiaz
TrixDiaz committed Jul 28, 2023
1 parent 2f920c4 commit 3618b38
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 44 deletions.
100 changes: 61 additions & 39 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,15 @@
<body>
<main>
<header>
<div class="container-fluid header" id="header">
<div class="logo"><h2><strong>TRIX</strong></h2></div>
<div class="container-fluid header" id="header">
<div class="logo">
<h2><strong>TRIX</strong></h2>
</div>
<div class="links">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#project">Projects</a></li>
<li><a href="#contact">Contact</a></li>
<li><button>Hire Me!</button></li>
<div class="mode" id="mode"><i class="bi bi-brightness-high" id="icon"></i></div>
Expand All @@ -28,51 +30,53 @@
<i class="bi bi-brightness-high" id="menu-icon"></i>
<i class="bi bi-list-nested" id="toggle-menu"></i>
</div>
</div>
<div class="toggle-menu" id="toggle-nav">
</div>
<div class="toggle-menu" id="toggle-nav">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#project">Projects</a></li>
<li><a href="#contact">Contact</a></li>
<li><button>Hire Me!</button></li>
</ul>
</div>
</div>
</header>

<section id="home">
<div class="homes">
<div class="container home">
<div class="grid-container-2">
<div class="item-1 message">
<div class="intro">
<h1>Hi! I'm Trix <span>Developer</span>👋</h1>
<p>Hello There I'm John Carlien Trix Darlucio Web and Mobile Developer based in Manila, Philippines. 🌎 </p>
</div>
<div class="social">
<i class="bi bi-linkedin"></i>
<i class="bi bi-github"></i>
<i class="bi bi-instagram"></i>
<div class="homes">
<div class="container home">
<div class="grid-container-2">
<div class="item-1 message">
<div class="intro">
<h1>Hi! I'm Trix <span>Developer</span>👋</h1>
<p>Hello There I'm John Carlien Trix Darlucio Web and Mobile Developer based in Manila,
Philippines. 🌎 </p>
</div>
<div class="social">
<i class="bi bi-linkedin"></i>
<i class="bi bi-github"></i>
<i class="bi bi-instagram"></i>
</div>
</div>
<div class="item-2 picture"><img class="profile" src="/assets/images/picture-picture.jpg"
alt="profile-picture"></div>
</div>
<div class="item-2 picture"><img class="profile" src="/assets/images/picture-picture.jpg" alt="profile-picture"></div>
</div>
</div>
<div class="container home">
<div class="grid-container">
<div class="item-1 programming">
<h4>Tech Stack | </h4>
<img src="/assets/images/php.png" alt="php">
<img src="/assets/images/javascript.png" alt="js">
<img src="/assets/images/laravel.png" alt="laravel">
<img src="/assets/images/livewire.png" alt="livewire">
<img src="/assets/images/vue.png" alt="react">
<img src="/assets/images/git.png" alt="laravel">
<img src="/assets/images/tailwind.png" alt="tailwind">
<div class="container home">
<div class="grid-container">
<div class="item-1 programming">
<h4>Tech Stack</h4>
<img src="/assets/images/php.png" alt="php">
<img src="/assets/images/javascript.png" alt="js">
<img src="/assets/images/laravel.png" alt="laravel">
<img src="/assets/images/livewire.png" alt="livewire">
<img src="/assets/images/vue.png" alt="react">
<img src="/assets/images/git.png" alt="laravel">
<img src="/assets/images/tailwind.png" alt="tailwind">
</div>
</div>
</div>
</div>
</div>
</section>

<section id="about">
Expand All @@ -83,8 +87,8 @@ <h4>Tech Stack | </h4>
<h5>ABOUT ME</h5>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, tenetur.</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quam
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, non.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quam
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, non.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, quam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, explicabo.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, in.
Expand All @@ -94,14 +98,32 @@ <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, tenetur.<
</div>
</section>

<section id="services">
<section id="project">
<div class="container">
<h5>PORTFOLIO</h5>
<h4>Each project is a unique piece of development 🧩</h4>
</div>
</section>

<section id="contact">
<div class="container">

<h5>CONTACT</h5>
<h4>Don't be shy! Hit me up! 👇</h4>
<footer>
<div class="item-1">
<h2>Copyright © 2023. All rights are reserved</h2>
</div>
<div class="item-2">
<i class="bi bi-linkedin"></i>
<i class="bi bi-github"></i>
<i class="bi bi-instagram"></i>
</div>
</footer>
</div>
</section>





</main>
<script src="script.js"></script>
</body>
Expand Down
36 changes: 31 additions & 5 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ img {
position: fixed;
width: 100%;
z-index: 10;
transition: 2s ease;
}
.logo,
.mode,
Expand Down Expand Up @@ -230,11 +231,12 @@ body {
/*---------------------*\
#About
\*----------------------*/
#home{
#about{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
height: 50vh;
background-color: var(--dark-black-color);
}
.about .grid-container-2{
display: flex;
Expand All @@ -244,26 +246,49 @@ body {
.about .grid-container-2 img{
height: 20rem;
border-radius: 1rem;
margin-right: 2.50rem;
}
.about .grid-container-2 .item-2{
position: relative;
max-width: 31%;
}
.about .grid-container-2 .item-2 h5{
color: var(--blue-color);
font-weight: 600;
font-weight: 700;
font-size: 1rem;
}
.about .grid-container-2 .item-2 h4{
font-weight: 600;
font-weight: 900;
font-size: 1.10rem;
margin-block: 1rem
margin-block: 2rem;
line-height: 2rem;
}
.about .grid-container-2 .item-2 p{
font-size: 1rem;
line-height: 2rem;
}

/*---------------------*\
#Project
\*----------------------*/
#project{
height: 50vh;
}
#project .container{
margin-top: 10rem;
margin-inline: 20rem;
}

/*---------------------*\
#Contact
\*----------------------*/
#contact{
height: 50vh;
}
#contact .container{
margin-top: 10rem;
margin-inline: 20rem;
}

/*---------------------*\
#Light Mode
Expand All @@ -275,6 +300,7 @@ body.light-mode{
}
body.light-mode .header{
background-color: var(--white-color);
transition: 2s ease;
}
body.light-mode .header .links ul li a{
margin-inline: 1rem;
Expand Down

0 comments on commit 3618b38

Please sign in to comment.