質問編集履歴

2

コードを修正しました

2021/03/28 13:36

投稿

azaz_wb
azaz_wb

スコア10

test CHANGED
File without changes
test CHANGED
@@ -768,6 +768,14 @@
768
768
 
769
769
  /*コンテンツ*/
770
770
 
771
+ .contents-wrapper {
772
+
773
+ position: relative;
774
+
775
+ }
776
+
777
+
778
+
771
779
  .contents-wrapper::after {
772
780
 
773
781
  content: "";
@@ -776,18 +784,20 @@
776
784
 
777
785
  position: absolute;
778
786
 
779
- top: 1600px;
780
-
781
787
  right: 0;
782
788
 
783
789
  background-color: rgba(219, 219, 219, 0.76);
784
790
 
785
791
  width: 100%;
786
792
 
787
- height: 95%;
793
+ height: 200%;
788
794
 
789
795
  z-index: -1;
790
796
 
797
+ top: -200px;
798
+
799
+ left: 0;
800
+
791
801
  }
792
802
 
793
803
 
@@ -842,6 +852,16 @@
842
852
 
843
853
  .latest-topics {
844
854
 
855
+ background-color: #fff;
856
+
857
+ z-index: 10;
858
+
859
+ }
860
+
861
+
862
+
863
+ .latest-size {
864
+
845
865
  height: 400px;
846
866
 
847
867
  width: 70%;
@@ -854,6 +874,16 @@
854
874
 
855
875
 
856
876
 
877
+ .latest-size h2 {
878
+
879
+ display: inline-block;
880
+
881
+ margin-top: 30px;
882
+
883
+ }
884
+
885
+
886
+
857
887
  .topics {
858
888
 
859
889
  margin-left: 500px;

1

コードを修正しました

2021/03/28 13:36

投稿

azaz_wb
azaz_wb

スコア10

test CHANGED
File without changes
test CHANGED
@@ -18,10 +18,6 @@
18
18
 
19
19
  ```HTML
20
20
 
21
- <body>
22
-
23
- <!-- ヘッダー -->
24
-
25
21
  <header>
26
22
 
27
23
  <h1 class="site-title">
@@ -192,45 +188,81 @@
192
188
 
193
189
  <h2>LATEST TOPICS</h2>
194
190
 
191
+ <div class="topics">
192
+
195
- <div class="topic">
193
+ <div class="topic">
196
-
194
+
197
- <p>2020.02.01</p>
195
+ <p class="date">2020.02.01</p>
198
-
196
+
199
- <p>イベントレポート「VRクリエイター座談会 〜5Gの次に来るもの〜」</p>
197
+ <p class="news">イベントレポート「VRクリエイター座談会 〜5Gの次に来るもの〜」</p>
198
+
199
+ </div>
200
+
201
+ <div class="topic">
202
+
203
+ <p class="date">2020.01.18</p>
204
+
205
+ <p class="news">プレスリリースのお知らせ DIGGIN’ RECORDS</p>
206
+
207
+ </div>
208
+
209
+ <div class="topic">
210
+
211
+ <p class="date">2020.01.01</p>
212
+
213
+ <p class="news">新年開けましておめでとうございます</p>
214
+
215
+ </div>
216
+
217
+ </div><!--topics-->
218
+
219
+ <div class="btn topic-btn">
220
+
221
+ <a href="#" style="text-decoration:none;" class="link-btn">READ MORE</a>
222
+
223
+ </div><!--btn-->
224
+
225
+ </section><!--latest-topics-->
226
+
227
+
228
+
229
+ <section class="contact-wrapper">
230
+
231
+ <div class="contact-size">
232
+
233
+ <h2>CONTACT</h2>
234
+
235
+ <div class="recruit">
236
+
237
+ <p>制作の依頼、取材の依頼、IRや採用についての連絡・お問い合わせはコンタクトページから承っております。<br>
238
+
239
+ まずはお気軽にご連絡ください。担当者から改めて返信いたします。</p>
240
+
241
+ <img src="img/recruit-img.png">
242
+
243
+ </div><!--recruit-->
244
+
245
+ <div class="contact-btn">
246
+
247
+ <a href="#" style="text-decoration:none;" class="link-btn">READ MORE</a>
200
248
 
201
249
  </div>
202
250
 
203
- <div class="topic">
251
+ </div><!--contact-size-->
204
-
205
- <p>2020.01.18</p>
252
+
206
-
207
- <p>プレスリリースのお知らせ DIGGIN’ RECORDS</p>
208
-
209
- </div>
253
+ </section>
210
-
254
+
255
+
256
+
211
- <div class="topic">
257
+ <footer>
212
-
258
+
213
- <p>2020.01.01</p>
259
+ <p>©2018 DIGSMILE INC.</p>
214
-
215
- <p>新年開けましておめでとうございます</p>
260
+
216
-
217
- </div>
218
-
219
-
220
-
221
- </section><!--latest-topics>
222
-
223
-
224
-
225
- <!-jQueryの読み込み-->
226
-
227
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
228
-
229
- <script src="nmt.js"></script>
230
-
231
-
232
-
233
- </body>
261
+ </footer>
262
+
263
+
264
+
265
+
234
266
 
235
267
  ```
236
268
 
@@ -244,8 +276,6 @@
244
276
 
245
277
  }
246
278
 
247
-
248
-
249
279
  body {
250
280
 
251
281
  height: 100%;
@@ -652,7 +682,7 @@
652
682
 
653
683
  margin: 0 auto;
654
684
 
655
- padding-bottom: 0;
685
+ bottom: 0;
656
686
 
657
687
  }
658
688
 
@@ -670,7 +700,7 @@
670
700
 
671
701
  margin-top: 200px;
672
702
 
673
-
703
+ bottom: 0;
674
704
 
675
705
  }
676
706
 
@@ -696,129 +726,269 @@
696
726
 
697
727
 
698
728
 
699
- .about h2 {
729
+ .about p {
730
+
731
+ margin-top: 30px;
732
+
733
+ font-size: 15px;
734
+
735
+ }
736
+
737
+
738
+
739
+ .about a {
740
+
741
+ margin-bottom: 50px;
742
+
743
+ }
744
+
745
+
746
+
747
+ /*リンクボタン*/
748
+
749
+ .link-btn {
750
+
751
+ color: #fff;
752
+
753
+ background-color: #222;
754
+
755
+ padding: 15px 50px;
756
+
757
+ font-size: 15px;
758
+
759
+ }
760
+
761
+ .btn {
762
+
763
+ margin: 30px 0 30px 0;
764
+
765
+ }
766
+
767
+
768
+
769
+ /*コンテンツ*/
770
+
771
+ .contents-wrapper::after {
772
+
773
+ content: "";
774
+
775
+ display: block;
776
+
777
+ position: absolute;
778
+
779
+ top: 1600px;
780
+
781
+ right: 0;
782
+
783
+ background-color: rgba(219, 219, 219, 0.76);
784
+
785
+ width: 100%;
786
+
787
+ height: 95%;
788
+
789
+ z-index: -1;
790
+
791
+ }
792
+
793
+
794
+
795
+ .photos {
796
+
797
+ display: flex;
798
+
799
+ justify-content: space-between;
800
+
801
+ margin: 0 auto;
802
+
803
+ width: 70%;
804
+
805
+ margin-top: 120px;
806
+
807
+ }
808
+
809
+
810
+
811
+ .contents-wrapper img {
812
+
813
+ width: 100%;
814
+
815
+ }
816
+
817
+
818
+
819
+ .contents-wrapper h2,.contact-wrapper h2,.latest-topics h2,.about h2,
820
+
821
+ .works h2,.culture h2{
700
822
 
701
823
  font-family: 'arial black';
702
824
 
703
- margin-bottom: 0;
704
-
705
- }
706
-
707
-
708
-
709
- .about p {
710
-
711
- margin-top: 30px;
712
-
713
- font-size: 15px;
714
-
715
- }
716
-
717
-
718
-
719
- .about a {
720
-
721
- margin-bottom: 50px;
722
-
723
- }
724
-
725
-
726
-
727
- .link-btn {
825
+ letter-spacing: 2px;
826
+
827
+ left: 0;
828
+
829
+
830
+
831
+ }
832
+
833
+ .contents-btn {
834
+
835
+ margin: 50px 0 50px 0;
836
+
837
+ }
838
+
839
+
840
+
841
+ /*LATEST TOPICS*/
842
+
843
+ .latest-topics {
844
+
845
+ height: 400px;
846
+
847
+ width: 70%;
848
+
849
+ margin: 0 auto;
850
+
851
+ margin-top: 140px;
852
+
853
+ }
854
+
855
+
856
+
857
+ .topics {
858
+
859
+ margin-left: 500px;
860
+
861
+ }
862
+
863
+
864
+
865
+ .topic-btn {
866
+
867
+ display: flex;
868
+
869
+ justify-content: flex-end;
870
+
871
+ }
872
+
873
+
874
+
875
+ .date {
876
+
877
+ font-size: 10px;
878
+
879
+ color:rgb(161, 161, 161)
880
+
881
+ }
882
+
883
+
884
+
885
+ .news {
886
+
887
+ display: block;
888
+
889
+ border-bottom: solid 1px rgba(136, 134, 134, 0.76);
890
+
891
+ }
892
+
893
+
894
+
895
+ /*コンタクト*/
896
+
897
+ .contact-wrapper {
898
+
899
+ width: 100%;
900
+
901
+ background-color: rgba(219, 219, 219, 0.76);
902
+
903
+ height: 650px;
904
+
905
+ margin: 0;
906
+
907
+ overflow: hidden;
908
+
909
+ }
910
+
911
+ .contact-size {
912
+
913
+ width: 70%;
914
+
915
+ margin: 0 auto;
916
+
917
+ height: 50%;
918
+
919
+ }
920
+
921
+
922
+
923
+ .recruit {
924
+
925
+ display: flex;
926
+
927
+ justify-content: space-between;
928
+
929
+ }
930
+
931
+
932
+
933
+ .contact-size h2 {
934
+
935
+ display: inline-block;
936
+
937
+ margin-top: 150px;
938
+
939
+ height: 100px;
940
+
941
+ }
942
+
943
+
944
+
945
+ .recruit p {
946
+
947
+ display: block;
948
+
949
+ width: 40%;
950
+
951
+ }
952
+
953
+
954
+
955
+ .recruit img {
956
+
957
+ margin-top: -100px;
958
+
959
+ padding-bottom: 90px;
960
+
961
+ }
962
+
963
+
964
+
965
+ .contact-btn {
966
+
967
+ margin-top: -140px;
968
+
969
+ }
970
+
971
+
972
+
973
+ /*フッター*/
974
+
975
+ footer {
976
+
977
+ height: 60px;
978
+
979
+ background-color: rgba(92, 91, 91, 0.925);
980
+
981
+ margin-top: 0;
982
+
983
+ }
984
+
985
+ footer p {
986
+
987
+ line-height: 60px;
728
988
 
729
989
  color: #fff;
730
990
 
731
- background-color: #222;
732
-
733
- padding: 15px 50px;
734
-
735
- font-size: 15px;
991
+ text-align: center;
736
-
737
- }
738
-
739
- .btn {
740
-
741
- margin: 30px 0 30px 0;
742
-
743
- }
744
-
745
-
746
-
747
- .contents-wrapper {
748
-
749
- background-color: rgba(219, 219, 219, 0.76);
750
-
751
- width: 100%;
752
-
753
- position: absolute;
754
-
755
- margin-top: -120px;
756
-
757
- z-index: -1;
758
-
759
- height: 80%;
760
-
761
- padding-bottom: 0;
762
-
763
- }
764
-
765
-
766
-
767
- .photos {
768
-
769
- display: flex;
770
-
771
- justify-content: space-between;
772
-
773
- margin: 0 auto;
774
-
775
- width: 70%;
776
-
777
- margin-top: 150px;
778
-
779
- }
780
-
781
-
782
-
783
- .contents-wrapper img {
784
-
785
- width: 100%;
786
-
787
- }
788
-
789
-
790
-
791
- .contents-wrapper h2 {
792
-
793
- font-family: 'arial black';
794
-
795
- }
796
-
797
- .contents-btn {
798
-
799
- margin: 50px 0 50px 0;
800
-
801
- }
802
-
803
-
804
-
805
- .latest-topics {
806
-
807
- height: auto;
808
-
809
- width: 80%;
810
-
811
- margin: 0 auto;
812
-
813
- background-color: rgba(34, 34, 34, 0.493);
814
-
815
- }
816
-
817
-
818
-
819
- .latest-topics h2 {
820
-
821
- font-family: 'arial black';
822
992
 
823
993
  }
824
994