プログラミング

COMOLYトップページ完成(要修正有り)

更新日：

おはようございます。優灯です。

個人的に毎日暑くて暑くて限界を迎えております。
皆様お元気でしょうか？

プログラミングの課題を毎日少しずつ進めながらも、
何故思うように構築出来ないのか、自分は何がわかっていないのかが
わからず苦しんでおりました。

divという箱を作ってブロックのように並べる。
というのはわかっていたのですが、そこの理解が浅く詰まっていただけでした。

暑さのバテと、頑張りのバテで文章を書く元気が無いので、
将来の自分用に現在の全力で書いたものを残しておきます。

汚かろうが、これが今の自分です！きっと将来宝物になります。

(共通CSS記述・メイン以降レスポンシブ化)

それでは申し訳ありませんが今回はこの辺で。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>sample</title>
    <link rel="stylesheet" href="style2res.css">
</head>
<body>
    <header class="header">
        <div class="left-icon">
            <a href="#">
                <img src="images/logo_white.png" alt="" class="left_inner_image">
            </a>
        </div>
        <div class="right-menu">
            <ul class="nav">
                <li>
                    <a class="sign" href="#">新規登録</a>
                </li>
                <li>
                    <a href="#">ログイン</a>
                </li>
                <li>
                    <a href="#">Q&A</a>
                </li>
            </ul>
        </div>
    </header>
    <main>
        <img src="images/mac-image.png" alt="">
    </main>
    <div class="conteiner">
        <div class="row">
            <div class="comoly">
                <h2>
                    <strong>COMOLYとは？</strong>
                </h2>
                <h3>-What is COMOLY?-</h3>
            </div>
            <div class="intro">
                <div class="intro-right">
                    <img src="images/Man talking in Living Room.png" alt="">
                </div>
                <div class="left-box">
                    <div class="intro-left">
                        <h1>COMOLYはひきこもり当事者向けに<strong>ワーク・コミュニティ</strong>を提供し安心して繋がれるプラットフォームです</h1>
                    </div>
                    <div class="intro-regi">
                        <a href="#">登録してみる     ></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="conteiner">
        <div class="middle">
            <div class="comoly">
                <h2>
                    <strong>ワーク</strong>
                </h2>
                <h3>- Work -</h3>
            </div>
            <div class="work-text">
                <h2>まずは弊社スタッフが簡単なヒアリングをして、あなたに合った仕事とマッチング。<br>スキルや得意なことをベースに自宅で出来る簡単な入力作業からデザインまで、あなたをサポートしたい企業からの仕事を請け負います。<br>ご自身のペースや希望を尊重しますので、気軽にご相談ください。</h2>
            </div>
            <div class="work-img">
                <img src="images/Girl-Work-f63fce72dffd190c4d954c994c1fb5d955e75c3de861b0b9c3b55c92fbf7f853.png" alt="">
            </div>
        </div>
    </div>
    <div class="conteiner">
       <div class="flexbox">
           <div class="item">
                <img src="images/work01-1f0b52c72c1ebc2b064f317fbf5a30a334d9b60f407d12ca1bd9f3f40961dba5.png" alt="">
           </div>
           <div class="item">
                <img src="images/work02-e8db769f63fafc61753ff74d1237d0a25a8a3da3bb1cc89cb7a322407888deb1.png" alt="">
            </div>
            <div class="item">
                <img src="images/work03-232c923003263d834accedbbf049da0f9ada1c28b0739ac8a920e6c165db865a.png" alt="">
            </div>
            <div class="item">
                <img src="images/work04-f2004421c7032add1305a52b099f20a18ae747cc300ccccd77d2ec9a92e37707.png" alt="">
            </div>
            <div class="item">
                <img src="images/work05-e7a46ab0ffd77dd97763a59ebbdab45e51a54c77637fd5389c9e8dda56ce627e.png" alt="">
            </div>
            <div class="item">
                <img src="images/work06-c6c58e1ea7abcffaa0c70bcabebdf90fdc875b48c5719f8bbcda6a102bc5f1b3.png" alt="">
            </div>
            <div class="item">
                <img src="images/work07-017191d341314456a6547c9849d4d739c7eec8248a02d1f8abb838449ed8c03c.png" alt="">
            </div>
            <div class="item">
                <img src="images/work08-baca21c9903068829e9ac419b472b0d72a2b97503f838f44417144680fa63286.png" alt="">
            </div>
            <div class="item">
                <img src="images/work09-ab4ceb3ff2a7996f8bc74eb1aa393fa980d01ffe50d17a83b06db8b497040f5f.png" alt="">
            </div>
       </div>
    </div>
    <div class="conteiner">
        <div class="bottom">
            <div class="comoly">
                <h2>
                    <strong>コミュニティ</strong>
                </h2>
                <h3>-  Community -</h3>
            </div>
            <div class="com-text">
                <h2>COMOLYに登録している方がイラストや写真、漫画を投稿したり閲覧したりできます。あなたの感性を生かした作品・成果物をぜひシェアしてみてください。<br>ユーザーが参加できるイベントをオンラインとオフラインで開催します。ユーザーとサポーターを繋ぐ有意義な場所・空間を造ります。</h2>
            </div>
            <div class="com-img">
                <img src="images/1592690299-5919670ddd6b9f90866d8e1055c37b728005365ff4e12c8bf94089ccb68c77bf.png" alt="">
            </div>
            <div class="bottom-regi">
                <a href="">新規登録  ></a>
            </div>
        </div>
    </div>
    <div class="conteiner">
        <div class="info">
            <div class="comoly">
                <h2>
                    <strong>お知らせ</strong>
                </h2>
                <h3>-  Infomation -</h3>
            </div>
            <div class="content">
                <!-- 多分データベースから投稿を表示する -->
            </div>
        </div>
    </div>
    <div class="staff">
        <a href="">
            <img src="images/staff_blog-a07922319b2d8361e3958067e3e89b5cb3fe10dcdd289f03dad09326f111b936.png" alt="">
        </a>
    </div>
    <footer class="fotter">
        <div class="fotter-menu">
            <ul>
                <li>
                    <a href="">利用規約</a>
                </li>
                <li>
                    <a href="">プライバシーポリシー</a>
                </li>
                <li>
                    <a href="">運営会社</a>
                </li>
            </ul>
        </div>
        <div class="sns">
            <ul>
                <li>
                    <a href="">
                        <img src="images/TW_icon-c74f7a71d7ce6db008d3c55ae0d683f09709cdecf54234b6a3e5d1f0a5cfc8f8.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/FB_icon-7231d0eb438517a3797af02c59c7d5397b73a0370984d0c8badbdc0acc9738e4.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/line_icon-69708962d5aa7331fa85da344e8567212f37bf18fc7828743365ccad1490c287.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="copyright">
            <p>Copyright © Meta Anchor Inc. All Rights Reserved.</p>
        </div>
    </footer>
</body>
</html>
* {
    margin: auto;
    box-sizing:border-box;
}
.header {
    background-color: #2cccd4;
    height: 130px;
}
.left-icon {
    float: left;
    width: 30%;
}
.left-icon img {
    width: 60%;
    margin: 2% 0 3% 30%;
}
.right-menu {
    float: right;
    width: 60%;
    margin: 0.5% 1%;
}
.right-menu li {
    float: right;
    list-style: none;
    margin: 2% 1.5% 0 1%;
}
.right-menu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    display: block;
    padding: 10px;
}
.sign {
    background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);;
}
.sign:hover {
    background: #ffa500;
}
.right-menu a:hover {
    background-color: #ffa500;
}
main  {
    text-align: center;
    clear: both;
    background-color: #2cccd4;
}
main img {
    width: 50%;
}
.conteiner {
    height: 600px;
    width: 100%;
    background-color: white;
}
.row {
    width: 80%;
}
.comoly {
    text-align: center;
}
.comoly h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-top: 50px;
    color: #0cd4ec;
}
.comoly strong {
    background: linear-gradient(transparent 50%, #c0eff1 30%);
}
.comoly h3 {
    font-size: 1.75rem;
    font-family: inherit;
    font-weight: 500;
    margin-bottom: 5%;
}
.intro {
    text-align: center;
}
.left-box {
    width: 50%;
    float: left;
}
.intro-left h1 {
    letter-spacing: 0.5rem;
    font-size: 2em;
    line-height: 3.5rem;
    font-weight: 500;
    font-family: inherit;
}
.intro-left strong {
    color: #0cd4ec;
    background: linear-gradient(transparent 50%, #c0eff1 30%);
}
.intro-regi {
    text-align: center;
    width: 75%;
    margin-top: 15%;
    border-radius: 45px;
    background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
}
.intro-regi a {
    font-size: 25px;
    font-weight: bold;
    color:white;
    text-decoration: none;
    padding: 20px;
    display: block;
}
.intro-right img {
    width: 50%;
    float: right;
}
.middle {
    width: 80%;
    margin-top: 50px;
    text-align: center;
}
.work-text {
    width: 50%;
    float: right;
}
.work-text h2 {
    font-weight: 400;
}
.work-img  img {
    width: 45%;
}
.flexbox {
    display: flex;
    flex-direction: row;
    width: 70%;
    flex-wrap: wrap;
}
.item {
    padding: 0 3%;
}
.bottom {
    width: 80%;
    text-align: center;
}
.com-text {
    width: 45%;
    float: left;
}
.com-text h2 {
    font-weight: 400;
}
.com-img img {
    width: 45%;
}
.bottom-regi {
    text-align: center;
    width: 50%;
    margin-top: 15%;
    margin-bottom: 5%;
    border-radius: 45px;
    background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
}
.bottom-regi a {
    font-size: 25px;
    font-weight: bold;
    color:white;
    text-decoration: none;
    padding: 20px;
    display: block;
}
.info {
    width: 80%;
    text-align: center;
    margin-top: 30%;
}
.staff{
    text-align: center;
    margin-bottom: 10%;
}
.staff img {
    width: 60%;
}
footer {
    background-color: #2cccd4;
    height: 350px;
}
.fotter-menu {
    margin-left: 100px;
    padding-top: 50px;
}
.fotter-menu li {
    margin-bottom: 10px;
}
.fotter-menu a {
    color: white;
    text-decoration: none;
}
.sns ul {
    list-style: none;
    width: 15%;
    float: left;
    margin-left: 5%;
}
.sns img {
    width: 30%;
    float: left;
    padding-right: 5%;
}
.copyright {
    text-align: center;
    margin-top: 12%;
}
.copyright p {
    font-weight: 300;
    color: white;
    font-size: small;
}
.intro-regi a:hover,.bottom-regi a:hover{
    color: #007bff;
}
/* スマホ用？ */
@media (max-width:670px) {
    .left-icon {
        width: 100%;
        text-align: center;
    }
    .left-icon img {
        width: 40%;
        margin: auto;
    }
    .right-menu {
        width: 100%;
    }
    .right-menu li {
        width: 30%;
        margin: 0 3% 0 0;
        text-align: center;
    }
    main img {
        width: 80%;
        vertical-align: middle;
        margin-top: 10%;
    }
}
/* タブレット用　中央画像のみ調整 */
@media (max-width:1000px) {
    main img{
        width: 60%;
    }
}

-プログラミング

Copyright© ヒキカツ！ひきこもりのブログ , 2021 All Rights Reserved Powered by STINGER.

%d人のブロガーが「いいね」をつけました。