Felipe Parreiras

Back

Clique nos botões abaixo para navegar na página ou acessar o repositório de códigos e assets no Github

Navigate

Repository

Este projeto de portfólio apresenta a página inicial de um site fictício de Design de Experiência do Usuário chamado "Echo UX", baseado na página inicial do Spinx. A estrutura foi criada com HTML5 e a aparência com CSS. Todos os elementos clicáveis possuem interações de hover ou clique criadas com CSS.

Observação: Este projeto está focado em dispositivos de desktop.

index.HTML

<!DOCTYPE html>

<head>

</head>

<body>

</a>

</div>

<li>

</a>

</li>

<li>

<span class="navtext">Expertise</span>

</a>

</li>

<li>

<span class="navtext">About</span>

</a>

</li>

<li>

<span class="navtext">Insigts</span>

</a>

</li>

</ul>

<span>START A PROJECT</span>

</button>

</div>

</nav>

<main>

</div>

<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>

<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>

<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>

<span class="weare-subtitle">Creative Designers, Insightful Strategists, and Exceptional Engineers</span>

</div>

<span>We are Echo UX. As innovators in creative website design & digital marketing, we build awesome digital masterpieces!</span>

</div>

<span class="weare-info">Years in business</span>

</div>

<span class="weare-info">Projects launched</span>

</div>

<span class="weare-info">Awards & recognition</span>

</div>

<span>Helping brands, big and small</span>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<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>

<span>CONTACT US</span>

</button>

</div>

</main>

</body>

</html>

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;

}