roakfwk30 / 2021_단기집중교육_HTML.CSS star
안효원 안효원 2021-08-05
Day4End
@c8dbcb908e0150aa313373969d3eb8c22405b4da
b097886
c8dbcb9
20210805/4.html
--- 20210805/4.html
+++ 20210805/4.html
@@ -9,8 +9,15 @@
 
         body{width: 720px; margin: 0 auto;}
 
         #content {overflow: auto; height: 100%;}
 
         #nav, #feature, #footer {background-color: antiquewhite; padding: 10px; margin: 10px;}
 
-        .column1, .column2, .column3 {background-color: aqua; width: 220px; float: left; margin: 10px;}
 
+        .column1, .column2, .column3 {
 
+            background-color: aqua;
 
+            width: 220px; float: left;
 
+            margin: 10px;
 
+            text-align: center;}
 
         li {display: initial; padding: 5px;}
 
+        a {text-decoration: none; font-weight: bolder; color: black; border-right: black 1px solid;}
 
+        a:hover {background-color: darkviolet; color: white;}
 
+        #copy {text-align: right; font-weight: bolder;}
 
     </style>
 
 </head>
 
 <body>
@@ -18,11 +25,11 @@
 
         <h1>Logo</h1>
 
         <div id="nav">
 
             <ul>
 
-                <li><a href="">Home</a></li>
 
-                <li><a href="">Products</a></li>
 
-                <li><a href="">Services</a></li>
 
-                <li><a href="">About</a></li>
 
-                <li><a href="">Contact</a></li>
 
+                <li><a href="">Home &nbsp;&nbsp;</a></li>
 
+                <li><a href="">Products &nbsp;&nbsp;</a></li>
 
+                <li><a href="">Services &nbsp;&nbsp;</a></li>
 
+                <li><a href="">About &nbsp;&nbsp;</a></li>
 
+                <li><a href="">Contact &nbsp;&nbsp;</a></li>
 
             </ul>
 
         </div>
 
     </div>
@@ -41,7 +48,7 @@
 
         </div>
 
     </div>
 
     <div id="footer">
 
-        <p>&copy; Copyright 2011</p>
 
+        <p id="copy">&copy; Copyright 2021 Risker All right reserved</p>
 
     </div>
 
 </body>
 
 </html>
(No newline at end of file)
 
c8dbcb9
20210805/5.html (added)
+++ 20210805/5.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        #page {background-color: grey; height: 1050px; width: 1000px;}
+        div { color: white; font-weight: bolder; font-size: 30px;} 
+        #top {width: 940px; height: 200px; background-color: hotpink; margin-left: 30px; margin-bottom: 10px;  display: flex; align-items: center; justify-content: center;}
+        .second {width: 460px; height: 200px; float: left; margin-right: 20px; background-color: hotpink; margin-bottom: 10px; display: flex; align-items: center; justify-content: center;}
+        .third {width: 300px; height: 200px; float: left; margin-right: 20px; background-color: hotpink; margin-bottom: 10px; display: flex; align-items: center; justify-content: center;}
+        .four {width: 220px; height: 200px; float: left; margin-right: 20px; background-color: hotpink; margin-bottom: 10px;  display: flex; align-items: center; justify-content: center;}
+        .five {width: 140px; height: 200px; float: left; margin-right: 20px; background-color: hotpink; margin-bottom: 10px;  display: flex; align-items: center; justify-content: center;}
+        .a {margin-left: 30px;}
+    </style>
+</head>
+<body>
+    <div id="page">
+        <div id="top">940px</div>
+        <div class="a">
+            <div class="second">460px</div>
+            <div class="second">460px</div>
+        </div>
+        <div class="a">
+            <div class="third">300px</div>
+            <div class="third">300px</div>
+            <div class="third">300px</div>
+        </div>
+        <div class="a">
+            <div class="four">220px</div>
+            <div class="four">220px</div>
+            <div class="four">220px</div>
+            <div class="four">220px</div>
+        </div>
+        <div class="a">
+            <div class="five">140px</div>
+            <div class="five">140px</div>
+            <div class="five">140px</div>
+            <div class="five">140px</div>
+            <div class="five">140px</div>
+            <div class="five">140px</div>
+        </div>
+    </div>
+</body>
+</html>(No newline at end of file)
 
c8dbcb9
20210805/6.html (added)
+++ 20210805/6.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        #page {width: 1915px; margin: 0 auto;}
+        #list {background-color:rgb(034, 034, 034); height: 50px; display: flex; align-items: center;}
+        li {list-style: none; display: inline; margin-right: 10px; margin-right: 40px; position: relative; left: 150px;}
+        a {text-decoration: none; color: white; font-size: 25px;}
+        a:hover {color: white;}
+        #second {background-color: rgb(154, 205, 050); height: 300px; display: flex; align-items: center;}
+        #secondText {color: rgb(173, 255, 047); font-weight: bolder; font-size: 40px; position: relative; left: 150px;}
+        #drama {vertical-align: bottom;}
+        #secondText2 {color: rgb(173, 255, 047); font-weight: bolder; font-size: 20px; position: relative; right: 285px; margin-top: 110px;}
+        #btn {width: 106px; height: 34px; margin-top: 200px; position: relative; right: 1010px;}
+        #drop {background-color: rgb(034, 034, 034);}
+        #thirdText {font-size: 30px; position: relative; left: 160px; top: 40px;}
+        #thirdText2 {font-size: 20px; color: grey; position: relative; left: 160px; top: 40px;}
+        #hr {position: relative; top: 40px; width: 1500px; right: 45px;}
+        #thirdText3 {font-size: 20px; color: grey; position: relative; left: 160px; top: 40px;}
+        #imageSector {position: relative; top: 50px; width: 1500px; left: 160px; background-color: grey; height: 350px;}
+        .three {float: left;background-color: antiquewhite; width: 450px; height: 300px; position: relative; top: 25px; display: flex; align-items: center; justify-content: center;}
+        #this {margin-right: 50px; margin-left: 25px;}
+        #this2 {margin-right: 50px;}
+        .chill {color: grey; font-size: 60px;}
+        .four1 {position: relative; top: 80px; left: 160px; float: left;}
+        .anker {font-size: 40px; color: blueviolet;}
+        .anker:hover {color: blueviolet;}
+        #one_one {margin-right: 200px;}
+        #one_two {margin-right: 200px;}
+        #pre1 {margin-bottom: 10px;}
+        .pre {position: relative; top: 150px; right: 1330px; font-size: 20px;}
+        #pre2 {position: relative; left: 680px; top: 16px;}
+        #pre3 {position: relative; left: 1230px; top: -140px;}
+        #five {background-color: rgb(218, 165, 034); height: 300px; display: flex; align-items: center; position: relative; bottom: 150px;}
+        #plus {width: 1500px;}
+        .fiver {width: 450px; height: 300px; float: left; position: relative; left: 150px;}
+        #fiver_one {margin-right: 80px;}
+        #fiver_two {margin-right: 70px;}
+        .btn_last {width: 150px; height: 30px;}
+        .lastAnker { color: cornflowerblue; font-size: 20px;}
+        .lastAnker:hover {color: cornflowerblue;}
+        #nice1 {border-right: 1px solid grey;}
+        #nice2 {border-right: 1px solid grey;}
+        #lastAnkerSector {position: relative; left: 150px;}
+        #realLast {color: grey; margin-left: 150px;}
+        #footer {position: relative; bottom: 100px;}
+        #like {float: right;}
+    </style>
+</head>
+<body>
+    <div id="page">
+        <div id="list">
+            <li><a href=""><img src="/image/logo2.PNG" alt="">Logo</a></li>
+            <li><a href="">About</a></li>
+            <li><a href="">Products</a></li>
+            <li><a href="">Home</a></li>
+            <li>
+                <select>
+                    <option id="drop" value="">Service</option>
+                </select>
+            </li>
+            <li id="like"><input type="text"><button>Search</button></li>
+        </div>
+        <div id="second">
+            <span id="secondText"><img id="drama" src="/image/1.PNG" alt="">Dramatically Engaga</span>
+            <p id="secondText2">Objectively innovate empowered manufactured products whereas parallel platforms.</p>
+            <button id="btn">Engaga Now</button>
+        </div>
+        <div id="third">
+            <span id="thirdText">Superior Collaboration </span><span id="thirdText2">Visualize Quality</span>
+            <hr id="hr">
+            <span id="thirdText3">Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holi<br>stically pontificate installed base portals after maintainable products.</span>
+            <div id="imageSector">
+                <div id="this" class="three"><span class="chill">700X300</span></div>
+                <div id="this2" class="three"><span class="chill">700X300</span></div>
+                <div class="three"><span class="chill">700X300</span></div>
+            </div>
+            <div id="four">
+                <div class="four1" id="one_one">
+                    <span><a class="anker" href="#">Efficiently Unleash</a></span>
+                </div>
+                <div class="four1" id="one_two">
+                    <span><a class="anker" href="#">Completely Synergize</a></span>
+                </div>
+                <div class="four1" id="one_three">
+                    <span><a class="anker" href="#">Dynamically Procrastinate</a></span>
+                </div>
+                <pre class="pre" id="pre1">
+Collaboratively administrate empowered
+markets via plug-and-play networks.
+                </pre>
+                <pre class="pre" id="pre2">
+
+Dramatically maintain clicks-and-mortar
+solutions without functional solutions.
+Efficiently unleash cross-media information
+without cross-media value. Quickly maximize
+timely deliverables for real-time schemas.
+                </pre>
+                <pre class="pre" id="pre3">
+Collaboratively administrate empowered
+markets via plug-and-playnetworks.
+Dynamically procrastinate B2C users
+afterinstalled base
+                </pre>
+            </div>
+            <div id="five">
+                <div id="plus">
+                    <div class="fiver" id="fiver_one">
+                        <p>
+                            <img src="/image/nice.PNG" alt=""><span id="check1">Dynamically Procrastinate</span>
+                        </p>
+                        <span>
+                            Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
+                        </span><br>
+                        <button class="btn_last">Procrastinate</button>
+                    </div>
+                    <div class="fiver" id="fiver_two">
+                        <p>
+                            <img src="/image/goolem.PNG" alt=""><span id="check1">Dynamically Procrastinate</span>
+                        </p>
+                        <span>
+                            Dramatically maintain clicks-and-mortar solutions without functional solutions. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
+                        </span><br>
+                        <button class="btn_last">Unleash</button>
+                    </div>
+                    <div class="fiver">
+                        <p>
+                            <img src="/image/leef.PNG" alt=""><span id="check1">Dynamically Procrastinate</span>
+                        </p>
+                        <span>
+                            Professionally cultivate one-to-one customer service with robust ideas. Completely synergize resource taxing relationships via premier niche markets. Dynamically innovate resource-leveling customer service for state of the art customer service.
+                        </span><br>
+                        <button class="btn_last">Synergize</button>
+                    </div>
+                </div>
+            </div>
+            <div id="footer">
+                <span id="lastAnkerSector"><a id="nice1" class="lastAnker" href="#"> Terms & Condition</a><a id="nice2" class="lastAnker" href="#"> Privacy Policy </a><a class="lastAnker" href="#"> Contact</a></span>
+                <p id="realLast">Copyright © Example.com 2015</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>(No newline at end of file)
 
c8dbcb9
image/1.PNG (Binary) (added)
+++ image/1.PNG
Binary file is not shown
 
c8dbcb9
image/700.PNG (Binary) (added)
+++ image/700.PNG
Binary file is not shown
 
c8dbcb9
image/goolem.PNG (Binary) (added)
+++ image/goolem.PNG
Binary file is not shown
 
c8dbcb9
image/leef.PNG (Binary) (added)
+++ image/leef.PNG
Binary file is not shown
 
c8dbcb9
image/logo.PNG (Binary) (added)
+++ image/logo.PNG
Binary file is not shown
 
c8dbcb9
image/logo2.PNG (Binary) (added)
+++ image/logo2.PNG
Binary file is not shown
 
c8dbcb9
image/nice.PNG (Binary) (added)
+++ image/nice.PNG
Binary file is not shown
Add a comment
List