HTML CSS Web Site Örnekleri 2

HTML ve CSS kullanarak Web sitesi örnekleri,HTML Div CSS kullanım örnekleri. Örneğe ait ekran çıktısı, Html ve CSS kodları.

Ekran Çıktısı:

HTML Kodları:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Commercial by TEMPLATED</title>
<link href="http://fonts.googleapis.com/css?family=Abel" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dropotron-1.0.js"></script>
</head>
<body>
<div id="wrapper">
	<div id="header-wrapper">
		<div id="header">
			<div id="logo">
				<h1><a href="#">web tasarım</a></h1>
				<p>Design by <a href="#" rel="nofollow">TEMPLATED</a></p>
			</div>
		</div>
	</div>
	<!-- end #header -->
	<div id="menu-wrapper">
		<ul id="menu">
			<li class="current_page_item"><a href="#"><span>Anasayfa</span></a></li>
			<li><span>Blog</span>
				<ul>
					<li class="first"> <a href="index">Maecenas luctus lectus</a> </li>
					<li> <a href="search">Integer gravida</a> </li>
					<li class="last"> <a href="about">Ut nonummy rutrum</a> </li>
				</ul>
			</li>
			<li><a href="#"><span>Fotoğraf</span></a></li>
			<li><a href="#"><span>Hakkımda</span></a></li>
			<li><span>Referanslar</span>
				<ul>
					<li class="first"> <a href="index">Maecenas luctus lectus</a> </li>
					<li> <a href="search">Integer gravida</a> </li>
					<li class="last"> <a href="about">Ut nonummy rutrum</a> </li>
				</ul>
			</li>
			<li><a href="#"><span>İletişim</span></a></li>
		</ul>
		<script type="text/javascript">
			$('#menu').dropotron();
		</script>
	</div>
	<!-- end #menu -->
	<div id="splash"><img src="images/pics01.jpg" width="980" height="300" alt="" /></div>
	<div id="page">
		<div id="content">
			<div class="contentbg">
				<div class="post">
					<h2 class="title"><a href="#">Web Tasarımı</a></h2>
					<p class="meta">Posted by <a href="#">Someone</a> on May 22, 2012
						&nbsp;&bull;&nbsp; <a href="#" class="comments">Comments (64)</a> &nbsp;&bull;&nbsp; <a href="#" class="permalink">Full article</a></p>
					<div class="entry">
						<p>This is <strong>Commercial</strong>, a free, fully standards-compliant CSS template designed by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>.  The picture in this template is from <a href="http://fotogrph.com/">Fotogrph</a>.The gallery slider and popup gallery used in this template is powered by <a href="http://n33.co/">Poptrox</a> and <a href="http://n33.co/">Slidertron</a>. Dropdown menu is powered by <a href="http://n33.co/">Dropotron</a>. This free template is released under the <a href="http://templated.co/license">Creative Commons Attribution</a> license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you give us credit for it. Have fun :)</p>
						<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.</p>
					</div>
				</div>
				<div class="post">
					<h2 class="title"><a href="#">Programlama</a></h2>
					<p class="meta">Posted by <a href="#">Someone</a> on May 19, 2012
						&nbsp;&bull;&nbsp; <a href="#" class="comments">Comments (64)</a> &nbsp;&bull;&nbsp; <a href="#" class="permalink">Full article</a></p>
					<div class="entry">
						<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, consectetuer nisl felis ac diam. Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. Mauris vitae nisl nec metus placerat consectetuer. </p>
					</div>
				</div>
				<div class="post">
					<h2 class="title"><a href="#">Grafik Tasarım </a></h2>
					<p class="meta">Posted by <a href="#">Someone</a> on May 15, 2012
						&nbsp;&bull;&nbsp; <a href="#" class="comments">Comments (64)</a> &nbsp;&bull;&nbsp; <a href="#" class="permalink">Full article</a></p>
					<div class="entry">
						<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc. Donec ipsum. Proin imperdiet est. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc.</p>
					</div>
				</div>
				<div style="clear: both;">&nbsp;</div>
			</div>
		</div>
		<!-- end #content -->
		<div id="sidebar-bg">
			<div id="sidebar">
				<ul>
					<li>
						<h2>Aliquam tempus</h2>
						<p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper consectetuer hendrerit.</p>
					</li>
					<li>
						<h2>Categories</h2>
						<ul>
							<li><a href="#">Aliquam libero</a></li>
							<li><a href="#">Consectetuer adipiscing elit</a></li>
							<li><a href="#">Suspendisse iaculis mauris</a></li>
							<li><a href="#">Urnanet non molestie semper</a></li>
							<li><a href="#">Proin gravida orci porttitor</a></li>
						</ul>
					</li>
					<li>
						<h2>Blogroll</h2>
						<ul>
							<li><a href="#">Aliquam libero</a></li>
							<li><a href="#">Suspendisse iaculis mauris</a></li>
							<li><a href="#">Urnanet non molestie semper</a></li>
							<li><a href="#">Proin gravida orci porttitor</a></li>
						</ul>
					</li>
					<li>
						<h2>Archives</h2>
						<ul>
							<li><a href="#">Aliquam libero</a></li>
							<li><a href="#">Consectetuer adipiscing elit</a></li>
							<li><a href="#">Suspendisse iaculis mauris</a></li>
							<li><a href="#">Urnanet non molestie semper</a></li>
							<li><a href="#">Proin gravida orci porttitor</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<!-- end #sidebar -->
		<div style="clear: both;">&nbsp;</div>
	</div>
	<!-- end #page -->
</div>
<div id="footer">
	<p>2012. Untitled. All rights reserved. Design by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>. Photos by <a href="http://fotogrph.com/">fotogrph</a>.</p>
</div>
<!-- end #footer -->
</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

<!DOCTYPE html>

<head>

<title>Commercial by TEMPLATED</title>

</head>

<body>

<h1><a href="#">web tasarım</a></h1>

<p>Design by <a href="#" rel="nofollow">TEMPLATED</a></p>

</div>

<li class="current_page_item"><a href="#"><span>Anasayfa</span></a></li>

<ul>

<li class="first"> <a href="index">Maecenas luctus lectus</a> </li>

<li> <a href="search">Integer gravida</a> </li>

<li class="last"> <a href="about">Ut nonummy rutrum</a> </li>

</ul>

</li>

<li><a href="#"><span>Fotoğraf</span></a></li>

<li><a href="#"><span>Hakkımda</span></a></li>

<li><span>Referanslar</span>

<ul>

<li class="first"> <a href="index">Maecenas luctus lectus</a> </li>

<li> <a href="search">Integer gravida</a> </li>

<li class="last"> <a href="about">Ut nonummy rutrum</a> </li>

</ul>

</li>

<li><a href="#"><span>İletişim</span></a></li>

</ul>

$('#menu').dropotron();

</script>

</div>

<h2 class="title"><a href="#">Web Tasarımı</a></h2>

<p class="meta">Posted by <a href="#">Someone</a> on May 22, 2012

 •  <a href="#" class="comments">Comments (64)</a>  •  <a href="#" class="permalink">Full article</a></p>

<p>This is <strong>Commercial</strong>, a free, fully standards-compliant CSS template designed by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>. The picture in this template is from <a href="http://fotogrph.com/">Fotogrph</a>.The gallery slider and popup gallery used in this template is powered by <a href="http://n33.co/">Poptrox</a> and <a href="http://n33.co/">Slidertron</a>. Dropdown menu is powered by <a href="http://n33.co/">Dropotron</a>. This free template is released under the <a href="http://templated.co/license">Creative Commons Attribution</a> license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you give us credit for it. Have fun :)</p>

<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.</p>

</div>

<h2 class="title"><a href="#">Programlama</a></h2>

<p class="meta">Posted by <a href="#">Someone</a> on May 19, 2012

 •  <a href="#" class="comments">Comments (64)</a>  •  <a href="#" class="permalink">Full article</a></p>

<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, consectetuer nisl felis ac diam. Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. Mauris vitae nisl nec metus placerat consectetuer. </p>

</div>

<h2 class="title"><a href="#">Grafik Tasarım </a></h2>

<p class="meta">Posted by <a href="#">Someone</a> on May 15, 2012

 •  <a href="#" class="comments">Comments (64)</a>  •  <a href="#" class="permalink">Full article</a></p>

<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc. Donec ipsum. Proin imperdiet est. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc.</p>

</div>

</div>

<ul>

<li>

<h2>Aliquam tempus</h2>

<p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper consectetuer hendrerit.</p>

</li>

<li>

<h2>Categories</h2>

<ul>

<li><a href="#">Aliquam libero</a></li>

<li><a href="#">Consectetuer adipiscing elit</a></li>

<li><a href="#">Suspendisse iaculis mauris</a></li>

<li><a href="#">Urnanet non molestie semper</a></li>

<li><a href="#">Proin gravida orci porttitor</a></li>

</ul>

</li>

<li>

<h2>Blogroll</h2>

<ul>

<li><a href="#">Aliquam libero</a></li>

<li><a href="#">Suspendisse iaculis mauris</a></li>

<li><a href="#">Urnanet non molestie semper</a></li>

<li><a href="#">Proin gravida orci porttitor</a></li>

</ul>

</li>

<li>

<h2>Archives</h2>

<ul>

<li><a href="#">Aliquam libero</a></li>

<li><a href="#">Consectetuer adipiscing elit</a></li>

<li><a href="#">Suspendisse iaculis mauris</a></li>

<li><a href="#">Urnanet non molestie semper</a></li>

<li><a href="#">Proin gravida orci porttitor</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

CSS Kodları (style.css)

body {
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #181B20;
}

h1, h2, h3 {
	margin: 0px;
	padding: 0px;
	text-transform: lowercase;
	font-family: 'Abel', sans-serif;
	font-weight: 400;
	color: #3FA449;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 2.4em;
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}

ul, ol {
}

a {
	text-decoration: none;
	color: #9C9A9A;
}

a:hover {
	text-decoration: underline;
}

img.border {
	border: 6px solid #EEE7DF;
}

img.alignleft {
	float: left;
	margin-right: 25px;
}

img.alignright {
	float: right;
}

img.aligncenter {
	margin: 0px auto;
}

#wrapper {
	margin: 0 auto;
	padding: 0;
}

/* Header */

#header-wrapper {
	height: 240px;
	background: #3A3A3A;
	margin-bottom: 30px;
}

#header {
	width: 960px;
	height: 240px;
	margin: 0 auto;
}

/* Logo */

#logo {
	width: 980px;
	height: 100px;
	margin: 0px auto;
	padding: 80px 0px 0px 0px;
	color: #3FA43A;
}

#logo h1, #logo p {
	display: block;
	margin: 0px;
	padding: 0px;
	text-transform: lowercase;
}

#logo h1 {
	letter-spacing: -5px;
	text-align: center;
	text-transform: lowercase;
	font-size: 80px;
	color: #3FA43A;
}

#logo h1 a {
	color: #73CC43;
}

#logo p {
	margin-top: -25px;
	text-align: center;
	font-family: 'Abel', sans-serif;
	font-size: 25px;
}

#logo a {
	border: none;
	background: none;
	text-decoration: none;
	color: #3FA43A;
}

/* Search */

#search {
	float: right;
	width: 280px;
	height: 100px;
	padding: 0;
}

#search form {
	height: 41px;
	margin: 0;
	padding: 60px 0 0 30px;
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search-text {
	width: 195px;
	padding: 6px 10px;
	border: none;
	background: #FFFFFF;
	text-transform: lowercase;
	font: normal 11px Arial, Helvetica, sans-serif;
	color: #7F7F81;
}

#search-submit {
	display: none;
}

/* Menu */

#menu-wrapper {
	width: 980px;
	height: 60px;
	margin: 0px auto;
	padding: 0px;
	background: #3FA43A;
	border-radius: 10px;
}

#menu {
	margin: 0;
	padding: 0px 20px;
	list-style: none;
	line-height: 60px;
	letter-spacing: -1px;
	text-decoration: none;
	text-transform: lowercase;
	text-shadow: 2px 2px 2px rgba(0,0,0,.3);
	font-family: 'Abel', sans-serif;
	font-size: 24px;
	font-weight: normal;
	color: #FFFFFF;
}

#menu li {
	float: left;
	margin-right: 1px;
}

#menu a {
	display: block;
	float: left;
	height: 60px;
	margin: 0px;
	color: #FFFFFF;
}

#menu .current_page_item a {
	text-shadow: 2px 2px 2px rgba(0,0,0,.3);
	background: #378C32;
}

#menu a:hover {
	background: #378C32;
	text-decoration: none;
	text-shadow: 2px 2px 2px rgba(0,0,0,.3);
	color: #FFFFFF;
}

#menu span {
	padding: 0px 20px;
}

#menu > li {
}

#menu > li.active {
	background: #378C32;
	color: #FFFFFF;
}

.dropotron li.opener {
	border-right: solid 2px #FFFFFF;
}

.dropotron {
	margin: 0px;
	padding: 10px 0px;
	background: #378C32;
	list-style: none;
	text-transform: lowercase;
	font-family: 'Abel', sans-serif;
	font-size: 18px;
	font-weight: normal;
	color: #FFFFFF;
}

.dropotron a {
	color: #fff;
	text-decoration: none;
}

.dropotron li {
	margin: 0px;
	padding: 5px 20px;
}

.dropotron li:hover, .dropotron li.active {
	background: #4DA43A;
}

/* Page */

#page {
	width: 980px;
	margin: 0px auto;
	padding: 0px;
}

/* Content */

#content {
	float: right;
	width: 650px;
}

#content .contentbg {
	width: 590px;
	padding: 10px 30px 0px 30px;
}

.post {
	clear: both;
	padding-bottom: 10px;
	border-bottom: 1px solid #DEDEDE;
}

.post .title {
	padding-top: 10px;
	letter-spacing: -4px;
	text-transform: lowercase;
	font-size: 50px;
	color: #3FA449;
}

.post .title a {
	border: none;
	color: #3FA449;
}

.post .meta {
	padding-bottom: 10px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
}

.post .meta a {
}

.post .entry {
	text-align: justify;
	margin-bottom: 25px;
	padding: 10px 0px 0px 0px;
}

.links {
	display: block;
	width: 96px;
	padding: 2px 0px 2px 0px;
	background: #A53602;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	color: #FFFFFF;
}

/* Sidebar */

#sidebar-bg {
	float: left;
	width: 330px;
}

#sidebar {
	overflow: hidden;
	width: 270px;
	padding: 30px 30px 20px 30px;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	margin: 0;
	padding: 0;
}

#sidebar li ul {
	margin: 0px 0px;
	padding-bottom: 30px;
}

#sidebar li li {
	line-height: 35px;
}

#sidebar li li span {
	display: block;
	margin-top: -20px;
	padding: 0;
	font-size: 11px;
	font-style: italic;
}

#sidebar h2 {
	height: 38px;
	margin-bottom: 20px;
	padding: 12px 0 0 0px;
	border-bottom: 1px solid #F1DAF7;
	letter-spacing: -2px;
	font-size: 30px;
	color: #3FA449;
}

#sidebar p {
	margin: 0 0px;
	padding: 0px 20px 20px 20px;
	text-align: justify;
}

#sidebar a {
	border: none;
}

#sidebar a:hover {
	text-decoration: underline;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
	padding: 20px;
}

#calendar table {
	width: 100%;
}

#calendar tbody td {
	text-align: center;
}

#calendar #next {
	text-align: right;
}

/* Footer */

#footer {
	height: 100px;
	background: #3A3A3A;
}

#footer p {
	margin: 0;
	padding-top: 18px;
	line-height: normal;
	text-align: center;
	text-transform: lowercase;
	font-family: 'Abel', sans-serif;
	font-size: 16px;
	color: #A4B890;
}

#footer a {
	text-decoration: underline;
	color: #70C964;
}

#slider {
	position: relative;
	width: 590px;
	margin: 0px auto 20px auto;
}

#slider .viewer {
	width: 590px;
	height: 300px;
	overflow: hidden;
	margin: 0 auto;
}

#slider .viewer .reel {
	display: none;
	height: 300px;
}

#slider .viewer .reel .slide {
	position: relative;
	width: 590px;
	height: 300px;
}

#splash {
	width: 980px;
	margin: 30px auto 0px auto;
}

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

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

body {

margin: 0;

padding: 0;

background: #FFFFFF;

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

color: #181B20;

}

h1, h2, h3 {

margin: 0px;

padding: 0px;

text-transform: lowercase;

font-family: 'Abel', sans-serif;

font-weight: 400;

color: #3FA449;

}

h1 {

font-size: 2em;

}

h2 {

font-size: 2.4em;

}

h3 {

font-size: 1.6em;

}

p, ul, ol {

margin-top: 0;

line-height: 180%;

}

ul, ol {

}

a {

text-decoration: none;

color: #9C9A9A;

}

a:hover {

text-decoration: underline;

}

img.border {

border: 6px solid #EEE7DF;

}

img.alignleft {

float: left;

margin-right: 25px;

}

img.alignright {

float: right;

}

img.aligncenter {

margin: 0px auto;

}

#wrapper {

margin: 0 auto;

padding: 0;

}

/* Header */

#header-wrapper {

height: 240px;

background: #3A3A3A;

margin-bottom: 30px;

}

#header {

width: 960px;

height: 240px;

margin: 0 auto;

}

/* Logo */

#logo {

width: 980px;

height: 100px;

margin: 0px auto;

padding: 80px 0px 0px 0px;

color: #3FA43A;

}

#logo h1, #logo p {

display: block;

margin: 0px;

padding: 0px;

text-transform: lowercase;

}

#logo h1 {

letter-spacing: -5px;

text-align: center;

text-transform: lowercase;

font-size: 80px;

color: #3FA43A;

}

#logo h1 a {

color: #73CC43;

}

#logo p {

margin-top: -25px;

text-align: center;

font-family: 'Abel', sans-serif;

font-size: 25px;

}

#logo a {

border: none;

background: none;

text-decoration: none;

color: #3FA43A;

}

/* Search */

#search {

float: right;

width: 280px;

height: 100px;

padding: 0;

}

#search form {

height: 41px;

margin: 0;

padding: 60px 0 0 30px;

}

#search fieldset {

margin: 0;

padding: 0;

border: none;

}

#search-text {

width: 195px;

padding: 6px 10px;

border: none;

background: #FFFFFF;

text-transform: lowercase;

font: normal 11px Arial, Helvetica, sans-serif;

color: #7F7F81;

}

#search-submit {

display: none;

}

/* Menu */

#menu-wrapper {

width: 980px;

height: 60px;

margin: 0px auto;

padding: 0px;

background: #3FA43A;

border-radius: 10px;

}

#menu {

margin: 0;

padding: 0px 20px;

list-style: none;

line-height: 60px;

letter-spacing: -1px;

text-decoration: none;

text-transform: lowercase;

text-shadow: 2px 2px 2px rgba(0,0,0,.3);

font-family: 'Abel', sans-serif;

font-size: 24px;

font-weight: normal;

color: #FFFFFF;

}

#menu li {

float: left;

margin-right: 1px;

}

#menu a {

display: block;

float: left;

height: 60px;

margin: 0px;

color: #FFFFFF;

}

#menu .current_page_item a {

text-shadow: 2px 2px 2px rgba(0,0,0,.3);

background: #378C32;

}

#menu a:hover {

background: #378C32;

text-decoration: none;

text-shadow: 2px 2px 2px rgba(0,0,0,.3);

color: #FFFFFF;

}

#menu span {

padding: 0px 20px;

}

#menu > li {

}

#menu > li.active {

background: #378C32;

color: #FFFFFF;

}

.dropotron li.opener {

border-right: solid 2px #FFFFFF;

}

.dropotron {

margin: 0px;

padding: 10px 0px;

background: #378C32;

list-style: none;

text-transform: lowercase;

font-family: 'Abel', sans-serif;

font-size: 18px;

font-weight: normal;

color: #FFFFFF;

}

.dropotron a {

color: #fff;

text-decoration: none;

}

.dropotron li {

margin: 0px;

padding: 5px 20px;

}

.dropotron li:hover, .dropotron li.active {

background: #4DA43A;

}

/* Page */

#page {

width: 980px;

margin: 0px auto;

padding: 0px;

}

/* Content */

#content {

float: right;

width: 650px;

}

#content .contentbg {

width: 590px;

padding: 10px 30px 0px 30px;

}

.post {

clear: both;

padding-bottom: 10px;

border-bottom: 1px solid #DEDEDE;

}

.post .title {

padding-top: 10px;

letter-spacing: -4px;

text-transform: lowercase;

font-size: 50px;

color: #3FA449;

}

.post .title a {

border: none;

color: #3FA449;

}

.post .meta {

padding-bottom: 10px;

text-align: left;

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: italic;

}

.post .meta a {

}

.post .entry {

text-align: justify;

margin-bottom: 25px;

padding: 10px 0px 0px 0px;

}

.links {

display: block;

width: 96px;

padding: 2px 0px 2px 0px;

background: #A53602;

text-align: center;

text-transform: uppercase;

font-size: 10px;

color: #FFFFFF;

}

/* Sidebar */

#sidebar-bg {

float: left;

width: 330px;

}

#sidebar {

overflow: hidden;

width: 270px;

padding: 30px 30px 20px 30px;

}

#sidebar ul {

margin: 0;

padding: 0;

list-style: none;

}

#sidebar li {

margin: 0;

padding: 0;

}

#sidebar li ul {

margin: 0px 0px;

padding-bottom: 30px;

}

#sidebar li li {

line-height: 35px;

}

#sidebar li li span {

display: block;

margin-top: -20px;

padding: 0;

font-size: 11px;

font-style: italic;

}

#sidebar h2 {

height: 38px;

margin-bottom: 20px;

padding: 12px 0 0 0px;

border-bottom: 1px solid #F1DAF7;

letter-spacing: -2px;

font-size: 30px;

color: #3FA449;

}

#sidebar p {

margin: 0 0px;

padding: 0px 20px 20px 20px;

text-align: justify;

}

#sidebar a {

border: none;

}

#sidebar a:hover {

text-decoration: underline;

}

/* Calendar */

#calendar {

}

#calendar_wrap {

padding: 20px;

}

#calendar table {

width: 100%;

}

#calendar tbody td {

text-align: center;

}

#calendar #next {

text-align: right;

}

/* Footer */

#footer {

height: 100px;

background: #3A3A3A;

}

#footer p {

margin: 0;

padding-top: 18px;

line-height: normal;

text-align: center;

text-transform: lowercase;

font-family: 'Abel', sans-serif;

font-size: 16px;

color: #A4B890;

}

#footer a {

text-decoration: underline;

color: #70C964;

}

#slider {

position: relative;

width: 590px;

margin: 0px auto 20px auto;

}

#slider .viewer {

width: 590px;

height: 300px;

overflow: hidden;

margin: 0 auto;

}

#slider .viewer .reel {

display: none;

height: 300px;

}

#slider .viewer .reel .slide {

position: relative;

width: 590px;

height: 300px;

}

#splash {

width: 980px;

margin: 30px auto 0px auto;

}

2 comments

Cancel reply

hasan dedi ki:

Nisan 25, 2023, 10:54 am

abi sen cosmussun profyosonel bir yazilimcisin

esra dedi ki:

Mayıs 24, 2023, 8:22 pm

merhaba web sitesi ödevim için kopyala yapıştır yapıp göndersem herhangi bir sıkıntı yaşar mıyım? bir de öğretmenimiz kodları pdf şeklinde istedi nasıl pdf dönüştürebilirim

HTML CSS Web Site Örnekleri 2

Bunu beğen:

admin

2 comments

Cancel reply

Bilgisayar Bilimleri Dersi Çalışma Soruları ve Cevapları

Python İle 3’ün Katları

Python İle Tam Bölenleri Bulma

Recent Posts

Recent Comments

Archives

Categories

HTML CSS Web Site Örnekleri 2

Bunu paylaş:

Bunu beğen:

admin

2 comments

Cancel reply

You may also like

Bilgisayar Bilimleri Dersi Çalışma Soruları ve Cevapları

Python İle 3’ün Katları

Python İle Tam Bölenleri Bulma

Recent Posts

Recent Comments

Archives

Categories