diff options
3 files changed, 117 insertions, 60 deletions
diff --git a/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.html b/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.html index a5de5d7..48143bd 100644 --- a/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.html +++ b/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.html @@ -1,58 +1,49 @@ <html> - <head> - <title>Welcome to Jakarta EE!</title> - </head> - <body> - <div class="header"> - <h2>Blog Name</h2> - </div> - - <div class="row"> - <div class="leftcolumn"> - <webobject name="cardlist"> - <div class="card"> - <h2>TITLE HEADING</h2> - <h5>Title description, Dec 7, 2017</h5> - <div class="fakeimg" style="height:200px;"> - Image - </div> - <p>Some text..</p> - </div> - </webobject> - <div class="card"> - <h2>TITLE HEADING</h2> - <h5>Title description, Sep 2, 2017</h5> - <div class="fakeimg" style="height:200px;"> - Image - </div> - <p>Some text..</p> - </div> - </div> - <div class="rightcolumn"> - <div class="card"> - <h2>About Me</h2> - <div class="fakeimg" style="height:100px;"> - Image - </div> - <p> - Some text about me in culpa qui officia deserunt mollit anim.. - </p> - </div> - <div class="card"> - <h3>Popular Post</h3> - <div class="fakeimg">Image</div><br> - <div class="fakeimg">Image</div><br> - <div class="fakeimg">Image</div> - </div> - <div class="card"> - <h3>Follow Me</h3> - <p>Some text..</p> - </div> - </div> - </div> - - <div class="footer"> - <h2>Footer</h2> - </div> - </body> -</html> + <head> + <title>Welcome to Jakarta EE!</title> + <link rel="stylesheet" href="wr/styles/main.css"> + </head> + <body> + <div class = "header"> + <h2>Blog Name</h2> + </div> + <div class = "row"> + <div class = "leftcolumn"> + <div class = "card"> + <h2>TITLE HEADING</h2> + <h5>Title description, Dec 7, 2017</h5> + <div class = "fakeimg" style = "height:200px;"> Image </div> + <p>Some text..</p> + </div> + <div class = "card"> + <h2>TITLE HEADING</h2> + <h5>Title description, Sep 2, 2017</h5> + <div class = "fakeimg" style = "height:200px;"> Image </div> + <p>Some text..</p> + </div> + </div> + <div class = "rightcolumn"> + <div class = "card"> + <h2>About Me</h2> + <div class = "fakeimg" style = "height:100px;"> Image </div> + <p> Some text about me in culpa qui officia deserunt mollit anim.. </p> + </div> + <div class = "card"> + <h3>Popular Post</h3> + <div class = "fakeimg">Image</div> + <br /> + <div class = "fakeimg">Image</div> + <br /> + <div class = "fakeimg">Image</div> + </div> + <div class = "card"> + <h3>Follow Me</h3> + <p>Some text..</p> + </div> + </div> + </div> + <div class = "footer"> + <h2>Footer</h2> + </div> + </body> +</html>
\ No newline at end of file diff --git a/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.wod b/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.wod index 564d8d9..e69de29 100644 --- a/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.wod +++ b/wotonomy-web-test/src/main/webapp/WEB-INF/classes/Main.wo/Main.wod @@ -1,3 +0,0 @@ -cardlist : WORepetition { - -} diff --git a/wotonomy-web-test/src/main/webapp/WEB-INF/classes/styles/main.css b/wotonomy-web-test/src/main/webapp/WEB-INF/classes/styles/main.css new file mode 100644 index 0000000..25c50c3 --- /dev/null +++ b/wotonomy-web-test/src/main/webapp/WEB-INF/classes/styles/main.css @@ -0,0 +1,69 @@ + +* { + box-sizing: border-box; +} + +body { + font-family: Arial; + padding: 20px; + background: #f1f1f1; +} + +/* Header/Blog Title */ +.header { + padding: 30px; + font-size: 40px; + text-align: center; + background: white; +} + +/* Create two unequal columns that floats next to each other */ +/* Left column */ +.leftcolumn { + float: left; + width: 75%; +} + +/* Right column */ +.rightcolumn { + float: left; + width: 25%; + padding-left: 20px; +} + +/* Fake image */ +.fakeimg { + background-color: #aaa; + width: 100%; + padding: 20px; +} + +/* Add a card effect for articles */ +.card { + background-color: white; + padding: 20px; + margin-top: 20px; +} + +/* Clear floats after the columns */ +.row:after { + content: ""; + display: table; + clear: both; +} + +/* Footer */ +.footer { + padding: 20px; + text-align: center; + background: #ddd; + margin-top: 20px; +} + +/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ +@media screen and (max-width: 800px) { + .leftcolumn, .rightcolumn { + width: 100%; + padding: 0; + } +} |