Web Design Course - Lecture 10 - Floating, Align, navigation bar, Image gallery, Image opacity

Jun 12, 2017Download as PPTX, PDF1 like109 views

This document provides information on various CSS techniques including floating elements, aligning text, using pseudo-elements, creating a navigation bar, building an image gallery, and adjusting image opacity. Floating allows elements to wrap text around images while align defines how text is positioned within its container. Pseudo-elements make it possible to style specified parts of an element. The navigation bar and image gallery sections provide headings but no details.

CSS
Floating1
2
Pseudo-elements3
5
Create a CSS image Gallery6
Align2
Navigation Bar4
Image Opacity7

Align
text-align: left;
text-align: center;
text-align: right;

Pseudo-elements
selector::pseudo-element {
property:value;
}
Example:
:focus
:hover
:last-child
:nth-child(n)
:nth-last-child(n)

Image Opacity
selector::pseudo-element {
property:value;
}
Example:
:focus
:hover
:last-child
:nth-child(n)
:nth-last-child(n)

This document provides an introduction and agenda for a system design presentation. It will cover topics such as the SDLC process, database modeling, SQL vs NoSQL databases, database scaling techniques like sharding and replication, technologies like MySQL, MongoDB and Cassandra, architectural patterns including microservices and caching, and approaches like serverless computing. The presentation will explore these concepts at a high level to provide an overview of considerations for system design.

Introduction to machine learningAl-Mamun Sarkar

Software Development Life Cycle (SDLC)Al-Mamun Sarkar

The document discusses the Software Development Life Cycle (SDLC), which is a process used for software projects within organizations. It describes the typical 7 phases of the SDLC: requirements collection and analysis, feasibility study, design, coding, testing, installation/deployment, and maintenance. Each phase is explained in 1-2 sentences. The document also briefly discusses the waterfall model design process and common problems in software development projects before introducing agile methodologies like SCRUM.

Understanding Wordpress Plugn and Theme users' behaviorAl-Mamun Sarkar

This document discusses understanding user behavior to improve products. It explains that user behavior refers to how users interact with a product. Understanding user behavior can help find problems, improve updates, increase marketing, installations, sales and decrease deactivations. Key things to understand include active installations, users, sites, versions, locales and deactivations. Appsero provides analytics and insights into this user behavior data as well as reasons for plugin deactivations.

Database Management - Lecture 4 - PHP and MysqlAl-Mamun Sarkar

Database Management - Lecture 3 - SQL Aggregate Functions, JoinAl-Mamun Sarkar

Database Management - Lecture 2 - SQL select, insert, update and deleteAl-Mamun Sarkar

Database Management - Lecture 1 Al-Mamun Sarkar

PHP Lecture 6 - Php file uploadingAl-Mamun Sarkar

PHP Lecture 5 - Date time, Include, sessionAl-Mamun Sarkar

This document provides an overview of key PHP concepts including date and time functions, debugging with var_dump(), includes and requires to include files, and sessions to store and retrieve data across multiple pages. Specifically, it demonstrates how to output the current date and time in a specified format using date(), debug variables with var_dump(), include and require other files, and use sessions to store and retrieve values with session_start(), $_SESSION, and session_destroy().

PHP Lecture 4 - Working with form, GET and Post MethodsAl-Mamun Sarkar

PHP Lecture 3 - FunctionsAl-Mamun Sarkar

PHP Lecture 2 - Conditional Statement, LoopAl-Mamun Sarkar

PHP Lecture 1 - String, Constants, Arrays, OperatorsAl-Mamun Sarkar

PHP is a server-side scripting language that allows developers to work with strings, constants, operators, arrays, and superglobals. It presents an overview of PHP string functions like str_word_count() and strrev(), how to define constants, the different types of operators in PHP like assignment, comparison, and arithmetic, the three types of arrays, and array functions for sorting. The document also lists the PHP superglobal variables that provide information about headers, files, environment variables, cookies, and more.

Web Design Course - Lecture 21 - Bootstrap Jumbotron, Thumbnails, Alerts, Pro...Al-Mamun Sarkar

Web Design Course - Lecture 20 - Bootstrap Dropdown, Button group, Input grou...Al-Mamun Sarkar

Web Design Course - Lecture 18 - Boostrap, Gatting started, grid system, tablesAl-Mamun Sarkar

Web Design Course - Lecture 11 - CSS3, Border radius, Box shadowAl-Mamun Sarkar

This document discusses CSS3 features including border-radius for rounded corners, box-shadow and text-shadow for drop shadows, background properties like background-size and origin, and @font-face for custom web fonts. Examples are provided for border-radius, box-shadow, text-shadow, background-size, background-origin, and background-clip properties to demonstrate how to implement these CSS3 features.

Web Design Course - Lecture 9 - Border, Padding and Margin, DisplayAl-Mamun Sarkar

Web Design Course - Lecture 7 - Basic CssAl-Mamun Sarkar

Web Design Course - Lecture 6 - HTML form and form validationAl-Mamun Sarkar

The document discusses various HTML form elements including text, select, checkbox, radio, textarea and button inputs. It provides examples of how to implement these elements with HTML tags, showing the different input types like text, password, email, number, date and more. Select boxes, radio buttons, checkboxes and buttons are demonstrated along with attributes like name, value, checked and onclick.

Web Design Course - Lecture 5 - iframe, Color, Enities and symbols, Audio and...Al-Mamun Sarkar

This document provides information on web design elements including iframes, colors, entities and symbols, and audio and video. It describes how to add iframes and specify colors in HTML using hex codes or RGB values. It also lists several common entities and symbols that can be used, such as copyright and currency symbols. Finally, it shows code examples for embedding audio and video using the HTML5 <audio> and <video> tags.

Web Design Course - Lecture 2 - HTML Tag, Element, AttributesAl-Mamun Sarkar

The document discusses HTML elements, tags, editors, and text formatting. It provides examples of HTML code for headings, paragraphs, comments, and attributes. Key HTML elements covered include <h1>-<h6> tags for headings, <p> tags for paragraphs, and <b>, <i>, and <em> tags for formatting text bold, italic, and emphasized. Examples are given of HTML code for a basic page structure and comments. Common HTML editors like Notepad++ and Dreamweaver are also listed.

Web Design Course - Lecture 1 ( Web Concept )Al-Mamun Sarkar

Presentation for Schoool Management Systemkolay922013

Flowers Coloring Pages Activity Worksheet in Black and White Illustrative StyleLikazelika

Lori Vanzant Portfolio. Take a look! ty.vanzan01

STOCK ANALYSYS.pptx manajemen keuangan skfdpontianak2012

OLADIMEJI FAKOREDE ARCT 1073 BUILDING DESIGN PORTFOLIO_compressed.pdfDimejiFakorede

2nd taxonomy, nomen microorganisms-.pptxayeleasefa2

More Related Content

More from Al-Mamun Sarkar (16)

PHP Lecture 6 - Php file uploadingAl-Mamun Sarkar

PHP Lecture 5 - Date time, Include, sessionAl-Mamun Sarkar

PHP Lecture 4 - Working with form, GET and Post MethodsAl-Mamun Sarkar

PHP Lecture 3 - FunctionsAl-Mamun Sarkar

PHP Lecture 2 - Conditional Statement, LoopAl-Mamun Sarkar

PHP Lecture 1 - String, Constants, Arrays, OperatorsAl-Mamun Sarkar

Web Design Course - Lecture 21 - Bootstrap Jumbotron, Thumbnails, Alerts, Pro...Al-Mamun Sarkar

Web Design Course - Lecture 20 - Bootstrap Dropdown, Button group, Input grou...Al-Mamun Sarkar

Web Design Course - Lecture 18 - Boostrap, Gatting started, grid system, tablesAl-Mamun Sarkar

Web Design Course - Lecture 11 - CSS3, Border radius, Box shadowAl-Mamun Sarkar

Web Design Course - Lecture 9 - Border, Padding and Margin, DisplayAl-Mamun Sarkar

Web Design Course - Lecture 7 - Basic CssAl-Mamun Sarkar

Web Design Course - Lecture 6 - HTML form and form validationAl-Mamun Sarkar

Web Design Course - Lecture 5 - iframe, Color, Enities and symbols, Audio and...Al-Mamun Sarkar

Web Design Course - Lecture 2 - HTML Tag, Element, AttributesAl-Mamun Sarkar

Web Design Course - Lecture 1 ( Web Concept )Al-Mamun Sarkar

PHP Lecture 6 - Php file uploadingAl-Mamun Sarkar

PHP Lecture 5 - Date time, Include, sessionAl-Mamun Sarkar

PHP Lecture 4 - Working with form, GET and Post MethodsAl-Mamun Sarkar

PHP Lecture 3 - FunctionsAl-Mamun Sarkar

PHP Lecture 2 - Conditional Statement, LoopAl-Mamun Sarkar

PHP Lecture 1 - String, Constants, Arrays, OperatorsAl-Mamun Sarkar

Web Design Course - Lecture 21 - Bootstrap Jumbotron, Thumbnails, Alerts, Pro...Al-Mamun Sarkar

Web Design Course - Lecture 20 - Bootstrap Dropdown, Button group, Input grou...Al-Mamun Sarkar

Web Design Course - Lecture 18 - Boostrap, Gatting started, grid system, tablesAl-Mamun Sarkar

Web Design Course - Lecture 11 - CSS3, Border radius, Box shadowAl-Mamun Sarkar

Web Design Course - Lecture 9 - Border, Padding and Margin, DisplayAl-Mamun Sarkar

Web Design Course - Lecture 7 - Basic CssAl-Mamun Sarkar

Web Design Course - Lecture 6 - HTML form and form validationAl-Mamun Sarkar

Web Design Course - Lecture 5 - iframe, Color, Enities and symbols, Audio and...Al-Mamun Sarkar

Web Design Course - Lecture 2 - HTML Tag, Element, AttributesAl-Mamun Sarkar

Web Design Course - Lecture 1 ( Web Concept )Al-Mamun Sarkar

Recently uploaded (20)

Presentation for Schoool Management Systemkolay922013

Flowers Coloring Pages Activity Worksheet in Black and White Illustrative StyleLikazelika

Lori Vanzant Portfolio. Take a look! ty.vanzan01

STOCK ANALYSYS.pptx manajemen keuangan skfdpontianak2012

OLADIMEJI FAKOREDE ARCT 1073 BUILDING DESIGN PORTFOLIO_compressed.pdfDimejiFakorede

2nd taxonomy, nomen microorganisms-.pptxayeleasefa2

AR.AKSHAYA PAMBALATH-PORTFOLIOFINAL_.pdfakshayap23

This portfolio showcases a curated selection of academic, professional, and conceptual architectural projects, highlighting a comprehensive design approach that merges aesthetics, functionality, and contextual sensitivity. Each project demonstrates proficiency in design development, technical detailing, and presentation, along with strong command over industry-standard software tools.From large-scale urban planning proposals to intimate interior spaces, the portfolio reflects a commitment to sustainability, innovation, and user-centered design. The work embodies a balance between conceptual clarity and technical precision, aiming to address real-world challenges through thoughtful architectural solutions.Included are detailed drawings, 3D visualizations, physical models, and process sketches that collectively represent a holistic design process.Throughout the portfolio, you'll find,Conceptual Development: Idea generation, site studies, and early-stage diagrams that lay the foundation for each project. Architectural Drawings: Detailed plans, sections, elevations, and construction details showcasing clarity and precision. 3D Visualizations and Renderings: Realistic and conceptual renderings that communicate spatial atmosphere and design intent. Physical Models and Process Work: Documentation of physical prototypes and iterative design processes that illustrate hands-on exploration. Technical and Software Proficiency: Demonstration of skills in software such as AutoCAD, Rhino, Revit, SketchUp, Adobe Creative Suite, Lumion, and others.

Designing Interactive and Engaging Museum ExhibitsPeach Prime Consultancy

Museums today are moving away from just showing objects to creating fun, hands-on experiences where visitors can touch, play, and learn. They design exhibits based on who will visit, use stories to make people feel connected, and add technology like virtual reality to make things even more exciting. Museums also make sure everyone, including people with disabilities, can enjoy the exhibits. They use games, teamwork, and regular feedback to keep improving, so visiting a museum becomes a fun and memorable adventure for everyone. Visit our website for more info.:https://www.peachprime.in/services/museum-exhibit-design/