HTML CSS Flex Web Sitesi Tasarımı

HTML ve CSS kavramlarını yeni öğrenmeye başlayanlar için tasarlanmış blok yapısına sahip olan bir şablon sayfa tasarımıdır.

Sitemizdeki diğer HTML CSS ile yapılan web sitesi örnekleri için tıklayın.

Ekran Çıktısı:

HTML CSS Flex Web Sitesi Tasarımı Örneği

HTML ve CSS Kodu:


<!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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <title>Site</title>
    <style>
        html{
            font-size:62.5%;
        }
        body {
            min-height: 100vh;
            background: url(cimen.png) bottom center repeat-x,
                url(bulut.png) top center fixed,
                #1DABB8;
            margin: 0;
        }

        .kapsayici {
            width: 1080px;
            margin: 200px auto 0 auto;
        }

        nav {
            /* min-height: 100px; */
            /* background-color: #25373D; */
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
        nav ul{
            list-style: none;
            margin:0;
            padding:0;
        }
        nav ul li{
            display: inline-block;
        }

        nav .menu a{
            color:#fff;
            font-size:2rem;
            background-color: #25373D;
            padding:15px 30px;
            display: block;
            border:#D2D7D3 solid 5px;
            border-bottom:none;
            border-radius: 30px 30px 0 0;
            font-weight: 600;
            text-decoration: none;
        }
        nav .menu a:hover{
            background-color:#D2D7D3;
            color:#25373D;
        }

        nav .sosyal a{
            color:#25373D;
            font-size:2rem;
            background-color: #FEC606;
            width: 32px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            padding:8px;
            display: block;
            border-radius: 50%;
            margin-bottom:5px;
        }

        .bolum1 {
            min-height: 300px;
            background-color: #D2D7D3;
            margin-bottom: 40px;
        }

        .bolum2 {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap:20px;
            padding:20px;
            background-color: #6C8784;
            margin-bottom: 40px;
        }

        .bolum2 .kutu{
            width: 330px;
            height: 330px;
            line-height: 330px;
            text-align: center;
            font-size:4rem;
            background-color: #D33257;
            color:#fff;
        }

        .bolum3 {
            display: flex;
            justify-content: space-between;
            padding:10px;
            min-height: 200px;
            background-color: #E7E7E7;
            margin-bottom: 40px;
        }
        .bolum3 .kutu{
            width: 200px;
            height: 200px;
            line-height: 200px;
            font-size:5rem;
            text-align: center;
            background-color: #D33257;
            color:#fff;
            
        }
    </style>
</head>

<body>

    <div class="kapsayici">
        <header>
            <nav>
                <ul class="menu">
                    <li><a href="#">sayfa</a></li>
                    <li><a href="#">sayfa</a></li>
                    <li><a href="#">sayfa</a></li>
                    <li><a href="#">sayfa</a></li>
                    <li><a href="#">sayfa</a></li>
                </ul>
                <ul class="sosyal">
                    <li><a href="#"><i class="bi bi-facebook"></i></a></li>
                    <li><a href="#"><i class="bi bi-facebook"></i></a></li>
                    <li><a href="#"><i class="bi bi-youtube"></i></a></li>
                    <li><a href="#"><i class="bi bi-tiktok"></i></a></li>
                </ul>
            </nav>
        </header>
        <div class="bolum1"></div>
        <div class="bolum2">
            <div class="kutu">1</div>
            <div class="kutu">2</div>
            <div class="kutu">3</div>
            <div class="kutu">4</div>
            <div class="kutu">5</div>
            <div class="kutu">6</div>
        </div>
        <div class="bolum3">
            <div class="kutu">1</div>
            <div class="kutu">2</div>
            <div class="kutu">3</div>
            <div class="kutu">4</div>
            <div class="kutu">5</div>
        </div>
    </div>

</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

<!DOCTYPE html>

<head>

<style>

html{

font-size:62.5%;

}

body {

min-height: 100vh;

background: url(cimen.png) bottom center repeat-x,

url(bulut.png) top center fixed,

#1DABB8;

margin: 0;

}

.kapsayici {

width: 1080px;

margin: 200px auto 0 auto;

}

nav {

/* min-height: 100px; */

/* background-color: #25373D; */

display: flex;

justify-content: space-between;

align-items: flex-end;

}

nav ul{

list-style: none;

margin:0;

padding:0;

}

nav ul li{

display: inline-block;

}

nav .menu a{

color:#fff;

font-size:2rem;

background-color: #25373D;

padding:15px 30px;

display: block;

border:#D2D7D3 solid 5px;

border-bottom:none;

border-radius: 30px 30px 0 0;

font-weight: 600;

text-decoration: none;

}

nav .menu a:hover{

background-color:#D2D7D3;

color:#25373D;

}

nav .sosyal a{

color:#25373D;

font-size:2rem;

background-color: #FEC606;

width: 32px;

height: 32px;

line-height: 32px;

text-align: center;

padding:8px;

display: block;

border-radius: 50%;

margin-bottom:5px;

}

.bolum1 {

min-height: 300px;

background-color: #D2D7D3;

margin-bottom: 40px;

}

.bolum2 {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

gap:20px;

padding:20px;

background-color: #6C8784;

margin-bottom: 40px;

}

.bolum2 .kutu{

width: 330px;

height: 330px;

line-height: 330px;

text-align: center;

font-size:4rem;

background-color: #D33257;

color:#fff;

}

.bolum3 {

display: flex;

justify-content: space-between;

padding:10px;

min-height: 200px;

background-color: #E7E7E7;

margin-bottom: 40px;

}

.bolum3 .kutu{

width: 200px;

height: 200px;

line-height: 200px;

font-size:5rem;

text-align: center;

background-color: #D33257;

color:#fff;

}

</style>

</head>

<body>

<nav>

<li><a href="#">sayfa</a></li>

</ul>

</ul>

</nav>

</header>

</div>

</div>

</body>

</html>

Yapılış Videosu:

HTML CSS Flex Web Sitesi Tasarımı

2 Yorum

İptal Et

Bunları da beğenebilirsiniz

2 Yorum