Skip to content

whdev36-cyber/css-project-MFC

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
README.md
README.md
 
 

Repository files navigation

CSS Project: Mastering Fundamental Concepts

Project Structure

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Mastery Project</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <h1>CSS Mastery Project</h1>
        <nav class="nav">
            <ul class="nav-list">
                <li><a href="#selectors">Selectors</a></li>
                <li><a href="#box-model">Box Model</a></li>
                <li><a href="#layout">Layout</a></li>
                <li><a href="#effects">Effects</a></li>
            </ul>
        </nav>
    </header>

    <main class="main-content">
        <section id="selectors" class="section">
            <h2>Selectors & Text Styling</h2>
            <div class="selector-examples">
                <p>Element selector styles this paragraph</p>
                <p class="class-example">Class selector example</p>
                <p id="id-example">ID selector example</p>
                <p data-attr="example">Attribute selector example</p>
                <div class="descendant">
                    <p>Descendant selector example</p>
                </div>
                <p class="pseudo-class-example">Hover over me!</p>
                <p class="pseudo-element-example">First letter styled differently</p>
            </div>
            
            <div class="text-styling">
                <p class="font-example">Font family, size, and weight example</p>
                <p class="text-alignment">Centered text example</p>
                <p class="color-example">Color and background examples</p>
                <p class="white-space">This text will    preserve    all   white   space</p>
                <p class="word-wrap">Supercalifragilisticexpialidocious - long word wrapping example</p>
            </div>
        </section>

        <section id="box-model" class="section">
            <h2>Box Model</h2>
            <div class="box-model-demo">
                <div class="margin-box">
                    Margin
                    <div class="border-box">
                        Border
                        <div class="padding-box">
                            Padding
                            <div class="content-box">
                                Content
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="sizing-examples">
                <div class="fixed-size">Fixed width and height</div>
                <div class="percentage-size">Percentage width</div>
                <div class="min-max-size">Min and max width</div>
            </div>
            
            <div class="border-radius-example">Rounded corners</div>
            <div class="box-shadow-example">Box shadow effect</div>
        </section>

        <section id="layout" class="section">
            <h2>Layout Techniques</h2>
            
            <div class="positioning-examples">
                <div class="static-box">Static</div>
                <div class="relative-box">Relative</div>
                <div class="absolute-box">Absolute</div>
                <div class="fixed-box">Fixed</div>
                <div class="sticky-box">Sticky</div>
            </div>
            
            <h3>Flexbox</h3>
            <div class="flex-container">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
            </div>
            
            <h3>Grid</h3>
            <div class="grid-container">
                <div class="grid-item">1</div>
                <div class="grid-item">2</div>
                <div class="grid-item">3</div>
                <div class="grid-item">4</div>
                <div class="grid-item">5</div>
                <div class="grid-item">6</div>
            </div>
            
            <div class="display-examples">
                <span class="block-example">Block display</span>
                <div class="inline-example">Inline display</div>
                <div class="inline-block-example">Inline-block display</div>
                <div class="none-example">This won't be visible</div>
            </div>
            
            <div class="overflow-example">
                <p>This container demonstrates overflow behavior with a lot of text that might not fit in the designated space. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p>
            </div>
            
            <div class="visibility-example">
                <p>This element is hidden but takes up space</p>
            </div>
            
            <div class="column-example">
                <p>This text is split into multiple columns. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p>
            </div>
        </section>

        <section id="effects" class="section">
            <h2>Visual Effects</h2>
            
            <div class="transform-example">Transform me!</div>
            <div class="transition-example">Hover for transition</div>
            
            <div class="animation-example">Animated element</div>
            
            <div class="filter-example">
                <img src="https://via.placeholder.com/150" alt="Placeholder">
                <p>Filtered image</p>
            </div>
            
            <div class="opacity-example">Semi-transparent element</div>
            
            <div class="clip-path-example">Clipped shape</div>
            
            <div class="z-index-example">
                <div class="layer-1">Layer 1</div>
                <div class="layer-2">Layer 2</div>
            </div>
            
            <div class="object-example">
                <img src="https://via.placeholder.com/300x150" alt="Placeholder" class="object-fit-example">
            </div>
            
            <div class="cursor-example">Hover to see different cursors</div>
            
            <div class="resize-example">Resizable element</div>
            
            <div class="will-change-example">Optimized for animation</div>
            
            <div class="list-style-example">
                <ul>
                    <li>Styled list item 1</li>
                    <li>Styled list item 2</li>
                    <li>Styled list item 3</li>
                </ul>
            </div>
        </section>
    </main>

    <footer class="footer">
        <p>CSS Mastery Project &copy; 2023</p>
    </footer>
</body>
</html>

CSS File (styles.css)

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
    padding: 20px;
}

/* Header Styles */
.header {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.nav-list {
    list-style-type: none;
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.nav-list a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 3px;
    transition: background-color 0.3s;
}

.nav-list a:hover {
    background-color: #34495e;
}

/* Section Styles */
.section {
    background-color: white;
    padding: 25px;
    margin-bottom: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.section h2 {
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* Selectors Section */
.class-example {
    font-weight: bold;
}

#id-example {
    color: #e74c3c;
}

[data-attr="example"] {
    font-style: italic;
}

.descendant p {
    color: #3498db;
}

.pseudo-class-example:hover {
    color: #9b59b6;
    cursor: pointer;
}

.pseudo-element-example::first-letter {
    font-size: 2em;
    color: #e67e22;
}

/* Text Styling */
.font-example {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2em;
    font-weight: bold;
}

.text-alignment {
    text-align: center;
}

.color-example {
    color: white;
    background-color: #3498db;
    padding: 10px;
}

.white-space {
    white-space: pre;
}

.word-wrap {
    width: 100px;
    word-wrap: break-word;
    border: 1px solid #ccc;
    padding: 5px;
}

/* Box Model Section */
.box-model-demo {
    margin: 20px 0;
}

.margin-box {
    margin: 30px;
    padding: 10px;
    background-color: #f1c40f;
    border: 2px dashed #f39c12;
}

.border-box {
    padding: 20px;
    background-color: #2ecc71;
    border: 2px dashed #27ae60;
}

.padding-box {
    padding: 30px;
    background-color: #e74c3c;
    border: 2px dashed #c0392b;
}

.content-box {
    padding: 20px;
    background-color: #3498db;
    border: 2px dashed #2980b9;
    text-align: center;
    color: white;
}

.sizing-examples {
    display: flex;
    gap: 15px;
    margin: 20px 0;
}

.fixed-size {
    width: 150px;
    height: 100px;
    background-color: #9b59b6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.percentage-size {
    width: 50%;
    height: 80px;
    background-color: #1abc9c;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.min-max-size {
    min-width: 100px;
    max-width: 200px;
    background-color: #e67e22;
    color: white;
    padding: 10px;
}

.border-radius-example {
    width: 150px;
    height: 150px;
    background-color: #3498db;
    border-radius: 20px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.box-shadow-example {
    width: 150px;
    height: 150px;
    background-color: #2ecc71;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* Layout Section */
.positioning-examples {
    position: relative;
    height: 300px;
    border: 2px dashed #ccc;
    margin: 20px 0;
    padding: 10px;
}

.static-box {
    width: 80px;
    height: 80px;
    background-color: #3498db;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.relative-box {
    position: relative;
    width: 80px;
    height: 80px;
    background-color: #2ecc71;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 20px;
    left: 30px;
}

.absolute-box {
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: #e74c3c;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 20px;
    right: 30px;
}

.fixed-box {
    position: fixed;
    width: 80px;
    height: 80px;
    background-color: #f1c40f;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 20px;
    left: 20px;
    z-index: 100;
}

.sticky-box {
    position: sticky;
    width: 80px;
    height: 80px;
    background-color: #9b59b6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 20px;
    margin-left: 200px;
}

/* Flexbox */
.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background-color: #ecf0f1;
    padding: 15px;
    margin: 20px 0;
}

.flex-item {
    width: 80px;
    height: 80px;
    background-color: #3498db;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
}

/* Grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
    background-color: #ecf0f1;
    padding: 15px;
    margin: 20px 0;
}

.grid-item {
    background-color: #e74c3c;
    color: white;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
}

/* Display Examples */
.display-examples {
    margin: 20px 0;
}

.block-example {
    display: block;
    background-color: #1abc9c;
    color: white;
    padding: 10px;
    margin: 5px 0;
}

.inline-example {
    display: inline;
    background-color: #3498db;
    color: white;
    padding: 10px;
    margin: 5px 0;
}

.inline-block-example {
    display: inline-block;
    background-color: #9b59b6;
    color: white;
    padding: 10px;
    margin: 5px 0;
    width: 150px;
}

.none-example {
    display: none;
}

/* Overflow */
.overflow-example {
    height: 100px;
    width: 200px;
    overflow: auto;
    background-color: #ecf0f1;
    padding: 10px;
    margin: 20px 0;
    border: 1px solid #ccc;
}

/* Visibility */
.visibility-example {
    visibility: hidden;
    background-color: #f1c40f;
    padding: 10px;
    margin: 20px 0;
}

/* Columns */
.column-example {
    column-count: 3;
    column-gap: 20px;
    column-rule: 1px solid #ccc;
    margin: 20px 0;
}

/* Visual Effects Section */
.transform-example {
    width: 150px;
    height: 150px;
    background-color: #3498db;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    transform: rotate(15deg) scale(0.9);
    transition: transform 0.3s;
}

.transform-example:hover {
    transform: rotate(0) scale(1.1);
}

.transition-example {
    width: 150px;
    height: 50px;
    background-color: #2ecc71;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    transition: all 0.3s ease;
}

.transition-example:hover {
    background-color: #27ae60;
    width: 200px;
    height: 70px;
}

@keyframes slide {
    0% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    100% { transform: translateX(0); }
}

.animation-example {
    width: 150px;
    height: 50px;
    background-color: #e74c3c;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    animation: slide 3s infinite;
}

.filter-example {
    margin: 20px 0;
}

.filter-example img {
    filter: grayscale(50%) blur(1px);
    transition: filter 0.3s;
}

.filter-example img:hover {
    filter: none;
}

.opacity-example {
    width: 150px;
    height: 150px;
    background-color: #9b59b6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    opacity: 0.7;
}

.clip-path-example {
    width: 200px;
    height: 200px;
    background-color: #e67e22;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.z-index-example {
    position: relative;
    height: 100px;
    margin: 20px 0;
}

.layer-1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #3498db;
    top: 10px;
    left: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.layer-2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #e74c3c;
    top: 30px;
    left: 30px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.object-example {
    width: 300px;
    height: 150px;
    border: 1px solid #ccc;
    margin: 20px 0;
    overflow: hidden;
}

.object-fit-example {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cursor-example {
    padding: 15px;
    background-color: #ecf0f1;
    margin: 20px 0;
    cursor: pointer;
}

.cursor-example:hover {
    cursor: grab;
}

.resize-example {
    width: 200px;
    height: 100px;
    background-color: #1abc9c;
    color: white;
    padding: 10px;
    margin: 20px 0;
    resize: both;
    overflow: auto;
}

.will-change-example {
    width: 150px;
    height: 50px;
    background-color: #34495e;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    will-change: transform;
    transition: transform 0.3s;
}

.will-change-example:hover {
    transform: scale(1.1);
}

.list-style-example ul {
    list-style-type: square;
    list-style-position: inside;
    margin: 20px 0;
}

.list-style-example li {
    padding: 5px;
    background-color: #ecf0f1;
    margin: 2px 0;
}

/* Footer */
.footer {
    background-color: #2c3e50;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 5px;
    margin-top: 30px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-list {
        flex-direction: column;
        gap: 10px;
    }
    
    .flex-container {
        flex-direction: column;
    }
    
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .column-example {
        column-count: 2;
    }
}

Project Features

This comprehensive project demonstrates:

  1. Selectors: Element, class, ID, attribute, descendant, and pseudo-selectors
  2. Box Model: Margin, padding, border, width, height with visual demonstration
  3. Flexbox: Complete flex container with various properties
  4. Grid: Basic grid layout implementation
  5. Positioning: All position types (static, relative, absolute, fixed, sticky)
  6. Display: Block, inline, inline-block, none
  7. Text Styling: Font properties, alignment, white-space, word-wrap
  8. Visual Effects: Transform, transition, animation, filter, opacity
  9. Advanced Layout: z-index, object-fit, clip-path
  10. Other Properties: cursor, resize, will-change, list-style, columns

How to Use

  1. Create two files: index.html and styles.css
  2. Copy the provided code into each file
  3. Open index.html in a browser to see all CSS concepts in action
  4. Experiment by modifying values to see how they affect the display

About

CSS tutorial

Topics

css-grid css-flexbox css-animation css-tutorial css-project

Resources

Readme
Activity

Stars

2 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published