diff --git a/images/coding-Icon.png b/images/coding-Icon.png new file mode 100644 index 0000000..34cc3c6 Binary files /dev/null and b/images/coding-Icon.png differ diff --git a/images/image-1.png b/images/image-1.png new file mode 100644 index 0000000..05361c0 Binary files /dev/null and b/images/image-1.png differ diff --git a/images/image-2.png b/images/image-2.png new file mode 100644 index 0000000..a7fa35c Binary files /dev/null and b/images/image-2.png differ diff --git a/images/image-3.png b/images/image-3.png new file mode 100644 index 0000000..cd2dd4a Binary files /dev/null and b/images/image-3.png differ diff --git a/images/image-4.png b/images/image-4.png new file mode 100644 index 0000000..a7ca709 Binary files /dev/null and b/images/image-4.png differ diff --git a/images/image-5.png b/images/image-5.png new file mode 100644 index 0000000..9fec3fe Binary files /dev/null and b/images/image-5.png differ diff --git a/images/image-6.png b/images/image-6.png new file mode 100644 index 0000000..f5bf48a Binary files /dev/null and b/images/image-6.png differ diff --git a/images/image-7.png b/images/image-7.png new file mode 100644 index 0000000..aa59b72 Binary files /dev/null and b/images/image-7.png differ diff --git a/images/image-8.png b/images/image-8.png new file mode 100644 index 0000000..fa5d3bd Binary files /dev/null and b/images/image-8.png differ diff --git a/images/image-9.png b/images/image-9.png new file mode 100644 index 0000000..4e18ad8 Binary files /dev/null and b/images/image-9.png differ diff --git a/index.html b/index.html index a2219e1..6f13b4c 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,121 @@ - Document + Code Website + + + - + +
+ +
+

< coder >

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quo + cumque et harum sunt quidem provident consequuntur libero odio saepe + excepturi earum accusantium illum deserunt assumenda, laudantium, + distinctio dignissimos. Recusandae, numquam at, eligendi officia natus + ab nihil earum, magni veritatis aut ex similique soluta incidunt quas + aspernatur delectus odit itaque! +

+
+
+
+ +
+

< html, css & js >

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, vitae + temporibus! Ab praesentium et enim temporibus assumenda nemo + aspernatur esse laborum deleniti repellat dignissimos est, doloribus + aliquid delectus laudantium nesciunt Lorem ipsum dolor sit amet + consectetur, adipisicing elit. Ratione error, consectetur similique + minus mollitia esse nemo necessitatibus voluptatem odio. Perferendis + cupiditate a nulla facere eveniet voluptas laudantium atque doloribus + dolores. +

+
+
+
+
+ + + +
+
+

< git & github >

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est enim + totam sed, architecto hic nulla? Quaerat ex ducimus, tenetur enim odit + voluptatem harum odio veritatis aliquid tempora sit consequuntur nemo + rem blanditiis nihil unde itaque. At similique est distinctio dolore, + laboriosam, quae quasi error ipsum quos placeat delectus sequi eos. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione + consequuntur ipsa voluptates recusandae saepe nesciunt soluta unde! + Natus, porro exercitationem animi ducimus obcaecati harum modi soluta. + Ex rem quas placeat perspiciatis sed, eveniet illum dolorem aperiam + non eligendi molestiae, numquam similique fugit molestias alias dicta, + quaerat iste necessitatibus nostrum? Delectus. +

+
+
+
+
+ +
+
+

< remote work, freelance >

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium + tempora quam iste eum autem aliquid sapiente, fugit nihil quisquam + maiores sit, ea nobis voluptatibus, ut corporis enim numquam + cupiditate voluptatum! Debitis quisquam tempore ipsum reiciendis + voluptates totam fuga hic deleniti, quas sit amet nesciunt aspernatur + dicta velit dolores delectus eum dolorem recusandae magni voluptatum + repudiandae ullam aliquam corporis. Distinctio mollitia neque id + repellendus nemo, dolores officiis consequatur cupiditate rem ipsam + error quas nulla delectus nesciunt dicta vero eligendi voluptatum + aspernatur sed harum perspiciatis aut dignissimos ut nihil? Aut + accusantium tempore hic eveniet laudantium labore explicabo, cumque, + voluptatem itaque voluptas consequuntur. +

+
+
+ diff --git a/style/style.css b/style/style.css index e69de29..06fe8f6 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,143 @@ +* { + padding: 0px; + margin: 0px; +} +:root { + --blue: #003d6a; + --gray: #f0f0f0; +} +body { + background-color: var(--gray); +} +header { + display: flex; + justify-content: space-around; + align-items: center; + background-color: whitesmoke; +} +.icon { + height: 100px; +} +.nav-list { + list-style-type: none; + display: flex; + gap: 50px; +} +.nav-btn { + border: none; + border-radius: 50px; + padding: 10px; + background-color: var(--blue); + color: var(--gray); +} +header, +.nav-btn:hover { + cursor: pointer; +} +.nav-list li:hover { + color: var(--blue); +} +header .nav-btn:hover { + color: black; +} +.main { + padding: ; + display: flex; + align-items: center; + padding: 100px; +} +.h1, +h2 { + font-size: 30px; + font-family: "Press Start 2P"; + padding-bottom: 10px; + text-align: center; +} +.text p { + font-family: monospace; + color: var(--blue); + font-size: 20px; +} +.main img { + width: 50%; +} + +.secondary { + display: flex; + flex-direction: column; + align-items: center; + gap: 50px; + padding: 0px 100px 100px 100px; +} +.secondary p { + text-align: center; +} +.row { + display: flex; + align-items: center; + gap: 50px; + padding: 100px 0px; +} +.work { + padding: 100px 0px; +} +.work-img img { + width: 400px; +} +.work-img { + display: flex; + flex-wrap: wrap; + justify-content: center; +} +.work .text { + padding: 50px; +} +footer { + background-color: whitesmoke; + display: flex; + justify-content: space-around; + align-items: center; +} +footer img { + height: 100px; +} +.navi { + display: flex; + flex-direction: column; +} + +@media (max-width: 600px) { + .main { + flex-direction: column; + gap: 40px; + } + .main img { + width: 70%; + } + .text p { + text-align: center; + gap: 20px; + font-size: 15px; + } + ..secondary { + display: flex; + flex-direction: row; + } + .secondary img { + width: 70%; + } + .secondary h2 { + } + .row { + flex-direction: column; + align-items: center; + } + .row-img { + display: flex; + } + .row-img img { + width: 33%; + } + .work-img img { + width: 50%; + } \ No newline at end of file