updating all files

Ekapob/CSS_and_CSS3/CSS_and_CSS3-Databases/CSS_and_CSS3-Databases.css

@@ -0,0 +1,193 @@
+/*Ekapob Ukritnukun*/
+/*[email protected]*/
+
+*
+{
+    margin: 0px;
+    padding: 0px;
+}
+
+body
+{
+    padding: 5px 10px;
+}
+    #wrapper
+    {
+        /*outline: 1px solid red;*/
+        height: 800px;
+        width: 900px;
+        background-color: #f2f5f2;
+    }
+
+    #header
+    {
+        /*outline: 1px solid red;*/
+        height: 80px;
+        width: 900;
+    }
+        #header img
+        {
+            /*outline: 1px solid red;*/
+            margin-top: 1px;
+            margin-left: 8px;
+        }
+        #header h3
+        {
+            /*outline: 1px solid red;*/
+            display: inline-block;
+            vertical-align: top;
+            position: relative;
+            top: 40px;
+            left: 370px;
+        }
+    #navigation
+    {
+        outline: 1px solid black;
+        font-size: 12px;
+        font-weight: bold;
+    }
+        #navigation ul
+        {
+            font-size: 0px;
+        }
+        #navigation li
+        {
+            /*outline: 1px solid red;*/
+            display: inline-block;
+            vertical-align: top;
+            font-size: 12px;
+            border: 1px solid black;
+            padding: 7px 37px;
+        }
+    #main_content
+    {
+        /*outline: 1px solid red;*/
+        height: 659px;
+        background: radial-gradient(circle, #735a5f, #565174, #393147);
+        padding: 16px 15px;
+    }
+        #database_overview
+        {
+            /*outline: 1px solid red;*/
+            height: 260px;
+        }
+            #database_montage
+            {
+                border: 7px solid #c0c0c0;
+            }
+            #database_description
+            {
+                /*outline: 1px solid red;*/
+                width: 375px;
+                height: 260px;
+                display: inline-block;
+                vertical-align: top;
+                margin-left: 15px;
+            }
+            #database_description h4
+            {
+                /*outline: 1px solid red;*/
+                height: 18px;
+                width: 361px;
+                background: linear-gradient(#c4c0c5, #918e9b, #c4c0c5);
+                display: inline-block;
+                vertical-align: top;
+                padding: 7px;
+            }
+            #database_description h5
+            {
+                /*outline: 1px solid red;*/
+                height: 16px;
+                width: 361px;
+                background: linear-gradient(to right, #f2fcfe, #dacbd9);
+                display: inline-block;
+                vertical-align: top;
+                padding: 7px;
+            }
+            #database_description p
+            {
+                /*outline: 1px solid red;*/
+                height: 162px;
+                width: 361px;
+                background: linear-gradient(to right, #f2fcfe, #dacbd9);
+                display: inline-block;
+                font-size: 11px;
+                vertical-align: top;
+                padding: 7px;
+            }
+            #stack
+            {
+                /*outline: 1px solid red;*/
+                height: 12px;
+                width: 120px;
+                color: #576791;
+                position: relative;
+                top: 6px;
+                left: 252px;
+            }
+                #stack img
+                {
+                    /*outline: 1px solid red;*/
+                    vertical-align: top;
+                }
+                #stack h6
+                {
+                    /*outline: 1px solid red;*/
+                    height: 12px;
+                    width: 100px;
+                    display: inline-block;
+                    font-size: 10px;
+                    vertical-align: top;
+                }
+        #database_qualities
+        {
+            /*outline: 1px solid red;*/
+            height: 400px;
+            display: inline-block;
+        }
+            .subcontents
+            {
+                /*outline: 1px solid red;*/
+                height: 400px;
+                display: inline-block;
+                vertical-align: top;
+                margin-right: 8px;
+                padding: 4px 1px;
+            }
+                .subcontents h4
+                {
+                    /*outline: 1px solid red;*/
+                    height: 18px;
+                    width: 189px;
+                    background: linear-gradient(#c4c0c5, #918e9b, #c4c0c5);
+                    vertical-align: top;
+                    font-size: 14px;
+                    padding: 7px;
+                }
+                .subcontents img
+                {
+                    /*outline: 1px solid red;*/
+                    vertical-align: top;
+                }
+                .subcontents p
+                {
+                    /*outline: 1px solid red;*/
+                    height: 223px;
+                    width: 189px;
+                    background: linear-gradient(to bottom, #99a8c2, #fdfcfe);
+                    font-size: 12px;
+                    padding: 12px 7px;
+                }
+                .subcontents button
+                {
+                    position: relative;
+                    background-color: #5c729c;
+                    color: white;
+                    font-size: 9px;
+                    font-weight: bold;
+                    border: 3px solid black;
+                    border-radius: 5px;
+                    bottom: 40px;
+                    left: 105px;
+                    padding: 5px 9px;
+                }

Ekapob/CSS_and_CSS3/CSS_and_CSS3-Databases/CSS_and_CSS3-Databases.html

@@ -0,0 +1,118 @@
+<!-- Ekapob Ukritnukun -->
+<!-- [email protected] -->
+
+<!DOCTYPE html>
+<html lang = "en">
+    <head>
+        <title></title>
+        <link rel = "stylesheet" type = "text/css" href = "CSS_and_CSS3-Databases.css">
+    </head>
+    <body>
+        <div id = "wrapper">
+            <div id = "header">
+                <img src = "database-name.jpg" alt = "Database Name Tag" height = 75px width = 150px>
+                <h3>
+                You can't learn enough about Databases!
+                </h3>
+            </div> <!-- end of header -->
+            <div id = "navigation">
+                <ul>
+                    <li>
+                        <a href = "#">Home</a>
+                    </li>
+                    <li>
+                        <a href = "#">About</a>
+                    </li>
+                    <li>
+                        <a href = "#">Storage</a>
+                    </li>
+                    <li>
+                        <a href = "#">Searching</a>
+                    </li>
+                    <li>
+                        <a href = "#">Interaction</a>
+                    </li>
+                    <li>
+                        <a href = "#">Companies</a>
+                    </li>
+                    <li>
+                        <a href = "#">Contact Us</a>
+                    </li>
+                </ul>
+            </div> <!-- end of navigation -->
+            <div id = "main_content">
+                <div id = "database_overview">
+                    <img id = "database_montage" src = "database.jpg" alt = "Database Keyword Montage" height = 225px width = 450px>
+                    <div id = "database_description">
+                        <h4>
+                            What are Databases?
+                        </h4>
+                        <h5>
+                            A structured set of data
+                        </h5>
+                        <p>
+                            Shields up! Rrrrred alert! This is not about revenge. This is about justice. Some days you get the bear, and some days the bear gets you. Talk about going nowhere fast. The game's not big enough unless it scares you a little. When has justice ever been as simple as a rule book? Congratulations - you just destroyed the Enterprise. Ensign Babyface! Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? Your head is not an artifact! Besides, you look good in a dress. The unexpected is our normal routine. Not if I weaken first. Captain, why are we out here chasing comets? Wait a minute - you've been declared dead. You can't give orders around here.
+                        </p>
+                        <div id = "stack">
+                            <img src = "icon.png" alt = "Round File  Cabinet with Middle Drawer Open Showing Files" height = 11px width = 10px>
+                            <h6>
+                                A stack of information!
+                            </h6>
+                        </div> <!-- end of stack -->
+                    </div> <!-- end of database_description -->
+                </div> <!-- end of database -->
+                <div id = "database_qualities">
+                    <div class = "subcontents">
+                        <h4>
+                            Storage
+                        </h4>
+                        <img src = "harddrive.jpg" alt = "Harddrive" height = 112px width = 203px>
+                        <p>
+                            and attack the Romulans. Captain, why are we out here chasing comets? What's a knock-out like you doing in a computer-generated gin joint like this? A surprise party? Mr. Worf, I hate surprise parties. I would *never* do that to you. Now, how the hell do we defeat an enemy that knows us better than we know ourselves? I suggest you drop it, Mr. Data.
+                        </p>
+                        <button>
+                            Read More...
+                        </button>
+                    </div>
+                    <div class = "subcontents">
+                        <h4>
+                            Searching
+                        </h4>
+                        <img src = "database-search.jpg" alt = "Blue Man with Magnifying Glass in Rows of File Folders" height = 112px width = 203px>
+                        <p>
+                            I will obey your orders. I will serve this ship as First Officer. And in an attack against the Enterprise, I will die with this crew. But I will not break my oath of loyalty to Starfleet. Fate protects fools, little children and ships named Enterprise. About four years. I got tired of hearing how young I looked. We finished our first sensor sweep of the neutral zone. Maybe we better talk out here; the observation lounge has turned into a swamp. Fate. It protects fools, little children, and ships named "Enterprise."
+                        </p>
+                        <button>
+                            Read More...
+                        </button>
+                    </div>
+                    <div class = "subcontents">
+                        <h4>
+                            Interaction
+                        </h4>
+                        <img src = "dbinteraction.png" alt = "Laptops and databases exchanging information" height = 112px width = 203px>
+                        <p>
+                            I think you've let your personal feelings cloud your judgement. The Federation's gone; the Borg is everywhere! Mr. Crusher, ready a collision course with the Borg ship. I'll alert the crew. Now we know what they mean by 'advanced' tactical training. Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody. Our neural pathways have become accustomed to your sensory input patterns.
+                        </p>
+                        <button>
+                            Read More...
+                        </button>
+                    </div>
+                    <div class = "subcontents">
+                        <h4>
+                            Companies
+                        </h4>
+                        <img src = "database-companies.jpg" alt = "Logos of Database Companies" height = 112px width = 203px>
+                        <p>
+                            You bet I'm agitated! I may be surrounded by insanity, but I am not insane. Fate. It protects fools, little children, and ships named "Enterprise." Mr. Worf, you sound like a man who's asking his friend if he can start dating his sister. What? We're not at all alike! Could someone survive inside a transporter buffer for 75 years?
+                        </p>
+                        <button>
+                            Read More...
+                        </button>
+                    </div>
+                </div> <!-- end of database_qualities -->
+            </div> <!-- end of main_content -->
+            <div id = "footer"></div> <!-- end of footer -->
+        </div> <!-- end of wrapper -->
+    </body>
+</html>

Ekapob/CSS_and_CSS3/CSS_and_CSS3-Display_Blocks/CSS_and_CSS3-Display_Blocks.css

@@ -0,0 +1,67 @@
+/*Ekapob Ukritnukun*/
+/*[email protected]*/
+
+*
+{
+    margin: 0px;
+    padding: 0px
+}
+    #wrapper
+    {
+        /*outline: 1px solid red;*/
+        height: 610px;
+        width: 668px;
+        background-color: #d4d2ae;
+        margin: 0px 11px;
+        padding: 20px 10px;
+    }
+        #header
+        {
+            /*outline: 1px solid red;*/
+            height: 60px;
+            width: 668px;
+            text-align: center;
+            padding-top: 10px;
+            padding-left: 1px;
+        }
+            #header img
+            {
+                background-color: white;
+                vertical-align: bottom;
+            }
+            #header h1
+            {
+                /*outline: 1px solid red;*/
+                display: inline-block;
+                vertical-align: bottom;
+                position: relative;
+                top: 7px;
+                margin-right: 1px;
+            }
+        #main_content
+        {
+            /*outline: 1px solid red;*/
+            height: 520px;
+            width: 647px;
+            padding: 11px;
+        }
+            .columns_odd
+            {
+                outline: 3px solid black;
+                border: 10px solid #82b4ee;
+                background-color: white;
+                display: inline-block;
+                vertical-align: top;
+                margin-right: 5px;
+                margin-bottom: 10px;
+            }
+            .columns_even
+            {
+                outline: 3px solid black;
+                border: 10px solid #f36870;
+                background-color: #f36870;
+                display: inline-block;
+                vertical-align: top;
+                margin-right: 5px;
+                margin-bottom: 10px;
+            }