คอลเลกชันเว็บไซต์ HTML แบบคงที่ ·
การแนะนำ
นี่คือคอลเลกชันของหน้า Landing Page และเทมเพลตบล็อกที่ออกแบบโดยฉัน ธีมเหล่านี้อิงตาม HTML, CSS, javascript, jquery และ Bootstrap ฉันกำลังสร้างพื้นที่เก็บข้อมูลนี้เป็นแฟ้มผลงานเพื่อแสดงงานของฉันในฐานะนักพัฒนาเว็บส่วนหน้าในการรับโอกาสในการทำงาน ไม่ว่าจะเป็นงานฟรีแลนซ์ งานพาร์ทไทม์ งานเต็มเวลา หรืองานตามสัญญา และการออกแบบเหล่านี้เป็นเพียงส่วนง่ายๆ ของฉัน ทำงานเพราะฉันไม่สามารถนำลูกค้าของฉันมาทำงานที่นี่ในที่สาธารณะได้ หากคุณคิดว่าบริการของฉันอาจเป็นประโยชน์สำหรับคุณและคุณสนใจที่จะจ้างฉัน โปรดส่งอีเมลถึงฉันได้เลย
ในที่เก็บนี้คุณจะพบกับการออกแบบดังต่อไปนี้
คลิกที่ชื่อธีมเพื่อดูตัวอย่างแบบสด และการออกแบบเหล่านี้ ไม่ได้มีไว้ สำหรับการใช้งานส่วนตัวหรือเชิงพาณิชย์ แต่มีไว้เพื่อการแสดงผลเท่านั้น (เพื่อแสดงทักษะส่วนหน้าของฉัน)
- Canox: บล็อกที่เรียบง่าย สะอาด เป็นส่วนตัว ทันสมัย และเป็นมืออาชีพ เหมาะสำหรับการสร้างเว็บไซต์บล็อกอย่างมืออาชีพ
- Covid-19: Covid-19: หน้า Landing Page ที่เรียบง่ายสำหรับการดูสถิติของไวรัสโคโรนา และดูวิธีป้องกันตัวเองจากมันด้วยสถิติแบบเรียลไทม์ที่มาจาก API และแผนที่เชิงโต้ตอบเพื่อดูสถิติล่าสุดตามประเทศ การออกแบบนี้ออกแบบโดยนักออกแบบ Shahriar Hossain และฉันได้แปลงการออกแบบเป็นโค้ดส่วนหน้าเท่านั้นโดยทำการเปลี่ยนแปลงบางอย่างในการออกแบบเพื่อให้ดูดีขึ้น
- Konish: หน้า Landing Page ที่สวยงามและเรียบง่ายสำหรับบริษัทด้านเทคนิค และงานนี้เป็นหนึ่งในผลงานแรกๆ ของฉันในฐานะนักพัฒนาเว็บส่วนหน้า
- Projection & Collision: การสาธิตข้อมูลเว็บสำหรับโครงการ Projection & Collision ของปีที่สามที่ฉันศึกษาอยู่ที่คณะวิศวกรรมศาสตร์เทคโนโลยีสารสนเทศของมหาวิทยาลัยดามัสกัส
- Sass: แลนดิ้งเพจอีกหน้าหนึ่งสำหรับบริษัทด้านเทคนิค และคุณสามารถดูการนำเสนอบน behance ได้ที่นี่
- Sellvas: ธีมเทมเพลตนิตยสารและบล็อกในธีมนิตยสารและบล็อกดีไซน์หรูหราและสะอาดตา เต็มไปด้วยทุกสิ่งที่คุณต้องการเพื่อสร้างบล็อกและแกลเลอรีรูปภาพที่สวยงาม การออกแบบที่เรียบง่ายทันสมัย ดูแลรักษาง่าย และการขัดเกลาที่ไร้ที่ติในทุกรายละเอียด และธีมนี้ประกอบด้วยรูปแบบเลย์เอาต์มากกว่า 10 แบบ และสไตล์โพสต์และหน้าแสดงข้อผิดพลาดมากมายเพื่อให้เข้ากับสไตล์การออกแบบทุกสไตล์
- เรื่องราว: หน้า Landing Page ที่เรียบง่ายและสะอาดตาสำหรับดูโบราณวัตถุและงานทำมือ และไซต์นี้ได้รับการออกแบบโดย Majd Shamma แต่ฉันแปลงการออกแบบนั้นเป็นเว็บไซต์แบบคงที่
- Tieqode: ทีมงานมืออาชีพที่มีทักษะทางธุรกิจและทางเทคนิคที่จำเป็น มีความเป็นผู้นำ ประสบการณ์ และความรู้เพื่อมอบโซลูชั่นและบริการที่ดีที่สุดให้กับลูกค้า และเมื่อฉันเข้าร่วมทีม TIEQODE ฉันก็ทำงานบนเว็บไซต์ของพวกเขา และคุณสามารถดูเว็บไซต์ได้ที่นี่
- งานแต่งงาน: หน้า Landing Page ที่ทันสมัยและสวยงามสำหรับงานแต่งงาน
เกี่ยวกับธีมเหล่านี้
คุณสมบัติหลักของการออกแบบเหล่านี้
- HTML5, CSS3, จาวาสคริปต์, jQuery และ Bootstrap
- เอฟเฟกต์พารัลแลกซ์ที่ดี
- สคริปต์ที่ถูกต้องและรหัสที่จัดระเบียบอย่างดี
- การออกแบบที่เรียบง่าย ทันสมัย และสะอาดตา
- ใช้แบบอักษร Google ฟรีเช่น Roboto และ Raleway
- ไฟล์ทั้งหมดได้รับการแสดงความคิดเห็นอย่างดีเพื่อให้แก้ไขได้ง่าย
- รองรับตัวเลื่อนแบบหมุน
- รวมเอฟเฟกต์ jquery และ CSS3
- เมนูแบบเลื่อนลงและเมนูปกติก็ได้รับการปรับให้เหมาะกับอุปกรณ์มือถือเช่นกัน
- รองรับ breadcrumb เพื่อการนำทางที่ดีขึ้น
- รองรับเบราว์เซอร์ข้าม
- การรวมแบบอักษรที่ยอดเยี่ยมและไอคอนไอออน
- รองรับรูปแบบการโพสต์
- โพสต์ที่เกี่ยวข้องใต้โพสต์
- รวมกล่องผู้เขียน
- ข้อผิดพลาดที่กำหนดเอง 404 หน้า
ใช้ไลบรารีจาวาสคริปต์
ในธีมเหล่านี้ มีการนำเข้าไฟล์ Javascript บางไฟล์ และไฟล์และปลั๊กอินที่จำเป็นทั้งหมดจะรวมอยู่ในไฟล์โปรเจ็กต์ และไฟล์และปลั๊กอินเหล่านี้คือ:
- jQuery: jQuery เป็นไลบรารี JavaScript ที่รวดเร็ว ขนาดเล็ก และมีฟีเจอร์มากมาย มันทำให้สิ่งต่างๆ เช่น การข้ามผ่านและการจัดการเอกสาร HTML การจัดการเหตุการณ์ ภาพเคลื่อนไหว และ Ajax ง่ายขึ้นมากด้วย API ที่ใช้งานง่ายซึ่งทำงานได้บนเบราว์เซอร์ที่หลากหลาย ด้วยการผสมผสานระหว่างความเก่งกาจและความสามารถในการขยาย jQuery ได้เปลี่ยนวิธีที่ผู้คนหลายล้านคนเขียน JavaScript
- Bootstrap: เฟรมเวิร์ก CSS แบบโอเพ่นซอร์สฟรีมุ่งเป้าไปที่การพัฒนาเว็บส่วนหน้าแบบตอบสนองบนมือถือเป็นหลัก ประกอบด้วยเทมเพลตการออกแบบที่ใช้ CSS และ JavaScript สำหรับการพิมพ์ แบบฟอร์ม ปุ่ม การนำทาง และส่วนประกอบอินเทอร์เฟซอื่นๆ
- Owl Carousel: เป็นห้องสมุดที่ช่วยให้ฉันสร้างแถบเลื่อนในเว็บไซต์ที่มีเอฟเฟกต์และสไตล์การเปลี่ยนภาพที่สวยงาม
- พารัลแลกซ์: เป็นคุณสมบัติสมัยใหม่ ฉันใช้คุณสมบัตินี้เพื่อเพิ่มเอฟเฟกต์พารัลแลกซ์อย่างสวยงามให้กับเลย์เอาต์เมื่อเลื่อนเมาส์
- ไอคอนแบบอักษรและไอออนที่ยอดเยี่ยม: ไอคอนเวกเตอร์และโลโก้โซเชียลสำหรับใช้บนเว็บไซต์ Font Awesome เป็นชุดไอคอนและชุดเครื่องมือที่ได้รับความนิยมมากที่สุดบนเว็บ และใช้งานโดย 38% ของไซต์ที่ใช้สคริปต์แบบอักษรของบุคคลที่สาม และ Ion Icons เป็นไอคอนที่ได้รับการออกแบบระดับพรีเมียมสำหรับใช้ในเว็บ, iOS, Android และแอปเดสก์ท็อป และรองรับ SVG และแบบอักษรบนเว็บ
- Mixitup: ไลบรารี่ประสิทธิภาพสูงและไม่มีการพึ่งพาสำหรับการจัดการ DOM แบบเคลื่อนไหว ช่วยให้คุณสามารถกรอง จัดเรียง เพิ่ม และลบองค์ประกอบ DOM ด้วยภาพเคลื่อนไหวที่สวยงาม MixItUp เล่นได้ดีกับ HTML และ CSS ที่คุณมีอยู่ ทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับเลย์เอาต์แบบตอบสนอง และเข้ากันได้กับโฟลว์อินไลน์ เปอร์เซ็นต์ การสืบค้นสื่อ flexbox และอื่นๆ
- TypedJs: ไลบรารีที่พิมพ์ ป้อนสตริงใดๆ และดูมันพิมพ์ด้วยความเร็วที่คุณตั้งไว้ ถอยกลับสิ่งที่พิมพ์ และเริ่มประโยคใหม่สำหรับจำนวนสตริงที่คุณตั้งไว้
- และสุดท้ายในไฟล์
main.js ฉันรวบรวมทั้งหมดข้างต้น: ฉันใช้ปลั๊กอินบางตัวเพื่อสร้างเอฟเฟกต์ในธีม มีปลั๊กอินเหล่านี้ครบครัน ดังนั้นฉันจึงไม่จำเป็นต้องแก้ไขอะไรในไฟล์ด้วยตนเอง สิ่งเดียวที่จำเป็นที่ต้องรู้คือวิธีเรียกเมธอด
รูปภาพและภาพประกอบที่ใช้
รูปภาพทั้งหมดที่ใช้ในการออกแบบนั้นฟรี 100% แต่ใช้เพื่อวัตถุประสงค์ในการสาธิตเท่านั้น และฉันใช้รูปภาพ ไอคอน และภาพประกอบจากเว็บไซต์ต่อไปนี้:
- เพกเซล
- Pixabay
- แฟลตไอคอน
- ฟรีปิค
