Scribd
Upload
5 views

Uiuxfront

Uploaded by

sgrishma559
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

Uiuxfront

Uploaded by

sgrishma559
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

ADHIYAMAAN COLLEGE OF ENGINEERING

(Autonomous), Hosur
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
(Accredited by NBA)

CASE STUDY

Subject Code: 522CIE10 Class: III-A, V Sem


Subject Name: UI/UX DESIGN Batch: 2022-2026
Academic Year: 2024-2025

DEVELOP AN INTERFACE WITH PROPER UI STYLE GUIDES

TEAM MEMBERS:

DEEPICASREE S (6176AC22UCS026)

GRISHMA S (6176AC22UCS050)

HARINI N (6176AC22UCS053) Staff I/C


CASE STUDY 1: DEVELOP AN INTERFACE WITH PROPER UI STYLE GUIDES

HTML: (ui_ux1.html)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Abstract Creative UI</title>

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

</head>

<body>

<div class="abstract-container">

<div class="abstract-section" id="section1">

<div class="circle"></div>

<div class="content">

<h2>Innovative Ideas</h2>

<p>Transforming concepts into reality through abstract thinking.</p>

</div>

</div>

<div class="abstract-section" id="section2">

<div class="triangle"></div>

<div class="content">

<h2>Dynamic Motion</h2>

<p>Experience the flow of creativity through movement and energy.</p>

</div>

</div>

<div class="abstract-section" id="section3">

<div class="square"></div>

<div class="content">
<h2>Structured Creativity</h2>

<p>Bringing order to chaos with balanced design and structure.</p>

</div>

</div>

</div>

<script src="scripts.js"></script>

</body>

</html>

CSS: (styles.css)

/* Global Styles */

body, html {

margin: 0;

padding: 0;

font-family: 'Montserrat', sans-serif;

background-color: #111;

color: #fff;

overflow-x: hidden;

height: 100%;

.abstract-container {

display: flex;

flex-direction: column;

align-items: center;

padding: 50px;

gap: 50px;

.abstract-section {

width: 100%;

height: 300px;
position: relative;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

transition: transform 0.5s ease;

cursor: pointer;

background-color: #222;

border-radius: 20px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

.abstract-section:hover {

transform: scale(1.05);

box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);

.circle, .triangle, .square {

position: absolute;

opacity: 0.3;

.circle {

width: 150px;

height: 150px;

background-color: #e91e63;

border-radius: 50%;

animation: moveCircle 5s infinite ease-in-out;

.triangle {

width: 0;

height: 0;

border-left: 75px solid transparent;


border-right: 75px solid transparent;

border-bottom: 130px solid #00bcd4;

animation: moveTriangle 6s infinite ease-in-out;

.square {

width: 150px;

height: 150px;

background-color: #ffeb3b;

animation: moveSquare 7s infinite ease-in-out;

.content {

z-index: 1;

text-align: center;

animation: fadeIn 2s ease forwards;

.content h2 {

font-size: 2.5em;

margin-bottom: 10px;

.content p {

font-size: 1.2em;

@keyframes moveCircle {

0%, 100% {

transform: translate(0, 0);

50% {

transform: translate(200px, 100px);

}}

@keyframes moveTriangle {
0%, 100% {

transform: translate(0, 0);

50% {

transform: translate(-150px, -100px);

@keyframes moveSquare {

0%, 100% {

transform: translate(0, 0);

50% {

transform: translate(100px, -150px);

@keyframes fadeIn {

0% {

opacity: 0;

transform: translateY(30px);

100% {

opacity: 1;

transform: translateY(0);

}
OUTPUT:

RESULT:

Thus the interface using UI style guides has been developed successfully using HTML and CSS.

You might also like