From d25b61954fbb3711a9c6230608b50e22b665f018 Mon Sep 17 00:00:00 2001 From: Yujiro Akihiro Date: Wed, 26 Jun 2024 00:58:07 +0200 Subject: [PATCH 01/10] #1 OMG difficult lol --- css/styles.css | 15 + index.html | 79 ++++ js/scripts.js | 5 + original.html | 956 +++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 1055 insertions(+) create mode 100644 css/styles.css create mode 100644 index.html create mode 100644 js/scripts.js create mode 100644 original.html diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 000000000..ca1ebb379 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,15 @@ + +body { + font-family: Arial, sans-serif; +} + +.site-header { + background-color: #f8f9fa; + padding: 20px 0; +} + +.site-title a { + text-decoration: none; + color: #333; +} + diff --git a/index.html b/index.html new file mode 100644 index 000000000..27990cd15 --- /dev/null +++ b/index.html @@ -0,0 +1,79 @@ + + + + + + Revera Theme Clone + + + + +
+ + + + +
+
+
+
+ Copyright © 2024 + revera - Just another demo Sites site.
+ | Revera Theme +
+
+
+
+
+ + + + + + + diff --git a/js/scripts.js b/js/scripts.js new file mode 100644 index 000000000..e78e01a51 --- /dev/null +++ b/js/scripts.js @@ -0,0 +1,5 @@ + +$(document).ready(function() { + $('#topmenu').superfish(); +}); + diff --git a/original.html b/original.html new file mode 100644 index 000000000..a07c89849 --- /dev/null +++ b/original.html @@ -0,0 +1,956 @@ + + + + + + LAB | Bootstrap Cloning Revera + + + + + +
+
+ The Wayback Machine - + https://web.archive.org/web/20180109051150/http://demo.fabthemes.com:80/revera/ +
+ + + +
+ + + +
+
    +
  • + + +
    +

    + Etiam mauris tortor, pharetra quis lobortis in, pharetra in diam +

    +

    + Duis tempus leo vitae ipsum viverra, blandit condimentum sapien + porttitor. Duis porttitor sed metus eget mollis. Curabitur + bibendum imperdiet tortor, ut pulvinar purus elementum nec. + Suspendisse at erat luctus; hendrerit sapien sed, consectetur + erat. Maecenas dignissim suscipit orci at molestie. Aenean + fringilla dolor vitae lacus lacinia eleifend. Suspendisse et + libero nunc. Etiam mauris tortor, pharetra […] +

    + + READ MORE + +
    +
    • +
  • + + +
    +

    Falauris sollicitudin quis dolor venenatis facilisis

    +

    + Donec sed dolor eu augue dignissim pellentesque. Fusce semper + tortor ornare, luctus sem in, dictum leo. Ut at congue quam! + Maecenas luctus interdum odio, eget volutpat velit hendrerit eu? + Suspendisse at magna ut sem blandit hendrerit non ut magna. Cras + quis porta dolor. Aliquam erat volutpat. Phasellus fringilla + feugiat libero nec volutpat. Maecenas fermentum bibendum […] +

    + + READ MORE + +
    +
    • +
  • + + +
    +

    Suspendisse ornare, felis feugiat suscipit pharetra

    +

    + Quisque sit amet sagittis justo. Suspendisse ornare, felis + feugiat suscipit pharetra, lorem est viverra odio; tristique + tristique diam tellus id tellus. In consectetur aliquet + tristique. Curabitur imperdiet leo in nisl consectetur mattis. + Quisque bibendum, mauris vitae suscipit ornare; est nibh + elementum mauris, eu malesuada nunc magna at justo. Proin + blandit id tellus non pellentesque. Mauris […] +

    + + READ MORE + +
    +
    • +
  • + + +
    +

    Fusce scelerisque nibh ac nisl luctus interdum.

    +

    + Nam luctus velit ultricies vestibulum eleifend. Proin imperdiet + varius rutrum. Curabitur placerat lacus eu ligula pellentesque + euismod? Aliquam volutpat augue id nibh auctor, at varius dui + semper? Suspendisse non pellentesque sapien, et sagittis erat. + Quisque et dignissim elit. Sed sit amet sapien ac quam + vestibulum suscipit ac id diam. Morbi accumsan est vitae tellus + vulputate […] +

    + + READ MORE + +
    +
    • +
+
+ +
+ +
+
+
+
+ +

Web design

+

+ Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Vestibulum vehicula erat non congue + cursus. Aenean auctor nulla quis augue dictum, sed sagittis odio + varius Link +

+
+ +
+ +

Web development

+

+ Duis tempus leo vitae ipsum viverra, blandit condimentum sapien + porttitor. Duis porttitor sed metus eget mollis. Curabitur + bibendum imperdiet tortor, ut pulvinar purus elementum + nspendisse at erat luctus. +

+
+ +
+ +

User interface

+

+ Cras aliquet venenatis porttitor. Donec rutrum sapien et sapien + dignissim, eu dapibus mi molestie. Suspendisse dictum convallis + quam et sodales. Praesent non enim et magna congue gravida. +

+
+
+
+
+
+
+
+
+
+

Latest Projects

+

Few of the latest portfolio items

+
+ +
+
+
+ +
+ +

+ + Nunc libero elit, iaculis nec augue non +

+
+ +
+
+ +
+ +

+ + Phasellus aliquet iaculis neque accumsan aliquam +

+
+ +
+
+ +
+ +

+ + Vivamus blandit ipsum sed arcu euismod +

+
+ +
+
+ +
+ +

+ + Curabitur auctor dolor risus, vitae pellentesque arcu + consequat +

+
+
+
+
+ +
+
+
+

Latest Articles

+

Latest posts from the blog

+
+ +
+
+
+ +
+ +

+ + Etiam mauris tortor, pharetra quis lobortis in, pharetra + in diam +

+
+ Posted on + + by + admin +
+ +

+ Duis tempus leo vitae ipsum viverra, blandit condimentum + sapien porttitor. Duis porttitor sed metus eget mollis. + Curabitur bibendum imperdiet tortor, ut pulvinar purus + elementum nec. Suspendisse at erat luctus; hendrerit sapien + sed, consectetur erat. Maecenas dignissim suscipit orci at + molestie. Aenean fringilla dolor vitae lacus lacinia + eleifend. Suspendisse et libero nunc. Etiam mauris tortor, + pharetra […] +

+
+ +
+
+ +
+ +

+ + Falauris sollicitudin quis dolor venenatis facilisis +

+
+ Posted on + + by + admin +
+ +

+ Donec sed dolor eu augue dignissim pellentesque. Fusce + semper tortor ornare, luctus sem in, dictum leo. Ut at + congue quam! Maecenas luctus interdum odio, eget volutpat + velit hendrerit eu? Suspendisse at magna ut sem blandit + hendrerit non ut magna. Cras quis porta dolor. Aliquam erat + volutpat. Phasellus fringilla feugiat libero nec volutpat. + Maecenas fermentum bibendum […] +

+
+ +
+
+ +
+ +

+ + Suspendisse ornare, felis feugiat suscipit pharetra +

+
+ Posted on + + by + admin +
+ +

+ Quisque sit amet sagittis justo. Suspendisse ornare, felis + feugiat suscipit pharetra, lorem est viverra odio; tristique + tristique diam tellus id tellus. In consectetur aliquet + tristique. Curabitur imperdiet leo in nisl consectetur + mattis. Quisque bibendum, mauris vitae suscipit ornare; est + nibh elementum mauris, eu malesuada nunc magna at justo. + Proin blandit id tellus non pellentesque. Mauris […] +

+
+ +
+
+ +
+ +

+ + Festibulum purus odio, ornare non posuere +

+
+ Posted on + + by + admin +
+ +

+ Aenean quis rhoncus nisl, eget sollicitudin ipsum. Curabitur + a elementum purus. Quisque vitae dui at arcu porttitor + laoreet ac vitae nibh. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. + Nulla facilisi. Nulla egestas at nunc at volutpat. Nullam + sodales at diam vel tempor. Sed pretium, leo vel + pellentesque dictum, ligula […] +

+
+
+
+
+
+
+ + +
+
+
+
+

Revera

+
+

+ Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Vestibulum vehicula erat non congue + cursus. Aenean auctor nulla quis augue dictum, sed sagittis + odio varius? Aliquam nec venenatis turpis. Aenean euismod arcu + vel volutpat tristique. In mattis ipsum quis magna feugiat, id + tempus metus accumsan. +

+
+
+
+

Meta

+ +
+
+

Archives

+ +
+
+

Recent Posts

+ +
+
+
+
+ +
+
+
+
+ Copyright © 2018 + revera + - Just another demo Sites site.
+ | + Revera Theme +
+
+ +
+
+ +
+ + + + + + + + + + + preload imagepreload image + + + From 0cb0e423993afc0991f30d122c44ce63c612fccb Mon Sep 17 00:00:00 2001 From: Yujiro Akihiro Date: Wed, 26 Jun 2024 01:01:46 +0200 Subject: [PATCH 02/10] #2 this is better lol --- index.html | 108 ++++++++++++++++++++++++----------------------------- 1 file changed, 48 insertions(+), 60 deletions(-) diff --git a/index.html b/index.html index 27990cd15..1908b2be0 100644 --- a/index.html +++ b/index.html @@ -5,75 +5,63 @@ Revera Theme Clone - + -
- - - - -
-
-
-
- Copyright © 2024 - revera - Just another demo Sites site.
- | Revera Theme +
+ +
+
+
+
+

© 2024 Revera. All rights reserved.

-
+
- + - - From a3dfdf0ade7e9dad244c689e63d8f49188c3a5fb Mon Sep 17 00:00:00 2001 From: Yujiro Akihiro Date: Wed, 26 Jun 2024 01:08:27 +0200 Subject: [PATCH 03/10] #3 Good to know. try out some samples. --- Buttons.html | 22 ++++++++++++++++++++++ Cards.html | 22 ++++++++++++++++++++++ Navbar.html | 30 ++++++++++++++++++++++++++++++ index.html | 2 +- 4 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 Buttons.html create mode 100644 Cards.html create mode 100644 Navbar.html diff --git a/Buttons.html b/Buttons.html new file mode 100644 index 000000000..9a980b3ae --- /dev/null +++ b/Buttons.html @@ -0,0 +1,22 @@ + + + + + + Bootstrap Button Examples + + + +
+

Button Examples

+ + + + + + + + +
+ + diff --git a/Cards.html b/Cards.html new file mode 100644 index 000000000..2da4377fd --- /dev/null +++ b/Cards.html @@ -0,0 +1,22 @@ + + + + + + Bootstrap Card Example + + + +
+

Card Example

+
+ ... +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+
+ + diff --git a/Navbar.html b/Navbar.html new file mode 100644 index 000000000..4f7a050a5 --- /dev/null +++ b/Navbar.html @@ -0,0 +1,30 @@ + + + + + + Bootstrap Navbar Example + + + + + + diff --git a/index.html b/index.html index 1908b2be0..c8550f2cc 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Revera Theme Clone - +
From 23877cbbd39117934aa18e84184948b229cc396f Mon Sep 17 00:00:00 2001 From: Yujiro Akihiro Date: Wed, 26 Jun 2024 01:13:14 +0200 Subject: [PATCH 04/10] #3 !?! --- index.html | 143 +++++++++++++++++++++++++++++++++----------------- js/scripts.js | 10 ++-- 2 files changed, 102 insertions(+), 51 deletions(-) diff --git a/index.html b/index.html index c8550f2cc..4fbf671a3 100644 --- a/index.html +++ b/index.html @@ -8,60 +8,107 @@ -
- -
-
-
- -
-
-
- -
-
-
-
-

Welcome to Revera!

-

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

-
-

It uses utility classes for typography and spacing to space content out within the larger container.

- Learn more +
+
+
+
+ + +
+
+
+
+
+

Welcome to Revera!

+

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

+
+

It uses utility classes for typography and spacing to space content out within the larger container.

+ Learn more +
+
+
+
+
+ +

Web design

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum vehicula erat non congue cursus. Aenean auctor nulla quis augue dictum, sed sagittis odio varius Link

+
+
+ +

Web development

+

Duis tempus leo vitae ipsum viverra, blandit condimentum sapien porttitor. Duis porttitor sed metus eget mollis. Curabitur bibendum imperdiet tortor, ut pulvinar purus elementum nspendisse at erat luctus.

+
+
+ +

User interface

+

Cras aliquet venenatis porttitor. Donec rutrum sapien et sapien dignissim, eu dapibus mi molestie. Suspendisse dictum convallis quam et sodales. Praesent non enim et magna congue gravida.

+
+
+
+
+
+
- -
-
-
-
-

© 2024 Revera. All rights reserved.

+ + +
-
+
- - + + + + diff --git a/js/scripts.js b/js/scripts.js index e78e01a51..68cdf9503 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -1,5 +1,9 @@ - $(document).ready(function() { - $('#topmenu').superfish(); + $('#topmenu').superfish({ + delay: 100, + animation: { opacity: 'show', height: 'show' }, + speed: 'fast', + cssArrows: false, + disableHI: true + }); }); - From 75b589d3fa9f1856e207ee48c6a0e13e4dacd2b1 Mon Sep 17 00:00:00 2001 From: Yujiro Akihiro Date: Wed, 26 Jun 2024 01:20:43 +0200 Subject: [PATCH 05/10] #4 -@_@-}`` --- css/styles.css | 50 ++++++++++++-- index.html | 173 ++++++++++++++++++++++++++++++++++++++++--------- js/scripts.js | 7 ++ 3 files changed, 194 insertions(+), 36 deletions(-) diff --git a/css/styles.css b/css/styles.css index ca1ebb379..03e2719ef 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,15 +1,57 @@ - +/* 全体のスタイル */ body { font-family: Arial, sans-serif; } +/* ヘッダーのスタイル */ .site-header { - background-color: #f8f9fa; - padding: 20px 0; + background-color: white; + padding: 10px 0; + border-bottom: 1px solid #e7e7e7; } .site-title a { text-decoration: none; - color: #333; + color: black; + font-size: 24px; + font-weight: bold; +} + +.mainmenu { + text-align: right; +} + +.topmenu ul { + list-style: none; + padding: 0; + margin: 0; } +.topmenu ul li { + display: inline; + margin-right: 15px; +} + +.topmenu ul li a { + text-decoration: none; + color: gray; + font-size: 16px; +} + +.topmenu ul li a:hover, +.topmenu ul li a:focus { + color: red; +} + +.topmenu ul li a.active { + color: red; + font-weight: bold; +} + +.topmenu ul li.menu-item-has-children > a { + padding-right: 10px; +} + +.topmenu ul li.menu-item-has-children > a .sf-sub-indicator { + margin-left: 5px; +} diff --git a/index.html b/index.html index 4fbf671a3..e18b66587 100644 --- a/index.html +++ b/index.html @@ -13,43 +13,60 @@

- revera + revera

-
- -
+ +
@@ -67,6 +84,7 @@

Welcome to Revera!

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more
+
@@ -88,6 +106,98 @@

User interface

+ + +
+
+
+

Latest Projects

+

Few of the latest portfolio items

+
+
+
+ Project 1 +
+

Project 1

+
+
+
+ Project 2 +
+

Project 2

+
+
+
+ Project 3 +
+

Project 3

+
+
+
+ Project 4 +
+

Project 4

+
+
+
+
+
+ +
+
+
+

Latest Articles

+

Latest posts from the blog

+
+
+
+ Article 1 +
+

Article 1

+
+ Posted on + by admin +
+

Duis tempus leo vitae ipsum viverra, blandit condimentum sapien porttitor. Duis porttitor sed metus eget mollis. Curabitur bibendum imperdiet tortor, ut pulvinar purus elementum nec. Suspendisse at erat luctus; hendrerit sapien sed, consectetur erat. Maecenas dignissim suscipit orci at molestie. Aenean fringilla dolor vitae lacus lacinia eleifend. Suspendisse et libero nunc. Etiam mauris tortor, pharetra […]

+
+
+
+ Article 2 +
+

Article 2

+
+ Posted on + by admin +
+

Donec sed dolor eu augue dignissim pellentesque. Fusce semper tortor ornare, luctus sem in, dictum leo. Ut at congue quam! Maecenas luctus interdum odio, eget volutpat velit hendrerit eu? Suspendisse at magna ut sem blandit hendrerit non ut magna. Cras quis porta dolor. Aliquam erat volutpat. Phasellus fringilla feugiat libero nec volutpat. Maecenas fermentum bibendum […]

+
+
+
+ Article 3 +
+

Article 3

+
+ Posted on + by admin +
+

Quisque sit amet sagittis justo. Suspendisse ornare, felis feugiat suscipit pharetra, lorem est viverra odio; tristique tristique diam tellus id tellus. In consectetur aliquet tristique. Curabitur imperdiet leo in nisl consectetur mattis. Quisque bibendum, mauris vitae suscipit ornare; est nibh elementum mauris, eu malesuada nunc magna at justo. Proin blandit id tellus non pellentesque. Mauris […]

+
+
+
+ Article 4 +
+

Article 4

+
+ Posted on + by admin +
+

Aenean quis rhoncus nisl, eget sollicitudin ipsum. Curabitur a elementum purus. Quisque vitae dui at arcu porttitor laoreet ac vitae nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Nulla egestas at nunc at volutpat. Nullam sodales at diam vel tempor. Sed pretium, leo vel pellentesque dictum, ligula […]

+
+
+
+
+
+
@@ -105,7 +215,6 @@

User interface

- diff --git a/js/scripts.js b/js/scripts.js index 68cdf9503..c82f4a488 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -6,4 +6,11 @@ $(document).ready(function() { cssArrows: false, disableHI: true }); + + // 現在のページに対応するメニュー項目をアクティブに設定 + $('ul.sfmenu a').each(function() { + if (this.href === window.location.href) { + $(this).addClass('active'); + } + }); }); From f326626018bc6e98ef29abc34c435483369daf9a Mon Sep 17 00:00:00 2001 From: Yujiro Akihiro Date: Wed, 26 Jun 2024 01:24:36 +0200 Subject: [PATCH 06/10] #5 ~{=_=///-_-}}}~~ difficult.... --- css/styles.css | 47 +++++++++++++++++++++++++++++++++++++++++++++- index.html | 51 ++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 83 insertions(+), 15 deletions(-) diff --git a/css/styles.css b/css/styles.css index 03e2719ef..108145801 100644 --- a/css/styles.css +++ b/css/styles.css @@ -35,7 +35,7 @@ body { .topmenu ul li a { text-decoration: none; color: gray; - font-size: 16px; + font-size: 14px; /* フォントサイズを小さくする */ } .topmenu ul li a:hover, @@ -55,3 +55,48 @@ body { .topmenu ul li.menu-item-has-children > a .sf-sub-indicator { margin-left: 5px; } + +/* コンテンツセクションのスタイル */ +.jumbotron { + margin-bottom: 2rem; + padding: 2rem 1rem; + background-color: #f8f9fa; + border-radius: .3rem; +} + +.fwidgets { + margin-bottom: 2rem; +} + +.homewidget { + text-align: center; + margin-bottom: 2rem; +} + +.homewidget i { + font-size: 48px; + margin-bottom: 1rem; +} + +.portbox, .postbox { + margin-bottom: 2rem; +} + +.portbox .hthumb, .postbox .hthumb { + margin-bottom: 1rem; +} + +.portbox h3, .postbox h3 { + font-size: 18px; + margin-bottom: .5rem; +} + +.hometa { + font-size: 14px; + color: #777; + margin-bottom: 1rem; +} + +.hometa a { + color: #007bff; +} diff --git a/index.html b/index.html index e18b66587..f17c6375b 100644 --- a/index.html +++ b/index.html @@ -77,12 +77,35 @@

-
-

Welcome to Revera!

-

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

-
-

It uses utility classes for typography and spacing to space content out within the larger container.

- Learn more +
@@ -116,25 +139,25 @@

Latest Projects

- Project 1 + Project 1

Project 1

- Project 2 + Project 2

Project 2

- Project 3 + Project 3

Project 3

- Project 4 + Project 4

Project 4

@@ -151,7 +174,7 @@

Latest Articles

- Article 1 + Article 1

Article 1

@@ -162,7 +185,7 @@

Article 1

- Article 2 + Article 2

Article 2

@@ -173,7 +196,7 @@

Article 2

- Article 3 + Article 3

Article 3

@@ -184,7 +207,7 @@

Article 3

- Article 4 + Article 4

Article 4

From a5f66b44ce83137dbcba6cad51307f5ac32acbcf Mon Sep 17 00:00:00 2001 From: Yujiro Akihiro Date: Wed, 26 Jun 2024 01:26:37 +0200 Subject: [PATCH 07/10] #6 hmmm --- css/styles.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/css/styles.css b/css/styles.css index 108145801..145b4aa05 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,6 +1,7 @@ /* 全体のスタイル */ body { font-family: Arial, sans-serif; + overflow-x: hidden; /* 無駄な横スクロールを防止 */ } /* ヘッダーのスタイル */ @@ -100,3 +101,22 @@ body { .hometa a { color: #007bff; } + +/* 画像が親要素の幅に収まるようにする */ +.img-responsive { + max-width: 100%; + height: auto; + display: block; +} + +/* .container 内の要素に余計な横スクロールを防ぐ */ +.container { + max-width: 100%; + overflow-x: hidden; +} + +/* ポートフォリオの画像を調整 */ +.portbox .hthumb img { + width: 100%; + height: auto; +} From eeb16d008c4d5cc44c8fc1b9b22b6889060c6b8d Mon Sep 17 00:00:00 2001 From: Yujiro Akihiro Date: Wed, 26 Jun 2024 01:30:25 +0200 Subject: [PATCH 08/10] #7 --- css/styles.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/css/styles.css b/css/styles.css index 145b4aa05..caa28b91e 100644 --- a/css/styles.css +++ b/css/styles.css @@ -29,14 +29,15 @@ body { } .topmenu ul li { - display: inline; + display: inline-block; margin-right: 15px; } .topmenu ul li a { text-decoration: none; color: gray; - font-size: 14px; /* フォントサイズを小さくする */ + font-size: 16px; /* フォントサイズを調整 */ + padding: 10px 15px; } .topmenu ul li a:hover, From 4858d7f6f98d6531babac7b89949db17530a0471 Mon Sep 17 00:00:00 2001 From: Yujiro Akihiro Date: Wed, 26 Jun 2024 01:40:21 +0200 Subject: [PATCH 09/10] #8 almost.... --- index.html | 340 +++++++++++++++++++++++------------------------------ 1 file changed, 150 insertions(+), 190 deletions(-) diff --git a/index.html b/index.html index f17c6375b..16d83cc14 100644 --- a/index.html +++ b/index.html @@ -13,62 +13,50 @@

- revera + revera

- -
- +
@@ -77,151 +65,126 @@

-
+
+
+ +
+
+
+ +

Web design

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum vehicula erat non congue cursus. Aenean auctor nulla quis augue dictum, sed sagittis odio varius Link

+
+ +
+ +

Web development

+

Duis tempus leo vitae ipsum viverra, blandit condimentum sapien porttitor. Duis porttitor sed metus eget mollis. Curabitur bibendum imperdiet tortor, ut pulvinar purus elementum nspendisse at erat luctus.

+
+ +
+ +

User interface

+

Cras aliquet venenatis porttitor. Donec rutrum sapien et sapien dignissim, eu dapibus mi molestie. Suspendisse dictum convallis quam et sodales. Praesent non enim et magna congue gravida.

+
+
+
+ +
+
+
+

Latest Projects

+

Few of the latest portfolio items

+
+
+
+ Project 1
-
- Second slide +

Project 1

+
+
+
+ Project 2
-
- Third slide +

Project 2

+
+
+
+ Project 3
-
- Fourth slide +

Project 3

+
+
+
+ Project 4
+

Project 4

- - - Previous - - - - Next -
+
+
+
-
-
-
-
- -

Web design

-

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum vehicula erat non congue cursus. Aenean auctor nulla quis augue dictum, sed sagittis odio varius Link

-
-
- -

Web development

-

Duis tempus leo vitae ipsum viverra, blandit condimentum sapien porttitor. Duis porttitor sed metus eget mollis. Curabitur bibendum imperdiet tortor, ut pulvinar purus elementum nspendisse at erat luctus.

-
-
- -

User interface

-

Cras aliquet venenatis porttitor. Donec rutrum sapien et sapien dignissim, eu dapibus mi molestie. Suspendisse dictum convallis quam et sodales. Praesent non enim et magna congue gravida.

-
+
+
+
+

Latest Articles

+

Latest posts from the blog

+
+
+
+ Article 1
+

Article 1

+
+ Posted on + by admin +
+

Duis tempus leo vitae ipsum viverra, blandit condimentum sapien porttitor. Duis porttitor sed metus eget mollis. Curabitur bibendum imperdiet tortor, ut pulvinar purus elementum nec. Suspendisse at erat luctus; hendrerit sapien sed, consectetur erat. Maecenas dignissim suscipit orci at molestie. Aenean fringilla dolor vitae lacus lacinia eleifend. Suspendisse et libero nunc. Etiam mauris tortor, pharetra […]

-
- - -
-
-
-

Latest Projects

-

Few of the latest portfolio items

-
-
-
- Project 1 -
-

Project 1

-
-
-
- Project 2 -
-

Project 2

-
-
-
- Project 3 -
-

Project 3

-
-
-
- Project 4 -
-

Project 4

-
-
+
+
+ Article 2 +
+

Article 2

+
+ Posted on + by admin
+

Donec sed dolor eu augue dignissim pellentesque. Fusce semper tortor ornare, luctus sem in, dictum leo. Ut at congue quam! Maecenas luctus interdum odio, eget volutpat velit hendrerit eu? Suspendisse at magna ut sem blandit hendrerit non ut magna. Cras quis porta dolor. Aliquam erat volutpat. Phasellus fringilla feugiat libero nec volutpat. Maecenas fermentum bibendum […]

-
- -
-
-
-

Latest Articles

-

Latest posts from the blog

-
-
-
- Article 1 -
-

Article 1

-
- Posted on - by admin -
-

Duis tempus leo vitae ipsum viverra, blandit condimentum sapien porttitor. Duis porttitor sed metus eget mollis. Curabitur bibendum imperdiet tortor, ut pulvinar purus elementum nec. Suspendisse at erat luctus; hendrerit sapien sed, consectetur erat. Maecenas dignissim suscipit orci at molestie. Aenean fringilla dolor vitae lacus lacinia eleifend. Suspendisse et libero nunc. Etiam mauris tortor, pharetra […]

-
-
-
- Article 2 -
-

Article 2

-
- Posted on - by admin -
-

Donec sed dolor eu augue dignissim pellentesque. Fusce semper tortor ornare, luctus sem in, dictum leo. Ut at congue quam! Maecenas luctus interdum odio, eget volutpat velit hendrerit eu? Suspendisse at magna ut sem blandit hendrerit non ut magna. Cras quis porta dolor. Aliquam erat volutpat. Phasellus fringilla feugiat libero nec volutpat. Maecenas fermentum bibendum […]

-
-
-
- Article 3 -
-

Article 3

-
- Posted on - by admin -
-

Quisque sit amet sagittis justo. Suspendisse ornare, felis feugiat suscipit pharetra, lorem est viverra odio; tristique tristique diam tellus id tellus. In consectetur aliquet tristique. Curabitur imperdiet leo in nisl consectetur mattis. Quisque bibendum, mauris vitae suscipit ornare; est nibh elementum mauris, eu malesuada nunc magna at justo. Proin blandit id tellus non pellentesque. Mauris […]

-
-
-
- Article 4 -
-

Article 4

-
- Posted on - by admin -
-

Aenean quis rhoncus nisl, eget sollicitudin ipsum. Curabitur a elementum purus. Quisque vitae dui at arcu porttitor laoreet ac vitae nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Nulla egestas at nunc at volutpat. Nullam sodales at diam vel tempor. Sed pretium, leo vel pellentesque dictum, ligula […]

-
-
+
+
+ Article 3 +
+

Article 3

+
+ Posted on + by admin +
+

Quisque sit amet sagittis justo. Suspendisse ornare, felis feugiat suscipit pharetra, lorem est viverra odio; tristique tristique diam tellus id tellus. In consectetur aliquet tristique. Curabitur imperdiet leo in nisl consectetur mattis. Quisque bibendum, mauris vitae suscipit ornare; est nibh elementum mauris, eu malesuada nunc magna at justo. Proin blandit id tellus non pellentesque. Mauris […]

+
+
+
+ Article 4 +
+

Article 4

+
+ Posted on + by admin
+

Aenean quis rhoncus nisl, eget sollicitudin ipsum. Curabitur a elementum purus. Quisque vitae dui at arcu porttitor laoreet ac vitae nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Nulla egestas at nunc at volutpat. Nullam sodales at diam vel tempor. Sed pretium, leo vel pellentesque dictum, ligula […]

- -

+
@@ -229,18 +192,15 @@

Article 4

-
- Copyright © 2024 - revera - Just another demo Sites site.
- | Revera Theme +
+ © 2024 Revera. All rights reserved.
+ - - From 7d2fb7f25ebee2d09e85becaa9fea3b132c8c23b Mon Sep 17 00:00:00 2001 From: Yujiro Akihiro Date: Wed, 26 Jun 2024 02:56:20 +0200 Subject: [PATCH 10/10] #9 difficult! lol --- original.html => .github/original.html | 0 css/styles.css | 142 +++++++-------- index.html | 235 ++++++++++++++----------- {js => starter-code/js}/scripts.js | 0 4 files changed, 191 insertions(+), 186 deletions(-) rename original.html => .github/original.html (100%) rename {js => starter-code/js}/scripts.js (100%) diff --git a/original.html b/.github/original.html similarity index 100% rename from original.html rename to .github/original.html diff --git a/css/styles.css b/css/styles.css index caa28b91e..3f937ae1e 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,123 +1,105 @@ /* 全体のスタイル */ body { font-family: Arial, sans-serif; - overflow-x: hidden; /* 無駄な横スクロールを防止 */ + color: #333; } -/* ヘッダーのスタイル */ .site-header { - background-color: white; - padding: 10px 0; - border-bottom: 1px solid #e7e7e7; + background-color: #fff; + padding: 20px 0; } .site-title a { - text-decoration: none; - color: black; + color: #000; font-size: 24px; font-weight: bold; -} - -.mainmenu { - text-align: right; -} - -.topmenu ul { - list-style: none; - padding: 0; - margin: 0; -} - -.topmenu ul li { - display: inline-block; - margin-right: 15px; -} - -.topmenu ul li a { text-decoration: none; - color: gray; - font-size: 16px; /* フォントサイズを調整 */ - padding: 10px 15px; } -.topmenu ul li a:hover, -.topmenu ul li a:focus { - color: red; -} - -.topmenu ul li a.active { - color: red; - font-weight: bold; +.navbar-nav .nav-link { + color: #555; + font-size: 16px; + padding: 10px 15px; } -.topmenu ul li.menu-item-has-children > a { - padding-right: 10px; +.navbar-nav .nav-link:hover, +.navbar-nav .nav-link.active { + color: #d9534f; + background-color: transparent; } -.topmenu ul li.menu-item-has-children > a .sf-sub-indicator { - margin-left: 5px; +.jumbotron { + color: #fff; + background-size: cover; + background-position: center; + padding: 100px 50px; + text-align: center; } -/* コンテンツセクションのスタイル */ -.jumbotron { - margin-bottom: 2rem; - padding: 2rem 1rem; - background-color: #f8f9fa; - border-radius: .3rem; +.jumbotron .display-4 { + font-size: 3rem; + font-weight: 700; + text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } -.fwidgets { - margin-bottom: 2rem; +.jumbotron .lead { + font-size: 1.5rem; + text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } -.homewidget { - text-align: center; - margin-bottom: 2rem; +.jumbotron .btn-primary { + background-color: #d9534f; + border-color: #d9534f; + font-size: 1.25rem; + padding: 10px 30px; } -.homewidget i { - font-size: 48px; - margin-bottom: 1rem; +.jumbotron .btn-primary:hover { + background-color: #c9302c; + border-color: #c12e2a; } -.portbox, .postbox { - margin-bottom: 2rem; +.hthumb img { + width: 100%; + height: auto; } -.portbox .hthumb, .postbox .hthumb { - margin-bottom: 1rem; +.fwidgets .homewidget { + text-align: center; + margin-bottom: 30px; } -.portbox h3, .postbox h3 { - font-size: 18px; - margin-bottom: .5rem; +.fwidgets .homewidget h3 { + margin-top: 20px; + font-size: 1.5rem; } -.hometa { - font-size: 14px; - color: #777; - margin-bottom: 1rem; +.portbox, +.postbox { + text-align: center; + margin-bottom: 30px; } -.hometa a { - color: #007bff; +.portbox h3, +.postbox h3 { + margin-top: 15px; + font-size: 1.25rem; } -/* 画像が親要素の幅に収まるようにする */ -.img-responsive { - max-width: 100%; - height: auto; - display: block; +.postbox .hometa { + margin: 10px 0; + font-size: 0.875rem; + color: #999; } -/* .container 内の要素に余計な横スクロールを防ぐ */ -.container { - max-width: 100%; - overflow-x: hidden; +.site-footer { + background-color: #f8f9fa; + padding: 30px 0; + text-align: center; + font-size: 0.875rem; } -/* ポートフォリオの画像を調整 */ -.portbox .hthumb img { - width: 100%; - height: auto; +.site-footer .fcred { + margin: 0; + color: #999; } diff --git a/index.html b/index.html index 16d83cc14..7930fded0 100644 --- a/index.html +++ b/index.html @@ -13,12 +13,11 @@

- revera + Revera

+
-
-

Welcome to Revera!

-

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

-
-

It uses utility classes for typography and spacing to space content out within the larger container.

- Learn more -
-
-
-
- -
-
-
- -

Web design

-

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum vehicula erat non congue cursus. Aenean auctor nulla quis augue dictum, sed sagittis odio varius Link

-
- -
- -

Web development

-

Duis tempus leo vitae ipsum viverra, blandit condimentum sapien porttitor. Duis porttitor sed metus eget mollis. Curabitur bibendum imperdiet tortor, ut pulvinar purus elementum nspendisse at erat luctus.

-
- -
- -

User interface

-

Cras aliquet venenatis porttitor. Donec rutrum sapien et sapien dignissim, eu dapibus mi molestie. Suspendisse dictum convallis quam et sodales. Praesent non enim et magna congue gravida.

-
-
-
- -
-
-
-

Latest Projects

-

Few of the latest portfolio items

-
-
-
- Project 1 + -
-
-
-

Latest Articles

-

Latest posts from the blog

-
-
-
- Article 1 -
-

Article 1

-
- Posted on - by admin +
+
+
+ +

Web design

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum vehicula erat non congue cursus. Aenean auctor nulla quis augue dictum, sed sagittis odio varius Link

-

Duis tempus leo vitae ipsum viverra, blandit condimentum sapien porttitor. Duis porttitor sed metus eget mollis. Curabitur bibendum imperdiet tortor, ut pulvinar purus elementum nec. Suspendisse at erat luctus; hendrerit sapien sed, consectetur erat. Maecenas dignissim suscipit orci at molestie. Aenean fringilla dolor vitae lacus lacinia eleifend. Suspendisse et libero nunc. Etiam mauris tortor, pharetra […]

-
-
-
- Article 2 + +
+ +

Web development

+

Duis tempus leo vitae ipsum viverra, blandit condimentum sapien porttitor. Duis porttitor sed metus eget mollis. Curabitur bibendum imperdiet tortor, ut pulvinar purus elementum nspendisse at erat luctus.

-

Article 2

-
- Posted on - by admin + +
+ +

User interface

+

Cras aliquet venenatis porttitor. Donec rutrum sapien et sapien dignissim, eu dapibus mi molestie. Suspendisse dictum convallis quam et sodales. Praesent non enim et magna congue gravida.

-

Donec sed dolor eu augue dignissim pellentesque. Fusce semper tortor ornare, luctus sem in, dictum leo. Ut at congue quam! Maecenas luctus interdum odio, eget volutpat velit hendrerit eu? Suspendisse at magna ut sem blandit hendrerit non ut magna. Cras quis porta dolor. Aliquam erat volutpat. Phasellus fringilla feugiat libero nec volutpat. Maecenas fermentum bibendum […]

-
-
- Article 3 -
-

Article 3

-
- Posted on - by admin +
+ +
+
+
+

Latest Projects

+

Few of the latest portfolio items

+
+
+
+ Project 1 +
+

Project 1

+
+
+
+ Project 2 +
+

Project 2

+
+
+
+ Project 3 +
+

Project 3

+
+
+
+ Project 4 +
+

Project 4

+
+
-

Quisque sit amet sagittis justo. Suspendisse ornare, felis feugiat suscipit pharetra, lorem est viverra odio; tristique tristique diam tellus id tellus. In consectetur aliquet tristique. Curabitur imperdiet leo in nisl consectetur mattis. Quisque bibendum, mauris vitae suscipit ornare; est nibh elementum mauris, eu malesuada nunc magna at justo. Proin blandit id tellus non pellentesque. Mauris […]

-
-
- Article 4 -
-

Article 4

-
- Posted on - by admin +
+ +
+
+
+

Latest Articles

+

Latest posts from the blog

+
+
+
+ Article 1 +
+

Article 1

+
+ Posted on + by admin +
+

Duis tempus leo vitae ipsum viverra, blandit condimentum sapien porttitor. Duis porttitor sed metus eget mollis. Curabitur bibendum imperdiet tortor, ut pulvinar purus elementum nec. Suspendisse at erat luctus; hendrerit sapien sed, consectetur erat. Maecenas dignissim suscipit orci at molestie. Aenean fringilla dolor vitae lacus lacinia eleifend. Suspendisse et libero nunc. Etiam mauris tortor, pharetra […]

+
+
+
+ Article 2 +
+

Article 2

+
+ Posted on + by admin +
+

Donec sed dolor eu augue dignissim pellentesque. Fusce semper tortor ornare, luctus sem in, dictum leo. Ut at congue quam! Maecenas luctus interdum odio, eget volutpat velit hendrerit eu? Suspendisse at magna ut sem blandit hendrerit non ut magna. Cras quis porta dolor. Aliquam erat volutpat. Phasellus fringilla feugiat libero nec volutpat. Maecenas fermentum bibendum […]

+
+
+
+ Article 3 +
+

Article 3

+
+ Posted on + by admin +
+

Quisque sit amet sagittis justo. Suspendisse ornare, felis feugiat suscipit pharetra, lorem est viverra odio; tristique tristique diam tellus id tellus. In consectetur aliquet tristique. Curabitur imperdiet leo in nisl consectetur mattis. Quisque bibendum, mauris vitae suscipit ornare; est nibh elementum mauris, eu malesuada nunc magna at justo. Proin blandit id tellus non pellentesque. Mauris […]

+
+
+
+ Article 4 +
+

Article 4

+
+ Posted on + by admin +
+

Aenean quis rhoncus nisl, eget sollicitudin ipsum. Curabitur a elementum purus. Quisque vitae dui at arcu porttitor laoreet ac vitae nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Nulla egestas at nunc at volutpat. Nullam sodales at diam vel tempor. Sed pretium, leo vel pellentesque dictum, ligula […]

+
+
-

Aenean quis rhoncus nisl, eget sollicitudin ipsum. Curabitur a elementum purus. Quisque vitae dui at arcu porttitor laoreet ac vitae nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Nulla egestas at nunc at volutpat. Nullam sodales at diam vel tempor. Sed pretium, leo vel pellentesque dictum, ligula […]

-
+
diff --git a/js/scripts.js b/starter-code/js/scripts.js similarity index 100% rename from js/scripts.js rename to starter-code/js/scripts.js