Click the buttons below to navigate the page or access the code and assets repository on GitHub.
Embedded Files
This portfolio project showcases the homepage of a fictional User Experience Design website called “Echo UX”, inspired by the homepage of Spinx. The structure was built with HTML5, while the visual design was created with CSS. All clickable elements feature hover or click interactions implemented with CSS.
Note: This project is designed for desktop devices.
index.HTML
index.HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="reset.css">
<title>Echo UX</title>
<link rel="shortcut icon" type="imagex/png" href="assets/icon/ux.ico">
</head>
<body>
<nav class="headernav">
<div class="header-content">
<div class="logo">
<a href="">
<img src="assets/img/logo.png" alt="logo">
</a>
</div>
<ul class="navigation">
<li>
<a href="">
<span class="navtext">Work</span>
</a>
</li>
<li>
<a href="">
<span class="navtext">Expertise</span>
</a>
</li>
<li>
<a href="">
<span class="navtext">About</span>
</a>
</li>
<li>
<a href="">
<span class="navtext">Insigts</span>
</a>
</li>
</ul>
<button class="headerbt">
<img src="assets/icon/MailOutlined.png">
<span>START A PROJECT</span>
</button>
</div>
</nav>
<main>
<div class="pagetitle">
<span>Echo UX</span>
</div>
<div class="pagesubtitle">
<span> The new age of UX Design is now. Create a unique project with a team of designers and devs that not only understand the technical part, but also understand about business.</span>
</div>
<hr class="line">
<div class="sections">
<div class="section1">
<span class="section-title">Web & App</span>
<span class="section-content"> Our skilled team specializes in crafting user-friendly interfaces for desktop and mobile platforms, as well as designing engaging apps. With a focus on modern design principles, we bring your vision to life, ensuring a seamless and captivating user experience. Whether you're launching a new product or refreshing an existing platform, our team is committed to delivering cutting-edge design solutions that leave a lasting impact. Elevate your digital presence with us and let your users experience the future of design.</span>
</div>
<div class="section2">
<span class="section-title totheright">Business & Strategy</span>
<span class="section-content"> What sets our UX Design team apart is our unique combination of design expertise and business strategy. We go beyond aesthetics, aligning our designs with your business goals. By integrating strategic thinking with creative solutions, we enhance user experiences and drive meaningful results.</span>
</div>
</div>
<hr class="line">
<div class="weare">
<div class="weare-left">
<div class="weare-title">
<span>We are</span>
</div>
<div class="weare-subtitle">
<span class="weare-subtitle">Creative Designers, Insightful Strategists, and Exceptional Engineers</span>
</div>
<div class="weare-paragraph">
<span>We are Echo UX. As innovators in creative website design & digital marketing, we build awesome digital masterpieces!</span>
</div>
</div>
<div class="weare-right">
<div class="weare-item1">
<span class="weare-subtitle">10+</span>
<span class="weare-info">Years in business</span>
</div>
<div class="weare-item1">
<span class="weare-subtitle">250+</span>
<span class="weare-info">Projects launched</span>
</div>
<div class="weare-item1">
<span class="weare-subtitle">30+</span>
<span class="weare-info">Awards & recognition</span>
</div>
</div>
</div>
<hr class="line">
<div class="part2">
<div class="part2-title">
<span>Helping brands, big and small</span>
</div>
<div class="brands">
<div class="brand-square">
<img src="assets/img/brands/Amazon.svg">
</div>
<div class="brand-square">
<img src="assets/img/brands/Beats.svg">
</div>
<div class="brand-square">
<img src="assets/img/brands/CBS.svg">
</div>
<div class="brand-square">
<img src="assets/img/brands/LACounty.svg">
</div>
<div class="brand-square">
<img src="assets/img/brands/NBC.svg">
</div>
<div class="brand-square">
<img src="assets/img/brands/CBS.svg">
</div>
</div>
</div>
<hr class="line">
<div class="contact">
<div class="contact-items">
<img src="assets/img/fx.png">
<div class="contact-text">
<span class="contact-title">Are you looking for a website with a fresh and modern user experience?</span>
<span class="contact-info">Our Los Angeles website design agency is here to transform your digital space into an immersive journey. Reach out today and let's craft an online platform that leaves a lasting impression.</span>
<button class="contactbt">
<span>CONTACT US</span>
</button>
</button>
</div>
</div>
</div>
</main>
</body>
</html>
style.css
style.css
body {
background-image: url(assets/img/backradial.png);
background-repeat: no-repeat;
background-color: #16171A;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
list-style-type: none;
}
.backradial {
margin-top: -8px;
margin-left: -8px;
position: absolute;
}
.headernav {
padding: 16px;
border-bottom: 1px solid rgb(255, 255, 255, 0.1);
gap: 24px;
}
.header-content {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
margin-left: 244px;
margin-right: 244px;
}
.logo img{
width: 180px;
}
.navigation {
display: flex;
flex-direction: row;
gap: 56px;
text-decoration: none;
text-transform: none;
font-family:"Inter", sans-serif;
color: #fff;
margin-left: 80px;
}
.headerbt {
background-color: #B4E300;
color: #16171A;
padding: 16px 24px;
font-size: 14px;
font-weight: 500;
border: none;
font-family:"Inter", sans-serif;
cursor: pointer;
margin-left: auto;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.headerbt:hover {
background-color: #fff;
}
main {
margin-bottom: 80px;
}
.pagetitle {
margin-left: 244px;
margin-top: 56px;
}
.pagetitle span{
font-family: "Inter", sans-serif;
font-size: 240px;
font-weight: 800;
background-image:linear-gradient(to right, rgb(141, 221, 95), rgb(87, 207, 255));
color: transparent;
background-clip: text;
}
.pagesubtitle {
font-family: "Inter", sans-serif;
color: #fff;
font-size: 40px;
font-weight: 600;
margin-left: 244px;
max-width: 955px;
}
.line {
margin-top: 56px;
margin-bottom: 24px;
margin-left: 244px;
margin-right: 244px;
border: 1px solid rgb(255, 255, 255, 0.1);
}
.sections {
margin-top: 90px;
margin-left: 424px;
max-width: 1050px;
gap: 180px;
display: flex;
flex-direction: column;
}
.section1 {
display: flex;
flex-direction: column;
gap: 40px;
}
.section2 {
display: flex;
flex-direction: column;
gap: 40px;
}
.section-title {
font-family: "Inter", sans-serif;
color: #fff;
font-size: 56px;
font-weight: 600;
}
.section-content {
font-family: "Inter", sans-serif;
color: #8d8d8d;
font-size: 32px;
font-weight: 400;
}
.totheright {
margin-left: auto;
}
.weare {
margin-left: 244px;
max-width: 1400px;
display: flex;
flex-direction: row;
gap: 56px;
}
.weare-left {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 960px;
}
.weare-title {
font-family: "Inter", sans-serif;
font-size: 144px;
font-weight: 800;
background-image:linear-gradient(to right, rgb(231, 50, 150), rgb(253, 238, 25));
color: transparent;
background-clip: text;
}
.weare-subtitle {
font-family: "Inter", sans-serif;
color: #fff;
font-size: 40px;
font-weight: 600;
}
.weare-paragraph {
font-family: "Inter", sans-serif;
color: #8d8d8d;
font-size: 16px;
font-weight: 500;
}
.weare-right {
margin-left: auto;
margin-top: 56px;
margin-right: 180px;
display: flex;
flex-direction: column;
gap: 40px;
}
.weare-item1 {
display: flex;
flex-direction: column;
gap: 8px;
}
.weare-info {
font-family: "Inter", sans-serif;
color: #8d8d8d;
font-size: 16px;
font-weight: 500;
}
.part2 {
display: flex;
flex-direction: column;
margin: 24px 80px;
}
.part2-title {
display: flex;
flex-direction: column;
align-items: center;
font-family: "Inter", sans-serif;
font-size: 90px;
font-weight: 800;
background-image:linear-gradient(to right, rgb(50, 231, 177), rgb(25, 59, 253));
color: transparent;
background-clip: text;
}
.brands {
margin-top: 40px;
display: flex;
flex-direction: row;
}
.brand-square {
background-color: #fff;
border-right: 1px solid #16171A;
width: 16.6vw;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.brand-square:hover {
background-color: #e7e7e7;
}
.contact {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 24px;
margin-right: 24px;
margin-top: 56px;
}
.contact-items {
display: flex;
flex-direction: row;
align-items: center;
gap: 48px;
}
.contact img{
width: 360px;
}
.contact-text {
max-width: 40vw;
margin-top: 80px;
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-title {
font-family: "Inter", sans-serif;
color: #fff;
font-size: 56px;
font-weight: 600;
}
.contact-info {
font-family: "Inter", sans-serif;
color: #8d8d8d;
font-size: 16px;
font-weight: 500;
max-width: 700px;
}
.contactbt {
background-color: #B4E300;
color: #16171A;
padding: 16px 24px;
font-size: 14px;
font-weight: 500;
border: none;
font-family:"Inter", sans-serif;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
width: 180px;
margin-top: 24px;
}
.contactbt:hover {
background-color: #fff;
}
Page updated
Google Sites
Report abuse