Edoc

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Personal Portfolio | Angelica dela Cruz & Jessa Mae
Responso</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="images/Favicon.png" type="image/x-icon">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'
rel='stylesheet'>
<style>@import url('https://fonts.googleapis.com/css2?
family=Outfit:wght@300;400;500;600;700&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Outfit' , sans-serif;
list-style: none;
text-decoration: none;
scroll-behavior: smooth;
}
:root{
--bg-color: #0000FF;
--bg2-color: #1e2539;
--text-color: #fff;
--main-color: #0000FF;
--second-color: #dfdfdf;
--boarder-color: rgba (45, 198, 83, 0.2);
--h1-font: 5.2rem;
--h2-font: 3.5rem;
--p-font: 1rem;
}
body{
background: url(https://img.freepik.com/premium-vector/technology-
background-with-hitech-digital-data_29971-1430.jpg);
color: var(--text-color);
}
header{
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
padding: 22px 16%;
border-bottom: 1px solid transparent;
transition: all .40s ease;
}
.logo img{
width: 50px;
height: auto;
}
.navbar{
display: flex;
}
.navbar a{
color: VAR(--text-color);
font-size: var(--p-font);
font-weight: 600;
padding: 10px 25px;
margin: 0 2px;
}
.navbar a:hover{
color:var(blue);
}
#menu-icon{
font-size: 35px;
z-index: 1000;
cursor: pointer;
display: none;
}
section{
padding: 160px 16% 90px;
}
.home{
height: 100vh;
width: 100%;
position: relative;
background: url(https://scontent.xx.fbcdn.net/v/t1.15752-
9/412321236_7026383090732466_2196576244596888192_n.png?_nc_cat=111&ccb=1-
7&_nc_sid=510075&_nc_eui2=AeGxJF251CPLvO-OJ8B2ZZuP-ImkKZfOCgn4iaQpl84KCSf228U-
8i_YPaonZzOpNVUGnoqv-RgytKelnpzhHXvG&_nc_ohc=lPszf6BUttcAX_hvEUr&_nc_ad=z-
m&_nc_cid=0&_nc_ht=scontent.xx&oh=03_AdTfz4Rv_P7BmhPSD0tMKvFveW-
0pnPlExTcFFSD3YGjag&oe=65C417FA);
background-size: cover;
background-position: center;
display: flex;
justify-content: flex-start;
}
.home_content h1{
margin: 30px 0;
font-size: var(--h2-font);
font-weight: bold;
line-height: 1.1;
letter-spacing: 2px;
}
.home_content H4{
color: var(white);
font-size: 24px;
font-weight: 600;
}
.btn{
display: inline-block;
padding: 14px 30px;
border-radius: 0.5rem;
font-size: 17px;
font-weight: 500;
background: var(--bg-color);
border: 1px solid var(--bg-color);
}
.btn:hover{
transform: scale(1.05) translateX(-5px);
background: transparent;
border: 1px solid var(--bg-color);
}
header.sticky{
padding: 10px 16%;
border-bottom: 1px solid var(--boarder-color);
transition: .4s;
}
.about{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.about__content h2{
}
.about__content h4{
margin: 10px 0;
color: var(--bg-color);
font-size: 20px;
font-weight: 600;
}
.about__content p{
color: var(--second-color);
line-height: 30px;
margin-bottom: 2rem;
}
.about-img img{
height: auto;
width: 100%;
max-width: 460px;
}
.main__text{
text-align: center;
}
.main__text{
margin-bottom: 10px;
}
.main__text h4{
color: var(white );
font-size: 15px;
font-weight: 600;
}
.solutions__content{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, auto));
text-align: center;
gap: 2rem;
margin-top: 5rem;
}
.box{
padding: 25px;
background: var(--bg2-color);
border: 1px solid var(--boarder-color);
transition: all .40 ease;
cursor: pointer;
}
.box h3{
font-size: 20px;
margin: 15px 0;
font-weight: 600;
}
.box h3:hover{
color: var(--main-color);
}
.box p{
line-height: 20px;
}
.box:hover{
border: 1px solid var(--main-color);
}
.solution img{
height: 300px;
width: 100%;
margin-bottom: 1.5rem;
}
.portfolio__content{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, auto));
gap: 2rem;
margin-top: 5rem;
}
.row img{
height: 300px;
width: 100%;
}
.row{
padding: 25px;
}
.row:hover{
}
.main__row{
display: flex;
justify-content: space-between;
}
.row h3{
font-size: 20px;
font-weight: 600;
}
.row:hover h3{
}
.row h6{
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
}
.contact{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
.contact__text h2{
}
.contact__text h4{
margin: 15px 0;
font-size: 20px;
font-weight: 600;
}
.contact__text p{
line-height: 30px;
}
.social__icons{
height: 40px;
width: 40px;
display: inline-flex;
justify-content: center;
font-size: 18px;
margin-right: 10px;
transition: transform 0.4s ease, border 0.4s ease, box-shadow 0.4s
ease;
}
.social__icons i:hover{
box-shadow: 0 0 10px var(--main-color);
}
.contact__form form{
position: relative;
}
.contact__form form input,

.contact__form textarea{
outline: none;
width: 100%;
padding: 18px;
font-size: 1rem;
font-weight: 500;
transition: transform 0.4s ease, border 0.4s ease;
}
.contact__form textarea{
resize: none;
height: 200px;
}
.contact__form textarea:hover{
}
.contact__form input:hover{
}
.footer{
text-align: center;
padding: 23px;
border-top: 1px solid var(--boarder-color);
}
.footer i{
animation: heartbeat 1.5s infinite;
}
@keyframes heartbeat {
0%{
transform: scale(1);
}
25%{
transform: scale(1.1);
}
50%{
}
75%{
transform: scale(1.1);
}
0%{
}
}
.scroll__up{
position: absolute;
bottom: 2.1rem;
right: 2.1rem;
}
.scroll__up i{
font-size: 20px;
padding: 10px;
border-radius: 50%;
transition: transform 0.4s ease, border 0.4s ease, box-shadow 0.4s
ease;
}
.scroll__up i:hover{
box-shadow: 0 0 10px var(--main-color);
}
@media screen and (max-width: 1325px){

header{
padding: 16px 3%;
}
header.sticky{
padding: 8px 3%;
}
section{
}
}
@media(max-width: 970px){
:root{
--h1-font: 4.2rem;
--h2-font: 2.9rem;
--p-font: 0.9rem;
}
section{
}
.home{
height: 85vh;
}
.about{
grid-template-columns: 1fr;
}
.about-img{
text-align: center;
}
.contact{
grid-template-columns: 1fr;
}
}
@media (max-width: 830px){

#menu-icon{
display: block;
}
.navbar{
position: absolute;
top: 100%;
right: 0;
left: 0;
display: flex;
flex-direction: column;
text-align: left;
}
.navbar a{
display: block;
margin: 0.7rem;
padding: 0.5rem;
}
.navbar .active{
top: 100%;
}
:root{
--h1-font: 3.5rem;
--h2-font: 2.5rem;
}
}</style>
<script>document.addEventListener('DOMContentLoaded', function() {
let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');
// Event listener to toggle 'bx-x' and 'active' classes on click

menu.onclick = () => {
menu.classList.toggle('bx-c');
navbar.classList.toggle('active');
};
// Event listener to remove 'bx-x' and 'active' classes on scroll

window.onscroll = () => {
menu.classList.remove('bx-x');
navbar.classList.remove('active');
};
const header = document.querySelector("header");
// Event listener to toggle 'sticky' class on scroll

window.addEventListener("scroll", function() {
header.classList.toggle("sticky", window.scrollY > 0);
});
});</script>
</head>
<body>
<header>
<a href="" class="logo"><img src=""></a>
<div class="bx bx-menu" id="menu-icon"></div>
<ul class="navbar">
<li><a href="#home">Welcome</a></li>
<li><a href="#about">About</a></li>
<li><a href="#solutions">Services</a></li>
<li><a href="#portfolio">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
<section class="home" id="home">

<div class="home_content">
<h2>welcome!</h2>
<h1>We build pixel-perfect, <br>accessible products <br>for the web
<br>and beyond</h1>
<a href="index.html#contact" class="btn"> Get a Qoute</a>
</div>
</section>
<section class="about" id="about">

<div class="about-img">
<img src="https://scontent.xx.fbcdn.net/v/t1.15752-
9/413475606_2077406432612729_8664194919669046532_n.png?_nc_cat=110&ccb=1-
7&_nc_sid=510075&_nc_eui2=AeHqZ7M1JfdIvunHFzdWQdSV1sSHQNNPzS7WxIdA00_NLgeFA_TKlak
J5yqYtuWXym-X-WrIIvA8IVrOs7nS7Nuu&_nc_ohc=qVbZMsQXEd8AX_a6owV&_nc_ad=z-
m&_nc_cid=0&_nc_ht=scontent.xx&oh=03_AdQoa7XzjG0Nc9-
4iGplaptSb2FqHCXqzOvO0C815cBNKA&oe=65C34655"alt="" width="350" height="290">
</div>
<div class="about_content">
<h2>About Us</h2> <br>
<h4>We build pixel-perfect, accessible products for the web and
beyond.</h4> <br>
<p>We decided to try our hand at creating custom Tumblr themes and
tumbled head first into the rabbit hole of coding and web development. We’ve had
the privilege of building software for an advertising agency, a start-up, a
student-led design studio, and a huge corporation.
<br>Our main focus these days is building products and leading

projects for our clients at Upstatement. In our free time we've also released an
online video course that covers everything you need to know to build a web app
with the Spotify API.</p> <br>
<a href="index.html#contact" class="btn">Get Started</a>
</div>
</section>
<section class="solution" id="solutions">

<div class="main__text">
<h2>Our Services</h2> <br>
<h4>We offer top-notch software development services tailored to
meet your specific needs. Our team of experienced software developers are skilled
in a wide range of programming languages, including but not limited to Java,
Python, C++, and JavaScript. </h4>
</div>
<div class="solutions__content">
<div class="box">
<img src="https://www.kindpng.com/picc/b/112-1127634_custom-
software-development-icon-hd-png-download.png">
<h3>Custom Software Development</h3>
<p>We build software from scratch, based on your unique
requirements. We ensure that the software we develop is scalable, secure, and
efficient. </p> <br>
</div>
<div class="box">
<img
src="https://cdn.icon-icons.com/icons2/1508/PNG/512/systemsoftwareupdate_104262.p
ng">
<h3>Software Upgrades and Maintenance</h3>
<p>We provide regular updates and maintenance to ensure your
software remains up-to-date and continues to meet your evolving needs. </p>
</div>
<div class="box">
<img
src="https://cdn-icons-png.flaticon.com/512/10435/10435234.png">
<h3>Software Testing and Quality Assurance</h3>
<p>We conduct rigorous testing to ensure that the software we
develop is free from bugs and meets the highest quality standards. </p> <br>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">

<div class="main__text">
<h2>Projects</h2><br>
<h4>In the dynamic field of software development, practical
experience is just as valuable as theoretical knowledge. Our team of seasoned
developers has a diverse portfolio of projects under their belt, showcasing their
ability to adapt to different industries and their unique requirements. These
projects demonstrate our commitment to delivering high-quality, customized
software solutions that meet our clients' needs. Here are two examples of the
kind of projects our software developers undertake:</h4>
</div>
<div class="portfolio__content">
<div class="row">
<img
src="https://www.equinoxitsol.com/blog/wp-content/uploads/2021/12/Ecommerce-
Website-Development-Steps-1024x683-1.jpg">
<div class="main__row">
<div class="row__text">
<h7>This project involves creating a comprehensive
online shopping platform.</h7>
</div>
</div>
<h3>E-commerce Platform Development</h3>
</div>
<div class="row">
<img
src="https://api.otakoyi.software/uploads/blog-images/Healthcare_Management_Syste
m_HMS_Features_and_Benefits/4_Key_Healthcare_Management_Software_features.png">
<div class="main__row">
<div class="row__text">
<h8>This project aims to develop a software system that
can manage various aspects of a healthcare facility. </h8>
</div>
</div>
<h3>Healthcare Management System</h3>
</div>
</div>
</section>
<section class="contact" id="contact">

<div class="contact__text">
<h2>Connect with us</h2>
<h4>Lets Work Together</h4>
<p></p>
<div class="social__icons">
<a href="https://www.facebook.com/melvinjaymanaguelod172003?
mibextid=ZbWKwL" target="_blank"><i class='bx bxl-facebook-circle' ></i></a>
<a href="https://www.facebook.com/profile.php?
id=61555019720443&mibextid=ZbWKwL" target="_blank"><i class='bx bxl-facebook-
circle' ></i></a>
<a href="https://www.instagram.com/me.llvin?
igsh=MTRmaG9uZGlvbHFhdA==" target="_blank"><i class='bx bxl-instagram' ></i></a>
<a href="https://www.instagram.com/yulahmey?
igsh=MXh1ZXBjdDQwY2QwbQ==" target="_blank"><i class='bx bxl-instagram' ></i></a>
</div>
</div>
<div class="contact__form">
<form action="">
<input type="text" name="Name" placeholder="Full Name" required>
<input type="email" name="Email"
placeholder="example@domain.com" required>
<textarea name="Message" cols="38" rows="6" placeholder="Please
Enter Your Message" required></textarea>
<button type="submit" class="btn">Send Message</button>
</form>
</div>
</section>
<div class="footer">
<small>Made with <i class='bx bxs-heart' ></i>by MelvinJay Managuelod &
Eula mae Salvador @2024</small>
</div>
<a href="#" class="scroll__up"><i class='bx bxs-up-arrow-circle'></i></a>
<script src="script.js"></script>
</body>
</html>

Edoc

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Edoc

Uploaded by

Copyright:

Available Formats

<!

<link rel="stylesheet" href="style.css">

<link rel="shortcut icon" href="images/Favicon.png" type="image/x-icon">

.contact__form form input,

@media screen and (max-width: 1325px){

@media (max-width: 830px){

// Event listener to toggle 'bx-x' and 'active' classes on click

// Event listener to remove 'bx-x' and 'active' classes on scroll

const header = document.querySelector("header");

// Event listener to toggle 'sticky' class on scroll

<section class="home" id="home">

<section class="about" id="about">

<br>Our main focus these days is building products and leading

<section class="solution" id="solutions">

<section class="portfolio" id="portfolio">

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

<a href="#" class="scroll__up"><i class='bx bxs-up-arrow-circle'></i></a>

You might also like