Scribd
Upload
3 views

Uiuxfront

Uploaded by

sgrishma559
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Uiuxfront

Uploaded by

sgrishma559
Copyright
© © All Rights Reserved
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